Sistemas de diseño
Design DNA
Extrae un diseño de referencia a JSON estructurado, y luego genera a partir de él.
Qué es
Un flujo en tres fases que captura la identidad de diseño a través de tokens medibles, estilo cualitativo y efectos visuales. Produce un JSON completo de Design DNA, y luego aplica ese JSON a contenido nuevo.
>-
Por qué importa para el diseño
- Convierte una captura de pantalla o una URL en valores de color, tipografía y espaciado con nombre.
- Registra el mood, la composición y la voz de marca, no solo los tokens medibles.
- Captura efectos de Canvas, WebGL, shader y scroll que el CSS a secas no puede expresar.
Qué cubre
- Design system tokens
- Design style
- Visual effects
- Analyzing references
- Generating from JSON
- Phase combinations
Cómo instalarlo
Design DNA
-
Clona el repositorio.
git clone https://github.com/zanwei/design-dna -
Señálale a Codex el archivo de la skill.
SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Pide el esquema para ver las tres dimensiones antes de analizar nada.
-
Entrégale a Codex imágenes de referencia o URLs y pide un JSON de DNA relleno.
-
Pasa el JSON junto con tu contenido para generar una página HTML autónoma.
Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.
Más en la lista codex-design ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. Siguiente paso
Diseña con Open Design, sin montar nada
Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.