majiayu000/claude-skill-registry

Web Design Wizard

Visão Geral

Gera múltiplos estilos de design distintos para uma página web em worktrees paralelas, permitindo que o usuário compare e refine antes de se comprometer com uma direção. Princípio central: explore divergentemente, depois convirja para a melhor opção.

Quando Usar

• O usuário deseja explorar diferentes estilos de design para uma página web
• O usuário pede opções de design, direção visual ou comparação de estilos
• O usuário quer múltiplas implementações para escolher

NÃO use quando:

• O usuário já tem um design específico definido → use saurun:react-tailwind-v4-components ou frontend-design diretamente
• O usuário deseja modificar um design existente, não criar novos

Pré-requisitos

Todas as skills abaixo devem estar instaladas. Se alguma estiver faltando, pare e informe o usuário.

Skill	Usada em	Propósito
ui-ux-pro-max	Fase 2	Geração de sistema de design
superpowers:using-git-worktrees	Fase 6	Configuração de worktrees paralelas
frontend-design	Fase 6	Implementação de nível de produção
vercel-react-best-practices	Fase 6	Otimização React
copywriting	Fase 6	Refinamento de texto
nano-banana-pro	Fase 6	Geração de imagens — instalar: npx skills add intellectronica/agent-skills@nano-banana-pro -g -y

Fluxo de Trabalho

digraph design_wizard {
    "Solicitação do usuário" [shape=doublecircle];
    "Descoberta" [shape=box];
    "Geração de Estilos" [shape=box];
    "Usuário satisfeito?" [shape=diamond];
    "Refinamento" [shape=box];
    "Preferência de Gráficos" [shape=box];
    "Configuração do Projeto" [shape=box];
    "Implementação Paralela" [shape=box];
    "Verificação Paralela" [shape=box];
    "Concluído" [shape=doublecircle];

    "Solicitação do usuário" -> "Descoberta";
    "Descoberta" -> "Geração de Estilos";
    "Geração de Estilos" -> "Usuário satisfeito?";
    "Usuário satisfeito?" -> "Refinamento" [label="não"];
    "Refinamento" -> "Usuário satisfeito?";
    "Usuário satisfeito?" -> "Preferência de Gráficos" [label="sim"];
    "Preferência de Gráficos" -> "Configuração do Projeto";
    "Configuração do Projeto" -> "Implementação Paralela";
    "Implementação Paralela" -> "Verificação Paralela";
    "Verificação Paralela" -> "Concluído";
}

Fase 1: Descoberta

Use AskUserQuestion para coletar contexto. Perguntas em lote — use até 4 perguntas por chamada. Inferir respostas óbvias do contexto (ex.: uma cafeteria é voltada para consumidores finais, provavelmente clima acolhedor).

Coletar:

1. Nome do projeto — detectar de package.json ou nome do repositório git, confirmar com o usuário
2. Tipo de página — Landing, Portfólio, Blog, E-commerce, SaaS, Documentação
3. Público-alvo — Profissionais, Consumidores, Desenvolvedores, Indústria Criativa
4. Clima/sentimento — Profissional, Divertido, Luxo, Minimalista, Ousado, Acolhedor, Futurista
5. Idioma do conteúdo — Português, Inglês, etc.
6. Preferências/antipreferências de estilo — apenas se não for óbvio pelo contexto

Pule perguntas cuja resposta seja óbvia a partir da solicitação do usuário.

Fase 2: Geração de Estilos

Gere estilos de design usando ui-ux-pro-max:

Padrão: 4 estilos (o usuário pode solicitar número diferente).

Para cada estilo:

1. Crie palavras-chave diversas a partir das respostas da descoberta. Combine: tipo de página + público + clima + estética única. Garanta variedade entre todos os estilos.

2. Gere sistema de design: Invoque ui-ux-pro-max via ferramenta Skill com argumentos: "[palavras-chave]" --design-system --persist -p "[NomeDoProjeto]" --page "[nome-do-estilo]" Salva em: design-system/pages/[nome-do-estilo].md no diretório de trabalho atual.

3. Apresente ao usuário com: nome do estilo, cores principais, tipografia, adjetivos de clima e melhor caso de uso.

Acompanhe os estilos gerados para evitar palavras-chave duplicadas em rodadas de refinamento.

Fase 3: Refinamento (Iterativo)

O usuário diz	Ação
"Me dê N estilos completamente diferentes"	Gere N NOVOS estilos com palavras-chave diferentes
"Me dê mais N opções"	Gere N NOVOS (evite palavras-chave anteriores)
"Gosto de X e Y, me dê mais como X"	Mantenha X e Y, gere variações de X
"Combine estilos X e Y"	Gere 1 novo mesclando essas estéticas
"Implemente X, Y, Z" ou "Implemente todos"	Vá para a Fase 4 com as seleções

Fase 4: Preferência de Gráficos

Antes da implementação, pergunte sobre gráficos para todos os estilos selecionados de uma vez:

Use AskUserQuestion com opções:

• "Muitos gráficos para todos (imagem principal + gráficos de destaque + ilustrações)"
• "Gráficos mínimos para todos (apenas imagem principal)"
• "Deixe o estilo de design determinar os gráficos" (Recomendado)
• "Quero escolher por estilo"

Só pergunte por estilo se o usuário escolher a última opção.

Fase 5: Configuração do Projeto

Confirmar localização do projeto

Sugerido: designs/[nome-do-projeto]/ no diretório de trabalho atual.

Peça ao usuário para confirmar ou modificar.

Criar projeto

1. mkdir -p [localização]
2. Escreva concept.md — veja concept-template.md para o modelo. Preencha com base nas respostas da descoberta. Preencha apenas os campos para os quais você tem dados — omita seções sem informação.
3. NÃO execute git init — use o repositório existente. Faça commit dos documentos do projeto no branch atual.

git add designs/[nome-do-projeto]/concept.md
git commit -m "docs: inicializar exploração de design [nome-do-projeto]"

Estrutura do projeto

[raiz-do-repositorio]/
├── designs/[nome-do-projeto]/
│   └── concept.md
├── design-system/pages/
│   ├── [estilo-1].md
│   └── [estilo-2].md
└── .worktrees/
    ├── [branch-estilo-1]/    # Projeto React + Vite + TypeScript
    └── [branch-estilo-2]/

Fase 6: Implementação Paralela

CRÍTICO: Dispare TODOS os agentes de implementação em UMA ÚNICA mensagem com múltiplas chamadas da ferramenta Task.

Para cada estilo selecionado, dispare um sub-agente. Veja implementation-prompt.md para o modelo completo do prompt. Substitua [caminho-absoluto-para-raiz-do-repositorio] pelo caminho real da raiz do repositório para que os sub-agentes possam resolver referências entre worktrees.

Pontos-chave para cada sub-agente:

• Use superpowers:using-git-worktrees para criar worktree em .worktrees/[nome-do-estilo]/
• Crie projeto React + Vite + TypeScript: npm create vite@latest . -- --template react-ts
• Leia a especificação de design de design-system/pages/[nome-do-estilo].md
• Use a ferramenta Skill para invocar: frontend-design, vercel-react-best-practices, copywriting, nano-banana-pro
• Gere imagens conforme a preferência de gráficos
• Execute npm run build para verificar
• Faça commit de todas as alterações

Aguarde TODOS os agentes concluírem antes da Fase 7.

Fase 7: Verificação Paralela

CRÍTICO: Dispare TODOS os agentes de verificação em UMA ÚNICA mensagem com múltiplas chamadas da ferramenta Task.

Para cada implementação, dispare um sub-agente de verificação. Veja verification-prompt.md para o modelo completo do prompt. Atribua portas sequencialmente (5173, 5174, 5175, ...) e substitua [caminho-absoluto-para-raiz-do-repositorio] pelo caminho real.

Verificações:

• O servidor de desenvolvimento inicia sem erros
• Todas as URLs/links são válidos
• Imagens existem e são referenciadas corretamente
• Aderência à especificação de design (cor, tipografia, layout, efeitos) — nota 1-10
• O build de produção é bem-sucedido

Após todas concluírem, mostre um resumo comparativo:

Estilo 1: [Nome] — ✅ Tudo aprovado — Design: 8.5/10
Estilo 2: [Nome] — ⚠️ 2 URLs quebradas — Design: 9.0/10
Estilo 3: [Nome] — ❌ Build falhou — Veja relatório

Recomende o estilo com melhor desempenho com base nos resultados.

Referência Rápida

Fase	Ação	Ferramenta Principal
1. Descoberta	Coletar contexto via AskUserQuestion (lote de até 4)	AskUserQuestion
2. Geração de Estilos	Gerar 4 sistemas de design via ui-ux-pro-max	Skill
3. Refinamento	Iterar até o usuário selecionar estilos	AskUserQuestion
4. Gráficos	Perguntar preferência de gráficos para estilos selecionados	AskUserQuestion
5. Configuração do Projeto	Criar concept.md, fazer commit da estrutura	Write, Bash
6. Implementação	Disparar sub-agentes paralelos por estilo	Task
7. Verificação	Disparar agentes de verificação paralelos, mostrar comparação	Task

Erros Comuns

• Regenerar especificações de design em sub-agentes — as especificações são criadas na Fase 2. Sub-agentes as LEEM, nunca reinvocam ui-ux-pro-max.
• Disparo sequencial de sub-agentes — Fases 6 e 7 DEVEM disparar TODOS os agentes em uma única mensagem com múltiplas chamadas Task. Nunca um de cada vez.
• Pular Preferência de Gráficos — sempre pergunte antes da implementação. Não assuma.
• Usar git add . em worktrees — prepare apenas caminhos específicos para evitar commitar node_modules, .env ou arquivos do sistema.
• Palavras-chave idênticas entre estilos — acompanhe as palavras-chave usadas para garantir diversidade. Palavras-chave duplicadas produzem designs duplicados.

Tratamento de Erros

Erro	Recuperação
Script ui-ux-pro-max falha	Tentar novamente com palavras-chave mais simples. Se persistir, criar sistema de design manualmente a partir das palavras-chave do estilo.
Todos os estilos rejeitados	Perguntar ao usuário por direção específica: "O que você não gostou? Cores? Layout? Sensação geral?"
Skill de sub-agente não encontrada	O agente deve usar a ferramenta Skill para invocar. Se a skill estiver realmente faltando, pule essa etapa de melhoria e anote.
Build de implementação falha	Corrigir na worktree, reexecutar build. Reportar problema se não for corrigível.