/ Directorio / Playground / design-dna
← Todos los servidores ↗ GitHub
● Comunidad zanwei ⚡ Instantáneo

design-dna

por zanwei · zanwei/design-dna

Extrae un Design DNA cuantificado de cualquier UI de referencia — tokens, estilo cualitativo, efectos visuales — y luego genera componentes que lo igualan.

design-dna toma imágenes, capturas de pantalla o URLs en vivo como referencias y emite un JSON de Design DNA estructurado: tokens de color, escala tipográfica, espaciado, descriptores cualitativos de estilo y parámetros de efectos visuales. Alimenta el DNA de vuelta a Claude al generar componentes y la salida permanece fiel a la marca en lugar de ser Tailwind genérico.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

listo

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

Casos de uso

Usos del mundo real: design-dna

Construir un componente que coincida con una captura de pantalla que te gusta

👤 Devs sin diseñador que construyen UIs pulidas ⏱ ~25 min intermediate

Cuándo usarlo: Ves una gran captura de UI en Twitter y quieres capturar su estética.

Flujo
  1. Extraer el DNA
    Use design-dna. Extract DNA from /screens/inspiration.png. Save as dna.json.✓ Copiado
    → JSON con tokens + estilo + efectos
  2. Generar el componente
    Using dna.json, generate a React Card component. Match the radii, shadow, gradient parameters.✓ Copiado
    → TSX con estética coincidente
  3. Comparar visualmente
    Render side-by-side; tweak any drift in shadow strength.✓ Copiado
    → Coincidencia visual dentro de la tolerancia

Resultado: Componente fiel a la marca sin copiar el código del original.

Errores comunes
  • El DNA no captura efectos sutiles (textura de grano) — Usa --high-fidelity para una extracción más lenta pero más rica
Combinar con: filesystem

Generar nuevos componentes que coincidan con el diseño de un producto existente

👤 Devs añadiendo funcionalidades a un producto diseñado ⏱ ~30 min intermediate

Cuándo usarlo: Estás añadiendo una pantalla a una app existente y quieres que se sienta nativa.

Flujo
  1. DNA desde URL en vivo
    Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ Copiado
    → DNA refleja el producto real
  2. Auditar la diferencia de tokens
    Compare DNA to our existing tailwind.config — flag drift.✓ Copiado
    → Lista de deriva (ej. 'shadow-md inconsistente entre páginas')
  3. Generar la nueva pantalla
    Generate the new 'Settings' screen using our reconciled DNA.✓ Copiado
    → Pantalla indistinguible del resto de la app

Resultado: Producto coherente, incluso al añadir pantallas meses después.

Errores comunes
  • La URL en vivo está detrás de auth — el DNA de la landing pública lleva a error — Usa una captura de pantalla autenticada, no la página de marketing

Inicializar un sistema de diseño a partir de referencias

👤 Fundadores en solitario / equipos pequeños sin diseñador ⏱ ~60 min advanced

Cuándo usarlo: Estás empezando una app y quieres un sistema de diseño coherente rápidamente.

Flujo
  1. Elegir 3 referencias
    Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ Copiado
    → 3 objetos DNA separados
  2. Sintetizar
    Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ Copiado
    → DNA fusionado
  3. Generar un sistema de inicio
    Generate tailwind.config, CSS vars, and a Button + Card + Input set using the merged DNA.✓ Copiado
    → Sistema de diseño inicial en el repositorio

Resultado: Una base coherente sobre la que iterar en lugar de partir del Tailwind por defecto.

Errores comunes
  • Sintetizar estéticas muy diferentes produce caos — Elige referencias que compartan una «familia» — variaciones dentro de un estilo, no opuestos
Combinar con: frontend-slides-skill

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

design-dna-skill + filesystem

Persistir DNA + componentes generados en el repositorio

Save design.dna.json under /design/ and check in; treat it as design source-of-truth.✓ Copiado
design-dna-skill + frontend-slides-skill

Generar presentaciones que coincidan con la estética de tu producto

Use design-dna to capture our brand; pass to frontend-slides-skill for matching deck templates.✓ Copiado

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
extract_dna image_path or url, fidelity? Primer paso desde cualquier referencia Vision LLM tokens
synthesize_dna dna[] Combinar múltiples referencias LLM tokens
generate_component dna, component_spec Generación de componentes fiel a la marca LLM tokens
diff_dna dna_a, dna_b Auditar la deriva entre la referencia y el producto actual 0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
Depende del LLM de visión
Tokens por llamada
Extracción ~3000–8000 tokens (imagen de entrada + salida JSON)
Monetario
Gratuito; paga al proveedor del LLM
Consejo
Guarda en caché el DNA por proyecto; solo vuelve a extraer en un refresco real de marca

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: filesystem-read (images) Outbound HTTPS (URL refs)
Almacenamiento de credenciales: Ninguna (auth del LLM de visión mediante variable de entorno)
Salida de datos: Proveedor del LLM de visión; fetcher de URL (si se usa)

Resolución de problemas

Errores comunes y soluciones

La extracción no capta los degradados

Usa --fidelity high; el modo predeterminado omite los degradados sutiles para ahorrar tokens

Los tokens del DNA difieren entre ejecuciones

Los modelos de visión son estocásticos — define la semilla si está soportada; o extrae dos veces y elige los valores medianos

El código generado usa estilos en línea en lugar de tokens de diseño

Pasa --token-mode strict; la skill se negará a incorporar valores que existen como tokens

La extracción de URL en vivo queda en blanco

El sitio requiere JS; usa una captura de pantalla completamente renderizada en lugar de obtención de URL

Alternativas

design-dna vs otros

AlternativaCuándo usarlaContrapartida
design-extract (Manavarya09)Quieres exportación completa de tokens de diseño incluyendo DTCG + emisores multi-plataformaMás pesado; pipeline completo de sistema de diseño vs DNA ligero
Manual style guide curationTienes un diseñador y una biblioteca de patronesMás lento; más autorizado

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills