Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Guia al agente para generar interfaces de alta calidad con Google Stitch. Usar cuando se creen pantallas con stitch_generate_screen, se exporte diseño a frameworks, o se necesite un design system coherente. Proporciona criterios de diseño (no valores fijos) para evitar interfaces genericas y producir resultados premium.
.claude/skills/bilal140202-stitch-design-taste/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 34% | 0% |
| case-03 | ✗→✓ | ▲ Improved | 30% | 0% |
| case-05 | ✗→✓ | ▲ Improved | 9% | 0% |
| case-07 | ✗→✓ | ▲ Improved | 58% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 70% | 0% |
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.
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.
Prohibido — estos patrones producen interfaces genericas de IA:
Obligatorio — senales de calidad:
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"Si el proyecto tiene customColor, generar la paleta completa a partir de ese unico color:
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 |
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).
Las animaciones comunican, no decoran. Si una animacion no transmite informacion (estado, relacion espacial, cambio), no es necesaria.
DESIGN.md o .stitch/metadata.json en el proyectostitch-mcp-cli design-md primerostitch_generate_screenIncluir 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]stitch_export_frameworkLa 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.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 16,957 | 14,869 | -12% | 1 | 1 | 0% | 3,471 | 4,646 | +34% | 0 | 0 | — |
case-02 | fail→fail | 16,778 | 11,556 | -31% | 1 | 1 | 0% | 3,337 | 4,001 | +20% | 0 | 0 | — |
case-03 | fail→pass | 14,354 | 8,441 | -41% | 1 | 1 | 0% | 2,736 | 3,555 | +30% | 0 | 0 | — |
case-04 | fail→fail | 15,268 | 11,732 | -23% | 1 | 1 | 0% | 2,723 | 4,018 | +48% | 0 | 0 | — |
case-05 | fail→pass | 17,314 | 9,275 | -46% | 1 | 1 | 0% | 3,348 | 3,651 | +9% | 0 | 0 | — |
case-06 | fail→fail | 11,954 | 7,469 | -38% | 1 | 1 | 0% | 2,218 | 3,377 | +52% | 0 | 0 | — |
case-07 | fail→pass | 10,730 | 6,386 | -40% | 1 | 1 | 0% | 1,950 | 3,083 | +58% | 0 | 0 | — |
case-08 | fail→pass | 12,060 | 9,567 | -21% | 1 | 1 | 0% | 2,171 | 3,701 | +70% | 0 | 0 | — |
case-14 | fail→fail | 11,759 | 10,063 | -14% | 1 | 1 | 0% | 2,262 | 3,689 | +63% | 0 | 0 | — |
case-09 | fail→pass | 12,363 | 5,528 | -55% | 1 | 1 | 0% | 1,888 | 2,691 | +43% | 0 | 0 | — |
case-10 | fail→pass | 14,070 | 8,711 | -38% | 1 | 1 | 0% | 2,691 | 3,400 | +26% | 0 | 0 | — |
case-11 | pass→pass | 11,918 | 8,135 | -32% | 1 | 1 | 0% | 2,386 | 3,325 | +39% | 0 | 0 | — |
case-12 | fail→pass | 13,035 | 9,103 | -30% | 1 | 1 | 0% | 2,356 | 3,529 | +50% | 0 | 0 | — |
case-13 | pass→pass | 9,174 | 4,375 | -52% | 1 | 1 | 0% | 1,697 | 2,597 | +53% | 0 | 0 | — |
case-15 | pass→pass | 11,712 | 9,696 | -17% | 1 | 1 | 0% | 2,080 | 3,468 | +67% | 0 | 0 | — |
case-16 | pass→pass | 7,710 | 4,633 | -40% | 1 | 1 | 0% | 1,568 | 2,741 | +75% | 0 | 0 | — |
case-17 | fail→pass | 13,042 | 8,736 | -33% | 1 | 1 | 0% | 2,134 | 3,315 | +55% | 0 | 0 | — |
case-18 | pass→pass | 12,988 | 7,417 | -43% | 1 | 1 | 0% | 2,066 | 3,082 | +49% | 0 | 0 | — |
case-19 | fail→pass | 12,966 | 4,156 | -68% | 1 | 1 | 0% | 2,435 | 2,517 | +3% | 0 | 0 | — |
case-20 | pass→pass | 14,699 | 10,703 | -27% | 1 | 1 | 0% | 2,629 | 3,636 | +38% | 0 | 0 | — |
case-21 | pass→pass | 8,559 | 5,932 | -31% | 1 | 1 | 0% | 1,513 | 2,828 | +87% | 0 | 0 | — |
case-22 | pass→pass | 11,593 | 7,711 | -33% | 1 | 1 | 0% | 2,065 | 3,403 | +65% | 0 | 0 | — |
case-23 | pass→pass | 16,647 | 9,269 | -44% | 1 | 1 | 0% | 2,970 | 3,716 | +25% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +43 percentage points is the difference between those two pass rates over the 23 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.