🎯 design-designer
Quick interview, perfect prompt. Turn your brief into an optimized instruction for Claude Design (claude.ai/design) generate landing pages, pitch decks, and clickable apps all at once.
🧩 What it is / what it does
Prompt engineer for Claude Design
O design-designer is a skill that conducts a quick interview with the user and then builds a optimized prompt to be pasted into the claude.ai/design. It's based on Claude Design's own system prompt — it knows exactly what the model needs to hear to generate the right result on the first try.
✓ What it delivers
- ✓ Full, structured prompt ready to paste into Claude Design
- ✓ Covers: artifact type, audience, visual style, content, palette, interactive behavior
- ✓ Eliminating the loop of questions Claude Design would ask in the UI
- ✓ Adaptation to the use case: landing page, pitch deck, mobile prototype, clickable app
✗ What it DOESN'T do
- ✗ Doesn't generate the design itself — only the prompt to take it to Claude Design
- ✗ Doesn't replace frontend-design (which generates real HTML/CSS through code)
- ✗ Doesn't produce exportable assets directly in Claude Code
- ✗ Doesn't work well for complex workflows that require a real back end
🎣 When it triggers
Claude Code invokes the design-designer automatically when it detects any of the trigger phrases below in your message. You don't need to know the exact skill name.
Description trigger phrases
/design-designer
Direct command — explicit skill invocation
"prompt for claude design"
Natural request in English
"build a claude design prompt"
Brief-building variations
"design a landing page prompt"
Focused on landing pages — triggers even without mentioning the skill
"build me a claude design brief"
Structured briefing request
Quick Path available
If you say "skip the interview, just build it", the skill skips the interview phase and generates the prompt using the information provided. Useful when you already have the brief ready and just want to format it.
🚀 How it improves your results
Claude Design is powerful but demanding: it needs dense context to generate something at a professional level. Without a well-structured prompt, it will ask questions or generate something generic. The design-designer solves this by front-loading all the answers.
📊 What changes with the skill
instead of 5–10
in the first delivery
supported
Types of artifacts the skill can generate prompts for
Landing Page
Scroll-driven, hero + sections + CTA. Ideal for launches and SaaS products.
Pitch Deck
Visual slides for presentations about startups, products, or projects.
Mobile prototype
Navigable app screens with a simulated interaction flow.
Clickable App
Interactive prototype with navigation between states, forms, and buttons.
⚙️ How it works under the hood
The 4 execution phases
Phase 1: The Interview
The skill asks up to 8 strategic questions in a conversational sequence, gathering: the desired artifact type, target audience, value proposition, visual style (references, palette, tone), section content, expected interactive behavior, technical constraints, and timeline.
Phase 2: Synthesize
Claude processes all the answers and identifies patterns: dominant style, information gaps, contradictions. It fills gaps with smart defaults based on the chosen artifact type.
Phase 3: Generate the Optimized Prompt
Builds the prompt following the structure Claude Design expects: type, audience, content, visuals, interactivity, tone, constraints. Includes explicit instructions for scrolling, animation, and responsiveness if needed.
Phase 4: Deliver
Delivers the formatted prompt inline or saved to a file. Default output path:
outputs/claude_design_prompts/YYYY-MM-DD/{'{'}slug{'}'}_prompt.md
✓ Best practices for the interview
- ✓ Provide real visual references (URLs, brands, styles)
- ✓ Describe the audience precisely (role, pain point, context)
- ✓ Mention what you DON'T want in the design (constraints are equally valuable)
- ✓ Specify the expected primary CTA
✗ Common mistakes
- ✗ Answering "modern" without giving references — the model can't anchor it
- ✗ Skip sections ("whatever") — each gap becomes generic in the output
- ✗ Request back-end functionality in the prompt (not supported)
- ✗ Use the skill for complex internal systems UI
💬 Practical example + GENERATED prompt
Scenario: Landing page for a SaaS contract analysis tool
The user triggers the skill with /design-designer. The skill guides you through 5 straightforward questions and uses your answers to generate the prompt below.
# How to invoke in Claude Code:
/design-designer
# or in natural language:
"I want a prompt for Claude Design to create the LexAI landing page"
## 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.
Warning: Claude Design limitations
Claude Design doesn't do real back-end work, databases, authentication, or integration with external APIs. These cases require the frontend-design + actual development. The skill notifies the user of these limitations in Phase 4.
🧬 Works well with / limitations
O design-designer occupies a specific position in the design skills ecosystem: it is the briefing engine, not the final generator. It works best when combined with other skills before or after.
🤝 Relationship with frontend-design and impeccable
design-designer → frontend-design
O frontend-design generates real HTML/CSS/JS directly in Claude Code, without needing claude.ai/design. Use it when you want full control over the code. Use the two together when: Claude Design generated the visual, you liked it, and now you want to implement it in clean code with the frontend-design.
design-designer → impeccable
O impeccable reviews and refines any generated output—text, structure, visual hierarchy. Use when the prompt generated by design-designer produces a good result with imperfections: weak copy, confusing hierarchy, unclear CTA.
Which course skills it works with
Implements in real code what Claude Design prototyped
Refines the copy and hierarchy of Claude Design's generated output
Feeds the designer-design interview with the visual identity already defined
Adds a motion layer to the prototype generated by Claude Design
🚫 When NOT to use design-designer
- ✗ When you want to HTML/CSS code generated directly — use the frontend-design
- ✗ When the project requires a back end, database, or real APIs
- ✗ For complex dashboard UIs with many states and conditional logic
- ✗ When you already have the prompt and just want to run it — go straight to claude.ai/design
- ✗ To generate exportable assets (icons, SVGs, images) — use dedicated tools
✅ Module 1.4 Summary
/design-designer or natural phrases about "claude design prompt"
outputs/claude_design_prompts/
End of Track 1 — Build
Next stop: Track 2 — 🎨 Identity
In Track 2, you’ll master visual identity skills: brand guidelines, color palettes, typography, and cohesive design systems. This is the foundation for giving everything you built in Track 1 a recognizable identity.