design-dna

English | 中文 | 日本語 | 한국어 | Español | 繁體中文

Una habilidad para agentes de código que extrae, estructura y aplica la identidad visual (Design DNA) en tres dimensiones: sistema de diseño (tokens medibles), estilo de diseño (percepción cualitativa) y efectos visuales.

Requisitos

• Entorno Node.js instalado
• Poder ejecutar comandos npx

Instalación

Instalación rápida (recomendada)

npx skills add zanwei/design-dna

Instalar en un agente concreto

# Solo Cursor, no interactivo, instalación global
npx skills add zanwei/design-dna -a cursor -g -y

# Solo Claude Code
npx skills add zanwei/design-dna -a claude-code -g -y

Instalar desde un clon local

git clone https://github.com/zanwei/design-dna.git
npx skills add ./design-dna -y

Listar habilidades disponibles

npx skills add zanwei/design-dna --list

Qué hace

Dimensión	Rol
Sistema de diseño	Tokens medibles: color, tipografía, espaciado, layout, forma, elevación, movimiento, componentes, etc.
Estilo de diseño	Descripción cualitativa: estado de ánimo, lenguaje visual, composición, estilo de imagen, tacto de la interacción, voz de marca, etc.
Efectos visuales	Más allá del CSS habitual: Canvas, WebGL, 3D, partículas, sombreadores, movimiento ligado al scroll, efectos de cursor, animación SVG, glassmorfismo, etc.

La habilidad incorpora un flujo de trabajo en tres fases:

1. Estructura — Presenta el esquema completo y el significado de cada campo (ver references/schema.md).
2. Analizar — A partir de capturas, imágenes o URL, produce un perfil JSON con todos los campos (sin vacíos; si hay conflictos entre referencias, indica la opción principal y las variantes).
3. Generar — Con el JSON de DNA y el contenido, implementa el diseño (por defecto: HTML/CSS/JS autocontenido) siguiendo las comprobaciones de calidad de references/generation-guide.md.

Las fases se pueden usar por separado o encadenadas (p. ej., Analizar → Generar).

Cómo funciona

Visión general del flujo (GitHub renderiza el diagrama Mermaid siguiente):

flowchart LR
    A["Diseños de referencia<br/>Capturas · URL · imágenes<br/><br/>Cualquier diseño que admires"]
    B["Design DNA JSON<br/>Especificación cuantificada<br/><br/>Perfil estructurado"]
    C["Resultado final<br/>Implementación fiel<br/><br/>UI lista para producción"]

    A -->|"Analizar — extraer cada propiedad visual"| B
    B -->|"Generar — aplicar el DNA a tu contenido"| C
    B -.-> D["Guardar · reutilizar · control de versiones"]

Paso 1 — Reunir referencias. Prepara capturas, imágenes o enlaces a páginas en vivo de diseños cuya identidad visual quieras capturar. Puedes combinar varias referencias; la habilidad identifica patrones dominantes y anota variantes.

Paso 2 — Extraer DNA. Entrega las referencias al agente. Inspecciona cada propiedad visual en las tres dimensiones y genera un Design DNA JSON completo y cuantificado, sin campos vacíos ni conjeturas. Ese JSON es una especificación de diseño portable y reutilizable.

Paso 3 — Generar desde el DNA. Proporciona el JSON de DNA junto con tu propio contenido. El agente produce implementaciones que reproducen fielmente el lenguaje de diseño original adaptándose a tu material y copy.

El JSON de DNA es el artefacto central. Una vez extraído, puede versionarse, compartirse entre equipos, reutilizarse en varios proyectos y refinarse de forma iterativa, convirtiendo un «hazlo como ese sitio» subjetivo en una especificación precisa y reproducible que cualquier agente puede consumir.

[!TIP] Enriquecer el aspecto visual. Si el primer resultado sigue pareciendo pobre o poco detallado frente a las referencias, inicia una iteración de pulido explícita: vuelve a adjuntar las mismas URL o capturas. Así reduces la distancia entre un borrador usable y un resultado rico y fiel a la referencia sin empezar de cero.

Prompt: Frente a la referencia, revisa jerarquía, ornamentación, ritmo tipográfico, movimiento, materialidad y la UI en conjunto; luego incorpora tus conclusiones a la implementación actual.

Medición determinista (opcional)

La percepción de color de los LLM tiende a desviarse hacia valores predeterminados de paletas conocidas: un rosa de marca como #ff90e8 puede «verse» como #ec4899 (ΔE ≈ 29). Dos scripts opcionales permiten medir las fases de análisis y generación:

Los siguientes comandos manuales están pensados para un clon local de este repositorio. Ejecútalos desde la raíz del clon:

npm install --prefix ./scripts

# Analizar: medir la paleta exacta de una captura de referencia
node scripts/measure-colors.mjs reference.png > measured-colors.json

# Generar: evaluar la captura de la implementación frente a la referencia
node scripts/verify.mjs implementation.png measured-colors.json

Cuando se instala como habilidad de agente mediante la instalación rápida, el agente debe resolver estos scripts desde el directorio absoluto que contiene el SKILL.md cargado; el usuario no necesita un directorio scripts/ en la raíz de su proyecto.

measure-colors.mjs ejecuta un agrupamiento k-means determinista sobre los píxeles reales (fusionando el ruido del antialiasing mediante ΔE perceptual) y genera colores hexadecimales exactos, cobertura como fracciones 0..1, funciones de fondo/texto/acento y el k del agrupamiento. verify.mjs reutiliza el k registrado, vuelve a medir el resultado generado e informa el ΔE por color y la desviación de cobertura con umbrales PASS/FAIL. Así, el agente puede autocorregirse sin depender de la evaluación visual del usuario. Cuando las referencias son imágenes, la habilidad indica a los agentes que usen ambos scripts automáticamente. No se necesitan claves de API.

Misma referencia (el hero de bun.sh), mismo agente: reconstrucción percibida frente a reconstrucción medida.

Compatibilidad

Cumple la especificación Agent Skills. Instalable con la CLI skills en todos los agentes compatibles, incluidos Cursor, Claude Code, Codex, GitHub Copilot y más de 40.

Contribuciones

Las issues y pull requests son bienvenidas. Si cambias el comportamiento de la habilidad, actualiza SKILL.md y los archivos afectados en references/ para mantener coherencia entre documentación y comportamiento.

Licencia

MIT

Historial de estrellas