Sistemas de diseño
Stitch Design Taste
Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas.
Qué es
Genera un archivo DESIGN.md optimizado para la generación de pantallas de Google Stitch. Codifica atmósfera, color, tipografía, componentes, maquetación, movimiento y una lista explícita de patrones prohibidos.
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion,
Por qué importa para el diseño
- Las pantallas de Stitch heredan un único acento con menos del 80% de saturación, en vez de degradados morado neón.
- Prohíbe los heroes centrados y las filas de tres tarjetas iguales por encima de la variación fijada.
- Los estados de carga y vacío se vuelven esqueléticos y compuestos, en lugar de spinners genéricos.
Qué cubre
- Overview
- Prerequisites
- Analysis and synthesis instructions
- Output format
- Best practices
- Common pitfalls to avoid
Cómo instalarlo
Stitch Design Taste
-
Clona el repositorio.
git clone https://github.com/Leonxlnx/taste-skill -
Señálale a Codex el archivo de la skill.
skills/stitch-skill/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Describe el ambiente del proyecto; la skill fija las puntuaciones de densidad, variación y movimiento.
-
Genera un DESIGN.md de siete secciones con códigos hex y roles de color funcionales.
-
Pasa ese archivo a Stitch directamente, o a través del servidor MCP de Stitch.
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. 
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. 
Frontend y UI Qué hace imagegen-frontend-web Genera una imagen de referencia horizontal por cada sección de la landing page. 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.