design-brief

Design Brief Generator

You are creating a design brief that will guide all subsequent frontend implementation. This brief establishes the aesthetic DNA of the interface before any code is written.

Process

Step 1: Context Assessment

Before generating the brief, understand:

• What is being built? (landing page, dashboard, portal, component library, full app)
• Who uses it? (developers, executives, consumers, internal team)
• What tone? (premium, playful, utilitarian, editorial, brutalist)
• Existing assets? Check for design-system.md, CLAUDE.md, tailwind.config.*, globals.css
• Framework? (Next.js, Astro, Vite, plain HTML)

Read existing project files to understand conventions before proposing anything new.

Step 2: Aesthetic Direction

Commit to a BOLD direction. Pick one and own it:

• Brutally minimal — maximum whitespace, few elements, dramatic typography
• Maximalist density — information-rich, controlled chaos, layered
• Retro-futuristic — vintage typography meets modern layout
• Organic/natural — soft forms, earth tones, flowing layouts
• Luxury/refined — restrained elegance, generous spacing, premium feel
• Editorial/magazine — strong grid, typographic hierarchy, image-forward
• Brutalist/raw — exposed structure, monospace, raw materials
• Industrial/utilitarian — functional, systems-thinking, tool aesthetic
• Art deco/geometric — patterns, symmetry, decorative geometry

The key is intentionality, not intensity. Bold maximalism and refined minimalism both work — what fails is the generic middle ground.

Step 3: Generate the Brief

Output a structured design brief as a markdown file with these sections:

# Design Brief: [Project Name]

## Aesthetic Direction
[2-3 sentences describing the chosen direction and why it fits this project]

## Typography System
- **Display font**: [specific font + weight + tracking]
- **Body font**: [specific font + weight + tracking]
- **Scale ratio**: [e.g., Major Third 1.25]
- **Key sizes**: hero, h1, h2, h3, body, label, caption
- **Tracking map**: [size → tracking value]

## Color Palette
- **Primary**: [hex + usage]
- **Secondary**: [hex + usage]
- **Neutral scale**: [base gray + warm/cool/true]
- **Semantic**: success, warning, error, info
- **Dark mode strategy**: [purpose-built / not needed / follows system]

## Motion Language
- **Page load**: [orchestration strategy]
- **Hover/press**: [feedback approach]
- **Transitions**: [timing + easing defaults]
- **Loading**: [shimmer / skeleton / progressive]
- **Scroll**: [entrance animations / parallax / none]

## Spatial System
- **Grid**: [columns, gutter, max-width]
- **Spacing unit**: [4px / 8px base]
- **Key spacing values**: [component padding, section gaps, page margins]

## Component Patterns
- **Cards**: [style approach — bordered, elevated, recessed]
- **Buttons**: [primary, secondary, ghost treatments]
- **Inputs**: [border style, focus treatment]
- **Status indicators**: [badges, dots, borders]

## Anti-Patterns (Do NOT)
[3-5 specific things to avoid for this project]

## Reference
[If user provided screenshots or references, note what to take from each]

Step 4: Validate

After generating, check:

• Does it pass the anti-slop test? (No Inter-on-white-with-purple-gradients)
• Is the direction bold enough to be memorable?
• Are typography choices specific (exact fonts, not "a serif font")?
• Are color values concrete (hex codes, not "a warm palette")?
• Does motion language match the aesthetic? (Minimal design → subtle motion)
• Would someone recognize this project by its design alone?

Step 5: Save

Save the brief to the project root as DESIGN-BRIEF.md so all subsequent work references it.

Integration with Project Design Systems

If the project already has a design system (design-system.md, tailwind.config.*, globals.css):

• Don't replace it — extend and refine
• Note which tokens already exist and which need adding
• Flag any conflicts between the brief and existing system
• The existing system takes precedence for established patterns

If no design system exists:

• The brief becomes the foundation for one
• Recommend creating design-system.md from the brief after approval