zanwei/design-dna

¿Qué es?

Funciones clave

• 01Extrae de las referencias tokens de diseño como color, tipografía, espaciado, layout y movimiento.
• 02Describe el estilo cualitativo, como el ambiente, la composición y la sensación de interacción.
• 03Cataloga efectos visuales como WebGL, partículas, shaders y movimiento activado por el scroll.
• 04Genera nuevas interfaces a partir de un archivo Design DNA JSON guardado y de tu propio contenido.
• 05Ofrece medición opcional del color basada en píxeles y verificación con ΔE del resultado generado.
• 06Se instala mediante el CLI de skills para Cursor, Claude Code, Codex y otros agentes.

Casos de uso

• Reproducir el aspecto de un sitio de referencia en un proyecto nuevo sin tener que adivinar los valores.
• Guardar el lenguaje visual de un equipo en una especificación JSON versionada y compartida entre proyectos.
• Comprobar si una interfaz generada respeta la paleta de colores de una marca dentro de una tolerancia medida.
• Convertir un conjunto de capturas de inspiración en un brief de diseño coherente para un agente.

Inicio rápido

1. 1

   Instala el skill con skills CLI (requiere Node.js)

   npx skills add zanwei/design-dna
2. 2

   O instálalo para un agent específico, como Cursor, sin interacción

   npx skills add zanwei/design-dna -a cursor -g -y
3. 3

   Pide a tu agent que analice capturas de referencia o URL y las convierta en Design DNA JSON; después, que genere la UI a partir de ello

Antes de usarlo

• !Es un agent skill, por lo que necesita un agent de programación con IA compatible para ejecutarse.
• !Los scripts opcionales de color determinista requieren clonar el repositorio localmente y ejecutar npm install.

Temas

Preguntas frecuentes

¿Qué es design-dna?

Una skill de agente que extrae la identidad visual de interfaces de referencia y la convierte en Design DNA estructurado en JSON, para luego generar interfaces que sigan ese estilo. design-dna es una skill de agente para capturar la identidad visual de diseños existentes en formato JSON legible por máquinas. A partir de capturas de pantalla, imágenes o URLs, genera un perfil en tres dimensiones: tokens de diseño (color, tipografía, espaciado, layout, formas, elevación, movimiento y componentes), estilo cualitativo (ambiente, lenguaje visual, composición, imágenes y sensación de interacción) y efectos visuales como Canvas, WebGL, partículas, shaders, movimiento activado por el scroll y glassmorphism.

¿design-dna es gratuito? ¿Qué licencia tiene?

design-dna es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.

¿design-dna sigue mantenido?

Actualizado en los últimos 6 meses. El último commit de design-dna fue el 28 ago 2026.

¿Para qué puedo usar design-dna?

Reproducir el aspecto de un sitio de referencia en un proyecto nuevo sin tener que adivinar los valores. Guardar el lenguaje visual de un equipo en una especificación JSON versionada y compartida entre proyectos. Comprobar si una interfaz generada respeta la paleta de colores de una marca dentro de una tolerancia medida. Convertir un conjunto de capturas de inspiración en un brief de diseño coherente para un agente.

¿Cómo se instala design-dna?

Instala el skill con skills CLI (requiere Node.js): npx skills add zanwei/design-dna O instálalo para un agent específico, como Cursor, sin interacción: npx skills add zanwei/design-dna -a cursor -g -y Pide a tu agent que analice capturas de referencia o URL y las convierta en Design DNA JSON; después, que genere la UI a partir de ello

¿Dónde consigo design-dna?

El código fuente y las instrucciones de instalación están en GitHub: https://github.com/zanwei/design-dna