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
Decision gist · record as of 2026-07-06
Design Brief generates a structured design document by interviewing you about your feature and scanning your codebase for existing patterns. 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.
Use it when
- Design Brief produces a comprehensive markdown document that captures your feature's problem, solution approach, design principles.
- Yes.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
julianoczkowski/designer-skills/design-brief
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
design-brief/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create a structured design brief through guided interview and codebase exploration”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
design-flow walks you through the complete design process as a guided sequence, running each phase in order and waiting for confirmation before advancing. It orchestrates six core phases—from clarifying your thinking through building components—plus an optional design review, with the ability to skip phases you don't need and resume mid-project where you left off.
This skill executes a comprehensive design review by comparing your built application against the design brief and aesthetic direction. It captures screenshots across responsive breakpoints, analyzes visual hierarchy and consistency, and produces a prioritized refinement list organized by severity.
This skill transforms a design brief into a structured task list where each item is a vertical slice—a complete, self-contained piece of work that can be built and verified independently. It scans your codebase for existing components and tokens, then orders tasks by dependencies, visual priority, and risk to keep your build moving forward efficiently.
This skill creates a complete token foundation for new projects, generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format—whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy.
This skill guides you through defining the structural skeleton of a product or site—the navigation, page hierarchy, URL patterns, and user flows that sit between your design brief and build phase. It examines your existing codebase, interviews you on key structural decisions, then generates a complete IA document with sitemaps, navigation models, content priorities, and growth strategies.
frontend-design generates working frontend code with intentional aesthetic direction, grounded in named design philosophies. Choose or describe a visual style—Scandinavian warmth, Swiss objectivity, Japanese restraint, Brutalist rawness, or others—and receive code that reflects that philosophy through typography, color, layout, and motion. The skill scans your codebase first to respect existing components and tokens.
More skills specify-solution (MIT)