Design Brief Template

Why a Design Brief?

Without structure, AI generates generic designs. A brief constrains the output to match your brand, audience, and goals — reducing iteration cycles from 10+ to 2-3.

What A Brief Actually Fixes

A good brief prevents four common failures:

• the wrong audience language
• the wrong page structure
• the wrong visual tone
• the wrong implementation constraints

If any of those are missing, the model fills gaps with generic startup defaults.

The Universal Design Brief

Copy and fill in the placeholders:

# Website Design Brief

## Brand
- Name: [Brand Name]
- Industry: [e.g., SaaS, Agency, E-Commerce, Portfolio]
- Personality: [3 adjectives, e.g., "modern, trustworthy, energetic"]
- Tone: [formal / casual / playful / technical]

## Target Audience
- Primary: [e.g., "CTOs at mid-size companies, 35-50, tech-savvy"]
- Pain point: [What problem are they solving?]
- Decision drivers: [Price? Trust? Features? Speed?]

## Visual Direction
- Style: [Apple-minimal / Bold-creative / Swiss-clean / Brutalist / Editorial]
- Color mood: [warm / cool / neutral / vibrant / muted]
- Primary color: [hex or description, e.g., "deep blue #1e40af"]
- Dark mode: [yes / no / optional]
- Reference sites: [2-3 URLs for inspiration]

## Page Structure
- Type: [Landing page / Multi-page / Dashboard / Blog]
- Sections needed: [hero, features, pricing, testimonials, cta, footer]
- Priority content: [What should visitors see first?]
- CTA goal: [signup / demo / purchase / contact]

## Technical Constraints
- Framework: [Tailwind CSS / Tailwind + Astro / Next.js]
- Must be: [responsive / accessible / SSR-safe]
- No: [heavy animations / JavaScript frameworks / external dependencies]

## Content Hints
- Headline style: [short & punchy / descriptive / question-based]
- Imagery: [abstract / photography / illustrations / icons-only]
- Social proof: [logos / testimonials / stats / none]

Quick Brief (Minimal Version)

For fast prototyping when you don’t need the full template:

Build a [page type] for [brand/industry].
Style: [1-2 words]. Colors: [primary color] on [light/dark] base.
Sections: [comma-separated list].
Must: responsive, Tailwind-only, accessible.
No: [constraints].
Vibe: [1 reference site URL].

Weak Brief vs. Strong Brief

Weak brief

Build a modern homepage for our company.

Why it underperforms:

• “modern” is too vague
• no audience is defined
• no CTA or business goal is stated
• no technical limits are given

Strong brief

Build a landing page for a B2B workflow automation SaaS.
Audience: operations managers at 50-200 person companies.
Tone: modern, efficient, trustworthy.
Goal: drive demo requests.
Sections: hero, features, integrations, testimonials, pricing, faq, cta.
Must be: Tailwind-only, responsive, accessible, no client-side JS for layout.
Visual direction: neutral base, one electric-blue accent, product UI screenshot in hero.

Why it works:

• the business context is clear
• the visitor and CTA are explicit
• the section plan is constrained
• the build constraints reduce rework

Example: Filled Brief

# Website Design Brief

## Brand
- Name: Nexflow
- Industry: SaaS (workflow automation)
- Personality: modern, reliable, efficient
- Tone: professional but approachable

## Target Audience
- Primary: Ops managers at 50-200 person companies, 30-45
- Pain point: Manual processes eating team bandwidth
- Decision drivers: Time savings, ease of setup, integrations

## Visual Direction
- Style: Apple-minimal
- Color mood: cool neutral
- Primary color: oklch(55% 0.18 250) — electric blue
- Dark mode: yes
- Reference sites: linear.app, vercel.com

## Page Structure
- Type: Landing page
- Sections: hero, logo-cloud, features (3-col), how-it-works, pricing, testimonials, cta, footer
- Priority content: Hero with product screenshot + value prop
- CTA goal: Start free trial

## Technical Constraints
- Framework: Tailwind CSS v4
- Must be: responsive, accessible, SSR-safe
- No: client-side JS for layout, external images

## Content Hints
- Headline style: short & punchy ("Automate the busywork")
- Imagery: abstract gradients + product screenshots
- Social proof: logo cloud + 3 testimonials with photos

Combining with Design System Guides

For best results, append a design system guide after the brief:

[Your filled brief above]

Additionally, follow these design principles:
[Paste the Apple HIG system prompt or another design system guide]

This layered approach gives you: What to build (brief) + How it should feel (design system).

Use With Webspire

A brief gets stronger when it names likely pattern families up front.

Example:

Preferred Webspire pattern families:
- hero
- features
- logo-cloud
- pricing
- testimonials
- faq
- cta

That keeps the AI grounded in your actual library instead of inventing random section types.