design-brief
Create a design brief through an interactive interview, codebase exploration, and experience design decisions. Saved as a markdown file in the project. Use when user wants to write a design brief, plan a new feature or page, define a UI direction, or mentions "brief".
Security Assessment
About design-brief
The `design-brief` skill is designed to help users create comprehensive design briefs through a guided, interactive process. It addresses the challenge of translating user goals, existing systems, and constraints into a structured document that can guide design decisions. By combining interviews, codebase exploration, and detailed analysis, it ensures that the design direction is well-informed, coherent, and aligned with user needs and existing resources.
The skill's main capabilities include conducting an in-depth interview with the user to capture the project context, objectives, and constraints, exploring the codebase to understand existing UI components, design tokens, frameworks, and dependencies, and synthesizing this information into a structured brief. It also provides step-by-step guidance through critical design decisions such as user goals, success metrics, emotional tone, content considerations, and design inspirations. The output is organized into a markdown file stored in a consistent folder structure for each feature or page.
This skill is particularly useful for product designers, UX/UI teams, and developers planning new features or interfaces. Typical use cases include writing a brief for onboarding flows, settings pages, dashboards, or marketing landing pages. By capturing both strategic and practical aspects of design, the skill helps teams create a shared understanding, streamline design workflows, and maintain consistency across projects.
FAQ
How do I start creating a design brief with this skill?
You begin by providing a detailed description of the feature or page you want to design, including the target users, objectives, and any constraints or ideas you already have. The skill will then guide you through further questions and codebase exploration.
What kind of codebase information does the skill analyze?
It looks for CSS variables, Tailwind configurations, UI framework themes (Material UI, Chakra, etc.), component directories, Storybook files, design tokens, font usage, and existing pages or layouts to understand the current design patterns.
Where is the design brief saved?
The brief is saved as a markdown file in `.design/<feature-slug>/DESIGN_BRIEF.md`, where `<feature-slug>` is a lowercase, hyphenated name based on the feature or page.
Can I skip steps in the interview process?
Yes, steps can be skipped if they are not relevant, but the skill encourages covering all critical aspects to ensure a complete understanding of the design requirements.
Which other skills can use the design brief output?
Subsequent skills like information-architecture, design-tokens, brief-to-tasks, and design-review read from and write to the same subfolder, ensuring continuity in the design workflow.
Install design-brief
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
julianoczkowski/designer-skills