# Design Brief

Create a design brief through an interactive interview, codebase exploration, and...

- Repository: https://github.com/julianoczkowski/designer-skills (598 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-07-06
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add julianoczkowski/designer-skills --skill design-brief -g -a claude-code -y`
Codex: `npx skills add julianoczkowski/designer-skills --skill design-brief -g -a codex -y`
Cursor: `npx skills add julianoczkowski/designer-skills --skill design-brief -g -a cursor -y`
Gemini CLI: `npx skills add julianoczkowski/designer-skills --skill design-brief -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add julianoczkowski/designer-skills`

## Description

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".

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

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

1. 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.

2. 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 `: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`
   - **Component directories**: `components/`, `ui/`, `shared/`, or any folder containing reusable UI pieces
   - **Storybook**: `.storybook/` directory or `*.stories.*` files indicating a documented component library
   - **Design token files**: JSON token files (Style Dictionary format, Figma token exports)
   - **Package.json UI dependencies**: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc.
   - **Font loading**: Google Fonts links in HTML, `@font-face` declarations, font imports in CSS/config
   - **Existing pages/layouts**: route files, layout components, page templates that show established patterns
   - If components exist, treat them as the starting vocabulary. The brief should extend, not replace.

The rest: https://github.com/julianoczkowski/designer-skills/blob/HEAD/design-brief/SKILL.md