Gather design context for this project, then persist it for all future sessions.
Step 1: Explore the Codebase
Before asking questions, thoroughly scan the project to discover what you can:
- README and docs: Project purpose, target audience, any stated goals
- Package.json / config files: Tech stack, dependencies, existing design libraries
- Existing components: Current design patterns, spacing, typography in use
- Brand assets: Logos, favicons, color values already defined
- Design tokens / CSS variables: Existing color palettes, font stacks, spacing scales
- Any style guides or brand documentation
Note what you've learned and what remains unclear.
Step 2: Ask UX-Focused Questions
{{ask_instruction}} Focus only on what you couldn't infer from the codebase:
Users & Purpose
- Who uses this? What's their context when using it?
- What job are they trying to get done?
- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.)
Brand & Personality
- How would you describe the brand personality in 3 words?
- Any reference sites or apps that capture the right feel? What specifically about them?
- What should this explicitly NOT look like? Any anti-references?
Aesthetic Preferences
- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.)
- Light mode, dark mode, or both?
- Any colors that must be used or avoided?
Accessibility & Inclusion
- Specific accessibility requirements? (WCAG level, known user needs)
- Considerations for reduced motion, color blindness, or other accommodations?
Skip questions where the answer is already clear from the codebase exploration.
Step 3: Write Design Context
Synthesize your findings and the user's answers into a ## Design Context section:
## Design Context
### Users
[Who they are, their context, the job to be done]
### Brand Personality
[Voice, tone, 3-word personality, emotional goals]
### Aesthetic Direction
[Visual tone, references, anti-references, theme]
### Design Principles
[3-5 principles derived from the conversation that should guide all design decisions]
Write this section to {{config_file}} in the project root. If the file exists, append or update the Design Context section.
Confirm completion and summarize the key design principles that will now guide all future work.
1---2name: design-brief3description: One-time setup that gathers design context for your project and saves it to your config file. Run once to establish persistent design guidelines.4---56Gather design context for this project, then persist it for all future sessions.78## Step 1: Explore the Codebase910Before asking questions, thoroughly scan the project to discover what you can:1112- **README and docs**: Project purpose, target audience, any stated goals13- **Package.json / config files**: Tech stack, dependencies, existing design libraries14- **Existing components**: Current design patterns, spacing, typography in use15- **Brand assets**: Logos, favicons, color values already defined16- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales17- **Any style guides or brand documentation**1819Note what you've learned and what remains unclear.2021## Step 2: Ask UX-Focused Questions2223{{ask_instruction}} Focus only on what you couldn't infer from the codebase:2425### Users & Purpose26- Who uses this? What's their context when using it?27- What job are they trying to get done?28- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.)2930### Brand & Personality31- How would you describe the brand personality in 3 words?32- Any reference sites or apps that capture the right feel? What specifically about them?33- What should this explicitly NOT look like? Any anti-references?3435### Aesthetic Preferences36- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.)37- Light mode, dark mode, or both?38- Any colors that must be used or avoided?3940### Accessibility & Inclusion41- Specific accessibility requirements? (WCAG level, known user needs)42- Considerations for reduced motion, color blindness, or other accommodations?4344Skip questions where the answer is already clear from the codebase exploration.4546## Step 3: Write Design Context4748Synthesize your findings and the user's answers into a `## Design Context` section:4950```markdown51## Design Context5253### Users54[Who they are, their context, the job to be done]5556### Brand Personality57[Voice, tone, 3-word personality, emotional goals]5859### Aesthetic Direction60[Visual tone, references, anti-references, theme]6162### Design Principles63[3-5 principles derived from the conversation that should guide all design decisions]64```6566Write this section to {{config_file}} in the project root. If the file exists, append or update the Design Context section.6768Confirm completion and summarize the key design principles that will now guide all future work.
kazdenc