Como usar /gsd:ui-phase para criar um contrato de design antes de implementar frontend, e /gsd:ui-review para auditar visualmente o que foi construído.
O /gsd:ui-phase gera um contrato de design completo para fases com trabalho de frontend. Antes de codificar, você define: design system, componentes, tokens de cor, tipografia e comportamentos. O executor seguirá isso.
/gsd:ui-phase 2 # Contrato de design para fase 2Quando usar
Use /gsd:ui-phase antes do /gsd:plan-phase em fases que envolvem construção de interfaces. O plan-phase usa o UI-SPEC.md como contexto para criar planos mais precisos.
O /gsd:ui-review faz uma auditoria visual retroativa do frontend implementado, pontuando em 6 pilares de qualidade visual.
/gsd:ui-review # Audita fase atual
/gsd:ui-review 3 # Audita fase 3 especificamenteClareza dos textos, hierarquia informacional, calls-to-action
Consistência de ícones, imagens, ilustrações e elementos gráficos
Paleta coerente, contraste de acessibilidade, uso de cor como informação
Hierarquia tipográfica, legibilidade, consistência de fontes e tamanhos
Sistema de grid, padding/margin consistentes, respiração entre elementos
Fluxos de usuário, feedback visual, estados de loading/erro/sucesso
Gera {fase}-UI-REVIEW.md com pontuação em cada pilar, evidências específicas de problemas e sugestões de correção acionáveis.
Quando o GSD detecta que uma fase tem trabalho de frontend, ele ativa o UI safety gate durante o plan-phase: avisa que você deveria rodar /gsd:ui-phase antes de planejar.
# Fluxo recomendado para fases de frontend:
/gsd:discuss-phase 2
/gsd:ui-phase 2 # ANTES do plan-phase
/gsd:plan-phase 2 # Usa UI-SPEC.md como contexto
/gsd:execute-phase 2
/gsd:ui-review 2 # Auditar depois de implementado
/gsd:verify-work 2Configure workflow.ui_safety_gate: false no config.json para pular o aviso em projetos onde você não usa o contrato UI.
Você pode usar /gsd:ui-review em qualquer projeto com frontend, mesmo sem projeto GSD ativo. É uma ferramenta de auditoria independente.