whiteport-design-studio 0.1.0

package/src/workflows/shared/content-creation-workshop/content-creation-workshop-guide.md

@@ -0,0 +1,320 @@
+# Content Creation Workshop Guide
+
+**Strategic, Multi-Model Content Generation for WDS**
+
+---
+
+## What Is This?
+
+The Content Creation Workshop is a disciplined, multi-model framework for generating strategically grounded content. Instead of "blurting out versions," agents use five strategic models in sequence to create content that is:
+
+- ✅ **Strategically grounded** (serves business goals)
+- ✅ **Awareness-appropriate** (speaks to user's current understanding)
+- ✅ **Action-focused** (enables specific user behaviors)
+- ✅ **Empowering** (makes users feel capable)
+- ✅ **Structurally persuasive** (WHY → HOW → WHAT flow)
+
+---
+
+## When to Use
+
+**Use this workshop whenever creating:**
+- Page headlines and hero content
+- Section content and feature descriptions
+- Value propositions and benefit statements
+- CTAs with strategic importance
+- About/mission statements
+- Landing page content
+- Onboarding narratives
+- Feature announcements
+- Case studies and testimonials
+- Any user-facing text where **purpose and context matter**
+
+**Skip this workshop for:**
+- ❌ Standard UI microcopy (form labels, generic buttons, tooltips)
+- ❌ System messages (loading, generic errors, confirmations)
+- ❌ Navigation labels
+- ❌ Standard form instructions
+- ❌ Technical documentation
+- ❌ Code comments
+- ❌ Internal notes
+- ❌ Placeholder content during prototyping
+
+**For UI microcopy:** Use **Tone of Voice** guidelines (defined in Product Brief)
+- Form labels: "Email" vs "Email address" (tone-dependent)
+- Buttons: "Submit" vs "Continue" vs "Let's go" (tone-dependent)
+- Errors: "Invalid input" vs "Hmm, that doesn't look right" (tone-dependent)
+- See [Tone of Voice Guide](../../../docs/method/tone-of-voice-guide.md)
+
+---
+
+## The Five-Model Framework
+
+### 0. Content Purpose = The Job To Do
+- Defines: WHAT must this content accomplish? HOW will we know it worked?
+- Answers: What's the measurable outcome? Which models should we emphasize?
+
+### 1. VTC = Strategic Foundation
+- Provides: Business goal, solution, user, driving forces, customer awareness positioning
+- Answers: WHO are we serving? WHAT motivates them? WHERE are they in their journey?
+
+### 2. Customer Awareness Cycle = Content Strategy
+- Provides: Language appropriate to awareness level, information priorities, required proof
+- Answers: WHAT can they understand? WHAT do they need to know? WHAT will they believe?
+
+### 3. Action Mapping = Content Filter
+- Provides: Required user action, relevance test
+- Answers: WHAT must they DO after reading this? Is this content necessary?
+
+### 4. Badass Users = Tone & Frame
+- Provides: Empowerment framing, transformation narrative, cognitive load reduction
+- Answers: HOW does this make them feel capable? WHAT's the "aha moment"?
+
+### 5. Golden Circle = Structural Order
+- Provides: WHY → HOW → WHAT sequence
+- Answers: WHAT order creates the most persuasive flow?
+
+---
+
+## Workshop Structure
+
+The workshop follows **7 sequential considerations** (agents can adapt flow naturally):
+
+0. **Define Content Purpose** - What job must this content do?
+1. **Load VTC Context** - Establish strategic foundation
+2. **Apply Customer Awareness Strategy** - Determine appropriate language & information
+3. **Define Required Action** - Filter for relevance
+4. **Frame User Empowerment** - Set tone and transformation narrative
+5. **Determine Structural Order** - Sequence content for persuasion
+6. **Generate & Review Content** - Create options and select
+
+**Duration:** 15-30 minutes per content section
+
+**Mode Options:**
+- **Quick Mode:** Agent synthesizes internally, presents reasoning + variants
+- **Workshop Mode:** Collaborative conversation through each consideration
+
+---
+
+## How to Use
+
+### For Agents
+
+When you encounter content creation in a workflow:
+
+1. **Define Purpose First** - "What job must this content do?"
+   - If user provides purpose → Use it
+   - If not → Ask: "What should this content accomplish?"
+   - Define success criteria: "How will we know it worked?"
+
+2. **Select Mode:**
+   - **Quick Mode:** User says "Suggest content for [X]"
+     - Synthesize all strategic considerations internally
+     - Present: Purpose → Reasoning → Multiple variants → Selection
+   - **Workshop Mode:** User says "Let's work through content for [X]"
+     - Collaborative conversation through considerations
+     - Adapt flow naturally (skip/combine as appropriate)
+
+3. **Check for VTC** - Does the current context have a defined VTC?
+   - If YES → Proceed with strategic generation
+   - If NO → Suggest creating a VTC first (route to VTC Workshop)
+
+4. **Execute Strategically:**
+   - Consider all strategic layers (VTC, Awareness, Action, Empowerment, Structure)
+   - Emphasize models based on content purpose (see Content Purpose Guide)
+   - Don't force rigid steps - adapt naturally
+
+5. **Present Options** - Offer 2-3 variations:
+   - Different driving force angles (wish vs fear)
+   - Different awareness approaches (if uncertain)
+   - Different structural emphases
+
+6. **Enable Review:**
+   - Does content achieve its stated purpose?
+   - Objective criteria, not "I like it"
+
+### For Designers
+
+You control the strategic context and mode:
+
+1. **Define content purpose** - Be specific about what the content must accomplish
+2. **Choose your mode:**
+   - Need quick suggestions? → "Suggest content for this hero section"
+   - Want to explore together? → "Let's work through the homepage hero"
+3. **Provide context** or let agent find it (VTC, page purpose, user state)
+4. **Review against purpose** - Does it do its job? (objective criteria)
+5. **Select or refine** - Choose variant or combine elements
+6. **Iterate if needed** - Purpose not achieved? Refine and regenerate
+
+---
+
+## Integration Points
+
+### In Phase 4: UX Design - Sketch Review Flow
+
+**When designer presents a sketch:**
+
+1. **Agent identifies text elements** (headlines, CTAs, sections, microcopy)
+2. **Agent suggests purposes** for each element based on:
+   - Position on page (hero vs. footer)
+   - Content type (headline vs. error message)
+   - Page context (landing vs. onboarding)
+3. **Agent recommends model priorities** for each purpose
+4. **Designer confirms/refines** purposes
+5. **Agent generates content** for approved purposes
+6. **Content is documented** in page specification
+
+**Granularity Options:**
+- **Element-by-element:** For critical content (hero headline, primary CTA)
+- **Section-level:** For cohesive blocks (feature section, testimonials)
+- **Batch:** For repetitive elements (form labels, tooltips)
+
+**Example Sketch Review:**
+
+```
+DESIGNER: "Here's the landing page sketch [wireframe]"
+
+AGENT: "I see several text elements. Let me suggest purposes:
+
+📝 Hero Headline
+Purpose: Hook Problem Aware users by validating frustration
+Models: Customer Awareness ⭐⭐⭐, Golden Circle ⭐⭐⭐
+
+📝 Hero Subhead
+Purpose: Promise transformation, reduce anxiety
+Models: Badass Users ⭐⭐, Customer Awareness ⭐⭐
+
+📝 Feature Section (whole section)
+Purpose: Show how solution works, enable understanding
+Models: Action Mapping ⭐⭐⭐, Badass Users ⭐⭐
+
+📝 CTA Button
+Purpose: Make signup feel empowering and low-risk
+Models: Badass Users ⭐⭐⭐, Action Mapping ⭐⭐
+
+Does this match your intent?"
+
+DESIGNER: "Yes, generate content"
+[OR]
+DESIGNER: "Make headline more fear-focused"
+→ AGENT: Updates purpose, generates accordingly
+```
+
+### In Phase 4: UX Design - Page Specifications
+
+**When creating page specifications:**
+- Hero sections → Purpose-driven content generation
+- Key feature descriptions → Purpose-driven content generation
+- CTAs and conversion points → Purpose-driven content generation
+- Error/empty state messages → Purpose-driven content generation
+
+**When working with Freya:**
+- Freya identifies text elements in sketches
+- Suggests purposes automatically
+- Generates content after confirmation
+- Documents everything in page specifications
+
+### In Phase 1: Product Brief (Pitch)
+
+**When creating pitch deck content:**
+- Problem statement → Run this workshop
+- Solution description → Run this workshop
+- Value propositions → Run this workshop
+
+---
+
+## What You Get
+
+**For each content section:**
+
+1. **Purpose Statement** (what this content must do)
+   - Clear job definition
+   - Success criteria
+   - Model priority emphasis
+
+2. **Strategic Context Document** (shows your thinking)
+   - VTC reference
+   - Awareness journey map
+   - Action requirement
+   - Empowerment frame
+   - Structural sequence
+
+3. **Content Options** (2-3 variations)
+   - Fully written content
+   - Different angles/approaches
+   - Rationale for each option
+   - Model emphasis explained
+
+4. **Selected Content** (final version)
+   - Refined and approved
+   - Ready for implementation
+   - Traceable to strategic context
+   - Reviewable against purpose
+
+---
+
+## Alpha Status Notice
+
+⚠️ **This workshop is in Alpha** - first real-world usage pending.
+
+**What this means:**
+- Structure is theoretically sound but untested in practice
+- Steps may need refinement based on actual usage
+- Timing estimates may be inaccurate
+- You may discover missing elements or unnecessary steps
+
+**Please provide feedback:**
+- What worked well?
+- What felt clunky or unnecessary?
+- What's missing?
+- How could this be more efficient?
+
+**Alpha will be removed when:**
+- Successfully used in 3+ real projects
+- Timing validated and adjusted
+- Feedback integrated
+- No major structural changes needed for 2 months
+
+---
+
+## Files
+
+**Entry Point:**
+- `content-creation-workshop.md` - Start here
+
+**Micro-Steps:**
+- `steps/workflow.md` - Sequential execution guide
+- `steps/step-00-define-purpose.md`
+- `steps/step-01-load-vtc-context.md`
+- `steps/step-02-awareness-strategy.md`
+- `steps/step-03-action-filter.md`
+- `steps/step-04-empowerment-frame.md`
+- `steps/step-05-structural-order.md`
+- `steps/step-06-generate-content.md`
+
+**Output Template:**
+- `content-output.template.md` - Structured output format
+
+---
+
+## Related Resources
+
+**Strategic Models:**
+- [Customer Awareness Cycle](../../../docs/models/customer-awareness-cycle.md)
+- [Golden Circle](../../../docs/models/golden-circle.md)
+- [Action Mapping](../../../docs/models/action-mapping.md)
+- [Kathy Sierra Badass Users](../../../docs/models/kathy-sierra-badass-users.md)
+
+**Whiteport Methods:**
+- [Value Trigger Chain](../../../docs/method/value-trigger-chain-guide.md)
+- [VTC Workshop](../vtc-workshop/vtc-workshop-guide.md)
+- [Content Purpose Guide](../../../docs/method/content-purpose-guide.md) - **Start here for content effectiveness**
+
+**Workflows:**
+- [Phase 4: UX Design](../../../docs/method/phase-4-ux-design-guide.md)
+- [Phase 1: Product Exploration](../../../docs/method/phase-1-product-exploration-guide.md)
+
+---
+
+**Let's create strategically grounded content, not guesswork.** 🎯
+

package/src/workflows/shared/content-creation-workshop/content-output.template.md

@@ -0,0 +1,349 @@
+# Content Creation Workshop - Output
+
+**Strategically Grounded Content with Full Traceability**
+
+**Content Section:** {content-section-name}  
+**Page/Context:** {page-or-scenario-name}  
+**Created:** {date}  
+**Method:** WDS Content Creation Workshop (5-Model Framework)
+
+---
+
+## Strategic Foundation
+
+### Step 1: VTC Context
+
+```yaml
+vtc_reference:
+  business_goal: "{goal text}"
+  solution: "{solution name/description}"
+  user:
+    name: "{persona name}"
+    description: "{brief persona description}"
+  driving_forces:
+    positive: "{wish/aspiration}"
+    negative: "{fear/frustration}"
+  customer_awareness:
+    start: "{awareness level where user begins}"
+    end: "{awareness level we want them to reach}"
+```
+
+---
+
+## Content Strategy
+
+### Step 2: Customer Awareness Strategy
+
+```yaml
+awareness_strategy:
+  start_level: "{awareness level}"
+  start_characteristics:
+    - "{what they know}"
+    - "{what they don't know}"
+    - "{how they feel}"
+  
+  end_level: "{awareness level}"
+  end_characteristics:
+    - "{what they'll know}"
+    - "{what they'll understand}"
+    - "{how they'll feel}"
+  
+  language_guidelines:
+    use: ["{appropriate terms}"]
+    avoid: ["{confusing jargon}"]
+    tone: "{conversational, authoritative, empathetic, etc.}"
+  
+  information_priorities:
+    essential: ["{must include}"]
+    helpful: ["{nice to include if space}"]
+    avoid: ["{too advanced, confusing, or premature}"]
+  
+  credibility_required:
+    type: "{personal story, expert credentials, data, social proof}"
+    examples: ["{specific proof elements}"]
+  
+  emotional_journey:
+    starting_emotion: "{frustrated, confused, etc.}"
+    bridge: "{how we facilitate the shift}"
+    ending_emotion: "{hopeful, confident, etc.}"
+```
+
+---
+
+## Content Filtering
+
+### Step 3: Action Filter
+
+```yaml
+action_filter:
+  required_action:
+    description: "{Specific action user must be able to take}"
+    success_criteria: "{How we know they can do it}"
+  
+  business_impact:
+    connection: "{How this action drives the VTC business goal}"
+    logic: "{Action → Outcome → Goal}"
+  
+  user_motivation:
+    positive_driver: "{How action satisfies their wish}"
+    negative_driver: "{How action addresses their fear}"
+  
+  essential_information:
+    - "{Information element 1 - WHY needed for action}"
+    - "{Information element 2 - WHY needed for action}"
+    - "{Information element 3 - WHY needed for action}"
+  
+  cut_list:
+    - "{Nice-to-know info that doesn't enable action}"
+    - "{Impressive but irrelevant content}"
+  
+  action_barriers:
+    - barrier: "{e.g., confusion about next steps}"
+      solution: "{Content that removes this barrier}"
+    - barrier: "{e.g., fear of commitment}"
+      solution: "{Content that addresses this fear}"
+```
+
+---
+
+## Content Framing
+
+### Step 4: Empowerment Frame
+
+```yaml
+empowerment_frame:
+  transformation:
+    current_state:
+      description: "{Where user is now}"
+      feelings: ["{frustrated}", "{uncertain}", "{behind}"]
+      capabilities: "{What they can't do yet}"
+    
+    badass_state:
+      description: "{Where they're going}"
+      feelings: ["{confident}", "{capable}", "{ahead}"]
+      capabilities: "{What they'll be able to do}"
+    
+    visibility: "{How we make the transformation visible and achievable}"
+  
+  aha_moment:
+    insight: "{Key realization that shifts perspective}"
+    why_powerful: "{Why this unlocks confidence}"
+  
+  capability_framing:
+    - feature: "{Product feature}"
+      reframed: "{What USER can do because of it}"
+    - feature: "{Product feature}"
+      reframed: "{What USER can do because of it}"
+  
+  cognitive_load:
+    potential_issues:
+      - issue: "{Where content might overwhelm}"
+        solution: "{How we reduce load}"
+    
+    simplifications:
+      - "{What we simplified or cut}"
+  
+  skill_focus:
+    primary_skill: "{Main capability user develops}"
+    supporting_skills: ["{Related capabilities}"]
+    tools_secondary: "{Tools are means to skill, not the focus}"
+```
+
+---
+
+## Content Structure
+
+### Step 5: Structural Order (Golden Circle)
+
+```yaml
+structural_order:
+  section_why:
+    purpose: "Emotional truth / Why user should care"
+    content_elements:
+      - order: 1
+        element: "{Opening hook}"
+        rationale: "{Why this opens}"
+      - order: 2
+        element: "{Validation or aspiration}"
+        rationale: "{Why this comes second}"
+  
+  section_how:
+    purpose: "Method / Bridge from emotion to specifics"
+    content_elements:
+      - order: 1
+        element: "{Solution approach}"
+        rationale: "{Why this bridges first}"
+      - order: 2
+        element: "{Key differentiator}"
+        rationale: "{Why this matters here}"
+      - order: 3
+        element: "{Transformation path}"
+        rationale: "{Why this comes last in HOW}"
+  
+  section_what:
+    purpose: "Specifics / Proof / Action"
+    content_elements:
+      - order: 1
+        element: "{Product/offer name}"
+        rationale: "{Why we can name it now}"
+      - order: 2
+        element: "{Social proof}"
+        rationale: "{Why proof comes here}"
+      - order: 3
+        element: "{CTA}"
+        rationale: "{Why action comes last}"
+  
+  flow_validation:
+    feels_natural: "{yes/no + notes}"
+    persuasive_arc: "{Does WHY → HOW → WHAT create emotional → logical → action flow?}"
+```
+
+---
+
+## Final Content
+
+### Step 6: Generated Content
+
+#### Variations Presented
+
+**Variation A: {Name - e.g., "Wish-Focused"}**
+
+*Rationale:* {Why this approach, what driving force it emphasizes}
+
+```
+WHY Section:
+{Content for WHY}
+
+HOW Section:
+{Content for HOW}
+
+WHAT Section:
+{Content for WHAT}
+```
+
+---
+
+**Variation B: {Name}**
+
+*Rationale:* {Why this approach}
+
+```
+WHY Section:
+{Content for WHY}
+
+HOW Section:
+{Content for HOW}
+
+WHAT Section:
+{Content for WHAT}
+```
+
+---
+
+**Variation C: {Name}** *(if applicable)*
+
+*Rationale:* {Why this approach}
+
+```
+WHY Section:
+{Content for WHY}
+
+HOW Section:
+{Content for HOW}
+
+WHAT Section:
+{Content for WHAT}
+```
+
+---
+
+#### Selection & Refinement
+
+**Chosen Approach:** {Which variation or combination}
+
+**Reasoning:** {Why user selected this}
+
+**Adjustments Made:** {Any refinements}
+
+---
+
+#### FINAL CONTENT (Implementation-Ready)
+
+**WHY Section:**
+
+```
+{Final WHY content}
+```
+
+**HOW Section:**
+
+```
+{Final HOW content}
+```
+
+**WHAT Section:**
+
+```
+{Final WHAT content}
+```
+
+---
+
+## Strategic Traceability
+
+**This content serves:**
+
+- **VTC Business Goal:** {How this drives the goal}
+- **User Driving Forces:** 
+  - Positive: {How it satisfies wish}
+  - Negative: {How it addresses fear}
+- **Customer Awareness Journey:** {START → END validated}
+- **Required Action:** {What user can now do}
+- **User Empowerment:** {How they feel capable}
+- **Persuasive Structure:** {WHY → HOW → WHAT confirmed}
+
+---
+
+## Implementation Notes
+
+**Technical/Design Requirements:**
+- {Any technical constraints or requirements}
+- {Design system components needed}
+- {Responsive behavior notes}
+
+**Multi-Language Support:**
+- English: {Status}
+- {Language 2}: {Status}
+- {Language 3}: {Status}
+
+**Assets Needed:**
+- Images: {List image requirements}
+- Videos: {List video requirements}
+- Icons/Graphics: {List graphic requirements}
+
+**Testing Considerations:**
+- {A/B test recommendations}
+- {User testing focus areas}
+- {Success metrics to track}
+
+---
+
+## Workshop Metadata
+
+**Duration:** {Actual time spent}
+
+**Participants:**
+- Designer: {name}
+- Agent: {agent name}
+
+**Alpha Feedback:**
+- {What worked well}
+- {What felt clunky}
+- {What's missing}
+- {How to improve}
+
+---
+
+_Created using WDS Content Creation Workshop (5-Model Framework)_  
+_Models: VTC, Customer Awareness Cycle, Action Mapping, Badass Users, Golden Circle_
+