🎯 design-designer
Entrevista rápida, prompt perfeito. Transforme seu briefing em uma instrução otimizada para o Claude Design (claude.ai/design) gerar landing pages, pitch decks e apps clicáveis de uma vez só.
🧩 O que é / o que faz
Prompt engineer para Claude Design
O design-designer é um skill que conduz uma entrevista rápida com o usuário e, em seguida, constrói um prompt otimizado para ser colado no claude.ai/design. Ele é baseado no próprio system prompt do Claude Design — sabe exatamente o que o modelo precisa ouvir para gerar o resultado certo de uma vez.
✓ O que ele entrega
- ✓ Prompt completo, estruturado e pronto para colar no Claude Design
- ✓ Cobertura de: tipo de artefato, audiência, estilo visual, conteúdo, paleta, comportamento interativo
- ✓ Eliminação do loop de perguntas que o Claude Design faria na UI
- ✓ Adaptação ao caso: landing page, pitch deck, protótipo mobile, app clicável
✗ O que ele NÃO faz
- ✗ Não gera o design em si — apenas o prompt para levá-lo ao Claude Design
- ✗ Não substitui o frontend-design (que gera HTML/CSS real via código)
- ✗ Não produz assets exportáveis diretamente no Claude Code
- ✗ Não funciona bem para fluxos complexos que exigem back-end real
🎣 Quando dispara
O Claude Code aciona o design-designer automaticamente quando detecta qualquer uma das frases-gatilho abaixo na sua mensagem. Você não precisa saber o nome exato do skill.
Frases-gatilho da description
/design-designer
Comando direto — invocação explícita do skill
"prompt for claude design"
Pedido natural em inglês
"build a claude design prompt"
Variação de construção de briefing
"design a landing page prompt"
Foco em landing page — dispara mesmo sem mencionar o skill
"build me a claude design brief"
Solicitação de briefing estruturado
Quick Path disponível
Se você disser "skip the interview, just build it", o skill pula a fase de entrevista e gera o prompt com o que foi fornecido. Útil quando você já tem o briefing pronto e quer só formatar.
🚀 Como melhora seus resultados
O Claude Design é poderoso mas exigente: precisa de contexto denso para gerar algo de nível profissional. Sem um prompt bem estruturado, ele vai fazer perguntas ou gerar genérico. O design-designer resolve isso front-loading todas as respostas.
📊 O que muda com o skill
ao invés de 5–10
na primeira entrega
suportados
Tipos de artefato que o skill sabe gerar prompt
Landing Page
Scroll-driven, hero + seções + CTA. Ideal para lançamentos e produtos SaaS.
Pitch Deck
Slides visuais para apresentação de startups, produtos ou projetos.
Protótipo Mobile
Telas navegáveis de app, com fluxo simulado de interação.
App Clicável
Protótipo interativo com navegação entre estados, formulários, botões.
⚙️ Como funciona por dentro
As 4 fases da execução
Phase 1: The Interview
O skill faz até 8 perguntas estratégicas em sequência conversacional, coletando: tipo de artefato desejado, audiência-alvo, proposta de valor, estilo visual (referências, paleta, tom), conteúdo das seções, comportamento interativo esperado, restrições técnicas e prazo.
Phase 2: Synthesize
O Claude processa todas as respostas e identifica padrões: estilo dominante, lacunas de informação, contradições. Preenche lacunas com defaults inteligentes baseados no type de artefato escolhido.
Phase 3: Generate the Optimized Prompt
Monta o prompt seguindo a estrutura que o Claude Design espera: tipo, audiência, conteúdo, visual, interatividade, tom, restrições. Inclui instruções explícitas para scroll, animação, responsividade se necessário.
Phase 4: Deliver
Entrega o prompt formatado inline ou salvo em arquivo. Caminho de output padrão:
outputs/claude_design_prompts/YYYY-MM-DD/{'{'}slug{'}'}_prompt.md
✓ Boas práticas na entrevista
- ✓ Forneça referências visuais reais (URLs, marcas, estilos)
- ✓ Descreva a audiência com precisão (cargo, dor, contexto)
- ✓ Mencione o que NÃO quer no design (restrições são igualmente valiosas)
- ✓ Especifique o CTA principal esperado
✗ Erros comuns
- ✗ Responder "moderno" sem dar referências — o modelo não consegue ancorar
- ✗ Pular seções ("tanto faz") — cada lacuna vira genérico no output
- ✗ Pedir funcionalidades de back-end dentro do prompt (não é suportado)
- ✗ Usar o skill para UI de sistemas internos complexos
💬 Exemplo prático + PROMPT gerado
Cenário: Landing page para uma ferramenta SaaS de análise de contratos
Usuário dispara o skill com /design-designer. O skill conduz 5 perguntas objetivas e, com as respostas, gera o prompt abaixo.
# Como invocar no Claude Code:
/design-designer
# ou em linguagem natural:
"Quero um prompt para o Claude Design criar a landing page da LexAI"
## Artefato Landing page completa para SaaS B2B · desktop-first, responsivo mobile ## Produto LexAI — plataforma de análise automatizada de contratos jurídicos. Lê PDFs de contratos, extrai cláusulas de risco, gera relatório em 30 segundos. ## Audiência Advogados corporativos e gestores jurídicos de médias e grandes empresas. Dor: revisar contratos manualmente leva horas e gera erros que custam caro. ## Estrutura da página 1. Hero — headline "Revise contratos 10× mais rápido, sem erro humano" CTA primário: "Analisar meu primeiro contrato — grátis" 2. Social proof — logos de escritórios parceiros + número "47.000 contratos analisados" 3. Como funciona — 3 passos animados: Upload → Análise → Relatório 4. Features — grid 3 colunas: detecção de risco, resumo executivo, integração com DocuSign 5. Pricing — 3 planos com destaque no Profissional 6. FAQ — 5 perguntas frequentes expansíveis 7. Footer com CTA final ## Visual Estilo: clean tech, minimalista, sério. Referência: Linear.app + Notion. Paleta: fundo #0a0a0f, acento primário #6366f1 (índigo), texto #f8fafc. Tipografia: Inter ou Geist. Sem elementos decorativos excessivos. ## Interatividade Scroll suave entre seções. Animação de upload no "Como funciona". Hover nos cards de feature com borda iluminada. Acordeão no FAQ. ## Restrições Não incluir formulário de cadastro (só CTA para rota externa). Sem back-end — tudo estático. Priorizar velocidade de carregamento percebida.
Atenção: limitações do Claude Design
O Claude Design não faz back-end real, banco de dados, autenticação ou integração com APIs externas. Esses casos exigem o frontend-design + desenvolvimento real. O skill avisa o usuário sobre essas limitações na Phase 4.
🧬 Combina com / limites
O design-designer ocupa uma posição específica no ecossistema de skills de design: ele é o briefing engine, não o gerador final. Funciona melhor quando combinado com outros skills antes ou depois.
🤝 Relação com frontend-design e impeccable
design-designer → frontend-design
O frontend-design gera HTML/CSS/JS real, diretamente no Claude Code, sem precisar do claude.ai/design. É para quando você quer controle total do código. Use a dupla quando: o Claude Design gerou o visual, você gostou, e agora quer implementar em código limpo com o frontend-design.
design-designer → impeccable
O impeccable revisa e refina qualquer output gerado — texto, estrutura, hierarquia visual. Use quando o prompt gerado pelo design-designer produzir um resultado bom mas com imperfeições: copy fraco, hierarquia confusa, CTA pouco claro.
Com quais skills do curso combina
Implementa em código real o que o Claude Design prototipou
Refina copy e hierarquia do output gerado pelo Claude Design
Alimenta a entrevista do design-designer com a identidade visual já definida
Adiciona camada de motion ao protótipo gerado pelo Claude Design
🚫 Quando NÃO usar o design-designer
- ✗ Quando você quer código HTML/CSS gerado diretamente — use o frontend-design
- ✗ Quando o design requer back-end, banco de dados ou APIs reais
- ✗ Para UI de dashboards complexos com muitos estados e lógica condicional
- ✗ Quando você já tem o prompt e só quer executar — vá direto ao claude.ai/design
- ✗ Para gerar assets exportáveis (ícones, SVGs, imagens) — use ferramentas dedicadas
✅ Resumo do Módulo 1.4
/design-designer ou frases naturais sobre "claude design prompt"
outputs/claude_design_prompts/
Fim da Trilha 1 — Construir
Próxima parada: Trilha 2 — 🎨 Identidade
Na Trilha 2 você vai dominar os skills de identidade visual: brand guidelines, paleta, tipografia e sistemas de design coerentes. Fundação para que tudo que você construiu na Trilha 1 tenha uma identidade reconhecível.