design-brief
Skill1 starsChanged 3 months agoMITView on GitHub
Turn a vague feature idea into an approved design brief — a file recording the intent, every decision made (with why and cost-if-wrong), scope boundaries, exact interfaces, and constraints — that task-executor, backlog-planner, and autopilot then consume as the spec. Produces decisions, not code; nothing is implemented. Use this skill whenever the user says "brainstorm this", "let's design this first", "think through this feature with me", "spec this out", "I have an idea for", "how should we build", "before we plan this", or "/design-brief" — even if they don't name the skill. Not for a task that already has a clear spec (task-executor), a bug (diagnose), or turning a decided design into tasks (backlog-planner). Among the design-first skills this one produces a durable spec FILE and stops — use `plan-and-build` when the same conversation should end in working code, and `grill-with-docs` when an existing plan needs stress-testing against the domain rather than a new brief.
22 other projects use a version of this.
Adopted by
Most recently taken up by
- podo/design-agent-skillstheir own version, first seen Nov 8, 2026
- ANT1OFF/gramtheir own version, first seen Nov 8, 2026
- drinkspiller/skillstheir own version, first seen Nov 6, 2026
- whanoftheworld/graphic-skillstheir own version, first seen Oct 25, 2026
- toribryan/design-skillstheir own version, first seen Oct 25, 2026
- taro1037-design/claude-skillstheir own version, first seen Oct 20, 2026
Used with
Projects with it also use brief-to-tasks, design-flow and 7 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
julianoczkowskiSkillbrief-to-tasks
Break a design brief into an ordered checklist of independently buildable tasks using vertical slices. Saves as a markdown checklist. Use when user wants to break down work, create tasks from a brief, plan implementation order, or mentions "tasks" or "breakdown".
Also in 7 projects that use this
julianoczkowskiSkilldesign-flow
Run the full design-to-build workflow as a guided sequence. Orchestrates all designer skills in order, from grilling through review. Use when user wants to go through the complete design process, start a project from scratch, run the full flow, or mentions "design flow" or "full workflow".
Also in 6 projects that use this
45ckSkillinformation-architecture
Define the information architecture for a prototype -- sitemap, navigation model, grouping logic, labeling, and action placement.
Also in 8 projects that use this
ilikescienceSkilldesign-tokens
Expert in design tokens using the DTCG specification. Use this skill when users ask about design tokens, DTCG format, token validation, formatting, transformation, color spaces (sRGB, Display P3, OKLCH), references and aliasing, resolvers, theming with modifiers/contexts, multi-platform design systems, accessibility, or working with tools like jq, jsonata, and terrazzo. Helps with token file creation, resolver configuration, structure, naming conventions, and best practices.
Also in 8 projects that use this
launchapp-devSkillcolor-system
Build a comprehensive color system with palette generation, semantic mapping, and accessibility compliance.
Also in 3 projects that use this
dillonluiSkilldesign-review
Review a view or flow for UX and UI issues. Provides severity-ranked, actionable findings grounded in established design heuristics. Use when the user asks for design feedback, UX review, or UI critique.
Also in 7 projects that use this
Other versions22 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 22
- julianoczkowski/designer-skills★ 536same name
- Abhinavbwj/Urban-Design-Skills-Claude★ 131same name
- launchapp-dev/animus-cli★ 39same name
- mshadmanrahman/claude-for-designers★ 32same name
- podo/design-agent-skills★ 32same name
- jhy0285/monofield★ 6same name
- BhaskarManam/pstack★ 4same name
- Nihalgraphics/AI-Product-OS-for-UI-UX-Brand-Prototype★ 2same name
- ANT1OFF/gram★ 1same name
- drinkspiller/skills★ 1same name
12 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository38 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- api-contract-reviewSkill
- autopilotSkill
- backlog-plannerSkill
- codebase-explainerSkill
- code-reviewSkill
- context-dietSkill
- conventional-commitsSkill
- create-prSkill
- diagnoseSkill
- dotnet-conventionsSkill
- dotnet-onion-apiSkill
- draw-optionsSkill
- e2e-verifySkill
- githubSkill
- goal-runnerSkill
- grill-with-docsSkill
- handoffSkill
- humanizerSkill
- improve-codebase-architectureSkill
- maestro-mobile-testSkill
- migration-safetySkill
- model-inventorySkill
- nextjs-app-routerSkill
- plan-and-buildSkill
- record-browser-testSkill
- regression-huntSkill
- safe-refactorSkill
- security-reviewSkill
- ship-itSkill
- sql-reviewSkill
- task-executorSkill
- tauri-2-appSkill
- think-like-fableSkill
- upgrade-depsSkill
- worktree-sandboxSkill
- write-a-skillSkill
- write-testsSkill
The file
We split this skill into the rules it gives an agent
7 rules. 0 are common, 3 are distinctive, and 4 are very specific to this project.
0
Common
Most of the 19 edited versions we read keep these.
3
Distinctive
This author's own choices. Worth a look.
4
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 17
Do not auto-trigger when the task already has a clear spec (task-executor), something is broken (diagnose), the friction is in existing …
- Distinctive: line 35
Before each phase, restate the intent line.
- Very specific: line 40
Read CONTEXT.md / CONTEXT-MAP.md if present — its terms are canonical.
- Distinctive: line 41
Write the intent line. Can't fill the "so that" blank from what the user said → that is question #1.
- Distinctive: line 68
Exit gate: every topic is answered by the user, answered by code with a citation, or explicitly deferred by the user into Open questions.
- Very specific: line 82
Write the brief as DRAFT with every section filled.
- Very specific: line 86
A brief-less outcome is valid: If Phase 1–2 show the idea is one change to an existing flow with no fork and no new interface, say so and …
“Common” is measured: kept by at least 6 in 10 of the 19 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Design Brief
Turn "I have an idea" into a design the team has actually agreed on, written down where the executing skills can read it. The brief records decisions, not ideas — a brainstorm that ends without decisions has produced nothing an executor can use. This skill never writes code.
When to use this skill
- "brainstorm this", "let's design this first", "think through this feature with me"
- "spec this out", "I have an idea for …", "how should we build …", "before we plan this"
/design-brieftask-executorclassified a task as architectural, orbacklog-plannerfound the idea undecided — both route here.
Do not auto-trigger when the task already has a clear spec (task-executor), something is broken (diagnose), the friction is in existing code rather than a new feature (improve-codebase-architecture), or the design is decided and only needs splitting into tasks (backlog-planner).
The brief contract
Path: .claude/design-briefs/<slug>.md in the project root (create the directory if missing; slug = 2–5 kebab-case words naming the feature). Every brief has these sections, in this order, none omitted — an empty section says none and why:
- Status —
DRAFTorAPPROVED <date>. Only the user's explicit approval flips it. - Intent — one line: "this needs
___so that___", plus how we'll know it worked (an observable signal, not "users are happier"). - Decisions — table: question → decision → why → cost if wrong. Every fork the interview resolved is a row. A decision without a why is a preference, not a decision.
- Scope — in / out, as two lists. "Out" is where the ideas that didn't make the cut live, so they're not lost and not built.
- Interfaces — exact names, signatures, endpoints, tables, events the new work exposes or consumes.
Produces:/Consumes:lines, verbatim-ready forbacklog-planner. - Constraints — project-wide rules that bind every task (version floors, layering rules, platform targets), one line each, values verbatim.
- Precedent — the existing feature this one follows, with
file:line, or "no precedent found — searched<paths>for<terms>". - Considered alternative — present when Design It Twice ran:
<approach B>— rejected because<one line>. - Open questions — must be empty before
APPROVED. An approved brief with open questions is a draft wearing a badge.
Workflow
Before each phase, restate the intent line. If the phase isn't serving it, stop and say so.
Phase 0 — Anchor
- List
.claude/design-briefs/and read the Status and Intent line of every file there. One matches this subject → resume it (list its open questions, continue from there); never start a duplicate under a new slug. - Read
CONTEXT.md/CONTEXT-MAP.mdif present — its terms are canonical; a conflict between the user's words and the glossary is the first thing to resolve. - Write the intent line. Can't fill the "so that" blank from what the user said → that is question #1.
Phase 1 — Read the code before asking
Find the nearest thing that already exists — a sibling feature, entity, endpoint, or screen — and read it end to end. Every answer the code gives is recorded with a file:line citation instead of asked. A claim about code you haven't opened is a hypothesis and is labeled one.
- ❌ "How do you usually handle authorization on endpoints?" — the answer is in
src/middleware/auth.ts; asking wastes a turn and invites a wrong answer. - ✅ "Endpoints here check
requireRole()in the route file (src/routes/orders.ts:14). I'll assume the same unless this one is different — is it?"
Phase 2 — Interview
One question at a time via AskUserQuestion, 2–4 concrete options, recommended pick first. Wait for the answer before the next question.
A question earns its slot only if different answers lead to different designs. Before asking, name to yourself what changes per answer. Nothing changes → don't ask.
- ❌ "Should this be secure and handle errors gracefully?" — every answer is "yes"; nothing forks.
- ✅ "When an order loses priority, do we keep who set it and when?" — "yes" is an audit table, "no" is two columns. The answer picks the schema.
Rules:
- Sharpen fuzzy words. "Account" → customer or user? "Cancel" → soft-delete, hard-delete, or status transition?
- Probe with scenarios. "What happens if they submit twice while the first request is in flight?" Edge cases force precision.
- Surface contradictions with the code. "Your
OrderService.Cancelcancels the whole order (src/services/order.ts:88); you just described partial cancellation. Which wins?" - Record each answer as a Decisions row immediately — with the why the user gave. Ask for the why if they didn't give one.
Topics to cover, skipping any the code or the user already answered: intent · inputs/outputs and error cases · domain entities touched (new vs. extended) · authorization and tenancy · persistence and backfill · side effects (email, queue, audit, cache, webhooks) · concurrency and idempotency · edge cases (empty, max, unicode, timezone, partial failure) · observability.
Exit gate: every topic is answered by the user, answered by code with a citation, or explicitly deferred by the user into Open questions. Stop the moment further questions stop changing the design.
Phase 3 — Design fork gate
Ask: is there a genuine design choice the codebase precedent doesn't already settle? Name the axis in one sentence ("new OrderAuditLog table vs. two columns on Orders"). Can't name it cleanly → no fork → single design, move on. Don't manufacture a fork for ceremony.
Design It Twice (only when the axis is named):
- Send a single message with 2
Agentcalls (general-purpose), each carrying the Decisions table, Phase 1 precedent findings, the axis, and one side to defend: "Draft the best design for your side: files by layer, interfaces, migration if any, test plan by test name, and why it beats the alternative on this codebase — citefile:line. ≤700 words. Do not write files." IfAgentis unavailable, draft both yourself under the same instructions. - Debate inline: 3 things A does better · 3 things B does better · the recommendation in one paragraph, naming the Phase 1/2 evidence that broke the tie.
- The winner becomes the brief; the loser becomes the Considered alternative line.
Phase 4 — Write, present, approve
- Write the brief as
DRAFTwith every section filled. - Present a condensed summary inline (intent, decision count, interfaces, alternative if any, open questions) and ask: approve, change, or drop?
- Approve → set
APPROVED <date>, report the path, and name the next step: one PR-sized change →task-executorwith the brief as its spec; several tasks →backlog-plannerreads the brief and writes the roadmap tasks. Change → back to the phase the change belongs to; re-present. Drop → keep the file asDRAFTwithDropped: <reason>under Status — the decisions stay findable. Never edit anAPPROVEDbrief silently — a change after approval is a newDRAFTrevision with the old decision struck through and the new one dated.
A brief-less outcome is valid. If Phase 1–2 show the idea is one change to an existing flow with no fork and no new interface, say so and hand straight to task-executor — the interview was the spec.
Examples
Example 1: Undecided feature
User: "I have an idea — let users pin orders to the top of their list."
Claude: Reads the existing list endpoint and sort logic (src/routes/orders.ts:31), finds no priority concept. Asks whether pinning is per-user or per-order, then whether pin history matters (audit table vs. one column). Names the fork, runs Design It Twice, recommends the single column citing the codebase's other per-user flags. Writes .claude/design-briefs/pin-orders.md, presents the summary, user approves → suggests backlog-planner for the three resulting tasks.
Example 2: Routed in from task-executor
User: "Work on task: move notifications to a queue."
Claude (in task-executor): classifies as architectural → hands here. This skill anchors on the intent, interviews on delivery guarantees, retry, and ordering, writes the brief, gets approval, then task-executor resumes with the brief as its spec.
Anti-patterns
- ❌ Asking the checklist top to bottom regardless of answers — a question whose answer changes nothing is filler.
- ❌ Asking what the code already answers — read the precedent first, cite it, confirm only the deviation.
- ❌ Ending with a list of ideas and no Decisions rows — that's a brainstorm transcript, not a brief; nothing downstream can execute it.
- ❌ Marking
APPROVEDbecause the user said "sounds good" to the summary while Open questions is non-empty. - ❌ Writing code, a migration, or "a quick prototype to check feasibility" — feasibility is a
task-executorspike; this skill ends at the approved file. - ❌ Running Design It Twice on a choice the codebase already made — one precedent slice beats two sub-agent essays.
- ✅ Code read first, forking questions only, decisions with their why, exact interfaces, one approved file, then hand off.
Notes
- Composes with:
task-executor(consumes the brief as its spec; routes architectural tasks here),backlog-planner(turns an approved brief into roadmap tasks),autopilot(consumes anAPPROVEDbrief as its spec; an architectural task without one is a hard stop there — the brief is the route back),think-like-fable(interview rigor). - Briefs are project-scoped and should be git-ignored or committed deliberately — an approved brief committed next to the code is a lightweight ADR.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

