design-brief
design brief
What it does
- "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"
- CSS variables / tokens: files named tokens.css, variables.css, theme.css, or :root declarations with custom properties
- Tailwind config: tailwind.config.js or tailwind.config.ts, check theme.extend for custom values
- UI framework themes: Material UI createTheme, Chakra extendTheme, shadcn globals.css and components.json
Requirements & configuration
- "I need to plan a settings page before I start building"
- Design token files: JSON token files (Style Dictionary format, Figma token exports)
- A list of the UI components this feature requires. For each, note whether it exists already, needs modification, or is new.
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
design-brief FAQ
What does the design-brief skill do?
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". "Write a brief for the onboarding flow" "I need to plan a settings page before I start building"
What does design-brief require?
"I need to plan a settings page before I start building" Design token files: JSON token files (Style Dictionary format, Figma token exports) A list of the UI components this feature requires. For each, note whether it exists already, needs modification, or is new.
How do I install design-brief?
Run: npx -y skills add https://github.com/julianoczkowski/designer-skills --skill design-brief --agent claude-code — the source lives at github.com/julianoczkowski/designer-skills.
Maintain design-brief?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[design-brief on getagentictools](https://getagentictools.com/skills/julianoczkowski-designer-skills-design-brief?ref=badge) npx agentictools info skills/julianoczkowski-designer-skills-design-brief The second line is the CLI lookup for this page — handy in READMEs and docs.
