Repolode
Enviar
Manavarya09

Manavarya09/design-extract

CLI que abre cualquier sitio web en un navegador headless y extrae su sistema de diseño como tokens DTCG, configuración de Tailwind, variables de Figma y más.

Alternativa open source a:Figma

Ver en GitHubSitio web
Estrellas
4,261
Forks
371
Issues abiertos
25
Último commit
hace 12 días

¿Qué es?

designlang abre una URL en Chromium headless mediante Playwright y lee los estilos calculados y el diseño del DOM activo. Un solo comando genera un conjunto de archivos con colores, tipografía, espaciado, sombras, radios, variables CSS, tokens de movimiento y componentes detectados. Incluye tokens W3C DTCG, un tema de Tailwind, un tema de shadcn/ui y variables de Figma para los modos claro y oscuro.

Además de extraer tokens sin procesar, puede recorrer cuatro breakpoints responsivos, capturar cambios en los estados hover, focus y active, calcular la puntuación de contraste WCAG para pares de colores de primer plano y fondo, y comparar la coherencia entre varias páginas. También incluye comprobaciones de drift y lint para CI, diferencias visuales y un modo para todo el sitio que combina las páginas en un único sistema canónico.

Puede ejecutarse como servidor MCP para agentes como Claude Code, Cursor y Windsurf. También incluye un plugin para Claude Code, una extensión de Chrome y un instalador basado en Node.js con un paquete npm. Los emisores para distintas plataformas son compatibles con iOS SwiftUI, Android Compose, Flutter y WordPress.

Funciones clave

  • 01Extrae colores, tipografía, espaciado, sombras, radios y variables CSS de una página activa.
  • 02Genera tokens W3C DTCG, configuración de Tailwind, un tema de shadcn/ui y variables de Figma.
  • 03Captura el comportamiento responsivo en cuatro breakpoints y los estados hover, focus y active.
  • 04Calcula la puntuación de contraste WCAG para pares de colores de primer plano y fondo.
  • 05Se ejecuta como servidor MCP para Claude Code, Cursor y Windsurf.
  • 06Genera tokens específicos para iOS, Android, Flutter y WordPress.

Casos de uso

  • Recrear la apariencia del sitio de un competidor o de referencia como punto de partida para un sistema de diseño.
  • Generar temas de Tailwind o shadcn/ui a partir de un sitio web existente.
  • Proporcionar los tokens extraídos a agentes de programación con IA para que la interfaz generada coincida con un estilo visual.
  • Comprobar en CI un sitio activo frente a un archivo de tokens para detectar desviaciones del diseño.

Inicio rápido

  1. 1

    Instala la CLI de forma global

    npm i -g designlang
  2. 2

    Instala el navegador Chromium una sola vez

    designlang install-browser
  3. 3

    Extrae el sistema de diseño de un sitio

    npx designlang https://stripe.com

Antes de usarlo

  • Es necesario descargar un navegador Chromium sin interfaz antes del primer uso.
  • Algunas funciones avanzadas (site, fidelity, dna) tienen versiones y pueden cambiar rápidamente.

Temas

#design-system#design-tokens#css#tailwind#web-scraping#playwright#mcp-server#accessibility#agent-skill#ai

Preguntas frecuentes

¿Qué es design-extract?
CLI que abre cualquier sitio web en un navegador headless y extrae su sistema de diseño como tokens DTCG, configuración de Tailwind, variables de Figma y más. designlang abre una URL en Chromium headless mediante Playwright y lee los estilos calculados y el diseño del DOM activo. Un solo comando genera un conjunto de archivos con colores, tipografía, espaciado, sombras, radios, variables CSS, tokens de movimiento y componentes detectados. Incluye tokens W3C DTCG, un tema de Tailwind, un tema de shadcn/ui y variables de Figma para los modos claro y oscuro.
¿design-extract es gratuito? ¿Qué licencia tiene?
design-extract es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿design-extract sigue mantenido?
Mantenimiento activo. El último commit de design-extract fue el 8 oct 2026.
¿Para qué puedo usar design-extract?
Recrear la apariencia del sitio de un competidor o de referencia como punto de partida para un sistema de diseño. Generar temas de Tailwind o shadcn/ui a partir de un sitio web existente. Proporcionar los tokens extraídos a agentes de programación con IA para que la interfaz generada coincida con un estilo visual. Comprobar en CI un sitio activo frente a un archivo de tokens para detectar desviaciones del diseño.
¿Cómo se instala design-extract?
Instala la CLI de forma global: npm i -g designlang Instala el navegador Chromium una sola vez: designlang install-browser Extrae el sistema de diseño de un sitio: npx designlang https://stripe.com
¿Dónde consigo design-extract?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Manavarya09/design-extract

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados