feat(wds): Enhance persona documentation with visual representation prompts

Added visual representation sections to persona documentation, including detailed image generation prompts for primary, secondary, and tertiary personas. This update aims to provide clearer guidance on creating professional visuals that align with persona characteristics, enhancing the overall design workflow and user understanding of persona development.
This commit is contained in:
Mårten Angner 2025-12-28 23:19:19 +01:00
parent 09ea784a65
commit 2cdf7b4d4e
8 changed files with 67 additions and 7 deletions

View File

@ -2,6 +2,8 @@
> Primary target - The designer who becomes one of the 50 evangelists
![Stina the Strategist](resources/stina-the-desginer.png)
**Priority:** PRIMARY 🎯
**Role in Flywheel:** Becomes evangelist → Spreads WDS → Drives all adoption
**Created:** December 27, 2025
@ -277,5 +279,13 @@ This is Stina's transformation: From overwhelmed task-doer to empowered strategi
---
## Visual Representation - Image Generation Prompt
**Prompt Used:**
"Professional headshot photograph of a 34-year-old Central European female designer with mixed heritage (Mediterranean and Nordic features), warm olive skin tone, shoulder-length wavy dark brown hair with natural texture, wearing distinctive round glasses, bohemian-chic style with layered clothing and artistic accessories, sitting at modern minimalist desk with laptop and design sketches, looking thoughtful and determined with creative energy, natural morning light from window, shallow depth of field focusing on face, contemporary creative studio office background with plants and whiteboard visible, photorealistic style, warm natural color palette, 4K quality, professional portrait photography"
---
_Back to [Trigger Map](00-trigger-map.md)_

View File

@ -2,6 +2,8 @@
> Secondary target - Validates WDS business value and creates demand
![Lars the Leader](resources/lars-the-leader.png)
**Priority:** SECONDARY 💼
**Role in Flywheel:** Validates business value → Hires WDS designers → Creates demand
**Created:** December 27, 2025
@ -311,5 +313,13 @@ Lars doesn't need to learn WDS himself - he needs to trust that WDS-trained desi
---
## Visual Representation - Image Generation Prompt
**Prompt Used:**
"Professional portrait of a 42-year-old Scandinavian male entrepreneur, short neat hair, slight beard, standing in modern office space with glass walls and sticky notes on whiteboard behind him, confident and engaged expression with friendly smile, natural office lighting, shallow depth of field, wearing business casual (button-down shirt, sleeves rolled up), contemporary startup office environment, photorealistic style, warm professional color palette, 4K quality, executive portrait photography"
---
_Back to [Trigger Map](00-trigger-map.md)_

View File

@ -2,6 +2,8 @@
> Tertiary target - Benefits from better specs and logical design
![Felix the Full-Stack](resources/felix-the-full-stack.png)
**Priority:** TERTIARY 💻
**Role in Flywheel:** Benefits from WDS specs → Spreads word about better collaboration
**Created:** December 27, 2025
@ -370,5 +372,13 @@ Some developers might get interested in WDS agents for simple UI tasks. For Feli
---
## Visual Representation - Image Generation Prompt
**Prompt Used:**
"Professional portrait of a 29-year-old male software developer with mixed British-South Asian heritage (Indian or Pakistani and UK), warm medium skin tone, short neat dark hair, wearing developer hoodie and t-shirt, sitting at dual-monitor setup with code visible on screens, focused and concentrated expression with slight smile of satisfaction, soft indirect lighting from monitors and desk lamp, shallow depth of field, modern tech office or home office background with coffee cup and tech accessories visible, photorealistic style, slightly cooler color temperature matching tech environment, 4K quality, environmental tech portrait"
---
_Back to [Trigger Map](00-trigger-map.md)_

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

View File

@ -97,6 +97,13 @@ The WDS Presentation page serves as the primary entry point for designers discov
- **EN:** "What You Can Create with WDS"
- **Rationale**: Direct, action-oriented, focuses on designer capability
#### Introduction Text
**OBJECT ID**: `wds-capabilities-intro`
- **Component**: Body paragraph
- **Content:**
- **EN:** "Each phase produces professional deliverables that guide your project from concept from idea to implementation. In the WDS documentaion you find tutorials, example documents, and step-by-step guidance for creating each artifact with AI agent support."
- **Rationale**: Sets expectations, explains the links lead to learning resources, emphasizes support available
#### Phase 1: Win Client Buy-In
**OBJECT ID**: `wds-capability-phase-1`
- **Component**: Capability card
@ -104,7 +111,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
- **Content:**
- **Title (EN):** "Win Client Buy-In"
- **Description (EN):** "Present your vision in business language that stakeholders understand. Get everyone aligned on goals, budget, and commitment before you start. Stop projects from dying in "maybe" meetings. Saga helps you articulate value and create professional agreements."
- **Output (EN):** "→ [Project Pitch](../../../course/deliverables/project-pitch.md) & [Service Agreement](../../../course/deliverables/service-agreement.md)"
- **Output (EN):** "→ [Project Pitch](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/project-pitch.md) & [Service Agreement](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/service-agreement.md)"
#### Phase 2: Define Your Project
**OBJECT ID**: `wds-capability-phase-2`
@ -113,7 +120,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
- **Content:**
- **Title (EN):** "Define Your Project"
- **Description (EN):** "Get crystal clear on what you're building, who it's for, and why it matters. Create a strategic foundation that guides every design decision. No more scope creep or confused teams. This brief becomes your north star when things get messy."
- **Output (EN):** "→ [Product Brief](../../../course/deliverables/product-brief.md)"
- **Output (EN):** "→ [Product Brief](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/product-brief.md)"
#### Phase 3: Map Business Goals to User Needs
**OBJECT ID**: `wds-capability-phase-3`
@ -122,7 +129,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
- **Content:**
- **Title (EN):** "Map Business Goals to User Needs"
- **Description (EN):** "Connect what the business wants to what users actually need. Identify the emotional triggers and pain points that make your design work. Stop guessing and start designing with psychological insight. Cascade helps you create personas grounded in real driving forces."
- **Output (EN):** "→ [Trigger Map & Personas](../../../course/deliverables/trigger-map.md)"
- **Output (EN):** "→ [Trigger Map & Personas](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/trigger-map.md)"
#### Phase 4: Architect the Platform
**OBJECT ID**: `wds-capability-phase-4`
@ -131,7 +138,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
- **Content:**
- **Title (EN):** "Architect the Platform"
- **Description (EN):** "Define the technical foundation, data structure, and system architecture. Make smart decisions about what to build and how it fits together. Bridge the gap between design vision and technical reality. Idunn helps you think through the platform without getting lost in code."
- **Output (EN):** "→ [Platform PRD & Architecture](../../../course/deliverables/platform-prd.md)"
- **Output (EN):** "→ [Platform PRD & Architecture](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/platform-prd.md)"
#### Phase 5: Design the Experience
**OBJECT ID**: `wds-capability-phase-5`
@ -140,7 +147,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
- **Content:**
- **Title (EN):** "Design the Experience"
- **Description (EN):** "Turn sketches into complete specifications with interactive prototypes. Capture not just WHAT it looks like, but WHY you designed it that way. Preserve your design intent from concept to code. Freyja helps you create specifications that developers actually understand and respect."
- **Output (EN):** "→ [Page Specifications & Prototypes](../../../course/deliverables/page-specifications.md)"
- **Output (EN):** "→ [Page Specifications & Prototypes](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/page-specifications.md)"
#### Phase 6: Build Your Design System
**OBJECT ID**: `wds-capability-phase-6`
@ -149,7 +156,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
- **Content:**
- **Title (EN):** "Build Your Design System"
- **Description (EN):** "Extract reusable components, patterns, and design tokens from your pages. Create consistency across your entire product without starting from scratch every time. Scale your design decisions efficiently. Stop reinventing buttons and start building systems."
- **Output (EN):** "→ [Component Library & Design Tokens](../../../course/deliverables/design-system.md)"
- **Output (EN):** "→ [Component Library & Design Tokens](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/design-system.md)"
#### Phase 7: Hand Off to Developers
**OBJECT ID**: `wds-capability-phase-7`
@ -158,7 +165,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
- **Content:**
- **Title (EN):** "Hand Off to Developers"
- **Description (EN):** "Package everything developers need in organized PRD documents with epics and stories. No more "what did you mean by this?" meetings. No more guesswork or lost design intent. Idunn creates implementation guides that turn your specs into buildable tasks."
- **Output (EN):** "→ [Design Delivery PRD](../../../course/deliverables/design-delivery-prd.md)"
- **Output (EN):** "→ [Design Delivery PRD](https://github.com/whiteport/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/design-delivery-prd.md)"
---
@ -193,6 +200,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
| `wds-hero-cta` | Button Primary Large | Hero Object | ✅ Specified |
| `wds-hero-illustration` | Hero Image | Hero Object | ✅ Specified |
| `wds-capabilities-headline` | H2 Heading | WDS Capabilities Object | ✅ Specified |
| `wds-capabilities-intro` | Body Paragraph | WDS Capabilities Object | ✅ Specified |
| `wds-capability-phase-1` | Capability Card | WDS Capabilities Object | ✅ Specified |
| `wds-capability-phase-2` | Capability Card | WDS Capabilities Object | ✅ Specified |
| `wds-capability-phase-3` | Capability Card | WDS Capabilities Object | ✅ Specified |

View File

@ -59,6 +59,28 @@ For EACH persona (Primary, Secondary, Tertiary), create a comprehensive document
---
### 2a. Visual Representation
```markdown
## Visual Representation
**Image Generation Prompt:**
"[Detailed prompt for AI image generation - include age, gender, profession, setting, emotional state, visual style, technical details like lighting and composition]"
**Example:**
"Professional headshot photograph of a 34-year-old Scandinavian female designer, shoulder-length blonde hair, sitting at modern desk with laptop, looking contemplative and slightly stressed, natural lighting, shallow depth of field, professional business casual attire, tech startup office background, photorealistic style, 4K quality"
**Prompt Components:**
- **Demographics:** Age, gender, ethnicity, appearance
- **Professional Context:** Role, work environment, tools/props
- **Emotional State:** Expression that matches their driving forces
- **Visual Style:** Photography style, illustration, realistic/stylized
- **Technical Details:** Lighting, composition, camera angle, quality
```
---
### 3. Background
**For different persona types:**