design-brief
Design Brief walks you through a structured conversation to define a new feature or page, then scans your codebase for existing design tokens, components, and patterns. It produces a markdown brief that captures the problem, solution, design principles, aesthetic direction, and component inventory—ensuring your design extends rather than duplicates existing work.
Design Brief generates a structured design document by interviewing you about your feature and scanning your codebase for existing patterns.
AI-generated summary based on this skill's SKILL.md
Install
julianoczkowski/designer-skills/design-brief
git clone https://github.com/julianoczkowski/designer-skills
cp -r designer-skills/design-brief ~/.claude/skills/design-briefFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create a design brief for my new feature?
Design Brief guides you through a structured interview about your feature's purpose, users, and constraints, then analyzes your codebase to identify existing design tokens, components, and patterns. The skill generates a markdown brief that documents the problem statement, proposed solution, design principles, aesthetic direction, and a component inventory—ensuring your design aligns with and extends your existing system rather than duplicating work.
What does Design Brief produce as output?
Design Brief produces a comprehensive markdown document that captures your feature's problem, solution approach, design principles, UI aesthetic direction, and an inventory of components from your codebase that should be reused or extended. This structured brief prevents scope creep and gives your team a shared reference before implementation begins.
Can Design Brief help me plan a new page before coding?
Yes. Design Brief is built for pre-implementation planning. It walks you through defining the page's purpose, user needs, and design decisions through guided conversation, then scans your codebase to surface existing patterns and components you should leverage. The result is a design-ready brief that clarifies scope and aesthetic direction before any code is written.
How does Design Brief use my codebase?
Design Brief explores your codebase to extract design tokens, component definitions, and established patterns. It then references these in your generated brief, ensuring new work respects your existing design system. This analysis prevents duplicate components and helps you maintain consistency across your product.
What is the design brief interview process in this skill?
Design Brief conducts a structured conversation asking about your feature's problem, target users, success metrics, design constraints, and aesthetic preferences. This guided interview captures the reasoning behind your design decisions and feeds into the final brief document, creating a clear record of intent and scope.
Can I use Design Brief to define UI direction and aesthetic principles?
Yes. Design Brief helps you articulate and document UI direction and aesthetic principles for a component or interface through its guided interview and codebase analysis. The resulting brief explicitly captures your aesthetic choices and design principles, giving your team a clear reference for maintaining visual consistency.
SKILL.md
rendered from the published skill — quoted content, verbatim
This skill creates a design brief through structured conversation. You may skip steps if they are not necessary.
Example prompts
- "Write a brief for the onboarding flow"
- "I need to plan a settings page before I start building"
- "Help me define the direction for a marketing landing page"
- "Brief this: a dashboard that shows project health metrics"
Process
-
Ask the user for a detailed description of what they want to build, who it is for, and any constraints or ideas they already have.
-
Explore the existing codebase to understand the current state. Scan for each of the following specifically:
- CSS variables / tokens: files named
tokens.css,variables.css,theme.css, or:rootdeclarations with custom properties - Tailwind config:
tailwind.config.jsortailwind.config.ts, checktheme.extendfor custom values - **UI framework
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
design-brief/SKILL.md