bi-agents/_bmad/wds/data/agent-guides/saga/inspiration-analysis.md

Inspiration Analysis Workshop (Product Brief)

When to load: After Visual Direction, as final Product Brief companion document Agent: Saga or Freya

---

Why This Matters

Without documented visual/UX preferences from real examples, Dream Up agents must guess what the client likes. This causes:

• Wasted iterations where client says "not that style" after seeing output
• Abstract feedback ("make it more modern") that's impossible to action precisely
• Misalignment between what the agent generates and what the client envisioned
• Lost time in later phases correcting direction that could have been captured early

The power of this document: When a client says "I like that layout" pointing at a real site, you now have a concrete, documented reference. Not abstract words — a real example with specific elements they approved or rejected.

For Dream Up quality: Every future generation can self-review against documented preferences. "Did I follow the layout principle from Site 1 that the client liked? Did I avoid the pattern from Site 2 they rejected?"

---

What We Need to Know

Satisfaction criteria — by the end you should have:

1. Documented reactions to real sites — specific elements liked/disliked with WHY
2. Visual style preferences — from concrete examples, not abstract descriptions
3. Layout and structure patterns — what arrangements appeal to the client
4. UX patterns — what interaction patterns they prefer
5. Anti-patterns — what they've explicitly rejected (with examples)
6. Synthesized design principles — strategic takeaways that guide all future design

Quality bar:

• At least 2 sites analyzed (more if client provides them)
• For each site: specific elements with client's reaction (not vague overall impression)
• Synthesized principles clear enough for a Dream Up agent to self-review against
• Client confirms: "Yes, this captures what I'm looking for"

---

The Process

Getting URLs

Ask the client for 2-4 sites they find inspiring. These could be:

• Sites with layout/structure they like
• Competitor sites (to learn what works and doesn't)
• Sites with visual style they admire
• Sites with UX patterns they want to adopt

If client is hesitant: Even one site with one thing they like is valuable. Don't require perfection — any concrete reference beats abstract descriptions.

If client has no references: Offer to find 2-3 examples in their industry. Show them and ask for reactions.

Analyzing Each Site

Step 1: Load the site — use browser/WebFetch tools to see what the client sees.

Step 2: Ask open first — "What drew you to this site?" / "What do you like about it?" Let the client lead.

Step 3: Get specific — naturally ask about elements you can see on the site. Don't use a checklist. Ask about what's actually there:

• Their layout approach
• How they handle navigation
• How content is displayed
• Visual style and imagery
• Specific elements (maps, forms, testimonials, etc.)
• Performance and load feel

Step 4: Capture nuance — listen for:

• Approval ("like that") — document what specifically and why
• Rejection ("don't like that") — document what and why not
• Conditional ("like but...") — document the adaptation needed
• The WHY behind each reaction is more valuable than the reaction itself

Step 5: Extract principles — as patterns emerge across sites, identify strategic takeaways. Test your understanding: "I'm noticing you prefer X — is that fair?"

Synthesizing

After all sites are analyzed, organize findings into design principles by category:

• Layout patterns (to use / to avoid)
• Content hierarchy (priorities / anti-patterns)
• Visual style (direction / what to avoid)
• UX patterns (interactions / anti-patterns)

Confirm with client: "Based on what you liked and didn't like, here's what I'm taking away. Does this capture your vision?"

---

Types of Information to Surface

Layout and structure:

• Single-page vs multi-page preference
• Section organization and flow
• Content density (busy vs minimal)
• White space usage

Navigation and UX:

• Menu style (simple vs complex)
• How key actions are accessed (contact, booking, etc.)
• Mobile behavior
• Scroll behavior

Visual style:

• Color palette impression
• Typography feel (modern, classic, etc.)
• Photo style (real vs stock, dark vs light)
• Overall aesthetic (minimal, rich, corporate, casual)

Content display:

• How services/features are shown (grid, list, cards)
• Testimonial/review presentation
• How contact info is displayed
• Map and location presentation

Performance and feel:

• Loading speed impression
• Animation and movement
• Overall "feel" (fast, heavy, smooth, clunky)

---

What to Document

Create inspiration-analysis.md in the Product Brief output folder.

For each site:

## Site: [Name or URL]

### What Client Liked
- [Specific element] — [Why it works for them]
- [Specific element] — [Why it works]

### What Client Didn't Like
- [Specific element] — [Why it doesn't work]

### Adaptations Needed
- [Element] — [Like the concept but needs modification because...]

### Principles Extracted
- [Strategic takeaway from this site]

Synthesis:

## Design Principles (from all sites)

### Layout
- DO: [Patterns to follow]
- DON'T: [Patterns to avoid]

### Content Hierarchy
- DO: [How to prioritize]
- DON'T: [What not to do]

### Visual Style
- DO: [Visual direction]
- DON'T: [What to avoid]

### User Experience
- DO: [UX patterns to adopt]
- DON'T: [Anti-patterns]

Usage note at the end:

## How to Use This Document

**For Scenario Outlining (Phase 4):**
Reference layout patterns when designing user flows

**For Page Design (Phase 5):**
Use extracted principles as design checklist.
Reference "What Client Liked" for visual direction.
Avoid "What Client Didn't Like" patterns.

**For Dream Up self-review:**
Check generated output against documented preferences.

---

Red Flags

"I like everything about it" → Nothing is perfect. Probe: "Even if we could copy it exactly, what would you adjust for your business?"

"I hate everything" → Something drew them to share it. Ask: "What made you think of this site initially?"

Contradictory preferences → Different contexts may drive different preferences. Explore: "These sites have very different approaches — what draws you to each?"

Overly technical feedback ("Great CSS grid implementation") → Redirect to user value: "What does that achieve for visitors that you like?"

Brand name dropping ("Make it like Apple") → Probe specifics: "What specifically about Apple's approach appeals to you? The minimalism? The product focus? The typography?"

---

Success Criteria

You've succeeded when:

• Client has reacted to specific visual/UX elements from real examples
• Preferences are documented with concrete references (not abstract words)
• Design principles are clear and actionable
• Anti-patterns are explicitly documented
• Client confirms the synthesis captures their vision

Dream Up agents can now:

• Reference documented preferences during generation
• Self-review against specific approved examples
• Avoid patterns the client explicitly rejected
• Design with confidence they're aligned

---

Concrete examples beat abstract descriptions every time. This document turns "make it modern" into "like Site A's single-page layout with fixed contact header, but simpler than Site B's cluttered services grid."