← Volver al listado de tecnologías ← Índice de gstack

Cap 5: Skills de Diseño

Por: Artiko
gstackdiseñodesign-systemuimockups

Pipeline de diseño

Los skills de diseño de gstack producen código real, no solo recomendaciones:

flowchart LR
    DC[/design-consultation/] -->|DESIGN.md + mockups| DS[/design-shotgun/]
    DS -->|variante aprobada| DH[/design-html/]
    DH -->|HTML producción| DR[/design-review/]
    DR -->|fixes atómicos| SHIP[listo para ship]

/design-consultation

Construye un sistema de diseño completo desde cero para el proyecto.

Qué hace:

  1. Investiga el landscape competitivo de la categoría
  2. Propone opciones creativas (riesgosas) junto a opciones seguras
  3. Genera mockups interactivos en HTML (light + dark mode)
  4. Escribe DESIGN.md como fuente de verdad del diseño

Output estructurado:

DESIGN.md
├── Paleta de colores (primarios, secundarios, semánticos)
├── Tipografía (escala, pesos, line-heights)
├── Espaciado y grid
├── Componentes base (botones, inputs, cards)
├── Tono de voz (copy guidelines)
└── Decisiones de diseño con razonamiento

Cuándo usarlo: Al iniciar un proyecto nuevo o al rediseñar una sección completa.

/design-shotgun

Genera 3 variantes visuales distintas para una decisión de diseño.

Flujo:

  1. Usa GPT Image API para generar 3 mockups visuales con estilos diferentes
  2. Abre un board de comparación en el navegador
  3. Captura las aprobaciones del usuario para construir “taste memory”
  4. Las preferencias se guardan en ~/.gstack/projects/ para coherencia futura

Ejemplos de variantes:

Por qué 3 y no 1: Evita anclar en la primera opción. Fuerza una decisión consciente de estilo.

/design-html

Convierte mockups aprobados en HTML de producción.

Características:

Pretext (text reflow inteligente):

Auto-detección de framework:

Live-reload durante refinamiento:

Iteración 1: HTML base generado
→ Preview en navegador con live-reload
→ "El botón CTA es muy pequeño en mobile"
Iteración 2: Fix aplicado, screenshot before/after
→ "El espaciado del header necesita más aire"
Iteración 3: Fix aplicado
→ Aprobado

/design-review

Auditoría visual del sitio en vivo con fixes automáticos.

Checklist de 80 ítems que incluye:

Proceso:

sequenceDiagram
    participant DR as /design-review/
    participant B as Browser
    participant Git as Git

    DR->>B: Screenshot inicial
    DR->>DR: Auditoría contra checklist
    loop Para cada issue
        DR->>Git: Fix atómico en commit
        DR->>B: Screenshot post-fix
        DR->>DR: Before/after documentado
    end
    DR->>DR: Reporte final con métricas

Diferencia con /plan-design-review:

Casos de uso combinados

Proyecto nuevo:

/office-hours → DESIGN.md con dirección del producto
/design-consultation → sistema de diseño completo
/design-shotgun → elige estilo visual
/design-html → HTML de producción

Refactor visual:

/design-review → auditoría completa del estado actual
                → fixes atómicos automáticos
                → reporte de mejoras

Feature nueva en proyecto existente:

/design-shotgun → genera variantes contextualizadas al sistema existente
/design-html → HTML adaptado al framework del proyecto

Integración con el design system existente

Si ya tienes un DESIGN.md o sistema de diseño establecido, los skills lo leen antes de generar cualquier output. No rompen convenciones existentes: las extienden.

← Volver al listado de tecnologías ← Índice de gstack