--- name: design-designer description: Interviews you quickly, then builds a prompt optimized for Claude Design (claude.ai/design). Based on Claude Design's own system prompt. Use when you want to generate a legendary landing page, pitch deck, prototype, or clickable app in one shot. Trigger with "/design-designer", "prompt for claude design", "build a claude design prompt", "design prompt". --- # Design Designer The Claude Design whisperer. A short, focused interview that produces a single paste-ready prompt for claude.ai/design — shaped by what Claude Design actually wants under the hood. ## When to Use Invoke when the user wants to: - Generate a prompt for claude.ai/design - Get a landing page, pitch deck, scroll-driven site, or clickable mobile prototype in one shot - Avoid the 10-question interrogation Claude Design normally runs by front-loading every answer Trigger phrases: "/design-designer", "prompt for claude design", "claude design prompt", "design a landing page prompt", "build me a claude design brief", "design-designer" ## What Claude Design Actually Wants (Why This Skill Exists) From Claude Design's own system prompt: - *"Good hi-fi designs do not start from scratch — they are rooted in existing design context."* If you don't provide context, it asks for it. - *"Mocking a full product from scratch is a last resort and will lead to poor design."* - It asks **10+ questions** before starting if you don't front-load them. - *"Try to give 3+ variations across several dimensions."* If you don't ask, you get less. - *"Try to use colors from brand / design system."* No colors given = generic newspaper-minimalist default. - *"Start your variations basic and get more advanced and creative as you go!"* - It requests: feeling, audience, fidelity, option count, design system, UI kit, brand context. This skill interviews you against that exact list, so your output prompt pre-answers every question Claude Design would ask — and explicitly requests variations it wouldn't otherwise offer. --- ## How It Works Run in 4 phases. Use the AskUserQuestion tool. Ask one question at a time. Keep the tone fast and human. ### Phase 0: Load Inspiration Library (auto) Before starting the interview, read `~/second-brain/reference/design/design-inspiration.md`. This is the living inspiration library — any source Christopher has added. Use it to suggest references at Q3 (feeling) and Q4 (context imports). The library is append-only and grows over time; always read it fresh, never hardcode sources. If the file doesn't exist yet, skip silently. Don't block the interview. ### Phase 1: The Interview Ask in this order. Each question should give the user 3-6 named options + "Other / write-in." --- **Q1. What are you building?** - Landing page (one-pager for a product, service, or offer) - Pitch deck or slide presentation - Scroll-driven storytelling site (acts, reveals, cinematic scroll) - Clickable mobile app prototype - Marketing website (multi-section, editorial) - Dashboard or admin UI - Something else (write in) --- **Q2. In one sentence, what's it for and who's it for?** Free text. Example: *"A late-night focus tool for solo founders who hate noise."* --- **Q3. What feeling should it hit?** (pick one dominant + up to 2 secondary) _If user is fuzzy: offer to pull 2-3 reference URLs from the inspiration library (loaded in Phase 0) matching the feeling tag, so they can browse before answering._ - Late-night cinematic (dark, moody, confident, A24) - Warm editorial (print magazine, off-white, serif headlines) - Luxury product (Apple keynote, minimal, photographic restraint) - Playful and kinetic (bright, motion-heavy, youthful) - Clinical and technical (Bloomberg terminal, data-dense, precise) - Handcrafted and human (notebook, handwritten, imperfect) - Other (write in) --- **Q4. Do you have existing context to import?** (Claude Design WILL ask for this — pre-answer it) - Yes, I'll attach a Figma file - Yes, I'll attach a GitHub repo or codebase - Yes, I'll attach screenshots of existing UI - Yes, I'll link another Claude Design project - Pull a URL from my design inspiration library (offer relevant sources from Phase 0 file) - No — I'll describe my brand verbally and let it interpret - No — fully freestyle (WARNING: results are worse without context) --- **Q5. Brand colors and type?** Free text. Format: `primary #hex, accent #hex, neutral #hex, headline typeface, body typeface`. Example: *"coral #E07A4F, cream #F4F0EA, near-black #0a0a0f, italic serif headlines, geometric sans body."* If the user has nothing: fall back to asking "what color says the feeling?" and interpret. --- **Q6. How many variations and along what axis?** - 3 variations, same vibe, different layouts - 4 variations from safe to wild (the Claude Design default) - 6 variations exploring dimensions (color / type / motion / structure) - 1 final design only — no variations - Other (write in) --- **Q7. Any specific sections, screens, or anchors?** Free text. Example for a landing page: *"hero with single italic headline, 3-column table-of-contents section, client marquee with fictional names as italic text not logos, one pull-quote, CTA footer."* Example for a deck: *"7 slides. Title, problem, why now, what we do, traction, team, next steps."* --- **Q8. What should NOT be in it?** (kill the Claude Design biases) - No lorem ipsum (always add this) - No hero images if text-only carries - No "Our Portfolio" style section labels — let design label itself - No generic "AI startup" tropes (gradient blobs, floating orbs) - No specific brand references (no mentioning competitors) - Other (write in) --- **Q9. Output and handoff?** - Keep it in Claude Design only - Export to Claude Code for final vibe-coding - Export to Canva for fine-tuning - Export to PDF or PPTX for sharing - Multiple outputs --- **Q10. Tweaks you want exposed on the canvas?** What dimensions should be toggleable after the first render? Examples: accent color, headline text, font pairing, motion intensity, density, layout variant. This unlocks Claude Design's Tweaks feature — edits persist to disk, not just preview. --- ### Phase 2: Synthesize Take the answers. Map them into this structure (internal, don't show the user): ``` FEELING_AND_AUDIENCE: {Q2} + {Q3} TYPE: {Q1} CONTEXT_IMPORTS: {Q4} BRAND_SYSTEM: {Q5} STRUCTURE: {Q7} BANNED: {Q8} + always include "no lorem ipsum" VARIATIONS: {Q6} HANDOFF: {Q9} TWEAKS: {Q10} ``` ### Phase 3: Generate the Optimized Prompt Assemble using this template. This template front-loads every one of Claude Design's 10+ questions. ``` Design a {Q1} for {Q2}. The feeling: {Q3 primary} with notes of {Q3 secondary}. Think [one cultural or aesthetic reference the user gave or you can infer, NOT a brand name]. Context I'm attaching: {Q4}. Treat these as ground truth for the visual DNA. Extract palette, type, spacing, and tone from them before inventing anything. Brand system: {Q5 — formatted as actual hex codes and type names}. Structure: {Q7 — broken into section-by-section list}. Variations: give me {Q6 count} options {Q6 axis}. Start with the most by-the-book match to the brand system, then progress toward more novel and interesting visuals in later variations. I want to see real range — different layouts, different type treatments, different motion ideas. Banned elements: {Q8}. No lorem ipsum anywhere. Every sentence must read like a human wrote it. Tweaks: expose the following as toggleable controls on the canvas — {Q10}. Persist tweaks to disk so I can iterate without re-prompting. Export: prepare this for {Q9 handoff}. {If Claude Code: include the hand-off command ready to paste into my terminal.} One page, ship-ready, no placeholder copy, no garbled letters, no overlapping zones. ``` ### Phase 4: Deliver Output the final prompt in a single copy-paste block. Then give a short 3-point briefing: 1. **What to attach before hitting enter**: list the files or links from Q4. 2. **What Claude Design will ask anyway**: flag the 2-3 questions it might still ask despite our front-loading (usually around exact section copy). 3. **Next move after first render**: "Use Tweaks to iterate. Use Draw mode to annotate specific elements. Export to Claude Code only once you love the visual." Close with: "Paste the prompt above into claude.ai/design. Attach the imports from step 1. I'll watch for the first render." --- ## The Rules Embedded in the Skill Every output prompt this skill generates must: 1. **Lead with feeling and audience** — not components. (Claude Design's system prompt explicitly calls out to avoid "web design tropes unless making a web page.") 2. **One anchor detail per layer** — one headline, one palette, one motion idea, one proof element. Resist listing 40 things. 3. **Always end with "one page, ship-ready, no lorem ipsum"** — kills the placeholder text that gives AI output away. 4. **Always request variations explicitly** — Claude Design will only give multiple options if you ask. And say "start safe, progress to novel" so you get real range. 5. **Always attach context or say "interpret from description"** — never leave context blank. Claude Design defaults to newspaper-minimalist if starved. 6. **Always specify Tweaks** — otherwise they default to generic color/font knobs. Pick the 3-5 dimensions that matter most for THIS design. 7. **Always name the handoff** — Claude Code, Canva, PDF, PPTX. Claude Design exports differently for each. ## What Claude Design Will NOT Do Well (Prep User For These) Warn the user about these if relevant to their use case: - **It leans newspaper-minimalist when under-specified** — italic serif headlines, off-white backgrounds, pull-quote modules. Break this by specifying brand colors + a non-editorial feel in Q3. - **It does NOT keep title screens on prototypes by default** — this is intentional. If the user wants a title screen, they must ask for it explicitly. - **It cannot use images from other projects inline** — you can read them cross-project, but you have to copy them into your design's project to display. - **It uses 1920×1080 fixed canvas for slide decks** with auto-scaling. If the user needs a different aspect ratio (9:16 vertical, for instance), they must say so. - **In-artifact `window.claude.complete()` runs on Haiku 4.5 with a 1024-token cap** — shared under the viewer's quota. Fine for summaries, not for long generation. ## Output Path If the user wants the prompt saved: `outputs/claude_design_prompts/YYYY-MM-DD/{slug}_prompt.md` Otherwise deliver inline in the conversation. ## Quick Path (if user says "skip the interview, just build it") If the user pastes a brief and says skip the interview, parse their brief for: - Type - Feeling - Brand colors - Structure - Variations count - Handoff Fill gaps with sensible defaults (4 variations, no lorem ipsum, Claude Code handoff). Flag any defaults you picked so the user can override.