---
name: bilal140202/stitch-design-taste
source: https://app.decimal.ai/s/bilal140202-stitch-design-taste@1/SKILL.md
source_sha256: d372f8828a9a
---

# Stitch Design Taste — Criterios de Diseño para Agentes

Guia de criterios para generar interfaces no-genericas con Google Stitch.
No prescribe valores fijos — enseña **como tomar decisiones de diseño**.
Los valores reales (colores, fuentes, spacing) salen del `DESIGN.md` del
proyecto generado con `stitch-mcp-cli design-md`.

## Regla fundamental

Siempre que exista un `DESIGN.md` en el proyecto o en `.stitch/metadata.json`,
usarlo como fuente de verdad. Esta skill complementa ese archivo con
criterios de calidad, no lo reemplaza.

## Anti-Slop Rules

**Prohibido — estos patrones producen interfaces genericas de IA:**

- Hero sections centradas con heading + subheading + CTA en columna vertical
- Cards identicas en grid de 3 con icono + titulo + descripcion
- Fuentes genericas como unica opcion: Inter, Roboto, Arial, system-ui
- Estetica neon, degradados arcoiris, o "glassmorphism" excesivo
- Copy con "Revolutionize", "Seamless", "Cutting-edge", "Next-gen", "Empower"
- Todo con el mismo border-radius (todo redondo o todo cuadrado)
- Sombras apiladas o excesivas
- Espaciado uniforme entre todos los elementos

**Obligatorio — senales de calidad:**

- Cada pantalla tiene un **foco visual unico** — el ojo sabe donde ir
- Contraste de tamano real entre elementos (no todo el mismo peso visual)
- Al menos un elemento inesperado o memorable por pantalla
- Espacio negativo deliberado, no accidental
- Jerarquia tipografica con diferencia de tamano >= 1.25x entre niveles
- Asimetria cuando el layout lo permite

## Color

### Como calibrar (no que colores usar)

Stitch interpreta colores como descripciones semanticas. Siempre dar contexto,
no solo valores hex:

```
Bien:  "Azul profundo para acciones primarias, transmite confianza sin ser corporativo"
Mal:   "#1E3A5F"
```

### Criterios

- Maximo 4 colores con rol activo por pantalla
- El color de acento cubre <= 10% de la superficie visible
- Fondos oscuros requieren colores mas vivos (saturacion), no mas brillantes (luminosidad)
- Probar la paleta en escala de grises: si no hay jerarquia sin color, la paleta falla
- Nunca negro puro (#000) para texto — usar casi-negro con tinte
- Nunca blanco puro (#FFF) para fondos — usar blanco con tinte calido o frio segun la paleta

### Como derivar la paleta del DESIGN.md

Si el proyecto tiene `customColor`, generar la paleta completa a partir de ese
unico color:

1. **Primary** = el customColor del proyecto
2. **Accent** = complementario o analogo al primary, con contraste suficiente
3. **Background** = tinte muy sutil derivado del primary (calido si primary es calido, etc.)
4. **Surface** = version mas clara del background
5. **Text** = casi-negro con tinte del primary

## Tipografia

### Criterios de pairing

Regla: **una fuente con personalidad + una neutral**. Nunca dos decorativas.

| Rol | Caracteristicas | Evitar |
|-----|----------------|--------|
| Display/Heading | Seriff geometrico o sans con caracter. Peso 700-900 | Fuentes system genericas |
| Body | Humanist sans, legible a tamano pequeno. Peso 400 | Fuentes display para body |
| Mono/Codigo | Monospace con personalidad | Courier |

### Jerarquia

- Diferencia de tamano entre niveles consecutivos: >= 1.25x
- H1 a H2, H2 a Body — cada salto debe ser visible
- Si dos niveles se ven iguales, la jerarquia falla
- Line-height: headings 1.1-1.2, body 1.5-1.6

## Componentes

### Botones

- Primario vs secundario vs ghost — 3 niveles claros de enfasis
- Disabled: opacidad 40%, cursor not-allowed, sin hover
- Tamano touch-friendly: minimo 44px de alto en mobile
- Hover: cambio sutil (color o sombra), nunca animacion dramatica

### Cards

- Sombra sutil de un solo nivel, no apilada
- Hover: sombra elevada, sin scale exagerado
- Borde con tinte del accent (no gris plano)
- Border-radius consistente con el resto del sistema

### Inputs

- Altura minima 48px (touch-friendly)
- Label fuera del input, nunca como placeholder que desaparece
- Placeholder a 40% opacidad, diferente del label
- Focus: anillo visible del color principal
- Error: borde rojo + mensaje contextual + icono

### Empty States

- Ilustracion o icono grande (80px+) con color reducido
- Titulo descriptivo ("No hay proyectos todavia", no "404" ni "Empty")
- CTA que resuelve el problema, no solo un enlace generico

### Loaders

- Skeleton (shimmer) para contenido que carga, no spinners
- Spinner solo para acciones muy cortas (< 3 segundos)
- Progress bar para operaciones con duracion estimable

## Layout

### Principios

- **Mobile-first**: disenar para 375px, expandir
- **Asimetria preferida**: grids con columnas desiguales (2fr 1fr, etc.)
- **Recorrido visual**: Z-pattern para paginas, F-pattern para listas densas
- **Proximidad**: elementos relacionados juntos, separados de otros grupos

### Spacing

Usar una escala consistente (4, 8, 16, 24, 32, 48) en vez de valores
arbitrarios. La relacion entre spacing tokens debe ser evidente (cada nivel
es ~1.5-2x el anterior).

### Responsive

- Mobile: 1 columna, full-width, nav colapsada
- Tablet: 2 columnas, sidebar colapsable
- Desktop: grid completo, sidebar expandida

### Anti-patterns de layout

- No usar carousel para contenido critico
- No apilar mas de 3 cards en fila en mobile
- No usar tablas densas en mobile — convertir a card list
- No esconder navegacion principal detras de menus obscuros

## Motion

### Filosofia

Las animaciones **comunican**, no decoran. Si una animacion no transmite
informacion (estado, relacion espacial, cambio), no es necesaria.

### Criterios

- Duracion base: 200-300ms para transiciones, 150ms para hover
- Entradas: slide + fade (no solo fade)
- Salidas: fade rapido (150ms) — el usuario ya decidio irse
- Hover en botones: 150ms, solo background y transform
- Listas: stagger de 50ms entre items, no todos a la vez
- Nunca animar propiedades que causen reflow — usar transform y opacity
- Preferir curvas ease-out para entradas, ease-in para salidas

## Como usar esta skill con stitch-mcp-cli

### Antes de generar pantallas

1. Verificar si existe `DESIGN.md` o `.stitch/metadata.json` en el proyecto
2. Si existe, extraer: paleta, fuente, roundness, color mode
3. Si no existe, sugerir ejecutar `stitch-mcp-cli design-md` primero
4. Aplicar los criterios de esta skill sobre la base del DESIGN.md

### Al generar con `stitch_generate_screen`

Incluir en el prompt las decisiones de diseño basadas en esta skill:

```
Genera una pantalla de [descripcion]. 

Design system:
- Atmosfera: [descripcion narrativa del tono visual]
- Colores: [paleta derivada del DESIGN.md con contexto semantico]
- Tipografia: [fuentes con jerarquia clara]
- Layout: [patron elegido con justificacion]
- Componentes: [specs segun los criterios de esta skill]
```

### Al exportar con `stitch_export_framework`

La skill no afecta la exportacion tecnica — los templates de framework
en `src/templates/` manejan eso. Pero si el agente necesita ajustar el
diseno antes de exportar, aplicar los criterios de color, tipografia y
componentes.