Sobre el proyecto

designlang (repositorio manavarya09/design-extract, paquete npm designlang) es una CLI de código abierto con licencia MIT, que requiere Node 20+, y utiliza un navegador sin cabeza para extraer un sistema de diseño de cualquier URL activa. Emite más de 17 archivos a ./design-extract-output, incluyendo un lenguaje de diseño en markdown de 19 secciones, tokens de diseño W3C DTCG con capas primitivas, semánticas y compuestas, configuración de Tailwind, variables de tema shadcn/ui, JSON de Variables de Figma, propiedades personalizadas CSS, stubs tipados de anatomía de componentes React, tokens de movimiento, JSON de voz de marca, y prompts listos para usar en v0, Lovable, Cursor y Claude Artifacts. También genera una carga útil del servidor MCP y puede ejecutarse como servidor MCP. Más allá de la extracción de tokens de página única, ofrece captura de sistema de diseño (rejillas, flex, anchos de contenedor, márgenes), rastreo responsivo en cuatro puntos de interrupción, captura de estados de interacción (hover/focus/active), captura de movimiento en tiempo de ejecución mediante document.getAnimations() para duraciones, coreografía/escalonamiento y recetas de desplazamiento, rastreo multi-página con reconciliación de tokens compartidos versus específicos por ruta, puntuación de contraste WCAG 2.1 con sugerencias de paletas de corrección, mapas de z-index, detección de degradados, deduplicación de iconos SVG, detección de archivos de fuente, clasificación de estilo de imagen, huella de pila, auditoría de salud CSS, clasificación semántica de regiones (navegación, héroe, precios, testimonios, CTA, pie de página) y agrupación reutilizable de componentes. Los comandos incluyen: designlang URL para extracción completa; site para sistema canónico de sitio completo y calificación de consistencia; grade para tarjeta de calificación HTML compartible y insignia SVG; battle para calificación cara a cara; remix para restilizar en vocabularios como brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial; pack para empacar salidas; theme-swap para rotación de matiz OKLCH alrededor de un nuevo primario; brand para libro de guías de marca de 13 capítulos; pair para fusionar dos diseños; dna para ubicar un diseño en un espacio medido de 30 características contra un corpus; dna-corpus para construir un corpus de referencia personalizado; fidelity para puntuar un clon contra el original visualmente y en movimiento con plan de corrección; gallery para construir galería estática; clone para generar starter de Next.js; apply para escribir tokens en un framework detectado; drift, lint y visual-diff para verificaciones listas para CI; sync, history, watch y diff para monitoreo y comparación. Los emisores multiplataforma agregan iOS SwiftUI, Android Compose, Flutter y WordPress. Una extensión de Chrome (MV3, activeTab) proporciona entrega con un clic. Se puede instalar globalmente con npm o agregar como habilidad de agente, y se entrega como plugin de Claude Code con comandos slash. La clasificación opcional --smart puede usar Atlas Cloud o claves existentes de OpenAI/Anthropic. El README indica operación determinista y gratuita para extracción de sitios, y que la calificación de diseño evita sustituir mediciones faltantes. Este es un proyecto de herramientas de diseño y desarrollo útil para auditorías de sistemas de diseño, generación de tokens, revisión de accesibilidad, flujos de trabajo de diseño a código y medición de fidelidad de clones.