- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24) - apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004) - apps/web: React 19 + Vite 8 (ESM) - libs/shared/api-interface: Zod contract base - Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit - WDS artifacts: - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs) - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact) - Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md - AGENTS.md + README.md como entrada para devs/agentes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
161 lines
3.9 KiB
Markdown
161 lines
3.9 KiB
Markdown
# Golden Circle Framework Guide
|
|
|
|
**Simon Sinek's WHY → HOW → WHAT model for persuasive content sequencing**
|
|
|
|
---
|
|
|
|
## The Golden Circle Model
|
|
|
|
```
|
|
WHY (Core)
|
|
↓
|
|
HOW (Process)
|
|
↓
|
|
WHAT (Proof)
|
|
```
|
|
|
|
---
|
|
|
|
## The Three Levels
|
|
|
|
### WHY - The Purpose, Cause, Belief
|
|
|
|
**Purpose:** Connect emotionally, establish motivation
|
|
|
|
**Questions:**
|
|
- Why does this matter?
|
|
- Why should the user care?
|
|
- What's the emotional truth?
|
|
|
|
**Good WHY Examples:**
|
|
- "Are your clients asking about trends you haven't heard of?" (emotional truth)
|
|
- "You deserve to feel ahead, not behind" (aspiration)
|
|
- "Every stylist feels this—you're not alone" (validation)
|
|
|
|
**Bad WHY Examples:**
|
|
- "Our company was founded in 2018" (not emotional)
|
|
- "TrendWeek is a beauty newsletter" (WHAT, not WHY)
|
|
- "Sign up now" (jumping to action without motivation)
|
|
|
|
**Connects to:**
|
|
- User's driving forces (from Trigger Map)
|
|
- Current emotional state (from Empowerment Frame)
|
|
- The problem or aspiration that matters
|
|
|
|
---
|
|
|
|
### HOW - The Process, Approach, Differentiator
|
|
|
|
**Purpose:** Bridge emotion to specifics, show the method
|
|
|
|
**Questions:**
|
|
- How does this work?
|
|
- How do you do it differently?
|
|
- What's the method?
|
|
|
|
**Example HOW Content:**
|
|
- "Here's how stylists stay ahead: Weekly trend alerts delivered Monday morning"
|
|
- "60-second explainers—understand trends fast enough to use them same day"
|
|
- "Client conversation starters included—no guesswork"
|
|
|
|
**Connects to:**
|
|
- Essential information (Action Filter)
|
|
- Capability framing (Empowerment Frame)
|
|
- The transformation path
|
|
|
|
---
|
|
|
|
### WHAT - The Tangible, Proof, Specifics
|
|
|
|
**Purpose:** Provide concrete details and enable action
|
|
|
|
**Questions:**
|
|
- What exactly do you do/offer?
|
|
- What are the features?
|
|
- What's the concrete evidence?
|
|
|
|
**Example WHAT Content:**
|
|
- "Join TrendWeek—Free for Stylists"
|
|
- "2,000 stylists already ahead"
|
|
- "Start Staying Ahead" (CTA button)
|
|
- "Free. Cancel anytime."
|
|
|
|
**Includes:**
|
|
- Specific features or offers
|
|
- Tangible evidence
|
|
- Social proof
|
|
- The ask/action
|
|
|
|
---
|
|
|
|
## Key Insights
|
|
|
|
**Start with WHY:**
|
|
- People don't buy WHAT you do, they buy WHY you do it
|
|
- Emotion drives decisions, logic justifies them
|
|
- WHY creates connection before presenting solution
|
|
|
|
**Bridge with HOW:**
|
|
- HOW explains the approach that delivers on the WHY
|
|
- Shows your unique method or differentiator
|
|
- Builds confidence in the transformation
|
|
|
|
**Prove with WHAT:**
|
|
- WHAT provides concrete specifics after buy-in
|
|
- Only effective after WHY and HOW establish context
|
|
- Enables action with confidence
|
|
|
|
---
|
|
|
|
## Common Mistakes
|
|
|
|
**Mistake #1: Starting with WHAT**
|
|
- ❌ "TrendWeek is a weekly newsletter for hairdressers..."
|
|
- ✅ "Are your clients asking about trends you haven't heard of?"
|
|
|
|
**Mistake #2: Missing WHY**
|
|
- Content feels cold and transactional
|
|
- No emotional connection
|
|
- Features without context
|
|
|
|
**Mistake #3: WHAT before WHY**
|
|
- Content feels salesy and pushy
|
|
- User isn't ready to hear specifics
|
|
- Premature call to action
|
|
|
|
---
|
|
|
|
## Sequencing Within Sections
|
|
|
|
The Golden Circle is fractal—apply it at page level AND within each section:
|
|
|
|
**WHY Section Micro-sequence:**
|
|
1. Problem recognition (emotional hook)
|
|
2. Validation (you're not alone)
|
|
3. Aspiration (you can feel different)
|
|
|
|
**HOW Section Micro-sequence:**
|
|
1. Introduce solution approach
|
|
2. Explain key differentiator
|
|
3. Show transformation path
|
|
|
|
**WHAT Section Micro-sequence:**
|
|
1. Name the product/offer
|
|
2. Social proof
|
|
3. Clear CTA
|
|
4. Risk removal
|
|
|
|
---
|
|
|
|
## Application Notes
|
|
|
|
- The "aha moment" from Step 4 often lives in the HOW section (the insight that bridges emotion to action)
|
|
- If WHAT comes before WHY, content feels salesy and pushy
|
|
- If WHY is missing, content feels cold and transactional
|
|
- This structure works for pages, sections, paragraphs, even sentences
|
|
- The Golden Circle creates natural persuasive flow: emotion → method → specifics
|
|
|
|
---
|
|
|
|
_Golden Circle framework guide for Step 5 - Structural Order_
|