Get The $10K Agency Design Brief Kit
Claude isn't a bad designer — most people are just bad creative directors. 'Make it modern' averages out to the bland default everyone gets. This kit is the 7 exact, copy-paste prompts — the same brief a $10,000 design studio writes — that turn Claude into a senior designer, plus the tool stack and the field notes. THE 7 PROMPTS: 1) SHOW, DON'T TELL — paste a screenshot of a site you admire and make Claude reverse-engineer its design language into a spec (hex palette, type pairing, spacing, radius, shadows, feeling in 3 words) BEFORE it writes a line of code; vision pins down 50 decisions an adjective leaves to the lazy average. 2) TOKENS BEFORE COMPONENTS — make Claude define a full design-token system first (60-30-10 palette, modular type scale, 8-point spacing, radius + shadows) as Tailwind v4 @theme variables, then forbid any raw hex or one-off pixels; this is why agency sites feel so 'tight'. 3) NAME THE AESTHETIC — swap 'modern' for a named movement (Swiss, editorial, glassmorphism, neo-brutalist, Bauhaus, Y2K); a named style ships a dense rulebook Claude already knows — same request, different word, wildly different site. 4) BUILD ON REAL PRIMITIVES — tell Claude to use shadcn/ui (copy-paste component code you OWN, not an npm library) on Radix primitives (free keyboard, focus & ARIA) wired to your tokens; the difference between a demo and something you'd ship. 5) THREE DIRECTIONS, THEN MERGE — force three genuinely distinct directions (bold editorial / calm premium / high-energy) side by side, then play creative director and cherry-pick — exactly what a $10K agency does at concepting. 6) MOTION WITH INTENTION — name the library (Motion, formerly Framer Motion), the scroll-reveal (~16px lift, 60ms stagger), the hover (scale 1.02), the easing (ease-out cubic-bezier, never linear) and 200-500ms durations; motion is what silently screams 'expensive'. 7) RENDER, SCREENSHOT, CRITIQUE — Claude can't see its own output, so render it, screenshot it, and paste it back asking it to critique like a harsh senior art director (one focal point? hierarchy survive a 3-second squint? cramped or floating?) then fix the top 3 — and in Claude Code, run this loop automatically via the Playwright MCP so Claude becomes its own art director. Plus a tool-stack cheat sheet (shadcn / Radix / Tailwind v4 / Motion), the paste-a-screenshot trick (Ctrl+V in Claude Code, not Cmd+V), and the run-them-in-order workflow. Every prompt is word-for-word and ready to paste.
Free. No spam. Unsubscribe anytime.