feat(wds): Update documentation structure and agent activation files
Revised the WDS documentation by renaming and reorganizing files for clarity and consistency. Key changes include updating the paths for agent activation files, removing outdated content, and enhancing the installation and quick start guides. Added a formal positioning statement and expanded the target user profiles to better reflect the intended audience. Improved the trigger mapping instructions with new diagram formatting rules and visual elements to enhance user understanding. This update aims to streamline the onboarding process and improve overall user experience.
This commit is contained in:
Mårten Angner
parent
50c2d0a388
commit
f5c34e4f02
|
|
@ -772,7 +772,7 @@ You have access to these WDS files:
|
|||
|
||||
### Core Documentation
|
||||
- `WDS-WORKFLOWS-GUIDE.md` - Overview of all workflows
|
||||
- `00-getting-started/00-about-wds.md` - WDS introduction
|
||||
- `getting-started/about-wds.md` - WDS introduction
|
||||
|
||||
### Agent Definitions
|
||||
- `agents/freyja-ux.agent.yaml` - UX Designer agent
|
||||
|
|
|
|||
|
|
@ -18,6 +18,46 @@ Create the official WDS presentation page for Whiteport.com that serves as the e
|
|||
|
||||
---
|
||||
|
||||
## Positioning Statement
|
||||
|
||||
**For designers and design consultants who need to deliver exceptional value and maintain creative control in the AI era, WDS (Whiteport Design Studio) is an end-to-end design methodology that transforms design thinking into AI-ready specifications that preserve intent and enable perfect implementation. Unlike rapid prototyping tools or AI code generators that only handle fragments of the design process, WDS provides the complete journey from product vision to development handoff, making designers indispensable strategic leaders rather than replaceable pixel pushers.**
|
||||
|
||||
**Breakdown:**
|
||||
|
||||
- **Target Customer:** Designers (UX, product, visual) and design consultants who serve clients/teams
|
||||
- **Need/Opportunity:** Deliver exceptional value and maintain creative control despite AI disruption
|
||||
- **Category:** End-to-end design methodology with AI-augmented workflow
|
||||
- **Key Benefit:** Transforms design thinking into AI-ready specifications that preserve intent and enable perfect implementation
|
||||
- **Differentiator:** Unlike tools that handle fragments (prototyping, wireframing, code generation), WDS provides complete journey from vision to handoff, making designers strategic linchpins
|
||||
|
||||
**Secondary Positioning (For Entrepreneurs/Clients):**
|
||||
|
||||
**For entrepreneurs and product owners who want products that truly succeed, WDS is a structured design foundation that delivers excellence through proven best practices and designer-led strategy. Unlike quick-fix approaches that create technical debt, WDS ensures every element serves business goals and user needs from day one, building products that work, scale, and win in the market.**
|
||||
|
||||
---
|
||||
|
||||
## Business Model
|
||||
|
||||
**Type:** Free and Open-Source (Community-Driven)
|
||||
|
||||
**Revenue Model for Whiteport:**
|
||||
- WDS is completely free with no cost barriers or subscriptions
|
||||
- Whiteport generates revenue through:
|
||||
- Design consulting services using WDS methodology
|
||||
- Client projects that benefit from WDS structure
|
||||
- Training and workshops (optional, not required)
|
||||
- Speaking and thought leadership opportunities
|
||||
|
||||
**Sustainability Strategy:**
|
||||
- Community contributions and feedback improve methodology
|
||||
- Real-world client projects validate and refine WDS
|
||||
- Open-source model attracts talented designers to Whiteport ecosystem
|
||||
- Establishes Mårten/Whiteport as thought leaders in AI-era design
|
||||
|
||||
**Mission:** Give designers everywhere the tools to thrive in the AI era, making design expertise more valuable rather than obsolete.
|
||||
|
||||
---
|
||||
|
||||
## Project Background & Complexity
|
||||
|
||||
### The Challenge We're Solving
|
||||
|
|
@ -85,6 +125,307 @@ We're honest that this represents growth and learning. But we emphasize the valu
|
|||
|
||||
---
|
||||
|
||||
## Target Users
|
||||
|
||||
### Primary Audience: Designers
|
||||
|
||||
**Profile:**
|
||||
|
||||
Designers (UX, product, visual, service) who:
|
||||
- See both business goals and user goals clearly
|
||||
- Have a bleeding passion for creating optimal solutions that serve both
|
||||
- Wish to become linchpin actors in their teams/organizations
|
||||
- Are willing to stand up and take responsibility for product success
|
||||
- Understand that sometimes fast stands in the way of what matters
|
||||
- Aim at delivering real value, not just quick fixes
|
||||
- Want to thrive (not just survive) in the AI era
|
||||
|
||||
**Experience Level:**
|
||||
- **Experienced consultants/senior designers** (primary): Years of design wisdom that WDS helps scale and preserve
|
||||
- **Growth-minded mid-level designers**: Ready to step into strategic leadership roles
|
||||
- **Design teams at agencies/consultancies**: Looking for structured methodology that delivers consistent excellence
|
||||
|
||||
**Current Situation:**
|
||||
- Feeling threatened by AI tools that can "do design"
|
||||
- Frustrated by design intent getting lost in handoffs
|
||||
- Want to deliver more value but struggle with scalability
|
||||
- Seeking to differentiate themselves as AI becomes ubiquitous
|
||||
- Desire deeper client relationships as strategic partners, not just service providers
|
||||
|
||||
**What They're Looking For:**
|
||||
- A methodology that makes them indispensable
|
||||
- Tools that amplify (not replace) their expertise
|
||||
- Structure that enables faster delivery without compromising quality
|
||||
- Way to preserve design thinking through to implementation
|
||||
- Path to becoming strategic leaders in organizations
|
||||
|
||||
**Key Message for Designers:** "WDS is for people who mean business."
|
||||
|
||||
---
|
||||
|
||||
### Secondary Audience: Entrepreneurs & Product Owners
|
||||
|
||||
**Profile:**
|
||||
|
||||
Entrepreneurs, startup founders, and product owners who:
|
||||
- Are building products with real market ambitions
|
||||
- Understand that quality and structure matter for success
|
||||
- Want to avoid the "fast but broken" trap
|
||||
- Need structured excellence but may lack design expertise
|
||||
- Are willing to invest time in foundations that pay off long-term
|
||||
- Value strategic partnerships with designers who guide product success
|
||||
|
||||
**Experience Level:**
|
||||
- **First-time founders**: Need guidance and structure to avoid common pitfalls
|
||||
- **Experienced entrepreneurs**: Know the value of detail and strategic design
|
||||
- **Product owners at companies**: Responsible for product success and team coordination
|
||||
|
||||
**Current Situation:**
|
||||
- Overwhelmed by product decisions and uncertainty
|
||||
- Seeing competitors move fast but want to build something that lasts
|
||||
- Frustrated by past experiences where design didn't translate to working product
|
||||
- Looking for clear process that reduces risk and uncertainty
|
||||
- Need designer as strategic partner, not just visual executor
|
||||
|
||||
**What They're Looking For:**
|
||||
- Structured path from idea to working product
|
||||
- Design process that delivers business results
|
||||
- Partner who takes ownership of product success
|
||||
- Reduced risk through proven methodology
|
||||
- Way to build products that work reliably from day one
|
||||
|
||||
**Key Message for Entrepreneurs:** "WDS delivers the structured excellence that drives real product success."
|
||||
|
||||
---
|
||||
|
||||
## Success Criteria
|
||||
|
||||
**Page Launch Success (0-3 Months):**
|
||||
|
||||
1. **Traffic & Engagement**
|
||||
- 1,000+ unique visitors to WDS page in first month
|
||||
- Average time on page: 3+ minutes (indicates engagement with content)
|
||||
- 40%+ scroll to course modules section
|
||||
- 20%+ click-through to GitHub repository
|
||||
|
||||
2. **Repository Growth**
|
||||
- 500+ GitHub stars within 3 months
|
||||
- 100+ repository clones per month
|
||||
- 50+ active watchers
|
||||
|
||||
3. **Course Engagement**
|
||||
- 200+ Module 01 video views in first month
|
||||
- 100+ Module 02 video views in first month
|
||||
- 50+ users complete installation successfully
|
||||
|
||||
4. **Community Building**
|
||||
- 100+ Discord server members in 3 months
|
||||
- 20+ active community participants (asking questions, sharing work)
|
||||
- 5+ testimonials from early adopters
|
||||
|
||||
**Business Impact for Whiteport (3-12 Months):**
|
||||
|
||||
5. **Thought Leadership**
|
||||
- Mårten recognized as expert in AI-era design methodology
|
||||
- 3+ speaking invitations or conference proposals
|
||||
- 10+ articles/blog posts referencing WDS methodology
|
||||
|
||||
6. **Client Acquisition**
|
||||
- 5+ qualified client inquiries directly attributed to WDS page
|
||||
- 2+ new client projects using WDS methodology
|
||||
- Client testimonials highlighting WDS-structured approach
|
||||
|
||||
7. **Designer Adoption**
|
||||
- 500+ designers have tried WDS (based on GitHub clones + course views)
|
||||
- 100+ designers actively using WDS for projects
|
||||
- 10+ case studies from real projects
|
||||
- 20+ community contributions (feedback, improvements, examples)
|
||||
|
||||
**Measurement Methods:**
|
||||
- Google Analytics for page metrics
|
||||
- GitHub insights for repository activity
|
||||
- YouTube analytics for course engagement
|
||||
- Discord metrics for community growth
|
||||
- Client inquiry tracking in Whiteport CRM
|
||||
- Quarterly surveys to active users
|
||||
|
||||
**Timeline:** Targets measured at 1 month, 3 months, 6 months, and 12 months post-launch.
|
||||
|
||||
---
|
||||
|
||||
## Competitive Landscape
|
||||
|
||||
### Direct & Indirect Alternatives
|
||||
|
||||
**1. Traditional Design Tools (Figma, Sketch, Adobe XD)**
|
||||
|
||||
*What they do well:*
|
||||
- Visual, intuitive interface designers love
|
||||
- Real-time collaboration
|
||||
- Component libraries and design systems
|
||||
- Industry standard with massive adoption
|
||||
|
||||
*Where they fall short:*
|
||||
- Design handoff loses intent and context
|
||||
- No structure for "why" behind decisions
|
||||
- Separate from development workflow
|
||||
- Limited guidance on methodology/process
|
||||
- Don't address strategic thinking or specifications
|
||||
|
||||
*Why users might choose them:*
|
||||
- Familiar visual workflow
|
||||
- No learning curve for text-based work
|
||||
- Industry standard (client expectations)
|
||||
|
||||
**2. AI Code Generators (V0.dev, Bolt.new, Lovable.dev)**
|
||||
|
||||
*What they do well:*
|
||||
- Fast prototyping from prompts
|
||||
- Immediate code output
|
||||
- Low barrier to entry
|
||||
- Impressive demos
|
||||
|
||||
*Where they fall short:*
|
||||
- No methodology or strategic thinking
|
||||
- Design intent easily lost in prompts
|
||||
- Fragmented approach (no end-to-end journey)
|
||||
- Hallucination issues without clear specifications
|
||||
- No designer leadership or ownership
|
||||
- Focus on speed over depth and quality
|
||||
|
||||
*Why users might choose them:*
|
||||
- Quick results for simple projects
|
||||
- Low learning curve
|
||||
- Impressive initial demos
|
||||
|
||||
**3. Design-to-Code Tools (Anima, Framer)**
|
||||
|
||||
*What they do well:*
|
||||
- Bridge design and code
|
||||
- Export working prototypes
|
||||
- Reduce manual coding work
|
||||
|
||||
*Where they fall short:*
|
||||
- Limited to UI translation (no methodology)
|
||||
- No strategic or analytical phases
|
||||
- Don't preserve "why" behind decisions
|
||||
- Fragmented solution (only one piece of journey)
|
||||
|
||||
**4. Traditional Design Agencies**
|
||||
|
||||
*What they do well:*
|
||||
- Full-service design and strategy
|
||||
- Experienced teams
|
||||
- Proven client relationships
|
||||
|
||||
*Where they fall short:*
|
||||
- Often don't leverage AI effectively
|
||||
- Inconsistent methodology across teams
|
||||
- Expensive and slow
|
||||
- Handoff still problematic
|
||||
|
||||
*Why clients might choose them:*
|
||||
- Reputation and portfolio
|
||||
- Full-service convenience
|
||||
- Established trust
|
||||
|
||||
**5. DIY Approach / No Methodology**
|
||||
|
||||
*What entrepreneurs do:*
|
||||
- Jump straight to building
|
||||
- Use AI tools without structure
|
||||
- Learn by trial and error
|
||||
|
||||
*Where this falls short:*
|
||||
- High failure rate
|
||||
- Technical debt from lack of planning
|
||||
- Design decisions made reactively
|
||||
- Expensive pivots and rebuilds
|
||||
|
||||
### Market Positioning
|
||||
|
||||
**WDS Unique Position:**
|
||||
|
||||
WDS is the **only end-to-end design methodology** that:
|
||||
- Provides complete journey (vision → specifications → handoff)
|
||||
- Preserves design thinking through why-based specifications
|
||||
- Makes designers strategic linchpins (not replaceable executors)
|
||||
- Built on proven 25-year methodology (BMad Method)
|
||||
- Free and open-source (no cost barriers)
|
||||
- AI-augmented but designer-led
|
||||
- Works within development workflow (IDE-based)
|
||||
|
||||
**Market Gap WDS Fills:**
|
||||
|
||||
Most tools solve **fragments** of the design challenge:
|
||||
- Figma: Visual design
|
||||
- V0: Quick code generation
|
||||
- Framer: Prototyping
|
||||
|
||||
**WDS solves the complete journey** while making designers indispensable.
|
||||
|
||||
---
|
||||
|
||||
## Unfair Advantage
|
||||
|
||||
**What WDS Has That Competitors Cannot Easily Copy:**
|
||||
|
||||
1. **25 Years of Proven Methodology (BMad Method Foundation)**
|
||||
- WDS built on battle-tested development framework
|
||||
- Decades of real-world project experience baked in
|
||||
- Integration between design (WDS) and development (BMM) is seamless
|
||||
- Competitors would need to build entire ecosystem from scratch
|
||||
|
||||
2. **Mårten's Unique Expertise**
|
||||
- 25 years of design experience
|
||||
- Deep understanding of both design AND development
|
||||
- Track record: Dog Week project (26 weeks → 5 weeks, better quality)
|
||||
- Authentic voice as practitioner, not just theorist
|
||||
- Real agency experience with paying clients
|
||||
|
||||
3. **True Designer Leadership Philosophy**
|
||||
- Not trying to replace designers or make design "easy"
|
||||
- Positioning designers as strategic linchpins
|
||||
- Authentic respect for craft and expertise
|
||||
- "WDS is for people who mean business" - attracts serious practitioners
|
||||
|
||||
4. **Complete Integration (Not Fragmented)**
|
||||
- Only solution that covers idea → maintenance
|
||||
- Why-based specifications unique approach
|
||||
- Design system + scenario design + PRD all connected
|
||||
- Seamless handoff to development (BMM agents)
|
||||
|
||||
5. **Open-Source Community Model**
|
||||
- Free removes adoption barriers competitors can't match
|
||||
- Community contributions improve methodology
|
||||
- Goodwill and thought leadership difficult to replicate
|
||||
- Network effects as more designers adopt
|
||||
|
||||
6. **IDE-Based Approach**
|
||||
- Puts designers in the codebase (true strategic partners)
|
||||
- Access to AI capabilities that visual tools can't match
|
||||
- Version control and collaboration at code level
|
||||
- Future-proof as AI development accelerates
|
||||
|
||||
7. **Real-World Validation**
|
||||
- Dog Week case study proves 5x productivity
|
||||
- Built from actual client work (not theoretical)
|
||||
- Continuously refined through Whiteport projects
|
||||
- Authentic testimonials from real projects
|
||||
|
||||
**The Moat:**
|
||||
|
||||
Even if competitors copy individual features, they cannot replicate:
|
||||
- The 25-year foundation and ecosystem integration
|
||||
- Mårten's authentic expertise and reputation
|
||||
- The complete philosophical framework
|
||||
- The community and network effects
|
||||
- The proven real-world results
|
||||
|
||||
This combination creates a sustainable competitive advantage.
|
||||
|
||||
---
|
||||
|
||||
## Current Page Analysis & Constraints
|
||||
|
||||
### Reference: Existing WDS Course Page
|
||||
|
|
@ -693,7 +1034,7 @@ Link to: Share Your WDS Story
|
|||
## Next Steps
|
||||
|
||||
1. ✅ Complete Product Brief (this document)
|
||||
2. Create Trigger Map (Phase 2)
|
||||
2. **Next:** Create Trigger Map (Phase 2) - Deep dive into user psychology
|
||||
3. Create page specifications with content (Phase 4)
|
||||
4. Generate WordPress editor code
|
||||
5. Test in WordPress staging
|
||||
|
|
@ -701,7 +1042,23 @@ Link to: Share Your WDS Story
|
|||
|
||||
---
|
||||
|
||||
**Document Status:** Draft for review
|
||||
**Next Review:** After Trigger Mapping phase
|
||||
**Last Updated:** December 24, 2025
|
||||
## Document Revision History
|
||||
|
||||
**Version 2.0 - December 27, 2025**
|
||||
- ✅ Added formal Positioning Statement (primary + secondary)
|
||||
- ✅ Added Business Model section (open-source sustainability strategy)
|
||||
- ✅ Expanded Target Users with detailed Primary (Designers) and Secondary (Entrepreneurs) profiles
|
||||
- ✅ Created SMART Success Criteria with specific metrics and timelines
|
||||
- ✅ Added comprehensive Competitive Landscape analysis (5 competitor categories)
|
||||
- ✅ Added Unfair Advantage section (7 key differentiators)
|
||||
- **Status:** Complete and ready for Phase 2 (Trigger Mapping)
|
||||
|
||||
**Version 1.0 - December 24, 2025**
|
||||
- Initial draft with vision, constraints, content concepts
|
||||
|
||||
---
|
||||
|
||||
**Document Status:** ✅ **COMPLETE** - Ready for Trigger Mapping Phase
|
||||
**Next Phase:** Phase 2 - Trigger Mapping
|
||||
**Last Updated:** December 27, 2025
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,365 @@
|
|||
# Trigger Map Poster: WDS Presentation Page
|
||||
|
||||
> Visual overview connecting business goals to user psychology
|
||||
|
||||
**Created:** December 27, 2025
|
||||
**Author:** Mårten Angner with Saga the Analyst
|
||||
**Methodology:** Based on Effect Mapping (Balic & Domingues), adapted by WDS
|
||||
|
||||
---
|
||||
|
||||
## Strategic Documents
|
||||
|
||||
This is the visual overview. For detailed documentation, see:
|
||||
|
||||
- **01-Business-Goals.md** - Full vision statements and SMART objectives
|
||||
- **02-Target-Groups.md** - All personas with complete driving forces
|
||||
- **03-Stina-the-Strategist.md** - Designer persona detail
|
||||
- **04-Lars-the-Leader.md** - Entrepreneur persona detail
|
||||
- **05-Felix-the-Full-Stack.md** - Developer persona detail
|
||||
|
||||
---
|
||||
|
||||
## Vision
|
||||
|
||||
**WDS becomes the guiding light for designers and clients worldwide - empowering designers to thrive in the AI era while delivering exceptional value that drives real product success.**
|
||||
|
||||
---
|
||||
|
||||
## Business Objectives
|
||||
|
||||
### Objective 1: Designer Adoption
|
||||
- **Statement:** Onboard 1,000 designers actively using WDS methodology
|
||||
- **Metric:** Completed Module 01 + cloned repository + started at least one project using WDS
|
||||
- **Target:** 1,000 designers
|
||||
- **Timeline:** 24 months from page launch
|
||||
|
||||
### Objective 2: Entrepreneur Engagement
|
||||
- **Statement:** 100 entrepreneurs embrace WDS for their product development
|
||||
- **Metric:** Entrepreneurs who hired designer using WDS OR completed WDS trigger mapping for their project
|
||||
- **Target:** 100 entrepreneurs
|
||||
- **Timeline:** 24 months from page launch
|
||||
|
||||
### Objective 3: Developer Integration
|
||||
- **Statement:** 100 developers benefit from BMad Method integration
|
||||
- **Metric:** Developers who used BMM agents OR received WDS specifications for implementation
|
||||
- **Target:** 100 developers
|
||||
- **Timeline:** 24 months from page launch
|
||||
|
||||
### Objective 4: Community Growth
|
||||
- **Statement:** Build active WDS community
|
||||
- **Metric:** Discord members actively participating (asking questions, sharing work, giving feedback)
|
||||
- **Target:** 250 active community members
|
||||
- **Timeline:** 24 months
|
||||
|
||||
### Objective 5: Thought Leadership & Validation
|
||||
- **Statement:** Establish WDS as recognized methodology through speaking and real-world case studies
|
||||
- **Metric:** Speaking engagements + published case studies from real projects + testimonials
|
||||
- **Target:** 10 speaking engagements, 20 case studies, 50 testimonials
|
||||
- **Timeline:** 24 months
|
||||
|
||||
### Objective 6: Build Core Evangelist Community ⭐
|
||||
- **Statement:** Build passionate core of WDS believers who advocate and spread the methodology
|
||||
- **Metric:** Active evangelists (completed course, built real project with WDS, actively sharing/teaching others, contributing feedback)
|
||||
- **Target:** 50 hardcore believers and evangelists
|
||||
- **Timeline:** 12 months
|
||||
- **Impact:** These 50 drive all other objectives
|
||||
|
||||
---
|
||||
|
||||
## Target Groups (Prioritized)
|
||||
|
||||
### 1. Stina the Strategist (Designer) - PRIMARY 🎯
|
||||
|
||||
**Priority Reasoning:** Designers shoulder the leadership role. They're the linchpin between business goals and technical implementation. WDS makes them indispensable by giving them the methodology to carry this burden well. These become the 50 hardcore evangelists.
|
||||
|
||||
> Multi-dimensional thinker who loves systems thinking, aesthetics, functionality, and human psychology. Studied psychology and cognition at university. No straight career path - arrived through passion for the meeting between business and user needs. Currently at end of 1-year contract as lone designer in dev team, actively job hunting. Overwhelmed, secretly works overtime. Uses AI in hobbies but lacks confidence to use professionally. Needs hand-holding and structured path.
|
||||
|
||||
**✅ Top 3 Positive Drivers:**
|
||||
- To be the go-to strategic expert - valued and asked for advice
|
||||
- To make real impact on the world through grand adventures
|
||||
- To confidently use AI professionally and scale her impact
|
||||
|
||||
**⚠️ Top 3 Negative Drivers:**
|
||||
- Being replaced by AI or becoming irrelevant
|
||||
- Wasting time/energy on tools that don't work (banging head against wall)
|
||||
- Being sidelined or not valued when she could save the world
|
||||
|
||||
---
|
||||
|
||||
### 2. Lars the Leader (Entrepreneur) - SECONDARY 💼
|
||||
|
||||
**Priority Reasoning:** Entrepreneurs validate that WDS delivers business value and create demand for WDS-trained designers. They need to trust designers and say "We need this, make it happen."
|
||||
|
||||
> Seasoned entrepreneur (employee #3, practically founder) who's burned through projects and learned there are no shortcuts. Not a tech person but plays hybrid PM/CTO role. Leans on consultants. Paid off technical debt, now optimizing UX. Designer going on maternity leave - needs stand-in with AI knowledge and drive. Values team happiness and "spark in eyes" when learning. Takes downtime and bugs very personally.
|
||||
|
||||
**✅ Top 3 Positive Drivers:**
|
||||
- Team that's happy AND productive (optimized machinery)
|
||||
- Smooth designer transition with AI-savvy replacement
|
||||
- Quality work that fulfills the vision (willing to pay)
|
||||
|
||||
**⚠️ Top 3 Negative Drivers:**
|
||||
- Quality dropping or bottlenecks (takes very personally)
|
||||
- Being taken advantage of by consultants
|
||||
- Being embarrassed in front of his team
|
||||
|
||||
---
|
||||
|
||||
### 3. Felix the Full-Stack (Developer) - TERTIARY 💻
|
||||
|
||||
**Priority Reasoning:** Developers benefit from designer's leadership through better specifications. They aren't the primary WDS audience but need to know it makes their life easier.
|
||||
|
||||
> Full-stack developer with straight career path. Studied software engineering, employed his whole life. Loves BMad Method structure and documentation (but hates writing it). Respects designers because he's terrible at "GUIs - who even calls it that anymore?" Loves AI technology but has love-hate relationship with AI code quality. Perfect situation: Designer does "the poetry," gives him good specs, he does his "magic" on dev side.
|
||||
|
||||
**✅ Top 3 Positive Drivers:**
|
||||
- Clear, logical specifications that make his life easier
|
||||
- Designers who think things through before handing off
|
||||
- Work that enlightens his day (not creates problems)
|
||||
|
||||
**⚠️ Top 3 Negative Drivers:**
|
||||
- Illogical designs creating cascading headaches
|
||||
- Vague specs forcing him to guess designer's intent
|
||||
- Being forced to do UI work he's terrible at
|
||||
|
||||
---
|
||||
|
||||
## The Battle Cry 🔥
|
||||
|
||||
**"Shoulder the complexity, break it down using AI as your co-pilot. Not as a burden, but with excitement. Not as a task, but as a calling!"**
|
||||
|
||||
---
|
||||
|
||||
## Trigger Map Visualization
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ VISION │
|
||||
│ WDS becomes the guiding light for designers and clients worldwide │
|
||||
│ Empowering designers to thrive while delivering exceptional value │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ OBJECTIVES │
|
||||
│ • 1,000 designers using WDS │
|
||||
│ • 50 hardcore evangelists (12 months) ⭐ THE ENGINE │
|
||||
│ • 100 entrepreneurs embracing WDS │
|
||||
│ • 100 developers benefiting │
|
||||
│ • 250 active community members │
|
||||
│ • 10 speaking engagements, 20 case studies, 50 testimonials │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
┌───────────────────────────┼───────────────────────────┐
|
||||
▼ ▼ ▼
|
||||
┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐
|
||||
│ 1. STINA │ │ 2. LARS │ │ 3. FELIX │
|
||||
│ The Strategist │ │ The Leader │ │ The Full-Stack │
|
||||
│ (Designer) │ │ (Entrepreneur) │ │ (Developer) │
|
||||
│ PRIMARY 🎯 │ │ SECONDARY 💼 │ │ TERTIARY 💻 │
|
||||
└───────────────────┘ └───────────────────┘ └───────────────────┘
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
[Drivers] [Drivers] [Drivers]
|
||||
|
||||
✅ WANTS: ✅ WANTS: ✅ WANTS:
|
||||
• Be strategic expert • Happy & productive team • Clear specs
|
||||
• Make real impact • Smooth transition • Logical thinking
|
||||
• Use AI confidently • Quality work • Enlightened day
|
||||
|
||||
⚠️ FEARS: ⚠️ FEARS: ⚠️ FEARS:
|
||||
• Being replaced by AI • Quality dropping • Illogical designs
|
||||
• Wasting time/energy • Being taken advantage • Vague specs
|
||||
• Being sidelined • Embarrassment • Forced UI work
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Design Focus Statement
|
||||
|
||||
**The WDS Presentation Page transforms designers from overwhelmed task-doers into empowered strategic leaders who shoulder complexity as a calling, not a burden.**
|
||||
|
||||
**Primary Design Target:** Stina the Strategist (Designer)
|
||||
|
||||
**Must Address (Critical for Conversion):**
|
||||
1. Fear of AI replacing designers → Show how WDS makes designers indispensable
|
||||
2. Lack of confidence with AI tools → Provide structured, hand-holding path
|
||||
3. Feeling overwhelmed and sidelined → Position as strategic leader who shoulders complexity
|
||||
4. Wasting time on tools that don't work → Prove methodology with real results (Dog Week case study)
|
||||
5. Not being valued → Show path to becoming "go-to expert" asked for advice
|
||||
|
||||
**Should Address (Supporting Conversion):**
|
||||
1. Lars needs trust signals → Show entrepreneurs how WDS designers deliver business value
|
||||
2. Felix needs to see benefits → Quick mention that specs will be better
|
||||
3. Community proof → Show the 50 evangelists emerging (testimonials, case studies)
|
||||
4. Learning curve concerns → Module structure with hand-holding clear
|
||||
5. Integration with dev workflow → BMad Method foundation explained
|
||||
|
||||
---
|
||||
|
||||
## Cross-Group Patterns
|
||||
|
||||
### Shared Drivers Across All Three
|
||||
|
||||
**Common Ground:**
|
||||
- All three want **quality work** and **clear communication**
|
||||
- All three fear **wasted effort** and **things breaking down**
|
||||
- All three value **structure** and **thinking things through**
|
||||
- All three are interested in **AI** but have reservations
|
||||
|
||||
**Design Implication:** WDS speaks to a shared desire for structure, quality, and thoughtful AI integration. The page should emphasize these universal values while primarily addressing Stina.
|
||||
|
||||
---
|
||||
|
||||
### Unique Drivers Per Group
|
||||
|
||||
**Stina's Unique Needs:**
|
||||
- Emotional transformation: burden → calling
|
||||
- Identity shift: task-doer → strategic leader
|
||||
- AI confidence building with hand-holding
|
||||
|
||||
**Lars's Unique Needs:**
|
||||
- Business validation and ROI proof
|
||||
- Trust in designer-led process
|
||||
- Team optimization and smooth transitions
|
||||
|
||||
**Felix's Unique Needs:**
|
||||
- Better handoffs and fewer headaches
|
||||
- UI help without learning design
|
||||
- Respect for logical consistency
|
||||
|
||||
---
|
||||
|
||||
### Strategic Relationships
|
||||
|
||||
**The Triangle:**
|
||||
```
|
||||
STINA (Designer)
|
||||
Strategic Leader
|
||||
Shoulders complexity
|
||||
│
|
||||
│ Creates specs for
|
||||
▼
|
||||
FELIX (Developer)
|
||||
Gets logical specs
|
||||
Life gets easier
|
||||
│
|
||||
│ Delivers quality for
|
||||
▼
|
||||
LARS (Entrepreneur)
|
||||
Gets business value
|
||||
Trusts the process
|
||||
│
|
||||
│ Hires/values
|
||||
└──────────────► STINA
|
||||
(Loop closes)
|
||||
```
|
||||
|
||||
**The Flywheel:**
|
||||
1. Stina learns WDS → becomes strategic leader
|
||||
2. Stina delivers better specs → Felix's life improves
|
||||
3. Felix delivers quality → Lars's business succeeds
|
||||
4. Lars hires more WDS designers → creates demand
|
||||
5. Success stories inspire more Stinas → 50 evangelists emerge
|
||||
6. Evangelists spread WDS → 1,000 designers adopt
|
||||
|
||||
**Design Implication:** The page must start the flywheel by converting Stina first. Lars and Felix are supporting actors in Stina's hero journey.
|
||||
|
||||
---
|
||||
|
||||
## The Transformation Journey
|
||||
|
||||
### Stina's Emotional Arc (What the Page Must Deliver):
|
||||
|
||||
**BEFORE WDS:**
|
||||
- 😰 Overwhelmed, working secret overtime
|
||||
- 😔 Feels threatened by AI
|
||||
- 🤷♀️ Lacks confidence, fears wasting time
|
||||
- 😤 Sidelined, not valued as strategic partner
|
||||
- 📦 Just a "pixel pusher" executing others' vision
|
||||
|
||||
**AFTER WDS:**
|
||||
- 🎯 Strategic leader who shoulders complexity
|
||||
- 🚀 AI as co-pilot amplifying expertise
|
||||
- 💪 Confident with structured path and hand-holding
|
||||
- ⭐ Go-to expert asked for advice
|
||||
- 🌍 Making real impact through grand adventures
|
||||
- 🔥 Treating design as a CALLING, not a burden
|
||||
|
||||
**The Battle Cry Delivers This Transformation**
|
||||
|
||||
---
|
||||
|
||||
## Key Insights for Design Phase
|
||||
|
||||
### Content Priorities Based on Triggers:
|
||||
|
||||
**Hero Section Must:**
|
||||
- Hook Stina with "guiding light for designers in AI era"
|
||||
- Address replacement fear immediately
|
||||
- Position as leadership opportunity, not threat
|
||||
|
||||
**Methodology Section Must:**
|
||||
- Show structure (addresses confidence + wasting time fears)
|
||||
- Prove with results (Dog Week case study)
|
||||
- Explain hand-holding approach (course modules)
|
||||
|
||||
**Benefits Section Must:**
|
||||
- Make designer indispensable (replacement fear)
|
||||
- Show AI as co-pilot (not replacement)
|
||||
- Position as strategic leader (not task-doer)
|
||||
|
||||
**Course/Installation Must:**
|
||||
- Show clear path with hand-holding
|
||||
- Low barrier to entry (free, open-source)
|
||||
- Prove it's worth time investment
|
||||
|
||||
**Social Proof Must:**
|
||||
- Show early evangelists emerging
|
||||
- Real project case studies
|
||||
- Testimonials from designers like Stina
|
||||
|
||||
---
|
||||
|
||||
## Success Metrics Alignment
|
||||
|
||||
### How Trigger Map Connects to Objectives:
|
||||
|
||||
**Converting Stina → Achieves:**
|
||||
- ✅ 1,000 designers (she's the primary target)
|
||||
- ✅ 50 evangelists (she becomes one)
|
||||
- ✅ 250 community (she participates)
|
||||
- ✅ Testimonials/case studies (she shares success)
|
||||
|
||||
**Validating for Lars → Achieves:**
|
||||
- ✅ 100 entrepreneurs (he sees business value)
|
||||
- ✅ Speaking engagements (he recommends methodology)
|
||||
- ✅ Case studies (his company becomes proof)
|
||||
|
||||
**Helping Felix → Achieves:**
|
||||
- ✅ 100 developers (word spreads about better specs)
|
||||
- ✅ Community feedback (dev perspective helps refine)
|
||||
|
||||
**The Trigger Map IS the Strategic Foundation**
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
This Trigger Map provides strategic foundation for all design work:
|
||||
|
||||
- ✅ **Phase 1: Product Brief** - Complete
|
||||
- ✅ **Phase 2: Trigger Mapping** - Complete (this document)
|
||||
- [ ] **Phase 3: Platform Requirements** - Technical foundation (if needed)
|
||||
- [ ] **Phase 4: UX Design** - Begin sketching and specifications
|
||||
- [ ] **Phase 5: Design System** - Extract components (if needed)
|
||||
- [ ] **Phase 6: Development Handoff** - PRD finalization
|
||||
|
||||
**Primary Design Target:** Stina the Strategist
|
||||
**Battle Cry:** Shoulder the complexity as a calling, not a burden
|
||||
**Transformation:** Overwhelmed → Empowered Strategic Leader
|
||||
|
||||
---
|
||||
|
||||
_Generated by Whiteport Design Studio_
|
||||
_Trigger Mapping methodology credits: Effect Mapping by Mijo Balic & Ingrid Domingues (inUse), adapted with negative driving forces by WDS_
|
||||
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
# Where to Go Next
|
||||
|
||||
**You've installed WDS and completed the quick start. Now what?**
|
||||
|
||||
---
|
||||
|
||||
## Choose Your Path
|
||||
|
||||
### 🎓 Learn the Concepts (Recommended First)
|
||||
|
||||
**[Course](../course/00-course-overview.md)**
|
||||
|
||||
Deep dive into:
|
||||
|
||||
- Why designers are irreplaceable in the AI era
|
||||
- What WDS is and how it works
|
||||
- The BMad Method philosophy
|
||||
- Why-based specifications
|
||||
- Complete walkthroughs
|
||||
|
||||
**Best for:** Understanding the "why" behind WDS
|
||||
|
||||
**Time:** 1-2 hours (video series)
|
||||
|
||||
---
|
||||
|
||||
### 🚀 Start Your Project
|
||||
|
||||
**[Workflows Guide](../WDS-WORKFLOWS-GUIDE.md)**
|
||||
|
||||
Step-by-step workflows for:
|
||||
|
||||
- Phase 1: Trigger Mapping
|
||||
- Phase 2: Information Architecture
|
||||
- Phase 3: Interaction Design
|
||||
- Phase 4: UX SpecificationsPleas
|
||||
|
||||
**Best for:** Hands-on learning with a real project
|
||||
|
||||
**Time:** Ongoing (project-based)
|
||||
|
||||
---
|
||||
|
||||
### 📚 Reference Documentation
|
||||
|
||||
**[Modular Architecture](../workflows/4-ux-design/modular-architecture/00-MODULAR-ARCHITECTURE-GUIDE.md)**
|
||||
|
||||
Technical details on:
|
||||
|
||||
- Three-tier file structure
|
||||
- Content placement rules
|
||||
- Component decomposition
|
||||
- Storyboard integration
|
||||
|
||||
**Best for:** Looking up specific techniques
|
||||
|
||||
**Time:** As needed (reference)
|
||||
|
||||
---
|
||||
|
||||
## Recommended Learning Path
|
||||
|
||||
```
|
||||
1. Quick Start (5 min) ✅ You are here
|
||||
↓
|
||||
2. Tutorial (1-2 hours)
|
||||
Watch videos, understand concepts
|
||||
↓
|
||||
3. Your First Project (ongoing)
|
||||
Apply WDS to a real project
|
||||
↓
|
||||
4. Reference Docs (as needed)
|
||||
Look up specific techniques
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Community & Support
|
||||
|
||||
### Discord
|
||||
|
||||
Join the WDS community for:
|
||||
|
||||
- Questions and answers
|
||||
- Project feedback
|
||||
- Feature discussions
|
||||
|
||||
### GitHub
|
||||
|
||||
- Report issues
|
||||
- Request features
|
||||
- Contribute
|
||||
|
||||
### YouTube
|
||||
|
||||
- Video tutorials
|
||||
- Walkthroughs
|
||||
- Case studies
|
||||
|
||||
---
|
||||
|
||||
## Quick Links
|
||||
|
||||
- [Course](../course/00-course-overview.md)
|
||||
- [Workflows](../WDS-WORKFLOWS-GUIDE.md)
|
||||
- [Modular Architecture](../workflows/4-ux-design/modular-architecture/00-MODULAR-ARCHITECTURE-GUIDE.md)
|
||||
- [Why-Based Specifications](../workflows/4-ux-design/WHY-BASED-SPECIFICATIONS.md)
|
||||
|
||||
---
|
||||
|
||||
**Ready to dive deeper? Start with the [Course](../course/00-course-overview.md)!**
|
||||
|
||||
---
|
||||
|
||||
[← Back to Quick Start](quick-start.md)
|
||||
|
|
@ -70,15 +70,17 @@ WDS is completely free and open-source:
|
|||
|
||||
---
|
||||
|
||||
## Learn More
|
||||
## What's Next?
|
||||
|
||||
**[Continue to About the Course →](00-about-the-course.md)**
|
||||
Now that you understand what WDS is, let's get it installed:
|
||||
|
||||
**[Continue to Installation →](installation.md)**
|
||||
|
||||
Or return to the overview:
|
||||
|
||||
**[← Back to Getting Started Overview](00-getting-started-overview.md)**
|
||||
**[← Back to Getting Started Overview](getting-started-overview.md)**
|
||||
|
||||
---
|
||||
|
||||
**Created by Mårten Angner and the Whiteport team**
|
||||
**Created by Mårten Angner and the Whiteport team**
|
||||
**Free and open-source for designers everywhere**
|
||||
|
|
@ -10,7 +10,7 @@ You are **Freya WDS Designer Agent**.
|
|||
|
||||
**Activation Flow**: Follow these steps sequentially. Each step loads the next instruction file.
|
||||
|
||||
**Start here**: `src/modules/wds/getting-started/agents/activation/step-01-load-agent-definition.md`
|
||||
**Start here**: `src/modules/wds/getting-started/agent-activation/activation/step-01-load-agent-definition.md`
|
||||
|
||||
**Activation Sequence**:
|
||||
1. Load agent definition
|
||||
|
|
@ -10,7 +10,7 @@ You are **Idunn WDS PM Agent**.
|
|||
|
||||
**Activation Flow**: Follow these steps sequentially. Each step loads the next instruction file.
|
||||
|
||||
**Start here**: `src/modules/wds/getting-started/agents/activation/step-01-load-agent-definition.md`
|
||||
**Start here**: `src/modules/wds/getting-started/agent-activation/activation/step-01-load-agent-definition.md`
|
||||
|
||||
**Activation Sequence**:
|
||||
1. Load agent definition
|
||||
|
|
@ -10,7 +10,7 @@ You are **Mimir WDS Orchestrator Agent**.
|
|||
|
||||
**Activation Flow**: Follow these steps sequentially. Each step loads the next instruction file.
|
||||
|
||||
**Start here**: `src/modules/wds/getting-started/agents/activation/step-01-load-agent-definition.md`
|
||||
**Start here**: `src/modules/wds/getting-started/agent-activation/activation/step-01-load-agent-definition.md`
|
||||
|
||||
**Note**: Mimir uses the standard activation flow but has additional steps for skill assessment and environment check. These are handled after the standard activation sequence.
|
||||
|
||||
|
|
@ -10,7 +10,7 @@ You are **Saga WDS Analyst Agent**.
|
|||
|
||||
**Activation Flow**: Follow these steps sequentially. Each step loads the next instruction file.
|
||||
|
||||
**Start here**: `src/modules/wds/getting-started/agents/activation/step-01-load-agent-definition.md`
|
||||
**Start here**: `src/modules/wds/getting-started/agent-activation/activation/step-01-load-agent-definition.md`
|
||||
|
||||
**Activation Sequence**:
|
||||
1. Load agent definition
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
# Getting Started with WDS
|
||||
|
||||
**Everything you need to start using Whiteport Design Studio**
|
||||
|
||||
---
|
||||
|
||||
## Your Journey Begins Here
|
||||
|
||||
Welcome to Whiteport Design Studio! This guide will take you from zero to creating your first AI-ready specifications in minutes.
|
||||
|
||||
---
|
||||
|
||||
## Quick Navigation
|
||||
|
||||
### 📖 [About WDS](about-wds.md)
|
||||
|
||||
**Start here if you're new to WDS**
|
||||
|
||||
Learn what WDS is, who created it, and why it exists. Understand the paradigm shift where design becomes specification.
|
||||
|
||||
**Time:** 5 minutes
|
||||
|
||||
---
|
||||
|
||||
### 💻 [Installation](installation.md)
|
||||
|
||||
**Set up WDS in 5 minutes**
|
||||
|
||||
Quick install guide and manual initialization options.
|
||||
|
||||
**Time:** 5 minutes
|
||||
|
||||
---
|
||||
|
||||
### 🚀 [Quick Start](quick-start.md)
|
||||
|
||||
**Your first 5 minutes with WDS**
|
||||
|
||||
Hands-on tutorial: Create a Trigger Map, initialize a scenario, and generate your first specifications.
|
||||
|
||||
**Time:** 5 minutes
|
||||
|
||||
---
|
||||
|
||||
### 🎯 [Where to Go Next](where-to-go-next.md)
|
||||
|
||||
**Choose your learning path**
|
||||
|
||||
Options for diving deeper:
|
||||
- 🎓 Take the complete course
|
||||
- 🚀 Start your first project
|
||||
- 📚 Browse reference docs
|
||||
|
||||
**Time:** Ongoing
|
||||
|
||||
---
|
||||
|
||||
## Recommended Path
|
||||
|
||||
```
|
||||
1. About WDS (5 min)
|
||||
Learn the concepts
|
||||
↓
|
||||
2. Installation (5 min)
|
||||
Get set up
|
||||
↓
|
||||
3. Quick Start (5 min)
|
||||
Hands-on tutorial
|
||||
↓
|
||||
4. Where to Go Next
|
||||
Choose your path
|
||||
```
|
||||
|
||||
**Total time to start:** 15 minutes
|
||||
|
||||
---
|
||||
|
||||
## What You'll Learn
|
||||
|
||||
By the end of this getting started guide, you'll know:
|
||||
|
||||
✅ What WDS is and why it matters
|
||||
✅ How to install and set up WDS
|
||||
✅ How to create your first Trigger Map
|
||||
✅ How to generate why-based specifications
|
||||
✅ Where to go next in your WDS journey
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Basic familiarity with design thinking
|
||||
- Interest in AI-assisted design
|
||||
- A project or idea to work on (helpful but not required)
|
||||
|
||||
No coding experience needed!
|
||||
|
||||
---
|
||||
|
||||
## Ready?
|
||||
|
||||
**[Start with About WDS →](about-wds.md)**
|
||||
|
||||
Or jump directly to:
|
||||
- [Installation](installation.md)
|
||||
- [Quick Start](quick-start.md)
|
||||
|
||||
---
|
||||
|
||||
**Created by Mårten Angner and the Whiteport team**
|
||||
**Free and open-source for designers everywhere**
|
||||
|
||||
|
|
@ -43,6 +43,7 @@ You should see:
|
|||
|
||||
## Next Steps
|
||||
|
||||
- [About WDS](about-wds.md) - Understand what WDS is and why it exists
|
||||
- [Quick Start Guide](quick-start.md) - Your first 5 minutes
|
||||
- [Course](../course/00-course-overview.md) - Learn the concepts deeply
|
||||
|
||||
|
|
|
|||
|
|
@ -122,4 +122,4 @@ You created **why-based specifications** in 5 minutes:
|
|||
|
||||
---
|
||||
|
||||
[← Back to Getting Started](installation.md)
|
||||
[← Back to Installation](installation.md) | [Next: Where to Go Next →](where-to-go-next.md)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Where to Go Next
|
||||
|
||||
**You've installed WDS and completed the quick start. Now what?**
|
||||
**You've learned about WDS, installed it, and completed the quick start. Now what?**
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,15 @@ Ready to begin? 🎯</output>
|
|||
</step>
|
||||
|
||||
<step n="7" goal="Compile Trigger Map Documents">
|
||||
<action>Generate 00-Trigger-Map-Poster.md from template</action>
|
||||
<action>Load micro-instructions-mermaid-diagram.md for diagram formatting rules</action>
|
||||
<action>Generate 00-Trigger-Map-Poster.md from template with Mermaid diagram</action>
|
||||
<action>Follow micro instructions exactly:
|
||||
- Use light gray styling with dark text
|
||||
- Add padding (<br/>) to all nodes
|
||||
- Include emojis: ✅ for wants, ❌ for fears
|
||||
- Exactly 3 drivers per category
|
||||
- Match persona emojis in both TG and DF nodes
|
||||
- Apply professional styling classes</action>
|
||||
<action>Generate 01-Business-Goals.md (visions & objectives)</action>
|
||||
<action>Generate 02-Target-Groups.md (all personas with drivers)</action>
|
||||
<action>Generate 03-Feature-Impact-Analysis.md from template</action>
|
||||
|
|
@ -89,7 +97,7 @@ Ready to begin? 🎯</output>
|
|||
|
||||
**Created:**
|
||||
|
||||
- `B-Trigger-Map/00-Trigger-Map-Poster.md` - Visual overview
|
||||
- `B-Trigger-Map/00-Trigger-Map-Poster.md` - Visual overview with Mermaid diagram
|
||||
- `B-Trigger-Map/01-Business-Goals.md` - Visions & objectives
|
||||
- `B-Trigger-Map/02-Target-Groups.md` - All personas with drivers
|
||||
- `B-Trigger-Map/03-Feature-Impact-Analysis.md` - Prioritized features
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
# Generate Mermaid Trigger Map Diagram
|
||||
|
||||
<critical>You are Saga the Analyst - creating visual strategic clarity</critical>
|
||||
|
||||
---
|
||||
|
||||
## Instructions
|
||||
|
||||
To generate a professional Mermaid trigger map diagram:
|
||||
|
||||
**START HERE:** Load and follow `steps/step-01-initialize-structure.md`
|
||||
|
||||
Each step file contains:
|
||||
- Detailed instructions for that specific task
|
||||
- Examples and templates
|
||||
- Rules checklist
|
||||
- Link to next step
|
||||
|
||||
**IMPORTANT:** Follow steps sequentially. Do NOT skip ahead. Each step builds on the previous one.
|
||||
|
||||
---
|
||||
|
||||
## Step Sequence
|
||||
|
||||
1. **Initialize Structure** → Set up Mermaid config and node IDs
|
||||
2. **Format Business Goals** → Create BG nodes with emojis
|
||||
3. **Format Platform** → Create central PLATFORM node
|
||||
4. **Format Target Groups** → Create TG persona nodes
|
||||
5. **Format Driving Forces** → Create DF nodes with ✅ and ❌
|
||||
6. **Create Connections** → Link all nodes properly
|
||||
7. **Apply Styling** → Add light gray professional styling
|
||||
8. **Quality Check** → Verify everything meets standards
|
||||
|
||||
---
|
||||
|
||||
## Begin
|
||||
|
||||
→ **[Start: Step 01 - Initialize Structure](steps/step-01-initialize-structure.md)**
|
||||
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
# Step 01: Initialize Diagram Structure
|
||||
|
||||
**Goal:** Set up the basic Mermaid diagram structure with configuration
|
||||
|
||||
---
|
||||
|
||||
## Instructions
|
||||
|
||||
### 1. Start with Mermaid Configuration
|
||||
|
||||
**Always begin with:**
|
||||
|
||||
```mermaid
|
||||
%%{init: {'theme':'base', 'themeVariables': { 'fontFamily':'Inter, system-ui, sans-serif', 'fontSize':'14px'}}}%%
|
||||
flowchart LR
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Use `base` theme
|
||||
- Set font to `Inter, system-ui, sans-serif`
|
||||
- Set fontSize to `14px`
|
||||
- Use `flowchart LR` (left-to-right direction)
|
||||
|
||||
---
|
||||
|
||||
### 2. Add Section Comments
|
||||
|
||||
**Structure the diagram with comments:**
|
||||
|
||||
```
|
||||
%% Business Goals (Left)
|
||||
|
||||
%% Central Platform
|
||||
|
||||
%% Target Groups (Right)
|
||||
|
||||
%% Driving Forces (Far Right)
|
||||
|
||||
%% Connections
|
||||
|
||||
%% Styling
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Use `%%` for comments
|
||||
- Keep sections clearly labeled
|
||||
- Maintain consistent spacing
|
||||
|
||||
---
|
||||
|
||||
### 3. Determine Node IDs
|
||||
|
||||
**Create node ID list based on data:**
|
||||
|
||||
- **Business Goals:** `BG0`, `BG1`, `BG2` (sequential)
|
||||
- **Platform:** `PLATFORM` (always singular)
|
||||
- **Target Groups:** `TG0`, `TG1`, `TG2` (sequential, matching persona count)
|
||||
- **Driving Forces:** `DF0`, `DF1`, `DF2` (sequential, matching target groups)
|
||||
|
||||
**Example for 3 personas:**
|
||||
```
|
||||
BG0, BG1, BG2
|
||||
PLATFORM
|
||||
TG0, TG1, TG2
|
||||
DF0, DF1, DF2
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Output
|
||||
|
||||
Store:
|
||||
- `diagram_config`: The init configuration
|
||||
- `node_ids`: List of all node IDs (BG*, PLATFORM, TG*, DF*)
|
||||
- `diagram_structure`: Template with comments
|
||||
|
||||
---
|
||||
|
||||
## Next Step
|
||||
|
||||
→ **[Step 02: Format Business Goals](step-02-format-business-goals.md)**
|
||||
|
||||
Format the business goals nodes with proper padding and content.
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
# Step 02: Format Business Goals Nodes
|
||||
|
||||
**Goal:** Create properly formatted business goals nodes with emojis and padding
|
||||
|
||||
---
|
||||
|
||||
## Node Structure Template
|
||||
|
||||
```
|
||||
BGX["<br/>EMOJI TITLE<br/><br/>Point 1<br/>Point 2<br/>Point 3<br/><br/>"]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Instructions
|
||||
|
||||
### 1. For Each Business Goal
|
||||
|
||||
**Required elements:**
|
||||
1. Start with `<br/>` (top padding)
|
||||
2. Emoji + Title in ALL CAPS
|
||||
3. Blank line (`<br/><br/>`)
|
||||
4. 3-5 key points (each on separate line with `<br/>`)
|
||||
5. End with `<br/><br/>` (bottom padding)
|
||||
|
||||
---
|
||||
|
||||
### 2. Choose Appropriate Emoji
|
||||
|
||||
**Common business goal emojis:**
|
||||
- 🌟 Vision
|
||||
- 📊 Objectives/Metrics
|
||||
- 🚀 Growth/Expansion
|
||||
- 💰 Revenue/Business
|
||||
- 🤝 Partnerships/Community
|
||||
- 🎯 Goals/Targets
|
||||
|
||||
---
|
||||
|
||||
### 3. Example Implementation
|
||||
|
||||
```mermaid
|
||||
BG0["<br/>🌟 WDS VISION<br/><br/>Guiding light for designers worldwide<br/>Empowering designers in AI era<br/>Delivering exceptional value<br/>Making designers indispensable<br/><br/>"]
|
||||
|
||||
BG1["<br/>📊 CORE OBJECTIVES<br/><br/>1,000 designers using WDS<br/>50 hardcore evangelists ⭐<br/>100 entrepreneurs embracing<br/>100 developers benefiting<br/><br/>"]
|
||||
|
||||
BG2["<br/>🚀 COMMUNITY GROWTH<br/><br/>250 active community members<br/>10 speaking engagements<br/>20 case studies<br/>50 testimonials<br/><br/>"]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Rules Checklist
|
||||
|
||||
- [ ] Node ID follows pattern `BG0`, `BG1`, `BG2`
|
||||
- [ ] Starts with `<br/>`
|
||||
- [ ] Emoji at beginning of title
|
||||
- [ ] Title in ALL CAPS
|
||||
- [ ] Blank line after title (`<br/><br/>`)
|
||||
- [ ] 3-5 key points
|
||||
- [ ] Each point ends with `<br/>`
|
||||
- [ ] Ends with `<br/><br/>`
|
||||
- [ ] No HTML tags (bold, italic)
|
||||
- [ ] Proper quote and bracket closure `"]`
|
||||
|
||||
---
|
||||
|
||||
## Output
|
||||
|
||||
Store:
|
||||
- `business_goals_nodes`: Array of formatted BG nodes
|
||||
- `business_goals_count`: Number of goals (for connections later)
|
||||
|
||||
---
|
||||
|
||||
## Next Step
|
||||
|
||||
→ **[Step 03: Format Platform Node](step-03-format-platform.md)**
|
||||
|
||||
Create the central platform node with transformation statement.
|
||||
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
# Step 03: Format Platform Node
|
||||
|
||||
**Goal:** Create the central platform node with product name and transformation statement
|
||||
|
||||
---
|
||||
|
||||
## Node Structure Template
|
||||
|
||||
```
|
||||
PLATFORM["<br/>EMOJI PRODUCT NAME<br/><br/>Category or tagline<br/><br/>Transformation statement<br/>that spans multiple lines<br/>describing the change<br/><br/>"]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Instructions
|
||||
|
||||
### 1. Platform Node Format
|
||||
|
||||
**Required elements:**
|
||||
1. Start with `<br/>` (top padding)
|
||||
2. Emoji + Product name in ALL CAPS
|
||||
3. Blank line (`<br/><br/>`)
|
||||
4. Category or tagline
|
||||
5. Blank line (`<br/><br/>`)
|
||||
6. Transformation statement (the "battle cry") - break across multiple lines
|
||||
7. End with `<br/><br/>` (bottom padding)
|
||||
|
||||
---
|
||||
|
||||
### 2. Choose Platform Emoji
|
||||
|
||||
**Common platform emojis:**
|
||||
- 🎨 Design/Creative products
|
||||
- 💻 Software/Tech products
|
||||
- 📱 Mobile/App products
|
||||
- 🛠️ Tools/Utilities
|
||||
- 📊 Analytics/Data products
|
||||
- 🤖 AI/Automation products
|
||||
|
||||
---
|
||||
|
||||
### 3. Transformation Statement
|
||||
|
||||
**The transformation statement should:**
|
||||
- Describe the before → after change
|
||||
- Be emotionally compelling
|
||||
- Be specific about the transformation
|
||||
- Span 3-5 lines for readability
|
||||
- Connect to the battle cry
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Transform designers from overwhelmed<br/>task-doers into empowered strategic<br/>leaders who shoulder complexity<br/>as a calling, not a burden
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. Example Implementation
|
||||
|
||||
```mermaid
|
||||
PLATFORM["<br/>🎨 WHITEPORT DESIGN STUDIO<br/><br/>End-to-End Design Methodology<br/><br/>Transform designers from overwhelmed<br/>task-doers into empowered strategic<br/>leaders who shoulder complexity<br/>as a calling, not a burden<br/><br/>"]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Rules Checklist
|
||||
|
||||
- [ ] Node ID is exactly `PLATFORM`
|
||||
- [ ] Starts with `<br/>`
|
||||
- [ ] Emoji at beginning
|
||||
- [ ] Product name in ALL CAPS
|
||||
- [ ] Category/tagline included
|
||||
- [ ] Transformation statement spans multiple lines
|
||||
- [ ] Each line ends with `<br/>`
|
||||
- [ ] Ends with `<br/><br/>`
|
||||
- [ ] No HTML tags
|
||||
- [ ] Proper quote and bracket closure `"]`
|
||||
|
||||
---
|
||||
|
||||
## Output
|
||||
|
||||
Store:
|
||||
- `platform_node`: Formatted PLATFORM node
|
||||
- `transformation_statement`: For reference in other documents
|
||||
|
||||
---
|
||||
|
||||
## Next Step
|
||||
|
||||
→ **[Step 04: Format Target Groups](step-04-format-target-groups.md)**
|
||||
|
||||
Create persona nodes with priority levels and profiles.
|
||||
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
# Step 04: Format Target Group Nodes
|
||||
|
||||
**Goal:** Create persona nodes with emojis, priority levels, and key profile traits
|
||||
|
||||
---
|
||||
|
||||
## Node Structure Template
|
||||
|
||||
```
|
||||
TGX["<br/>EMOJI PERSONA NAME<br/>PRIORITY LEVEL<br/><br/>Profile trait 1<br/>Profile trait 2<br/>Profile trait 3<br/><br/>"]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Instructions
|
||||
|
||||
### 1. For Each Persona/Target Group
|
||||
|
||||
**Required elements:**
|
||||
1. Start with `<br/>` (top padding)
|
||||
2. Emoji + Persona name in ALL CAPS
|
||||
3. Priority level (PRIMARY TARGET, SECONDARY TARGET, etc.)
|
||||
4. Blank line (`<br/><br/>`)
|
||||
5. 3-4 key profile traits (concise, one line each with `<br/>`)
|
||||
6. End with `<br/><br/>` (bottom padding)
|
||||
|
||||
---
|
||||
|
||||
### 2. Choose Persona Emoji
|
||||
|
||||
**Common persona emojis:**
|
||||
- 🎯 Strategic/Primary personas
|
||||
- 💼 Business/Leadership personas
|
||||
- 💻 Technical/Developer personas
|
||||
- 👥 Team/Group personas
|
||||
- 🎨 Creative/Designer personas
|
||||
- 📱 User/Customer personas
|
||||
|
||||
**Important:** Use same emoji for both TG node and corresponding DF node
|
||||
|
||||
---
|
||||
|
||||
### 3. Priority Levels
|
||||
|
||||
**Use consistent format:**
|
||||
- PRIMARY TARGET
|
||||
- SECONDARY TARGET
|
||||
- TERTIARY TARGET
|
||||
- FOURTH TARGET
|
||||
- FIFTH TARGET
|
||||
|
||||
**Always in ALL CAPS**
|
||||
|
||||
---
|
||||
|
||||
### 4. Profile Traits
|
||||
|
||||
**Keep traits:**
|
||||
- Concise (one line each)
|
||||
- Descriptive but brief
|
||||
- Connected with dashes for readability
|
||||
- 3-4 traits per persona
|
||||
|
||||
**Examples:**
|
||||
- `Designer - Psychology background`
|
||||
- `Job hunting - Overwhelmed`
|
||||
- `AI curious but lacks confidence`
|
||||
|
||||
---
|
||||
|
||||
### 5. Example Implementation
|
||||
|
||||
```mermaid
|
||||
TG0["<br/>🎯 STINA THE STRATEGIST<br/>PRIMARY TARGET<br/><br/>Designer - Psychology background<br/>Job hunting - Overwhelmed<br/>AI curious but lacks confidence<br/><br/>"]
|
||||
|
||||
TG1["<br/>💼 LARS THE LEADER<br/>SECONDARY TARGET<br/><br/>Entrepreneur - Employee #3<br/>Non-tech founder role<br/>Designer on maternity leave<br/><br/>"]
|
||||
|
||||
TG2["<br/>💻 FELIX THE FULL-STACK<br/>TERTIARY TARGET<br/><br/>Developer - Software engineer<br/>Loves structure - Hates UI<br/>Respects design craft<br/><br/>"]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Rules Checklist
|
||||
|
||||
- [ ] Node ID follows pattern `TG0`, `TG1`, `TG2`
|
||||
- [ ] Starts with `<br/>`
|
||||
- [ ] Emoji matches persona type
|
||||
- [ ] Persona name in ALL CAPS
|
||||
- [ ] Priority level in ALL CAPS
|
||||
- [ ] Blank line after priority (`<br/><br/>`)
|
||||
- [ ] 3-4 profile traits
|
||||
- [ ] Each trait ends with `<br/>`
|
||||
- [ ] Ends with `<br/><br/>`
|
||||
- [ ] No HTML tags
|
||||
- [ ] Proper quote and bracket closure `"]`
|
||||
|
||||
---
|
||||
|
||||
## Output
|
||||
|
||||
Store:
|
||||
- `target_group_nodes`: Array of formatted TG nodes
|
||||
- `persona_emojis`: Map of persona ID to emoji (for DF nodes)
|
||||
- `persona_count`: Number of personas
|
||||
|
||||
---
|
||||
|
||||
## Next Step
|
||||
|
||||
→ **[Step 05: Format Driving Forces](step-05-format-driving-forces.md)**
|
||||
|
||||
Create driving forces nodes with ✅ wants and ❌ fears.
|
||||
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
# Step 05: Format Driving Forces Nodes
|
||||
|
||||
**Goal:** Create driving forces nodes with wants (✅) and fears (❌) for each persona
|
||||
|
||||
---
|
||||
|
||||
## Node Structure Template
|
||||
|
||||
```
|
||||
DFX["<br/>EMOJI PERSONA'S DRIVERS<br/><br/>WANTS<br/>✅ Positive driver 1<br/>✅ Positive driver 2<br/>✅ Positive driver 3<br/><br/>FEARS<br/>❌ Negative driver 1<br/>❌ Negative driver 2<br/>❌ Negative driver 3<br/><br/>"]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Instructions
|
||||
|
||||
### 1. For Each Persona (Match TG Nodes)
|
||||
|
||||
**Required elements:**
|
||||
1. Start with `<br/>` (top padding)
|
||||
2. **Same emoji as corresponding TG node** + "PERSONA'S DRIVERS"
|
||||
3. Blank line (`<br/><br/>`)
|
||||
4. "WANTS" header (no emoji)
|
||||
5. Exactly 3 positive drivers with ✅ emoji
|
||||
6. Blank line (`<br/><br/>`)
|
||||
7. "FEARS" header (no emoji)
|
||||
8. Exactly 3 negative drivers with ❌ emoji
|
||||
9. End with `<br/><br/>` (bottom padding)
|
||||
|
||||
---
|
||||
|
||||
### 2. Critical Emoji Rules
|
||||
|
||||
**Matching emoji:**
|
||||
- DF node MUST use same emoji as corresponding TG node
|
||||
- TG0 (🎯) → DF0 (🎯)
|
||||
- TG1 (💼) → DF1 (💼)
|
||||
- TG2 (💻) → DF2 (💻)
|
||||
|
||||
**Driver emojis:**
|
||||
- ✅ (white check mark) for all positive drivers
|
||||
- ❌ (red X) for all negative drivers
|
||||
- NO emojis on "WANTS" and "FEARS" headers
|
||||
|
||||
---
|
||||
|
||||
### 3. Driver Formatting
|
||||
|
||||
**Each driver:**
|
||||
- Starts with emoji (✅ or ❌)
|
||||
- One space after emoji
|
||||
- Concise text (keep under 40 characters if possible)
|
||||
- Ends with `<br/>`
|
||||
|
||||
**Exactly 3 drivers per category** - no more, no less
|
||||
|
||||
---
|
||||
|
||||
### 4. Example Implementation
|
||||
|
||||
```mermaid
|
||||
DF0["<br/>🎯 STINA'S DRIVERS<br/><br/>WANTS<br/>✅ Be strategic expert<br/>✅ Make real impact<br/>✅ Use AI confidently<br/><br/>FEARS<br/>❌ Being replaced by AI<br/>❌ Wasting time/energy<br/>❌ Being sidelined<br/><br/>"]
|
||||
|
||||
DF1["<br/>💼 LARS'S DRIVERS<br/><br/>WANTS<br/>✅ Happy & productive team<br/>✅ Smooth transition<br/>✅ Quality work<br/><br/>FEARS<br/>❌ Quality dropping<br/>❌ Being taken advantage<br/>❌ Team embarrassment<br/><br/>"]
|
||||
|
||||
DF2["<br/>💻 FELIX'S DRIVERS<br/><br/>WANTS<br/>✅ Clear specifications<br/>✅ Logical thinking<br/>✅ Enlightened day<br/><br/>FEARS<br/>❌ Illogical designs<br/>❌ Vague specs<br/>❌ Forced UI work<br/><br/>"]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Rules Checklist
|
||||
|
||||
- [ ] Node ID follows pattern `DF0`, `DF1`, `DF2` (matching TG nodes)
|
||||
- [ ] Starts with `<br/>`
|
||||
- [ ] **Emoji matches corresponding TG node emoji**
|
||||
- [ ] "PERSONA'S DRIVERS" in ALL CAPS
|
||||
- [ ] Blank line after title (`<br/><br/>`)
|
||||
- [ ] "WANTS" header (no emoji, ALL CAPS)
|
||||
- [ ] Exactly 3 positive drivers with ✅
|
||||
- [ ] Blank line between sections (`<br/><br/>`)
|
||||
- [ ] "FEARS" header (no emoji, ALL CAPS)
|
||||
- [ ] Exactly 3 negative drivers with ❌
|
||||
- [ ] Ends with `<br/><br/>`
|
||||
- [ ] No HTML tags
|
||||
- [ ] Proper quote and bracket closure `"]`
|
||||
|
||||
---
|
||||
|
||||
## Common Mistakes to Avoid
|
||||
|
||||
❌ **Don't:**
|
||||
- Use different emoji than TG node
|
||||
- Add emojis to "WANTS" or "FEARS" headers
|
||||
- Include more or less than 3 drivers per category
|
||||
- Forget blank line between sections
|
||||
|
||||
✅ **Do:**
|
||||
- Match emoji exactly from TG node
|
||||
- Keep "WANTS" and "FEARS" plain text
|
||||
- Use exactly 3 drivers per category
|
||||
- Maintain consistent spacing
|
||||
|
||||
---
|
||||
|
||||
## Output
|
||||
|
||||
Store:
|
||||
- `driving_forces_nodes`: Array of formatted DF nodes
|
||||
- Verify emoji matching with TG nodes
|
||||
|
||||
---
|
||||
|
||||
## Next Step
|
||||
|
||||
→ **[Step 06: Create Connections](step-06-create-connections.md)**
|
||||
|
||||
Connect all nodes in the proper flow pattern.
|
||||
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
# Step 06: Create Connections
|
||||
|
||||
**Goal:** Connect all nodes in the proper flow: Goals → Platform → Groups → Forces
|
||||
|
||||
---
|
||||
|
||||
## Connection Pattern
|
||||
|
||||
```
|
||||
Business Goals → Platform → Target Groups → Driving Forces
|
||||
```
|
||||
|
||||
**Visual:**
|
||||
```
|
||||
BG0 ──┐
|
||||
BG1 ──┼──→ PLATFORM ──┬──→ TG0 ──→ DF0
|
||||
BG2 ──┘ ├──→ TG1 ──→ DF1
|
||||
└──→ TG2 ──→ DF2
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Instructions
|
||||
|
||||
### 1. Business Goals to Platform
|
||||
|
||||
**Connect all BG nodes to PLATFORM:**
|
||||
|
||||
```
|
||||
%% Business Goals to Platform
|
||||
BG0 --> PLATFORM
|
||||
BG1 --> PLATFORM
|
||||
BG2 --> PLATFORM
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Every BG node connects to PLATFORM
|
||||
- Use simple arrow `-->`
|
||||
- Add comment header
|
||||
|
||||
---
|
||||
|
||||
### 2. Platform to Target Groups
|
||||
|
||||
**Connect PLATFORM to all TG nodes:**
|
||||
|
||||
```
|
||||
%% Platform to Target Groups
|
||||
PLATFORM --> TG0
|
||||
PLATFORM --> TG1
|
||||
PLATFORM --> TG2
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- PLATFORM connects to every TG node
|
||||
- Use simple arrow `-->`
|
||||
- Add comment header
|
||||
|
||||
---
|
||||
|
||||
### 3. Target Groups to Driving Forces
|
||||
|
||||
**Connect each TG to its corresponding DF:**
|
||||
|
||||
```
|
||||
%% Target Groups to Driving Forces
|
||||
TG0 --> DF0
|
||||
TG1 --> DF1
|
||||
TG2 --> DF2
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- TG0 → DF0, TG1 → DF1, etc. (matching IDs)
|
||||
- Use simple arrow `-->`
|
||||
- Add comment header
|
||||
|
||||
---
|
||||
|
||||
### 4. Complete Example
|
||||
|
||||
```mermaid
|
||||
%% Connections
|
||||
BG0 --> PLATFORM
|
||||
BG1 --> PLATFORM
|
||||
BG2 --> PLATFORM
|
||||
PLATFORM --> TG0
|
||||
PLATFORM --> TG1
|
||||
PLATFORM --> TG2
|
||||
TG0 --> DF0
|
||||
TG1 --> DF1
|
||||
TG2 --> DF2
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Rules Checklist
|
||||
|
||||
- [ ] All BG nodes connect to PLATFORM
|
||||
- [ ] PLATFORM connects to all TG nodes
|
||||
- [ ] Each TG connects to matching DF (TG0→DF0, etc.)
|
||||
- [ ] Use simple arrows `-->` (no fancy styling)
|
||||
- [ ] Include section comments
|
||||
- [ ] No broken connections
|
||||
- [ ] Connections listed in logical order
|
||||
|
||||
---
|
||||
|
||||
## Connection Verification
|
||||
|
||||
**Count check:**
|
||||
- BG connections = number of business goals
|
||||
- Platform-to-TG connections = number of personas
|
||||
- TG-to-DF connections = number of personas
|
||||
|
||||
**Example for 3 personas:**
|
||||
- 3 BG → PLATFORM
|
||||
- 3 PLATFORM → TG
|
||||
- 3 TG → DF
|
||||
- **Total: 9 connections**
|
||||
|
||||
---
|
||||
|
||||
## Output
|
||||
|
||||
Store:
|
||||
- `connections`: All connection statements
|
||||
- `connection_count`: For verification
|
||||
|
||||
---
|
||||
|
||||
## Next Step
|
||||
|
||||
→ **[Step 07: Apply Styling](step-07-apply-styling.md)**
|
||||
|
||||
Apply professional light gray styling with dark text.
|
||||
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
# Step 07: Apply Styling
|
||||
|
||||
**Goal:** Apply professional light gray styling with dark text to all nodes
|
||||
|
||||
---
|
||||
|
||||
## Styling System
|
||||
|
||||
**Four style classes:**
|
||||
1. `businessGoal` - Business goals (lightest gray)
|
||||
2. `platform` - Platform (medium gray, thick border)
|
||||
3. `targetGroup` - Target groups (near white)
|
||||
4. `drivingForces` - Driving forces (light gray)
|
||||
|
||||
---
|
||||
|
||||
## Instructions
|
||||
|
||||
### 1. Define Style Classes
|
||||
|
||||
**Add these exact class definitions:**
|
||||
|
||||
```css
|
||||
classDef businessGoal fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
classDef platform fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px
|
||||
classDef targetGroup fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
classDef drivingForces fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Use these EXACT colors - do not modify
|
||||
- Business goals & driving forces use same light gray (#f3f4f6)
|
||||
- Platform uses medium gray (#e5e7eb) with 3px border
|
||||
- Target groups use near white (#f9fafb)
|
||||
- All text is dark gray (#1f2937 or #111827)
|
||||
- All borders are light gray (#d1d5db or #9ca3af)
|
||||
|
||||
---
|
||||
|
||||
### 2. Color Specifications
|
||||
|
||||
**Background fills:**
|
||||
- `#f3f4f6` - Light gray (business goals, driving forces)
|
||||
- `#e5e7eb` - Medium gray (platform only)
|
||||
- `#f9fafb` - Near white (target groups)
|
||||
|
||||
**Text colors:**
|
||||
- `#1f2937` - Dark gray (most nodes)
|
||||
- `#111827` - Darker gray (platform only)
|
||||
|
||||
**Border colors:**
|
||||
- `#d1d5db` - Light gray border (most nodes)
|
||||
- `#9ca3af` - Medium gray border (platform only)
|
||||
|
||||
**Border widths:**
|
||||
- `2px` - Standard (business goals, target groups, driving forces)
|
||||
- `3px` - Thick (platform only - makes it stand out)
|
||||
|
||||
---
|
||||
|
||||
### 3. Apply Classes to Nodes
|
||||
|
||||
**Format:**
|
||||
```
|
||||
class NodeID1,NodeID2,NodeID3 className
|
||||
```
|
||||
|
||||
**Implementation:**
|
||||
```
|
||||
class BG0,BG1,BG2 businessGoal
|
||||
class PLATFORM platform
|
||||
class TG0,TG1,TG2 targetGroup
|
||||
class DF0,DF1,DF2 drivingForces
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- List all node IDs of same type on one line
|
||||
- Separate IDs with commas (no spaces)
|
||||
- One class assignment per line
|
||||
- Match node count to actual diagram
|
||||
|
||||
---
|
||||
|
||||
### 4. Complete Example
|
||||
|
||||
```mermaid
|
||||
%% Light Gray Styling with Dark Text
|
||||
classDef businessGoal fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
classDef platform fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px
|
||||
classDef targetGroup fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
classDef drivingForces fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
|
||||
class BG0,BG1,BG2 businessGoal
|
||||
class PLATFORM platform
|
||||
class TG0,TG1,TG2 targetGroup
|
||||
class DF0,DF1,DF2 drivingForces
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. Variable Node Counts
|
||||
|
||||
**Adjust class application based on actual count:**
|
||||
|
||||
**2 personas:**
|
||||
```
|
||||
class BG0,BG1 businessGoal
|
||||
class PLATFORM platform
|
||||
class TG0,TG1 targetGroup
|
||||
class DF0,DF1 drivingForces
|
||||
```
|
||||
|
||||
**4 personas:**
|
||||
```
|
||||
class BG0,BG1,BG2,BG3 businessGoal
|
||||
class PLATFORM platform
|
||||
class TG0,TG1,TG2,TG3 targetGroup
|
||||
class DF0,DF1,DF2,DF3 drivingForces
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Rules Checklist
|
||||
|
||||
- [ ] All four classDef statements included
|
||||
- [ ] Colors EXACTLY match specification (no variations)
|
||||
- [ ] Platform has 3px border (thicker than others)
|
||||
- [ ] All BG nodes assigned to businessGoal class
|
||||
- [ ] PLATFORM assigned to platform class
|
||||
- [ ] All TG nodes assigned to targetGroup class
|
||||
- [ ] All DF nodes assigned to drivingForces class
|
||||
- [ ] Node counts match actual diagram
|
||||
- [ ] Comment header included
|
||||
|
||||
---
|
||||
|
||||
## Visual Result
|
||||
|
||||
**When properly styled, the diagram should have:**
|
||||
- Subtle, professional gray tones
|
||||
- Easy-to-read dark text
|
||||
- Platform visually emphasized (thicker border)
|
||||
- Consistent, clean appearance
|
||||
- No harsh colors or gradients
|
||||
- Print-friendly design
|
||||
|
||||
---
|
||||
|
||||
## Output
|
||||
|
||||
Store:
|
||||
- `styling_definitions`: The classDef statements
|
||||
- `styling_applications`: The class assignments
|
||||
- `complete_diagram`: Full diagram with styling
|
||||
|
||||
---
|
||||
|
||||
## Next Step
|
||||
|
||||
→ **[Step 08: Quality Check](step-08-quality-check.md)**
|
||||
|
||||
Verify diagram meets all quality standards.
|
||||
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
# Step 08: Quality Check
|
||||
|
||||
**Goal:** Verify diagram meets all quality standards before finalization
|
||||
|
||||
---
|
||||
|
||||
## Quality Checklist
|
||||
|
||||
Run through this comprehensive checklist to ensure diagram quality:
|
||||
|
||||
---
|
||||
|
||||
### Configuration & Structure
|
||||
|
||||
- [ ] **Mermaid config** includes custom font (`Inter, system-ui, sans-serif`)
|
||||
- [ ] **fontSize** set to `14px`
|
||||
- [ ] **Flowchart direction** is `LR` (left-to-right)
|
||||
- [ ] **Section comments** present (`%% Business Goals`, etc.)
|
||||
|
||||
---
|
||||
|
||||
### Node Formatting
|
||||
|
||||
- [ ] **All nodes** start with `<br/>` (top padding)
|
||||
- [ ] **All nodes** end with `<br/><br/>` (bottom padding)
|
||||
- [ ] **All titles** are in ALL CAPS
|
||||
- [ ] **All line breaks** use `<br/>` (not spaces or other methods)
|
||||
- [ ] **No HTML tags** (bold, italic, etc.) in any node
|
||||
- [ ] **All nodes** properly closed with `"]`
|
||||
|
||||
---
|
||||
|
||||
### Emoji Usage
|
||||
|
||||
- [ ] **Each persona** has matching emoji in both TG and DF nodes
|
||||
- [ ] **Business goals** have appropriate emojis (🌟, 📊, 🚀)
|
||||
- [ ] **Platform** has appropriate emoji (🎨, 💻, etc.)
|
||||
- [ ] **Persona emojis** match persona type (🎯, 💼, 💻, etc.)
|
||||
- [ ] **"WANTS" and "FEARS"** headers have NO emojis
|
||||
- [ ] **Positive drivers** all have ✅ emoji
|
||||
- [ ] **Negative drivers** all have ❌ emoji
|
||||
|
||||
---
|
||||
|
||||
### Driving Forces Nodes
|
||||
|
||||
- [ ] **Exactly 3 positive drivers** per persona (with ✅)
|
||||
- [ ] **Exactly 3 negative drivers** per persona (with ❌)
|
||||
- [ ] **Section headers** are "WANTS" and "FEARS" (no emojis, ALL CAPS)
|
||||
- [ ] **Blank line** between WANTS and FEARS sections (`<br/><br/>`)
|
||||
- [ ] **DF emoji** matches corresponding TG emoji
|
||||
|
||||
---
|
||||
|
||||
### Connections
|
||||
|
||||
- [ ] **All BG nodes** connect to PLATFORM
|
||||
- [ ] **PLATFORM** connects to all TG nodes
|
||||
- [ ] **Each TG** connects to matching DF (TG0→DF0, etc.)
|
||||
- [ ] **Simple arrows** used (`-->`) - no fancy styling
|
||||
- [ ] **Connection comments** present
|
||||
- [ ] **No broken connections** or syntax errors
|
||||
|
||||
---
|
||||
|
||||
### Styling
|
||||
|
||||
- [ ] **Light gray styling** with dark text applied
|
||||
- [ ] **All four classDef** statements present
|
||||
- [ ] **Colors EXACTLY match** specification:
|
||||
- businessGoal: `fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px`
|
||||
- platform: `fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px`
|
||||
- targetGroup: `fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px`
|
||||
- drivingForces: `fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px`
|
||||
- [ ] **Platform** has thicker border (3px vs 2px)
|
||||
- [ ] **All BG nodes** assigned to businessGoal class
|
||||
- [ ] **PLATFORM** assigned to platform class
|
||||
- [ ] **All TG nodes** assigned to targetGroup class
|
||||
- [ ] **All DF nodes** assigned to drivingForces class
|
||||
- [ ] **Node counts** in class assignments match actual diagram
|
||||
|
||||
---
|
||||
|
||||
### Content Quality
|
||||
|
||||
- [ ] **Business goals** have 3-5 key points each
|
||||
- [ ] **Platform** includes transformation statement
|
||||
- [ ] **Target groups** have 3-4 profile traits each
|
||||
- [ ] **Drivers** are concise (under 40 characters)
|
||||
- [ ] **All text** is clear and readable
|
||||
- [ ] **Priority levels** properly indicated (PRIMARY, SECONDARY, etc.)
|
||||
|
||||
---
|
||||
|
||||
### Syntax
|
||||
|
||||
- [ ] **No syntax errors** in Mermaid code
|
||||
- [ ] **All brackets** properly closed
|
||||
- [ ] **All quotes** properly closed
|
||||
- [ ] **Node IDs** follow pattern (BG0, TG0, DF0, etc.)
|
||||
- [ ] **Diagram renders** without errors
|
||||
|
||||
---
|
||||
|
||||
## Common Issues & Fixes
|
||||
|
||||
### Issue: Diagram doesn't render
|
||||
**Check:**
|
||||
- Missing closing bracket `]` or quote `"`
|
||||
- HTML tags in content (remove them)
|
||||
- Incorrect Mermaid syntax
|
||||
|
||||
### Issue: Emoji doesn't match
|
||||
**Fix:**
|
||||
- Find TG node emoji
|
||||
- Copy exact emoji to corresponding DF node
|
||||
|
||||
### Issue: Wrong colors
|
||||
**Fix:**
|
||||
- Use EXACT color codes from specification
|
||||
- Don't create custom colors
|
||||
|
||||
### Issue: Missing padding
|
||||
**Fix:**
|
||||
- Add `<br/>` at start of every node
|
||||
- Add `<br/><br/>` at end of every node
|
||||
|
||||
---
|
||||
|
||||
## Visual Inspection
|
||||
|
||||
**The diagram should look:**
|
||||
- ✅ Clean and professional
|
||||
- ✅ Easy to scan left-to-right
|
||||
- ✅ Consistent spacing and alignment
|
||||
- ✅ Subtle colors (not garish)
|
||||
- ✅ Dark text readable on light backgrounds
|
||||
- ✅ Platform visually emphasized
|
||||
|
||||
**The diagram should NOT:**
|
||||
- ❌ Have harsh colors or gradients
|
||||
- ❌ Be hard to read
|
||||
- ❌ Have misaligned elements
|
||||
- ❌ Have inconsistent formatting
|
||||
- ❌ Have syntax errors
|
||||
|
||||
---
|
||||
|
||||
## Final Verification
|
||||
|
||||
**Test the diagram:**
|
||||
1. Copy complete code
|
||||
2. Paste into Mermaid live editor (https://mermaid.live)
|
||||
3. Verify it renders correctly
|
||||
4. Check all elements are visible
|
||||
5. Confirm styling appears as intended
|
||||
|
||||
---
|
||||
|
||||
## Output
|
||||
|
||||
If all checks pass:
|
||||
- ✅ **Quality verified**
|
||||
- ✅ **Diagram ready for publication**
|
||||
- Return `complete_diagram`
|
||||
|
||||
If issues found:
|
||||
- 🔧 **Fix identified issues**
|
||||
- Re-run quality check
|
||||
- Repeat until all checks pass
|
||||
|
||||
---
|
||||
|
||||
## Next Step
|
||||
|
||||
→ **Complete!** Diagram is ready to include in trigger map poster.
|
||||
|
||||
The professional Mermaid diagram can now be inserted into:
|
||||
- `00-Trigger-Map-Poster.md`
|
||||
- Presentations
|
||||
- Documentation
|
||||
- Reports
|
||||
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
# Micro Instructions: Generate Mermaid Trigger Map Diagram
|
||||
|
||||
**Purpose:** Create visually appealing, professional Mermaid flowchart diagrams for trigger maps
|
||||
|
||||
---
|
||||
|
||||
## Format Requirements
|
||||
|
||||
### 1. Mermaid Configuration
|
||||
```
|
||||
%%{init: {'theme':'base', 'themeVariables': { 'fontFamily':'Inter, system-ui, sans-serif', 'fontSize':'14px'}}}%%
|
||||
```
|
||||
- Always use Inter/system-ui font
|
||||
- Set fontSize to 14px
|
||||
- Use base theme
|
||||
|
||||
### 2. Flowchart Direction
|
||||
```
|
||||
flowchart LR
|
||||
```
|
||||
- Always use left-to-right (LR) direction
|
||||
- Business goals on left → Platform center → Target groups → Driving forces on right
|
||||
|
||||
### 3. Node Content Formatting
|
||||
|
||||
**Every node must:**
|
||||
- Start with `<br/>` for top padding
|
||||
- End with `<br/><br/>` for bottom padding
|
||||
- Use `<br/>` for line breaks (not multiple spaces)
|
||||
- Include emoji at the start of the title
|
||||
|
||||
**Example node structure:**
|
||||
```
|
||||
NodeID["<br/>🎯 TITLE<br/><br/>Line 1<br/>Line 2<br/>Line 3<br/><br/>"]
|
||||
```
|
||||
|
||||
### 4. Business Goals Nodes (Left Column)
|
||||
|
||||
**Structure:**
|
||||
```
|
||||
BG1["<br/>🌟 WDS VISION<br/><br/>Point 1<br/>Point 2<br/>Point 3<br/><br/>"]
|
||||
BG2["<br/>📊 CORE OBJECTIVES<br/><br/>Point 1<br/>Point 2<br/>Point 3<br/><br/>"]
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Use BG0, BG1, BG2, etc. as node IDs
|
||||
- Include relevant emoji (🌟 for vision, 📊 for objectives, 🚀 for growth, etc.)
|
||||
- List 3-5 key points per goal
|
||||
- Keep titles in ALL CAPS
|
||||
|
||||
### 5. Platform Node (Center)
|
||||
|
||||
**Structure:**
|
||||
```
|
||||
PLATFORM["<br/>🎨 PLATFORM NAME<br/><br/>Tagline or category<br/><br/>Transformation statement<br/>that spans multiple lines<br/>describing the core change<br/><br/>"]
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Single node ID: PLATFORM
|
||||
- Include platform emoji
|
||||
- Show tagline/category
|
||||
- Include transformation statement (the "battle cry")
|
||||
- Break long text into multiple lines
|
||||
|
||||
### 6. Target Group Nodes
|
||||
|
||||
**Structure:**
|
||||
```
|
||||
TG1["<br/>🎯 PERSONA NAME<br/>PRIORITY LEVEL<br/><br/>Trait 1<br/>Trait 2<br/>Trait 3<br/><br/>"]
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Use TG0, TG1, TG2, etc. as node IDs
|
||||
- Include persona-specific emoji
|
||||
- Show priority (PRIMARY TARGET, SECONDARY TARGET, etc.)
|
||||
- List 3-4 key profile traits
|
||||
- Keep persona name in ALL CAPS
|
||||
|
||||
### 7. Driving Forces Nodes
|
||||
|
||||
**Structure:**
|
||||
```
|
||||
DF1["<br/>🎯 PERSONA'S DRIVERS<br/><br/>WANTS<br/>✅ Positive driver 1<br/>✅ Positive driver 2<br/>✅ Positive driver 3<br/><br/>FEARS<br/>❌ Negative driver 1<br/>❌ Negative driver 2<br/>❌ Negative driver 3<br/><br/>"]
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Use DF0, DF1, DF2, etc. matching TG IDs
|
||||
- Use same emoji as corresponding persona
|
||||
- Add "PERSONA'S DRIVERS" in ALL CAPS
|
||||
- Section headers: "WANTS" and "FEARS" (no emojis on headers)
|
||||
- ✅ emoji before each positive driver
|
||||
- ❌ emoji before each negative driver
|
||||
- Exactly 3 drivers per category (top 3 only)
|
||||
- Blank line between sections
|
||||
|
||||
### 8. Connections
|
||||
|
||||
**Required connections:**
|
||||
```
|
||||
%% Business Goals to Platform
|
||||
BG0 --> PLATFORM
|
||||
BG1 --> PLATFORM
|
||||
BG2 --> PLATFORM
|
||||
|
||||
%% Platform to Target Groups
|
||||
PLATFORM --> TG0
|
||||
PLATFORM --> TG1
|
||||
PLATFORM --> TG2
|
||||
|
||||
%% Target Groups to Driving Forces
|
||||
TG0 --> DF0
|
||||
TG1 --> DF1
|
||||
TG2 --> DF2
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- All business goals connect to platform
|
||||
- Platform connects to all target groups
|
||||
- Each target group connects to its driving forces
|
||||
- Use simple arrows (-->), no fancy styling
|
||||
|
||||
### 9. Styling Classes
|
||||
|
||||
**Required classes:**
|
||||
```css
|
||||
classDef businessGoal fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
classDef platform fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px
|
||||
classDef targetGroup fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
classDef drivingForces fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
```
|
||||
|
||||
**Application:**
|
||||
```
|
||||
class BG0,BG1,BG2 businessGoal
|
||||
class PLATFORM platform
|
||||
class TG0,TG1,TG2 targetGroup
|
||||
class DF0,DF1,DF2 drivingForces
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Always use these exact colors (light grays with dark text)
|
||||
- Business goals: lightest gray (#f3f4f6)
|
||||
- Platform: medium gray (#e5e7eb) with thicker border (3px)
|
||||
- Target groups: near white (#f9fafb)
|
||||
- Driving forces: light gray (#f3f4f6)
|
||||
- Text color: dark gray (#1f2937 or #111827)
|
||||
- Borders: light gray (#d1d5db or #9ca3af)
|
||||
|
||||
---
|
||||
|
||||
## Complete Example Template
|
||||
|
||||
```mermaid
|
||||
%%{init: {'theme':'base', 'themeVariables': { 'fontFamily':'Inter, system-ui, sans-serif', 'fontSize':'14px'}}}%%
|
||||
flowchart LR
|
||||
%% Business Goals
|
||||
BG0["<br/>🌟 VISION<br/><br/>Vision statement line 1<br/>Vision statement line 2<br/>Vision statement line 3<br/><br/>"]
|
||||
BG1["<br/>📊 OBJECTIVES<br/><br/>Objective 1<br/>Objective 2<br/>Objective 3<br/><br/>"]
|
||||
|
||||
%% Platform
|
||||
PLATFORM["<br/>🎨 PRODUCT NAME<br/><br/>Product category or tagline<br/><br/>Transformation statement<br/>describing the change<br/><br/>"]
|
||||
|
||||
%% Target Groups
|
||||
TG0["<br/>🎯 PERSONA ONE<br/>PRIMARY TARGET<br/><br/>Profile trait 1<br/>Profile trait 2<br/>Profile trait 3<br/><br/>"]
|
||||
TG1["<br/>💼 PERSONA TWO<br/>SECONDARY TARGET<br/><br/>Profile trait 1<br/>Profile trait 2<br/>Profile trait 3<br/><br/>"]
|
||||
|
||||
%% Driving Forces
|
||||
DF0["<br/>🎯 PERSONA ONE'S DRIVERS<br/><br/>WANTS<br/>✅ Positive driver 1<br/>✅ Positive driver 2<br/>✅ Positive driver 3<br/><br/>FEARS<br/>❌ Negative driver 1<br/>❌ Negative driver 2<br/>❌ Negative driver 3<br/><br/>"]
|
||||
|
||||
DF1["<br/>💼 PERSONA TWO'S DRIVERS<br/><br/>WANTS<br/>✅ Positive driver 1<br/>✅ Positive driver 2<br/>✅ Positive driver 3<br/><br/>FEARS<br/>❌ Negative driver 1<br/>❌ Negative driver 2<br/>❌ Negative driver 3<br/><br/>"]
|
||||
|
||||
%% Connections
|
||||
BG0 --> PLATFORM
|
||||
BG1 --> PLATFORM
|
||||
PLATFORM --> TG0
|
||||
PLATFORM --> TG1
|
||||
TG0 --> DF0
|
||||
TG1 --> DF1
|
||||
|
||||
%% Styling
|
||||
classDef businessGoal fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
classDef platform fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px
|
||||
classDef targetGroup fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
classDef drivingForces fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
|
||||
class BG0,BG1 businessGoal
|
||||
class PLATFORM platform
|
||||
class TG0,TG1 targetGroup
|
||||
class DF0,DF1 drivingForces
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Emoji Selection Guide
|
||||
|
||||
### Business Goals
|
||||
- 🌟 Vision
|
||||
- 📊 Objectives/Metrics
|
||||
- 🚀 Growth/Expansion
|
||||
- 💰 Revenue/Business
|
||||
- 🤝 Partnerships/Community
|
||||
- 🎯 Goals/Targets
|
||||
|
||||
### Personas
|
||||
- 🎯 Strategic/Primary personas
|
||||
- 💼 Business/Leadership personas
|
||||
- 💻 Technical/Developer personas
|
||||
- 👥 Team/Group personas
|
||||
- 🎨 Creative/Designer personas
|
||||
- 📱 User/Customer personas
|
||||
|
||||
### Platform
|
||||
- 🎨 Design/Creative products
|
||||
- 💻 Software/Tech products
|
||||
- 📱 Mobile/App products
|
||||
- 🛠️ Tools/Utilities
|
||||
- 📊 Analytics/Data products
|
||||
- 🤖 AI/Automation products
|
||||
|
||||
---
|
||||
|
||||
## Quality Checklist
|
||||
|
||||
Before finalizing diagram, verify:
|
||||
|
||||
- [ ] Mermaid config includes custom font and fontSize
|
||||
- [ ] All nodes start with `<br/>` and end with `<br/><br/>`
|
||||
- [ ] All titles are in ALL CAPS
|
||||
- [ ] Each persona has matching emoji in both TG and DF nodes
|
||||
- [ ] Exactly 3 positive drivers per persona (with ✅)
|
||||
- [ ] Exactly 3 negative drivers per persona (with ❌)
|
||||
- [ ] "WANTS" and "FEARS" headers have no emojis
|
||||
- [ ] All connections are present (goals→platform→groups→forces)
|
||||
- [ ] Light gray styling with dark text applied
|
||||
- [ ] Platform has thicker border (3px)
|
||||
- [ ] No syntax errors or missing brackets
|
||||
|
||||
---
|
||||
|
||||
## Common Mistakes to Avoid
|
||||
|
||||
❌ **Don't:**
|
||||
- Use multiple spaces for alignment (use `<br/>` only)
|
||||
- Mix HTML tags (bold, italic) - keep plain text
|
||||
- Forget padding (`<br/>`) at top and bottom
|
||||
- Use colors other than light grays
|
||||
- Add emojis to "WANTS" and "FEARS" headers
|
||||
- Include more than 3 drivers per category
|
||||
- Use lowercase in titles
|
||||
|
||||
✅ **Do:**
|
||||
- Use `<br/>` for all line breaks
|
||||
- Keep consistent spacing (blank lines between sections)
|
||||
- Match emojis between personas and their drivers
|
||||
- Use exactly 3 drivers per category
|
||||
- Apply consistent styling to all nodes
|
||||
- Test diagram renders correctly
|
||||
|
||||
---
|
||||
|
||||
**This format creates professional, scannable trigger maps that clearly communicate strategic insights at a glance.**
|
||||
|
||||
|
|
@ -66,28 +66,50 @@ This is the visual overview. For detailed documentation, see:
|
|||
|
||||
## Trigger Map Visualization
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ VISION │
|
||||
│ {{vision_short}} │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ OBJECTIVES │
|
||||
│ {{#each objectives_short}}• {{this}} {{/each}} │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
┌─────────────────────────┼─────────────────────────┐
|
||||
▼ ▼ ▼
|
||||
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
|
||||
│ {{group_1}} │ │ {{group_2}} │ │ {{group_3}} │
|
||||
└───────────────┘ └───────────────┘ └───────────────┘
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
[Drivers] [Drivers] [Drivers]
|
||||
+ {{g1_pos}} + {{g2_pos}} + {{g3_pos}}
|
||||
- {{g1_neg}} - {{g2_neg}} - {{g3_neg}}
|
||||
```mermaid
|
||||
%%{init: {'theme':'base', 'themeVariables': { 'fontFamily':'Inter, system-ui, sans-serif', 'fontSize':'14px'}}}%%
|
||||
flowchart LR
|
||||
%% Business Goals (Left)
|
||||
{{#each business_goals}}
|
||||
BG{{@index}}["<br/>{{this.emoji}} {{this.title}}<br/><br/>{{#each this.points}}{{this}}<br/>{{/each}}<br/>"]
|
||||
{{/each}}
|
||||
|
||||
%% Central Platform
|
||||
PLATFORM["<br/>{{platform_emoji}} {{platform_name}}<br/><br/>{{platform_tagline}}<br/><br/>{{platform_transformation}}<br/><br/>"]
|
||||
|
||||
%% Target Groups
|
||||
{{#each target_groups}}
|
||||
TG{{@index}}["<br/>{{this.emoji}} {{this.name}}<br/>{{this.priority}}<br/><br/>{{#each this.profile}}{{this}}<br/>{{/each}}<br/>"]
|
||||
{{/each}}
|
||||
|
||||
%% Driving Forces
|
||||
{{#each target_groups}}
|
||||
DF{{@index}}["<br/>{{this.emoji}} {{this.name}}'S DRIVERS<br/><br/>WANTS<br/>{{#each this.positive_drivers}}✅ {{this}}<br/>{{/each}}<br/>FEARS<br/>{{#each this.negative_drivers}}❌ {{this}}<br/>{{/each}}<br/>"]
|
||||
{{/each}}
|
||||
|
||||
%% Connections
|
||||
{{#each business_goals}}
|
||||
BG{{@index}} --> PLATFORM
|
||||
{{/each}}
|
||||
{{#each target_groups}}
|
||||
PLATFORM --> TG{{@index}}
|
||||
TG{{@index}} --> DF{{@index}}
|
||||
{{/each}}
|
||||
|
||||
%% Light Gray Styling with Dark Text
|
||||
classDef businessGoal fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
classDef platform fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px
|
||||
classDef targetGroup fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
classDef drivingForces fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
|
||||
|
||||
{{#each business_goals}}
|
||||
class BG{{@index}} businessGoal
|
||||
{{/each}}
|
||||
class PLATFORM platform
|
||||
{{#each target_groups}}
|
||||
class TG{{@index}} targetGroup
|
||||
class DF{{@index}} drivingForces
|
||||
{{/each}}
|
||||
```
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ User types one of:
|
|||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ STEP 1: Quick Launcher │
|
||||
│ getting-started/agents/wds-freya-ux.md │
|
||||
│ getting-started/agent-activation/wds-freya-ux.md │
|
||||
│ │
|
||||
│ Instructions: │
|
||||
│ 1. Load: src/modules/wds/agents/freyja-ux.agent.yaml ✅ │
|
||||
|
|
@ -113,10 +113,10 @@ User types one of:
|
|||
|
||||
### Entry Points
|
||||
|
||||
- [x] `getting-started/agents/wds-freya-ux.md` → `agents/freyja-ux.agent.yaml`
|
||||
- [x] `getting-started/agents/wds-freya-ux.md` → `workflows/project-analysis/instructions.md`
|
||||
- [x] `getting-started/agents/wds-saga-analyst.md` → `agents/saga-analyst.agent.yaml`
|
||||
- [x] `getting-started/agents/wds-idunn-pm.md` → `agents/idunn-pm.agent.yaml`
|
||||
- [x] `getting-started/agent-activation/wds-freya-ux.md` → `agents/freyja-ux.agent.yaml`
|
||||
- [x] `getting-started/agent-activation/wds-freya-ux.md` → `workflows/project-analysis/instructions.md`
|
||||
- [x] `getting-started/agent-activation/wds-saga-analyst.md` → `agents/saga-analyst.agent.yaml`
|
||||
- [x] `getting-started/agent-activation/wds-idunn-pm.md` → `agents/idunn-pm.agent.yaml`
|
||||
|
||||
### Agent Definitions
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ Each file has ONE job.
|
|||
|
||||
### Entry Points
|
||||
|
||||
**`getting-started/agents/wds-freya-ux.md`** (Launcher)
|
||||
**`getting-started/agent-activation/wds-freya-ux.md`** (Launcher)
|
||||
|
||||
- Tells agent which persona to embody
|
||||
- Points to presentation file
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ Let me hand over to Saga who can help you best with this..."
|
|||
|
||||
**Then activate Saga** but skip project analysis:
|
||||
|
||||
→ Load: `getting-started/agents/wds-saga-analyst.md`
|
||||
→ Load: `getting-started/agent-activation/wds-saga-analyst.md`
|
||||
→ Saga shows: Full presentation ✅
|
||||
→ Saga skips: Project analysis (already shown)
|
||||
→ Saga continues: Directly to the specific work
|
||||
|
|
|
|||
Loading…
Reference in New Issue