Claude Design Master Skill

A Claude Skill that prepares the brief — not the build.

---

Why this exists

Claude Design has its own weekly quota — separate from your regular Claude, Sonnet, or Code budget — and it drains fast. One major artifact on a Pro plan can consume most of a week. Brainstorming inside Claude Design is the most expensive thing you can do.

design-brief-architect moves the thinking out and keeps the rendering in. The moment you mention building anything in Claude Design, the skill runs an adaptive interview, diagnoses your design-system status, plan tier, and quota posture, then produces a single paste-ready brief shaped to whatever you're actually building.

No locked templates. The brief structure emerges from the conversation.

What you get

Adaptive interview Nine questions, asked only when relevant. The skill pulls context from the conversation first and asks only what's missing. If you've already supplied a brand doc and named the artifact, you'll see one or two questions. If you're starting cold, you'll see more.	Paste-ready brief A single markdown block, copied directly into Claude Design. Shape adapts to artifact: deck briefs list slides by purpose, landing-page briefs list sections top-to-bottom, animation briefs are scene-by-scene scripts.
Model and quota strategy Opus 4.7 vs Sonnet 4.6 vs Haiku, mapped to your plan tier and remaining budget. Pro plan with low quota gets a different recommendation than Max 20x with fresh budget.	Iteration playbook A five-tier ladder — direct edit, tweaks panel, comment, draw, fresh prompt — handed to you with the brief. Most fixes never need a new chat turn.

Workflow

flowchart LR
    A[User mentions<br/>Claude Design] --> B{Design system<br/>exists?}
    B -- No --> C[Build design<br/>system first]
    B -- Yes --> D[Adaptive<br/>interview]
    C --> D
    D --> E[Diagnose quota<br/>and plan tier]
    E --> F[Paste-ready<br/>brief]
    F --> G[Iteration<br/>playbook]
    G --> H[Exit<br/>conditions]

    style A fill:#7C3AED,stroke:#5B21B6,color:#fff
    style C fill:#D97706,stroke:#92400E,color:#fff
    style F fill:#059669,stroke:#047857,color:#fff
    style H fill:#000000,stroke:#000,color:#fff

Loading

Decision rules encoded

The skill carries the judgment, not just the steps:

Rule	Why
Design system before anything else	Costs ~6% of a Max 20x weekly quota; makes every downstream artifact land in one shot instead of three.
Sketch first when structure matters	Drag rectangles + typed labels on the Claude Design sketch canvas. Use it for non-trivial layouts, skip it for conventional ones.
Wireframe vs. high-fidelity	Wireframes for funnels and apps; high-fidelity for landing pages. Default to high-fi unless you're genuinely exploring shape.
Model selection by quota and stage	Opus 4.7 for first generation, Sonnet 4.6 for tweaks once structure is solid, Haiku for trivial swaps.
One visual dimension per prompt	Mega-prompts land one or two changes well and drop the rest. Stage typography, then color, then layout, then copy.
Canvas over prompt	Direct edits, tweaks panel, comments on elements, and the draw tool are nearly free compared to new prompts.
Exit when faster by hand	Brand guideline one-pagers go to Canva or ChatGPT image gen. Deploy goes to Cloud Code. Mobile optimization is a separate pass.

How to trigger

The skill fires on direct venue mentions:

"Build a pitch deck in Claude Design"
"Help me prep before I open Claude Design"
"I'm burning my Claude Design quota too fast"
"Set up a design system for [brand]"
"Need a launch video using Hyperframes"

It does not fire on adjacent work that belongs elsewhere:

"Build a React component"           →  frontend-design
"Design a Postgres schema"           →  regular Claude
"Help me think through a PRD"        →  bmad-prd-creator
"What colors should my brand use?"   →  regular Claude (brainstorming)

Installation

Clone the repo and place the design-brief-architect folder into your Claude skills directory:

git clone https://github.com/MuddySheep/Claude-Design-Master-Skill.git
cp -r Claude-Design-Master-Skill/design-brief-architect ~/.claude/skills/

The exact target path depends on your Claude environment — Claude.ai, Claude Code, Cowork, or Claude Desktop all use slightly different skill locations. Check your environment's skill documentation for the correct directory. The skill folder name (design-brief-architect) stays consistent so the skill loads cleanly wherever it lands.

What's inside

Claude-Design-Master-Skill/
├── README.md                       This file
├── LICENSE                         MIT
└── design-brief-architect/         The skill — drop this folder into your skills directory
    └── SKILL.md

Credits

Methodology The principles encoded here come from the Claude Design master class produced by Nate Herk — original source for the design-system-first ordering, the five-tier iteration ladder, the model-by-quota strategy, and the exit-condition heuristics.

Hyperframes The motion-graphics framework referenced for animation builds, built by HeyGen. The skill points users to it as one of several framework options when an animation is involved.

Refined and tested by The skill was distilled, structured, and validated against real Claude Design build sessions by @pitchautopsy.

License

MIT — see LICENSE.

---

_{Built for the gap between idea and Claude Design. Keeps the weekly quota intact.}