leonxlnx/taste-skill

Stitch Design Taste — Skill de Sistema de Diseño Semántico

Resumen

Este skill genera archivos DESIGN.md optimizados para la generación de pantallas en Google Stitch. Traduce las directivas de ingeniería frontend anti-mediocridad al lenguaje de diseño semántico nativo de Stitch: reglas descriptivas en lenguaje natural emparejadas con valores precisos que el agente de IA de Stitch puede interpretar para producir interfaces premium y no genéricas.

El DESIGN.md generado sirve como la única fuente de verdad para indicarle a Stitch que genere nuevas pantallas alineadas con un lenguaje de diseño curado y de alta agencia. Stitch interpreta el diseño a través de "Descripciones Visuales" respaldadas por valores de color específicos, especificaciones tipográficas y comportamientos de componentes.

Prerrequisitos

• Acceso a Google Stitch a través de labs.google/stitch
• Opcionalmente: Servidor MCP de Stitch para integración programática con Cursor, Antigravity o Gemini CLI

El Objetivo

Generar un archivo DESIGN.md que codifique:

1. Atmósfera visual — el estado de ánimo, la densidad y la filosofía de diseño
2. Calibración de color — neutros, acentos y patrones prohibidos con códigos hex
3. Arquitectura tipográfica — pilas de fuentes, jerarquía de escalas y anti-patrones
4. Comportamientos de componentes — botones, tarjetas, inputs con estados de interacción
5. Principios de layout — sistemas de rejilla, filosofía de espaciado, estrategia responsiva
6. Filosofía de movimiento — especificaciones del motor de animación, física de resortes, micro-interacciones perpetuas
7. Anti-patrones — lista explícita de clichés de diseño de IA prohibidos

Instrucciones de Análisis y Síntesis

1. Definir la Atmósfera

Evalúa la intención del proyecto objetivo. Usa adjetivos evocadores del espectro de gusto:

• Densidad: "Galería-Aireada" (1–3) → "App Diaria Equilibrada" (4–7) → "Cabina Densa" (8–10)
• Variación: "Simétrica Predecible" (1–3) → "Asimétrica Desplazada" (4–7) → "Caótica Artística" (8–10)
• Movimiento: "Estático Contenido" (1–3) → "CSS Fluido" (4–7) → "Coreografía Cinematográfica" (8–10)

Línea base por defecto: Variación 8, Movimiento 6, Densidad 4. Adapta dinámicamente según la descripción del usuario.

2. Mapear la Paleta de Colores

Para cada color proporciona: Nombre Descriptivo + Código Hex + Rol Funcional.

Restricciones obligatorias:

• Máximo 1 color de acento. Saturación por debajo del 80%
• La estética "IA Púrpura/Azul Neón" está ESTRICTAMENTE PROHIBIDA — sin brillos de botón púrpura, sin degradados neón
• Usa bases neutras absolutas (Zinc/Pizarra) con acentos únicos de alto contraste
• Mantén una sola paleta para toda la salida — sin fluctuación de grises cálidos/fríos
• Nunca uses negro puro (#000000) — usa Negro Desaturado, Zinc-950 o Carbón

3. Establecer Reglas Tipográficas

• Títulos/Pantallas: Ajuste apretado, escala controlada. No gritar. Jerarquía a través del peso y el color, no solo del tamaño masivo
• Cuerpo: Interlineado relajado, máximo 65 caracteres por línea
• Selección de Fuente: Inter está PROHIBIDA para contextos premium/creativos. Fuerza caracter único: Geist, Outfit, Cabinet Grotesk o Satoshi
• Prohibición de Serif: Las fuentes serif genéricas (Times New Roman, Georgia, Garamond, Palatino) están PROHIBIDAS. Si se necesita serif para contextos editoriales/creativos, usa solo serifs modernas distintivas: Fraunces, Gambarino, Editorial New o Instrument Serif. Serif siempre está PROHIBIDA en paneles o interfaces de software
• Restricción de Panel: Usa exclusivamente pares Sans-Serif (Geist + Geist Mono o Satoshi + JetBrains Mono)
• Sobrescritura de Alta Densidad: Cuando la densidad supere 7, todos los números deben usar Monospace

4. Definir la Sección Hero

El Hero es la primera impresión y debe ser creativo, impactante y nunca genérico:

• Tipografía de Imagen en Línea: Incrusta fotos pequeñas y contextuales o elementos visuales directamente entre palabras o letras en el titular. Las imágenes se colocan en línea a la altura del tipo, redondeadas, actuando como puntuación visual. Esta es la técnica creativa distintiva
• Sin Superposiciones: El texto nunca debe superponerse a imágenes u otro texto. Cada elemento ocupa su propia zona espacial limpia
• Sin Texto de Relleno: "Desplázate para explorar", "Desliza hacia abajo", iconos de flecha de desplazamiento, cheurones rebotantes están PROHIBIDOS. El contenido debe atraer a los usuarios de forma natural
• Estructura Asimétrica: Los layouts Hero centrados están PROHIBIDOS cuando la variación supera 4
• Moderación de CTA: Máximo un CTA principal. Sin enlaces secundarios de "Más información"

5. Describir los Estilos de Componentes

Para cada tipo de componente, describe forma, color, profundidad de sombra y comportamiento de interacción:

• Botones: Retroalimentación táctil de presión al activarse. Sin brillos exteriores neón. Sin cursores de ratón personalizados
• Tarjetas: Úsalas SOLO cuando la elevación comunique jerarquía. Tiñe las sombras al tono de fondo. Para layouts de alta densidad, reemplaza tarjetas con divisores de borde superior o espacio negativo
• Inputs/Formularios: Etiqueta arriba del input, texto de ayuda opcional, texto de error debajo. Espaciado de separación estándar
• Estados de Carga: Cargadores esqueléticos que coincidan con las dimensiones del layout — sin spinners circulares genéricos
• Estados Vacíos: Composiciones elaboradas que indiquen cómo poblar datos
• Estados de Error: Reportes de error claros e en línea

6. Definir Principios de Layout

• Sin elementos superpuestos — cada elemento ocupa su propia zona espacial clara. Sin apilamiento de contenido con posición absoluta
• Las secciones Hero centradas están PROHIBIDAS cuando la variación supera 4 — fuerza Pantalla Dividida, Alineación a la Izquierda o Espacio en Blanco Asimétrico
• La fila genérica de "3 tarjetas iguales horizontalmente" está PROHIBIDA — usa Zig-Zag de 2 columnas, rejilla asimétrica o desplazamiento horizontal
• CSS Grid sobre matemáticas de Flexbox — nunca uses hacks de porcentaje con calc()
• Contén los layouts usando restricciones de ancho máximo (por ejemplo, 1400px centrado)
• Las secciones de altura completa deben usar min-h-[100dvh] — nunca h-screen (salto catastrófico en iOS Safari)

7. Definir Reglas Responsivas

Cada diseño debe funcionar en todos los viewports:

• Colapso Móvil-Primero (< 768px): Todos los layouts multicolumna colapsan a una sola columna. Sin excepciones
• Sin Desplazamiento Horizontal: El desbordamiento horizontal en móvil es un fallo crítico
• Escalado Tipográfico: Los titulares escalan mediante clamp(). Texto de cuerpo mínimo 1rem/14px
• Objetivos Táctiles: Todos los elementos interactivos mínimo objetivo táctil de 44px
• Comportamiento de Imágenes: Las imágenes tipográficas en línea (fotos entre palabras) se apilan debajo del titular en móvil
• Navegación: La navegación horizontal de escritorio colapsa en un menú móvil limpio
• Espaciado: Los espacios verticales entre secciones se reducen proporcionalmente (clamp(3rem, 8vw, 6rem))

8. Codificar la Filosofía de Movimiento

• Física de Resortes por defecto: stiffness: 100, damping: 20 — sensación premium y con peso. Sin easing lineal
• Micro-Interacciones Perpetuas: Cada componente activo debe tener un estado de bucle infinito (Pulso, Máquina de Escribir, Flotar, Brillo)
• Orquestación Escalonada: Nunca montes listas instantáneamente — usa retrasos en cascada para revelaciones en cascada
• Rendimiento: Anima exclusivamente mediante transform y opacity. Nunca animes top, left, width, height. Filtros de grano/ruido solo en pseudo-elementos fijos

9. Listar Anti-Patrones (Señales de IA)

Codifica estas reglas como "NUNCA HACER" explícitas en el DESIGN.md:

• Sin emojis en ninguna parte
• Sin fuente Inter
• Sin fuentes serif genéricas (Times New Roman, Georgia, Garamond) — solo serifs modernas distintivas si es necesario
• Sin negro puro (#000000)
• Sin sombras de brillo neón/exterior
• Sin acentos sobresaturados
• Sin texto degradado excesivo en encabezados grandes
• Sin cursores de ratón personalizados
• Sin elementos superpuestos — separación espacial limpia siempre
• Sin layouts de 3 tarjetas iguales
• Sin nombres genéricos ("Juan Pérez", "Acme", "Nexus")
• Sin números redondos falsos (99.99%, 50%)
• Sin clichés de copywriting de IA ("Eleva", "Sin fisuras", "Desata", "Próxima Generación")
• Sin texto de relleno de UI: "Desplázate para explorar", "Desliza hacia abajo", flechas de desplazamiento, cheurones rebotantes
• Sin enlaces rotos de Unsplash — usa picsum.photos o avatares SVG
• Sin secciones Hero centradas (para proyectos de alta variación)

Formato de Salida (Estructura DESIGN.md)

# Sistema de Diseño: [Título del Proyecto]

## 1. Tema Visual y Atmósfera
(Descripción evocadora del estado de ánimo, densidad, variación e intensidad de movimiento.
Ejemplo: "Una interfaz contenida, aireada como una galería, con layouts asimétricos seguros
y movimiento con física de resortes fluida. La atmósfera es clínica pero cálida — como un
estudio de arquitectura bien iluminado.")

## 2. Paleta de Colores y Roles
- **Blanco Lienzo** (#F9FAFB) — Superficie de fondo primaria
- **Superficie Pura** (#FFFFFF) — Relleno de tarjetas y contenedores
- **Tinta Carbón** (#18181B) — Texto primario, profundidad Zinc-950
- **Acero Apagado** (#71717A) — Texto secundario, descripciones, metadatos
- **Borde Susurrado** (rgba(226,232,240,0.5)) — Bordes de tarjetas, líneas estructurales de 1px
- **[Nombre del Acento]** (#XXXXXX) — Acento único para CTAs, estados activos, anillos de enfoque
(Máx. 1 acento. Saturación < 80%. Sin púrpura/neón.)

## 3. Reglas Tipográficas
- **Pantalla:** [Nombre de la Fuente] — Ajuste apretado, escala controlada, jerarquía basada en peso
- **Cuerpo:** [Nombre de la Fuente] — Interlineado relajado, 65ch de ancho máximo, color secundario neutro
- **Mono:** [Nombre de la Fuente] — Para código, metadatos, marcas de tiempo, números de alta densidad
- **Prohibidas:** Inter, fuentes de sistema genéricas para contextos premium. Fuentes serif prohibidas en paneles.

## 4. Estilos de Componentes
* **Botones:** Planos, sin brillo exterior. Retroalimentación táctil de -1px translate al activarse. Relleno de acento para primario, ghost/contorno para secundario.
* **Tarjetas:** Esquinas generosamente redondeadas (2.5rem). Sombra susurrada difusa. Usadas solo cuando la elevación sirve a la jerarquía. Alta densidad: reemplazar con divisores de borde superior.
* **Inputs:** Etiqueta arriba, error debajo. Anillo de enfoque en color de acento. Sin etiquetas flotantes.
* **Cargadores:** Brillo esquelético que coincida con las dimensiones exactas del layout. Sin spinners circulares.
* **Estados Vacíos:** Composiciones elaboradas e ilustradas — no solo texto "Sin datos".

## 5. Principios de Layout
(Arquitectura responsiva basada en rejilla. Divisiones asimétricas para secciones Hero.
Colapso estricto de una sola columna por debajo de 768px. Contención de ancho máximo.
Sin matemáticas de porcentaje con Flexbox. Relleno interno generoso.)

## 6. Movimiento e Interacción
(Física de resortes para todos los elementos interactivos. Revelaciones en cascada escalonadas.
Micro-bucles perpetuos en componentes activos del panel. Solo transformaciones aceleradas
por hardware. Componentes de Cliente Aislados para animaciones pesadas de CPU.)

## 7. Anti-Patrones (Prohibidos)
(Lista explícita de patrones prohibidos: sin emojis, sin Inter, sin negro puro,
sin brillos neón, sin rejillas de 3 columnas iguales, sin clichés de copywriting de IA,
sin nombres de marcador de posición genéricos, sin enlaces de imágenes rotos.)

Mejores Prácticas

• Sé Descriptivo: "Tinta Carbón Profunda (#18181B)" — no solo "texto oscuro"
• Sé Funcional: Explica para qué se usa cada elemento
• Sé Consistente: Misma terminología en todo el documento
• Sé Preciso: Incluye códigos hex exactos, valores rem, valores de píxel entre paréntesis
• Sé Opinado: Esta no es una plantilla neutral — impone una estética premium específica

Consejos para el Éxito

1. Empieza con la atmósfera — comprende la vibra antes de detallar tokens
2. Busca patrones — identifica espaciados, tamaños y estilos consistentes
3. Piensa semánticamente — nombra colores por su propósito, no solo por su apariencia
4. Considera la jerarquía — documenta cómo el peso visual comunica importancia
5. Codifica las prohibiciones — los anti-patrones son tan importantes como las reglas mismas

Errores Comunes a Evitar

• Usar jerga técnica sin traducción ("rounded-xl" en lugar de "esquinas generosamente redondeadas")
• Omitir códigos hex o usar solo nombres descriptivos
• Olvidar los roles funcionales de los elementos de diseño
• Ser demasiado vago en las descripciones de atmósfera
• Ignorar la lista de anti-patrones — estos son lo que hace que la salida sea premium
• Predeterminar diseños genéricos "seguros" en lugar de imponer la estética curada