diff --git a/README.md b/README.md index 59638ee23..b826c618a 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,23 @@ Output folders are created inside your configured design artifacts directory (de --- +## Supported Design Tools + +WDS offers agenttic design capabilities with several visual design and prototyping services on the market: + +| Tool | What it does | MCP | +|------|-------------|-----| +| **Figma** | Professional UI design, design system management | Figma MCP | +| **Pencil (Penpot)** | Open-source design tool, AI-assisted layout | Pencil MCP | +| **Stitch** | AI screen generation from text descriptions | Stitch MCP | +| **Excalidraw** | Wireframing and sketch analysis | — | +| **html.to.design** | Import HTML prototypes into Figma | Figma plugin | +| **NanoBanana** | AI image generation for brand exploration | — | + +The design loop works with any combination: wireframe in Excalidraw, generate screens with Stitch or Pencil, refine in Figma, pull back via MCP. + +--- + ## Project Structure After installation, your project will have: @@ -122,22 +139,6 @@ The installer configures your selected IDE(s) automatically. --- -## Design Tools - -WDS integrates with visual design and prototyping services: - -| Tool | What it does | MCP | -|------|-------------|-----| -| **Figma** | Professional UI design, design system management | Figma MCP | -| **Pencil (Penpot)** | Open-source design tool, AI-assisted layout | Pencil MCP | -| **Stitch** | AI screen generation from text descriptions | Stitch MCP | -| **Excalidraw** | Wireframing and sketch analysis | — | -| **html.to.design** | Import HTML prototypes into Figma | Figma plugin | -| **NanoBanana/Eira** | AI image generation for brand exploration | — | - -The design loop works with any combination: wireframe in Excalidraw, generate screens with Stitch or Pencil, refine in Figma, pull back via MCP. - ---- ## Learning Material diff --git a/docs/examples/WDS-Presentation/Resources/1764688965752.jfif b/docs/examples/WDS-Presentation/Resources/1764688965752.jfif deleted file mode 100644 index 675158ef5..000000000 Binary files a/docs/examples/WDS-Presentation/Resources/1764688965752.jfif and /dev/null differ diff --git a/docs/examples/WDS-Presentation/Resources/HeroSection.jpg b/docs/examples/WDS-Presentation/Resources/HeroSection.jpg deleted file mode 100644 index 9b7936d0e..000000000 Binary files a/docs/examples/WDS-Presentation/Resources/HeroSection.jpg and /dev/null differ diff --git a/docs/examples/WDS-Presentation/Resources/WhiteportLegacyPage.jpg b/docs/examples/WDS-Presentation/Resources/WhiteportLegacyPage.jpg deleted file mode 100644 index 099f71d3c..000000000 Binary files a/docs/examples/WDS-Presentation/Resources/WhiteportLegacyPage.jpg and /dev/null differ diff --git a/docs/examples/WDS-Presentation/docs/1-project-brief/01-product-brief.md b/docs/examples/WDS-Presentation/docs/1-project-brief/01-product-brief.md deleted file mode 100644 index 04006bdf8..000000000 --- a/docs/examples/WDS-Presentation/docs/1-project-brief/01-product-brief.md +++ /dev/null @@ -1,1093 +0,0 @@ -# WDS Presentation Page - Product Brief - -**Project:** WDS Official Presentation Page -**Date:** December 24, 2025 -**Author:** Saga WDS Analyst Agent -**Status:** Complete - ---- - -## Project Structure - -**Type:** simple_website -**Description:** Single-page marketing site with multiple content sections -**Scenarios:** single -**Pages:** single (with potential variants) - -This is a simple website project with a single primary landing page. The page contains multiple sections but represents one continuous user journey. Future variants (e.g., for different audiences) may be added as page variants. - ---- - -## Delivery Configuration - -**Format:** WordPress Markup -**Target Platform:** WordPress CMS (Whiteport.com) -**Requires PRD:** No - -**Delivery Description:** -Ready-to-paste WordPress page editor code with properly formatted blocks, content sections, and embedded media. No separate PRD phase needed since the specifications translate directly to WordPress implementation. - -**Deliverables:** -- WordPress editor code blocks (headings, paragraphs, lists, tables) -- YouTube embeds with proper shortcodes -- Image placements with alt text -- Links formatted as WordPress links -- Paste-ready content sections - ---- - -## Project Vision - -Create the official WDS presentation page for Whiteport.com that serves as the entry point for designers and entrepreneurs to understand, learn, and adopt the WDS methodology. - -**Primary Audience:** Designers (UX, product, visual) -**Secondary Audience:** Entrepreneurs, system owners, clients - -**Core Message:** WDS is an end-to-end design methodology that makes designers indispensable by delivering value through structured, actionable specifications, through responsibility and excellence. - ---- - -## 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 - -This page must address multiple complex positioning challenges simultaneously: - -**For Designers - The Paradigm Shift:** - -WDS represents an evolution in how designers work—expanding the designer's role from creator to strategic leader who owns the complete product journey. - -- **A methodology, not just a tool:** While most AI tools on the market cover a fraction of the modern design process (prototyping, wireframing, handoff), WDS gives you the complete journey from idea to maintenance. This isn't about adding another tool to your stack—it's about elevating how you approach your entire craft and the value you deliver. - -- **Moving into the codebase:** Traditional design happens in visual tools (Figma, Sketch, Adobe). WDS invites designers to "move into" the codebase itself—working in IDEs and GitHub where your work lives alongside code. This puts you at the center of the action, where design decisions have immediate impact. While this represents a shift from familiar visual tools, it positions you as a true partner in the development process. - -- **Text-based power:** Working in text-based environments unlocks remarkable capabilities: version control, collaboration at scale, AI assistance, and specifications that travel directly from your mind to implementation. Yes, it's different from visual software where you "touch and feel" designs, but it's powerful precisely because it removes barriers between your thinking and the final product. We embrace this honestly—it's a skill worth learning because of what it enables. - -- **The call to leadership:** We're not positioning WDS as "simple and intuitive." Instead, we're inviting designers to step into leadership—taking ownership of product success from vision to delivery. The right designers will embrace this opportunity to go "pro," serving as linchpin actors who bridge business goals and user needs. This is where design becomes indispensable. - -**The Designer Profile We Seek:** - -We're looking for designers who: -- See both business goals and user goals clearly -- Have a bleeding passion for creating the optimal meeting between them -- Wish to serve clients and teams by becoming linchpin actors -- Are willing to stand up and take responsibility for product success -- Understand that sometimes fast stands in the way of what matters -- Aiming at delivering real value, not ust quick fixes - -**Key Message:** "WDS is for people who means business." - -**For Entrepreneurs/Clients - The Path to Real Success:** - -Entrepreneurs and clients are discovering that lasting product success comes from structured, detail-focused approaches. - -- **The foundation of success:** Services that truly work deliver both function and beauty—depth and attention to detail from the start create products that fly. Screen by screen, interaction by interaction, you build something that works reliably and delights users. - -- **The designer as strategic partner:** When you're navigating complex product decisions, a skilled designer serves as your strategic guide. The designer's process provides clarity and direction, using craft perfected through decades and amplified by AI capabilities. - -- **WDS as your foundation:** Think of WDS as your strategic foundation—structured, nutritious, exactly what your project needs. It delivers excellence through proven best practices, ensuring every element serves your business goals and user needs. - -- **Attention to detail creates results:** Starting with clear structure and specifications means you build once, build right. You get products that work, that scale, that succeed in the market. - -**Key Message:** "WDS delivers the structured excellence that drives real product success." - -### Our Positioning Approach - -We balance important messages to serve both audiences effectively: -- Acknowledge the learning curve while highlighting the empowerment it brings -- Be realistic about effort while showing the structure that makes it achievable -- Focus on WDS benefits while respecting that different approaches serve different needs -- Invite to responsibility while celebrating the leadership opportunity -- Show depth and capability while providing clear entry points for beginners -- Serve both audiences (designers + entrepreneurs) with messages that reinforce each other - -### Our Communication Strategy - -**No Criticism of Other Technologies:** -We focus entirely on WDS benefits and what it enables. Every tool has its place; WDS serves those ready for end-to-end structured design. - -**Lead with Value:** -The power comes from being IDE-based with agents that can be molded and enhanced for each project or organization. This flexibility and depth creates remarkable possibilities. - -**Truth with Optimism:** -We're honest that this represents growth and learning. But we emphasize the value, show the clear path forward, and celebrate what becomes possible when designers take this step. - ---- - -## 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 conceptual 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 - - Conceptual 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 - -![Current WDS Page Structure](../Resources/WhiteportLegacyPage.jpg) - -The current page (shown above) is built on WordPress and serves as a template for the WDS course presentation. This existing structure provides both opportunities and constraints for our new page. - -### Current Page Structure - -**1. Header & Navigation** -- Whiteport logo (left) -- Navigation menu: Start, Agency, Projects, Services, Solutions, Manifesto, Blog, Contact -- Social media icons (right) - -**2. Hero Section** -- Deep blue background with illustration -- Large headline: "Whiteport Design Studio, WDS" -- Tagline: "FREE AND OPEN SOURCE DESIGN AND STRATEGY AI AGENTS FOR OCDACID DESIGNERS EVERYWHERE!" -- Body text explaining the course concept -- Primary CTA button: "GET INFO 2025. FREE AT GITHUB" - -**3. Benefits Section (Three Columns)** -- Pink/purple icons -- Three value propositions: - - "Master sketching by hand" - - "Solve problems together" - - "Prompt more effectively" -- Each with descriptive text -- Blue link at bottom: "FOLLOW THE 5000 PEOPLE WHO LEARNED HOW TO SKETCH BY HAND WITH MASTER ANENER, THE FOUNDER OF WHITEPORT" - -**4. Two-Column Section** -- Left column: "Whiteports Design Studio" - - "For designers everywhere" - - "Get given here" (text area for main content) -- Right column: "Course program" - - Course description - - Session listings (1-4) with pink circular icons - - Session titles and descriptions - - Blue CTA button: "CLAIM YOUR SEAT NOW" - -**5. "Get your seat now!" Section** -- Three checkmarks with benefits: - - "Choose your time and place" - - "Get a supportive network" - - "Get your personal follow up & feedback" -- Large pricing: "190€" -- Blue button: "CLAIM YOUR SEAT NOW!" -- PayPal logo -- "LET US KNOW YOUR INVOICE DETAILS" - -**6. Footer Section** -- Dark blue background -- "Contact us" heading -- About text (left side) -- Two circular profile photos (Mårten and colleague) -- Contact details: Names, titles, emails, phone numbers -- Bottom bar: Copyright, social links - -### Constraints We Must Work Within - -**Technical Constraints:** - -1. **WordPress Platform** - - Must work within WordPress page editor capabilities - - Limited to WordPress formatting options - - Need paste-ready editor code for quick deployment - -2. **Template Reuse** - - Using existing template structure to reduce development cost - - Cannot do major structural changes - - Must adapt content to fit existing layout patterns - -3. **Left Column Content Area** - - Main editable area is left column in two-column section - - This is where we'll place most custom content - - WordPress editor code must be carefully formatted for this area - -**Design Constraints:** - -1. **Fixed Layout Elements** - - Header section (top) - Fixed - - Three-column benefits/values section (below header) - Fixed - - Two-column main content area: - - Right column: Fixed structure for lists (course modules, artifacts, steps, etc.) - - Left column: Flexible content area for main explanation and concepts - -2. **Existing Visual Language** - - Deep blue hero background - - Pink/purple accent colors for icons - - Illustration style (person with tablet) - - Blue CTA buttons - - Circular profile photos - -3. **Layout Patterns** - - Hero with right-side illustration - - Three-column benefit cards (fixed position) - - Two-column main content area (right column lists, left column flexible) - - Stacked module/item listings with icons (right column) - - Pricing/CTA section (to be adapted) - - Footer contact section - -**Content Constraints:** - -1. **Pricing Section** - - Current page has pricing (190€) - - WDS is free and open-source - - Need to adapt this section for different purpose (perhaps "Get Started" CTAs instead) - -2. **Course vs. Method Page** - - Current page is course-focused - - Our page is method presentation + course access - - Must balance methodology explanation with course promotion - -3. **Session Listings** - - Current format shows 4 sessions - - We have 17+ modules (though only 2 complete) - - Need to show completed modules + indicate more coming - - May need to adapt visual presentation - -### Opportunities Within Constraints - -**Fixed Elements Working for Us:** - -1. **Header Section:** Perfect for WDS positioning message and primary navigation -2. **Three-Column Benefits:** Ideal for "The WDS Difference" key benefits (fixed, prominent position) -3. **Right Column Lists:** Can present course modules, WDS phases/artifacts, installation steps, or other structured content -4. **Left Column:** Flexible space for methodology explanation, agents, BMad foundation, man-in-the-loop concept, etc. -5. **Footer Contact:** Good for Mårten bio and Whiteport information - -**Flexibility Within Structure:** - -- Left column content can be organized in any sequence -- Right column can showcase different types of lists depending on what serves users best -- We can adapt the pricing/CTA section for multiple "Get Started" paths - -**Creative Solutions We'll Use:** - -1. **Course Modules in Tables:** WordPress table formatting within the left column presents course modules with YouTube embeds, descriptions, and GitHub links in an organized, accessible way - -2. **Agent Presentations:** Heading hierarchy + formatted text in left column introduces each agent with personality and role, making them relatable and approachable - -3. **Installation Checklist:** WordPress checklist or ordered list formatting with links to Module 02 lessons breaks down setup into manageable steps - -4. **Testimonials:** Adapt the three-column section or create new section using WordPress column blocks to showcase user experiences - -5. **BMad Method Subsection:** Nested headings and formatted text explain the solid foundation WDS is built upon - -### Deliverable Requirements - -To work within these constraints, our specifications must include: - -1. **WordPress Editor Code Blocks** - - Ready to copy-paste into WordPress page editor - - Properly formatted headings (H2, H3, H4) - - Links formatted as WordPress links - - Lists (ordered, unordered, checklists) in WP format - - Tables for course modules (if needed) - - YouTube embeds with proper WP shortcode - -2. **Content Sections Mapped to Template Areas** - - Hero content (headline, tagline, body, CTA text) - - Three-column benefits content - - Left column main content (methodology, agents, installation) - - Right column course modules (adapted session format) - - Adapted pricing/CTA section (free, get started) - - Footer content (bio, contact) - -3. **Visual Element Specifications** - - Icon selections (where needed) - - Image placements - - Button text and links - - Color usage (within existing palette) - -### Success Criteria Considering Our Approach - -The page succeeds when: - -1. **Communicates WDS Value** clearly within template structure, showing what becomes possible -2. **Presents Course Modules** effectively in session listing format, making learning accessible -3. **Explains Methodology** engagingly in left column content area, inviting exploration -4. **Maintains Visual Consistency** with existing Whiteport design language, feeling cohesive -5. **Provides Paste-Ready Code** that works immediately in WordPress, enabling quick deployment -6. **Delivers Efficiently** by reusing template (smart use of resources) -7. **Allows Future Growth** as more course modules complete and community expands - ---- - -## Content Concepts & Information Architecture - -Using Action Mapping model to identify user actions and required information for each content concept. These concepts can be organized and sequenced during the design phase. - ---- - -### CONCEPT: INITIAL ORIENTATION - -**Reference Sketch:** - -![Hero Section Concept](../Resources/HeroSection.jpg) - -**User Action Goal:** Understand what WDS is and decide to explore further - -**What Users Need to Learn:** -- What WDS is (in one clear statement) -- Who should care about it -- Why it matters (value proposition) -- Where to go next - -**Information to Provide:** -- Clear statement of what WDS is -- Who it's for (designers, entrepreneurs) -- The paradigm shift (design → specification → product) -- Value statement: Why this matters (responsibility, excellence, results) -- Primary path: GitHub repository -- Secondary path: WDS articles and resources - -**Visual Elements (from sketch):** -- Illustration showing designer working with specifications/documentation -- Deep blue background -- Clear visual hierarchy -- Right-side illustration area - -**Success Metric:** User understands WDS concept and chooses to explore GitHub or continue reading - ---- - -### CONCEPT: WDS METHODOLOGY EXPLANATION - -**User Action Goal:** Understand the WDS methodology and its foundation - -**What Users Need to Learn:** -- The paradigm shift in design process -- That WDS is built on proven BMad Method (credibility) -- The relationship between design (WDS) and development (BMM) -- That this is a serious, established methodology with 25 years of experience - -**Information to Provide:** - -#### The Paradigm Shift -- The design becomes the specification -- The specification becomes the super-prompt -- The code is just the execution - -#### What WDS Delivers -- End-to-end solution (idea → maintenance) -- Design and specifications that become super-prompts AI can execute perfectly -- Designer as linchpin (bridge business + user needs) -- Why-based design instructions (WHAT + WHY + WHAT NOT TO DO) - -**How AI Amplifies Your Expertise:** - -Even experienced consultants with decades of design knowledge benefit at this stage: -- **You define the vision** - AI helps structure and document it systematically -- **You make strategic calls** - AI ensures nothing gets lost in translation -- **You bring wisdom** - Your design and specifications become executable super-prompts -- Your years of experience become amplified - do what used to take weeks in hours - -#### Built on Solid Foundation -- WDS is built on BMad Method (established development methodology) -- Mårten's 25 years of design experience added to proven framework -- In v6: BMM module handles development, WDS handles design -- The integration is seamless and complete -- Brief explanation of BMad Method (AI-augmented development framework) -- Open-source, proven, serious methodology -- Link to BMad Method documentation - -**Success Metric:** User trusts WDS credibility and understands the ecosystem - ---- - -### CONCEPT: KEY BENEFITS - -**User Action Goal:** Quickly grasp the three key benefits - -**What Users Need to Learn:** -- WDS is comprehensive (not just one tool) -- Specifications are immediately actionable -- Designers become strategic leaders (linchpins) - -**Information to Provide:** - -**Benefit 1: End-to-End Solution** -- Not rapid prototyping or single-purpose tool -- Full journey: idea → specification → development → maintenance -- Designers work in codebase, not separate from it - -**Benefit 2: Design + Specifications = Super-Prompts** -- Your design and specifications become instructions AI can execute perfectly -- No interpretation needed - your intent is preserved -- Unified IDs, error states, multi-language content included -- Years of design wisdom translated into executable super-prompts - -**Benefit 3: Designer as Linchpin** -- Bridge business goals and user needs -- Ownership of product success -- Serve team as strategic guide - -**Success Metric:** User sees unique value and wants to learn more - ---- - -### CONCEPT: THE AGENTS - -**User Action Goal:** Understand how agents guide through phases and relate to them as teammates - -**What Users Need to Learn:** -- WDS uses specialized agents for different phases -- Each agent has personality, expertise, and specific role -- Agents guide, don't dictate -- The phases are covered through agent collaboration - -**Information to Provide:** - -Each agent needs: -- Name + icon + tagline -- Role/personality description (relatable, human) -- Phases they guide -- What you create together -- Why this agent matters - -#### Saga the Analyst 📚 -_"The one who tells your product's strategic story"_ - -- **Role:** Business Analyst + Product Discovery Expert -- **Phases:** Product Brief, Trigger Mapping -- **Creates:** Strategic foundation, target users and personas, business goals connected to user needs, trigger maps - -**How AI Amplifies Your Strategic Thinking:** - -Even with years of consulting experience: -- **You bring insights** from deep user research knowledge -- **Saga structures** those insights systematically -- **You guide** discovery with strategic wisdom -- **AI ensures** nothing gets lost in translation -- Your expertise creates richer analysis, delivered faster - -#### Freya the Designer ✨ -_"The one who brings clarity through design"_ - -- **Role:** UX Designer + Design System Expert -- **Phases:** UX Design (Scenarios), Design System (optional) -- **Creates:** Page designs with unified IDs, interactive prototypes, specifications that become super-prompts AI can implement - -**How AI Scales Design Excellence:** - -Experienced designers benefit from: -- **You sketch and conceptualize** - Freya analyzes and structures -- **You make creative decisions** - AI documents them as detailed specifications -- **You define interactions** - Your design + specifications become implementation-ready super-prompts -- **You bring design intuition** - AI scales it into comprehensive documentation -- Decades of UX wisdom becomes executable by AI - -#### Idunn the PM ⚔️ -_"The strategic leader who plans the path forward"_ - -- **Role:** Product Manager + Technical Planner -- **Phases:** Platform Requirements, PRD Finalization -- **Creates:** Technical architecture, complete PRD (super-prompt for teams), implementation roadmap - -**How AI Enhances PM Expertise:** - -Your technical judgment amplified: -- **You make platform decisions** - Idunn organizes systematically -- **You define requirements** - AI structures for implementation -- **You prioritize features** - AI creates actionable sequences -- Your years of PM experience becomes scalable documentation - -#### Mimir the Orchestrator 🧙 -_"The wise one who coordinates the whole journey"_ - -- **Role:** Project Orchestrator + Workflow Guide -- **Does:** Guides through WDS workflow, routes to appropriate agents, keeps project status, helps choose phases -- **Why Mimir:** Your entry point and guide through the entire WDS process - -**Success Metric:** User understands agent roles and sees them as helpful guides - ---- - -### CONCEPT: DESIGN TO DEVELOPMENT JOURNEY - -**User Action Goal:** Understand how design deliveries transition to implementation - -**What Users Need to Learn:** -- Design work flows seamlessly into development -- BMM agents handle breakdown, development, testing -- The transition works because specifications are complete -- WDS + BMM = complete product journey - -**Information to Provide:** - -**The Complete Journey:** -1. WDS agents guide design phases (you lead, AI supports) -2. Design + specifications created that become super-prompts (executable by AI or humans) -3. BMM agents take over for development (your super-prompts guide implementation) -4. BMM handles: epic breakdown, story creation, implementation, testing -5. Continuous collaboration (your expertise guides, AI scales execution) - -**BMM Agents (Brief Introduction):** -- Dev agents: Break down your design and specifications into implementable stories -- Development agents: Execute your super-prompts into working code -- QA agents: Test against your design intent -- Link to BMad Method documentation for details - -**Why This Matters:** -- You maintain creative control throughout -- Your design and specifications become executable super-prompts -- No "lost in translation" - your intent is preserved -- AI implements perfectly because you defined the "why" -- Experienced designers deliver more value, faster - -**Success Metric:** User understands complete workflow and sees how WDS fits - ---- - -### CONCEPT: LEARNING RESOURCES (COURSE MODULES) - -**User Action Goal:** Access learning resources and start learning WDS - -**What Users Need to Learn:** -- Course modules exist to teach WDS step-by-step -- Modules 01-02 are complete and ready -- More modules are in development -- Each module has video, lessons, and GitHub resources - -**Information to Provide:** - -**For Each Module:** -- Module number/name -- Status (Complete / In Progress / Coming Soon) -- YouTube video (if available) -- Brief description -- Topics covered -- Links (GitHub lessons, NotebookLM resources) - -**Completed Modules:** - -**Module 01: Why WDS Matters** -- Status: Complete -- Description: Learn why designers are indispensable in the AI era. Understand the paradigm shift. -- Topics: Factory vs linchpin mindset, AI threats and opportunities, becoming irreplaceable -- Links to GitHub and NotebookLM resources - -**Module 02: Installation & Setup** -- Status: Complete -- Description: Get WDS running. Step-by-step guide to GitHub, IDE setup, and agent activation. -- Topics: GitHub setup, IDE installation, cloning repository, initializing WDS, activating Mimir -- Quick checklist available - -**In Development:** Modules 03-17 (list with brief descriptions and "coming soon" status) - -**Note:** "We're developing these modules in collaboration with designers like you. More modules added regularly." - -**Success Metric:** User clicks to watch videos or access GitHub lessons - ---- - -### CONCEPT: GETTING STARTED (INSTALLATION) - -**User Action Goal:** Get WDS installed and ready to use - -**What Users Need to Learn:** -- The 5 essential steps to get started -- Each step has detailed instructions available -- It's achievable and well-supported - -**Information to Provide:** - -**The 5 Steps:** -(Each links to detailed Module 02 lesson) - -1. Set Up GitHub Account → Detailed guide available -2. Install IDE (Cursor Recommended) → Detailed guide available -3. Clone WDS Repository → Detailed guide available -4. Initialize WDS in Your Project → Detailed guide available -5. Activate Mimir Orchestrator → Detailed guide available - -**Additional Info:** -- Time required: ~30 minutes for complete setup -- Support available: Discord/Community link, troubleshooting guide - -**Success Metric:** User completes setup or bookmarks checklist for later - ---- - -### CONCEPT: SOCIAL PROOF (TESTIMONIALS) - -**User Action Goal:** Build trust through social proof - -**What Users Need to Learn:** -- Real designers use and value WDS -- Results are tangible -- Community exists - -**Information to Provide:** - -**Testimonial Structure:** -(Ready for quotes to be added) - -- Profile photo (circular) -- Quote text -- Name -- Title/Role -- Company (optional) - -**Placeholder Content:** -"Testimonials from designers and teams using WDS will appear here. If you've tried WDS, we'd love to hear your story!" - -Link to: Share Your WDS Story - -**Success Metric:** User gains confidence through peer validation - ---- - -### CONCEPT: CALL TO ACTION - -**User Action Goal:** Take immediate action - -**What Users Need to Learn:** -- Multiple entry points available -- Choose path based on readiness level - -**Information to Provide:** - -**Three Primary Paths:** - -1. **Explore WDS on GitHub** - - Browse repository, read documentation, clone WDS - -2. **Start the Course** - - Learn WDS methodology through guided modules - -3. **Join the Community** - - Get help, share work, connect with designers - -**Additional Resources:** -- WDS Workflows Guide -- Example Projects -- FAQs - -**Success Metric:** User takes action through one of the three paths - ---- - -### CONCEPT: ABOUT & CONTACT - -**User Action Goal:** Find additional information or contact - -**Information to Provide:** - -**About:** -- Brief bio of Mårten Angner (creator) -- Whiteport agency information -- Mission statement: "Free and open-source for designers everywhere" - -**Links:** -- GitHub Repository -- BMad Method -- Whiteport.com -- Blog/Articles -- Contact - -**Social Media:** -- LinkedIn, Twitter/X, YouTube, Discord - -**Legal:** -- Open-source license information - -**Success Metric:** User finds needed information or contact method - ---- - -## Page Technical Requirements - -**Platform:** WordPress -**Template:** Existing WDS Course page template -**Editor:** WordPress page editor - -**Specifications Should Include:** -- WordPress editor code (paste-ready) -- For course modules: YouTube embeds in tables -- Formatted text with proper headings (H1, H2, H3) -- Links formatted as WordPress links -- Button CTAs with proper styling - -**Deliverable Format:** -- Markdown specification (this document) -- WordPress editor code blocks (ready to paste) -- Content in English -- Links to GitHub, course modules, resources - ---- - -## Success Criteria - -**Page is successful if:** -1. Designers understand WDS value and credibility (not just another tool) -2. Entrepreneurs understand how WDS supports their projects -3. Users can easily find and access course modules -4. Clear path to installation and first use -5. Trust is established through BMad foundation and methodology depth -6. Page loads quickly (WordPress template reuse) -7. Content is paste-ready for WordPress deployment - ---- - -## Next Steps - -1. ✅ Complete Product Brief (this document) -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 -6. Deploy to Whiteport.com - ---- - -## 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 - diff --git a/docs/examples/WDS-Presentation/docs/1-project-brief/02-content-strategy.md b/docs/examples/WDS-Presentation/docs/1-project-brief/02-content-strategy.md deleted file mode 100644 index 69f8278ec..000000000 --- a/docs/examples/WDS-Presentation/docs/1-project-brief/02-content-strategy.md +++ /dev/null @@ -1,562 +0,0 @@ -# WDS Presentation Page - Content Strategy - -**Purpose:** Define messaging strategy, tone, and content boundaries for the WDS Presentation landing page. - -**Target Persona:** Stina the Strategist (Primary) -**Secondary Personas:** Lars the Leader, Felix the Full-Stack - ---- - -## Strategic Content Principles - -### 1. AI as Co-Pilot, Not Replacement - -**Messaging:** -- Position AI agents as collaborative tools that enhance designer expertise -- Emphasize "strategic leader" role for designers -- Use "co-pilot" language consistently - -**Why:** -- Addresses Stina's fear of being replaced by AI -- Elevates her role rather than threatening it -- Builds confidence in AI adoption - -**Examples:** -- ✅ "Design with AI co-pilots" -- ✅ "AI agents that amplify your expertise" -- ❌ "AI does the design for you" -- ❌ "Replace manual design work" - ---- - -### 2. Empowering, Not Easy - -**Messaging:** -- Acknowledge the learning curve honestly -- Emphasize capability-building over simplicity -- Use language like "empowering," "strategic," "professional" - -**Why:** -- Stina is skeptical of "easy" promises (been burned before) -- WDS genuinely requires skill and thoughtfulness -- Respect for expertise builds trust - -**Examples:** -- ✅ "Build professional design specifications" -- ✅ "Master strategic UX methodology" -- ❌ "Easy to use" -- ❌ "Anyone can design" -- ❌ "No experience needed" - ---- - -### 3. Free as Generosity, Not Cheap - -**Messaging:** -- Mention "free" but don't overemphasize it -- Focus on value and capability, price is secondary -- GitHub open-source positioning builds credibility - -**Why:** -- Over-emphasizing "free" can devalue the methodology -- Stina values quality over price -- Open-source = transparency, not "cheap" - -**Examples:** -- ✅ "Available on GitHub" -- ✅ "Open-source methodology" -- ⚠️ "Free forever" (OK but don't lead with it) -- ❌ "Free because we can't charge for this" -- ❌ "Get it for free before we start charging" - ---- - -### 4. Show Outcomes, Not Features - -**Messaging:** -- Lead with what designers can CREATE (deliverables) -- Show tangible artifacts (PRDs, specs, prototypes) -- Link to GitHub examples - -**Why:** -- Stina needs to see concrete value quickly -- Deliverables prove this isn't vaporware -- Real examples build confidence - -**Examples:** -- ✅ "Create professional Product Briefs" -- ✅ "Generate interactive prototypes" -- ❌ "Has 8 different agents" -- ❌ "Includes many templates" - ---- - -## Section-Specific Strategy - -### Hero Section - -**Primary Goal:** Emotional connection + immediate value proposition - -**Content Strategy:** -- **Battle Cry First** - Lead with emotional transformation -- **Illustration Shows Designer** - Stina sees herself in the tool -- **Single CTA** - One clear action (GitHub) -- **Blue Background** - Professional, brand-consistent - -**Messaging Focus:** -- Design methodology, not just software -- Strategic leadership role -- Creative empowerment - -**Psychology:** -- **Addresses Fear:** "Being replaced" → Shows designer in control -- **Triggers Want:** "Be strategic expert" → Methodology focus - ---- - -### Benefits Section - -**Primary Goal:** Quick differentiation from Figma/standard tools - -**Content Strategy:** -- 3 key differentiators only (not overwhelming) -- Each benefit = problem solved + outcome delivered -- Visual icons to aid scanning - -**Messaging Focus:** -- What makes WDS DIFFERENT (not better) -- Problems other tools don't solve -- Designer + AI collaboration model - -**Psychology:** -- **Addresses Fear:** "Wasting time" → Shows specific value -- **Triggers Want:** "Make real impact" → Business outcomes - ---- - -### Capabilities Section (Right Column) - -**Primary Goal:** Show tangible outputs and build confidence - -**Content Strategy:** -- 8 phases presented as capabilities -- Each = Action verb + Outcome + GitHub link -- 4 lines max per capability (scannable) -- Deliverable clearly marked - -**Messaging Focus:** -- WHAT you create (not how it works) -- Complete workflow visibility -- Professional artifacts - -**Psychology:** -- **Addresses Fear:** "Too complex for me" → Broken into clear steps -- **Triggers Want:** "See complete picture" → Full workflow - -**See detailed capability descriptions in:** [Capability Messaging](#capability-messaging) - ---- - -### Testimonials Section - -**Primary Goal:** Build trust through social proof - -**Content Strategy:** -- Real people (eventually) with real results -- Focus on transformation, not features -- Include persona-specific testimonials - -**Messaging Focus:** -- Before/after emotional states -- Specific outcomes achieved -- Credible, authentic voices - -**Psychology:** -- **Addresses Fear:** "This won't work for me" → Others succeeded -- **Triggers Want:** "Be recognized" → Social validation - ---- - -### CTA Section - -**Primary Goal:** Remove barriers to action - -**Content Strategy:** -- Clear next step (GitHub or Course) -- Low commitment language -- Emphasize exploratory, risk-free approach - -**Messaging Focus:** -- Invitation, not pressure -- Multiple entry points (browse, learn, try) -- Open-source transparency - -**Psychology:** -- **Addresses Fear:** "Being locked in" → Can explore freely -- **Triggers Want:** "Learn confidently" → Safe exploration - ---- - -## Content Boundaries (WHAT NOT TO DO) - -### Don't Lead with Technical Details - -**Avoid upfront:** -- IDE requirements (Cursor) -- Text-based workflows -- Terminal/command line mentions -- Technical architecture - -**Why:** -- Too intimidating for Stina initially -- Save technical details for "Getting Started" -- Focus on outcomes first, mechanics later - -**When to introduce:** -- After emotional connection established -- In "How It Works" or "Getting Started" section -- With supportive, educational framing - ---- - -### Don't Use "Easy" or "Simple" Language - -**Avoid:** -- "Easy to use" -- "Simple design tool" -- "No learning curve" -- "Anyone can do it" - -**Use instead:** -- "Empowering" -- "Strategic" -- "Professional" -- "Systematic" - -**Why:** -- WDS genuinely requires skill -- Stina is skeptical of false promises -- Respect for expertise builds trust - ---- - -### Don't Show Code/Terminal Screenshots - -**Avoid upfront:** -- Terminal windows -- Code syntax -- File system screenshots -- Technical editor views - -**Show instead:** -- Finished deliverables (specs, PRDs) -- Visual outputs (prototypes, diagrams) -- Designer-agent conversation flows -- Beautiful page examples - -**Why:** -- Code looks intimidating -- Focus on outputs, not inputs -- Visual outcomes are more compelling - ---- - -### Don't Use Multiple CTAs - -**Avoid:** -- Multiple buttons in hero -- Competing calls to action -- "Try now" + "Learn more" + "Sign up" - -**Use instead:** -- One primary CTA per section -- Clear hierarchy (primary vs. secondary) -- Consistent action across sections - -**Why:** -- Multiple CTAs create decision paralysis -- Stina needs clear path forward -- Reduces cognitive load - ---- - -### Don't Use Comparison Language - -**Avoid:** -- "Better than Figma" -- "Replace your design tools" -- "Unlike other UX tools" -- Competitor name-dropping - -**Use instead:** -- "Different approach" -- "Complements your existing tools" -- "Text-based design methodology" -- Focus on what WDS DOES, not what others don't - -**Why:** -- Creates defensiveness (Stina probably uses Figma) -- Comparison feels aggressive -- WDS is additive, not replacement - ---- - -### Don't Use Aggressive AI Replacement Messaging - -**Avoid:** -- "AI does the design work" -- "Replace your design team" -- "Automated UX design" -- "AI-first workflow" - -**Use instead:** -- "AI co-pilots" -- "AI-assisted design" -- "Collaborative agents" -- "AI amplifies your expertise" - -**Why:** -- Threatens designer identity -- Stina fears being replaced -- Co-pilot framing reduces anxiety - ---- - -### Don't Overemphasize "Free" - -**Avoid:** -- "Free forever!" as headline -- "No credit card required" everywhere -- Price comparison tables -- "Get it free before we charge" - -**Use instead:** -- "Available on GitHub" -- "Open-source methodology" -- Mention free once, move on -- Focus on value, not price - -**Why:** -- Over-emphasizing free devalues the work -- Stina values quality over price -- Free can signal "cheap" or "unfinished" - ---- - -## Capability Messaging - -*[This section contains the detailed messaging for the 8 WDS capabilities/phases]* - -### Phase 1: Win Client Buy-In - -**Headline:** "Win Client Buy-In" - -**Description:** -``` -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. -``` - -**Deliverable:** "→ Pitch & Service Agreement" - -**Psychology:** -- **Problem:** Projects stuck in "maybe" limbo -- **Outcome:** Commitment and alignment -- **Agent Help:** Saga translates design vision to business language - ---- - -### Phase 2: Define Your Project - -**Headline:** "Define Your Project" - -**Description:** -``` -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. -``` - -**Deliverable:** "→ Product Brief" - -**Psychology:** -- **Problem:** Scope creep, confusion -- **Outcome:** Strategic clarity -- **Agent Help:** Structured questioning process - ---- - -### Phase 3: Map Business Goals to User Needs - -**Headline:** "Map Business Goals to User Needs" - -**Description:** -``` -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. -``` - -**Deliverable:** "→ Trigger Map & Personas" - -**Psychology:** -- **Problem:** Designing by guesswork -- **Outcome:** Psychological insight -- **Agent Help:** Cascade guides trigger mapping - ---- - -### Phase 4: Architect the Platform - -**Headline:** "Architect the Platform" - -**Description:** -``` -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. -``` - -**Deliverable:** "→ Platform PRD & Architecture" - -**Psychology:** -- **Problem:** Design-dev disconnect -- **Outcome:** Technical clarity without coding -- **Agent Help:** Idunn translates design to technical specs - ---- - -### Phase 5: Design the Experience - -**Headline:** "Design the Experience" - -**Description:** -``` -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. Freya helps you create specifications that developers actually understand and respect. -``` - -**Deliverable:** "→ Page Specs & Prototypes" - -**Psychology:** -- **Problem:** Design intent lost in handoff -- **Outcome:** Specifications developers respect -- **Agent Help:** Freya captures WHY, not just WHAT - ---- - -### Phase 6: Build Your Design System - -**Headline:** "Build Your Design System" - -**Description:** -``` -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. -``` - -**Deliverable:** "→ Component Library & Tokens" - -**Psychology:** -- **Problem:** Reinventing components repeatedly -- **Outcome:** Systematic consistency -- **Agent Help:** Pattern extraction and documentation - ---- - -### Phase 7: Hand Off to Developers - -**Headline:** "Hand Off to Developers" - -**Description:** -``` -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. -``` - -**Deliverable:** "→ PRD, Epics & Stories" - -**Psychology:** -- **Problem:** Endless clarification meetings -- **Outcome:** Clear implementation roadmap -- **Agent Help:** Idunn translates specs to dev tasks - ---- - -### Phase 8: Validate the Build - -**Headline:** "Validate the Build" - -**Description:** -``` -Ensure what's built matches what you designed. Catch misinterpretations before they -reach users. Create test plans that validate both function and design intent. Freya -helps you compare implementations to specifications systematically. -``` - -**Deliverable:** "→ Test Plans & Reports" - -**Psychology:** -- **Problem:** Design compromised in implementation -- **Outcome:** Fidelity to original vision -- **Agent Help:** Freya validates against specs - ---- - -## Tone Guidelines - -### Overall Tone - -**Be:** -- Honest about learning curve -- Enthusiastic about possibilities -- Respectful of expertise -- Inviting to responsibility - -**Avoid:** -- Overpromising -- Condescension -- Hype or exaggeration -- Gatekeeping - ---- - -### Language Patterns - -**Use:** -- "Create," "Build," "Design" (active verbs) -- "You," "Your" (direct address) -- "Professional," "Strategic," "Systematic" (quality descriptors) -- Specific deliverables (not vague promises) - -**Avoid:** -- Passive voice -- Technical jargon (upfront) -- Marketing clichés -- Vague value propositions - ---- - -## Reference Links - -**For Page Specifications:** -- Link to this document from page specs: `[Content Strategy](../../1-project-brief/02-content-strategy.md)` -- Use this as source of truth for messaging decisions -- Update this document when strategy evolves - -**For Agents:** -- Saga (Analyst) - Client buy-in messaging -- Cascade (Trigger Mapping) - User psychology insights -- Freya (UX Designer) - Design specification approach -- Idunn (Technical Architect) - Platform/PRD messaging - ---- - -**Last Updated:** December 28, 2025 -**Owner:** Product Team -**Review Cycle:** After each major iteration - diff --git a/docs/examples/WDS-Presentation/docs/1-project-brief/invitation-snippets.md b/docs/examples/WDS-Presentation/docs/1-project-brief/invitation-snippets.md deleted file mode 100644 index 0b1b8f4d4..000000000 --- a/docs/examples/WDS-Presentation/docs/1-project-brief/invitation-snippets.md +++ /dev/null @@ -1,392 +0,0 @@ -# WDS Invitation Snippets - -Humble, genuine invitation texts in English and Swedish for sharing WDS with people who might find it useful. - - -## Introduction to a Designer - -### English -``` -Many designers I talk to don't feel at home in the fast and headless vibe-coding that we're all supposed to be doing, and would rather work with established UX and Design methods. - -I realize that we designers need to learn AI in 2026 to not fall behind. That's why I've created a method for classic CX/UX/UI design but with AI as a sounding board. - -I've been really really persistent over the days between Christmas and New Year. - -I've structured the method on Github and created Agent workshops for all parts of the design process: -https://github.com/whiteport-collective/whiteport-design-studio - -I've also published the official WDS product page: -https://whiteport.com/products/wds/ - -And published the recording of my latest webinar for designers WDS Sessions 1: -https://www.youtube.com/watch?v=TdujvNYI-3g - -The WDS certification program is also underway! - -Is an agent framework for designers something you would be interested in learning you think? -``` - -### Swedish -``` -Många designers jag pratar med känner sig inte hemma i det snabba och huvudlösa i mycket av den Vibe-coding som vi alla ska hålla på med och vill hellre arbeta mer med vedertagna metoder för UX och Design. - -Jag inser att vi designers måste lära oss AI under 2026 för att inte hamna efter. Därför har jag tagit fram en metod för klassisk CX/UX/UI-design men med AI som bollplank. - -Jag har varit riktigt riktigt ihärdig på dagarna mellan jul och nyår. - -Jag har strukturerat metoden på Github och skapat Agent-workshops för alla delar av designprocessen: -https://github.com/whiteport-collective/whiteport-design-studio - -Jag har också publicerat den officiella WDS-produktsidan: -https://whiteport.com/products/wds/ - -Och publicerat inspelningen av mitt senaste webbinarium för designers WDS Sessions 1: -https://www.youtube.com/watch?v=TdujvNYI-3g - -WDS-certifieringsprogrammet är också på gång! - -Är ett agentramverk för designers något som du skulle vara intresserad av att lära dig tror du? -``` - - -## General updates - -### English -``` -Hey there. - -I have been really really busy on the Whiteport Design Studio front, the days between Christmas and new years. - -I have structured the method on Github and added cool new features. For example a content creation workshop I think you would like. -https://github.com/whiteport-collective/whiteport-design-studio - -I have also published the official WDS product page: -https://whiteport.com/products/wds/ - -And published the recording of my last webinar for designers WDS Sessions 1: -https://www.youtube.com/watch?v=TdujvNYI-3g - -The WDS certification program is also under ways! - -I am excited to see what you think about all of this! -``` - -### Swedish -``` -Hej där. - -Jag har varit riktigt riktigt ihärdig på Whiteport Design Studio-fronten, dagarna mellan jul och nyår. - -Jag har strukturerat metoden på Github och lagt till coola nya funktioner. Till exempel en workshop för innehållsskapande som jag tror du skulle gilla. -https://github.com/whiteport-collective/whiteport-design-studio - -Jag har också publicerat den officiella WDS-produktsidan: -https://whiteport.com/products/wds/ - -Och publicerat inspelningen av mitt senaste webbinarium för designers WDS Sessions 1: -https://www.youtube.com/watch?v=TdujvNYI-3g - -WDS-certifieringsprogrammet är också på gång! - -Jag är spänd på att se vad du tycker om alltsammans! -``` - ---- - -## 🎯 Try the Method - -### English -``` -I've been exploring something that might interest you - Whiteport Design Studio (WDS). It's a free, open-source framework that lets designers work in the development environment with AI support. - -It's been helping me think differently about how design and development can work together. Thought you might want to take a look. - -https://github.com/whiteport-collective/whiteport-design-studio -``` - -### Swedish -``` -Jag har utforskat något som kanske kan intressera dig - Whiteport Design Studio (WDS). Det är ett gratis, open-source ramverk som låter designers jobba i utvecklingsmiljön med AI-stöd. - -Det har hjälpt mig att tänka annorlunda kring hur design och utveckling kan samarbeta. Tänkte att du kanske vill kika på det. - -https://github.com/whiteport-collective/whiteport-design-studio -``` - ---- - -## 🌐 Visit the WDS Page - -### English -``` -Here is the WDS page that explains the approach. It talks about how designers can work with AI agents and be involved in both strategy and design. To stay updated, drop your mail in the form on the righ. - -Might be worth a look if you're curious: -https://whiteport.com/products/wds/ - - -I have published the WDS web page now. Here you can see more details about the method, deliverables, agents, course modules and the webinars. - -https://whiteport.com/products/wds/ -``` - -### Swedish -``` -Här hittar du sidan om WDS som förklarar metoden. Den handlar om hur designers kan jobba med AI-agenter och vara involverade i både strategi och design. För att få uppdateringar, lägg din mail formuläret till höger. - -Kan vara värt att kolla på om du är nyfiken: -https://whiteport.com/products/wds/ -``` - ---- - -## 🎥 Watch the Latest Webinar - -### English -``` -There's a recent webinar about WDS that goes into how designers can work in the IDE with AI agents. It's about an hour and covers the basics pretty well. - -If you have time, might be worth watching: -https://www.youtube.com/watch?v=TdujvNYI-3g - -Here is the link to the latest webinar on YouTube: -https://www.youtube.com/watch?v=TdujvNYI-3g -``` - -### Swedish -``` -Det finns ett nyligt webbinarium om WDS som går igenom hur designers kan jobba i IDE:n med AI-agenter. Det är ungefär en timme och täcker grunderna ganska bra. - -Om du har tid kan det vara värt att titta på: -https://www.youtube.com/watch?v=TdujvNYI-3g - -Här är vårt senaste webinar, WDS Sessions 1 på YouTube: -https://www.youtube.com/watch?v=TdujvNYI-3g -``` - ---- - -## 📺 Watch All Webinars - -### English -``` -There's a playlist with all the WDS webinars if you want to dive deeper into different topics - trigger mapping, design systems, working with AI agents, and that sort of thing. - -Here's the playlist: -https://www.youtube.com/watch?v=TdujvNYI-3g&list=PL094dWo_kC3t1Z0fs85P99ZK5T3tPvP2M -``` - -### Swedish -``` -Det finns en spellista med alla WDS-webinarier om du vill fördjupa dig i olika ämnen - trigger mapping, designsystem, att jobba med AI-agenter och sånt. - -Här är spellistan: -https://www.youtube.com/watch?v=TdujvNYI-3g&list=PL094dWo_kC3t1Z0fs85P99ZK5T3tPvP2M -``` - ---- - -## 📚 Learn WDS - -### English -``` -There's a course overview that walks through the WDS approach step by step. It covers working in the IDE, creating foundations, design systems, and collaborating with developers. - -No pressure, but here it is if you want to explore: -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview.md -``` - -### Swedish -``` -Det finns en kursöversikt som går igenom WDS-tillvägagångssättet steg för steg. Den täcker att jobba i IDE:n, skapa grunder, designsystem och samarbeta med utvecklare. - -Ingen press, men här är den om du vill utforska: -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview.md -``` - ---- - -## 🎯 Upcoming Webinar: Strategy in Practice - -### English -``` -There's a session coming up about strategy and trigger mapping on January 15 (17:00 CEST). It's about how to figure out what to build before jumping into building. - -Thought you might find it interesting, no worries if not: -https://whiteport.com/blog/wds-sessions-2-strategy-in-practise-with-wds/ -``` - -### Swedish -``` -Det kommer en session om strategi och trigger mapping den 15 januari (17:00 CEST). Den handlar om hur man tar reda på vad man ska bygga innan man hoppar in i byggandet. - -Tänkte att du kanske tycker det är intressant, ingen fara om inte: -https://whiteport.com/blog/wds-sessions-2-strategy-in-practise-with-wds/ -``` - ---- - -## 💼 Professional Introduction - -### English -``` -I've been trying out Whiteport Design Studio (WDS) lately - it's a framework that lets designers work in the development environment with AI support. Built on the BMAD Method. - -Still learning it myself, but thought I'd share in case you're interested: -https://github.com/whiteport-collective/whiteport-design-studio -``` - -### Swedish -``` -Jag har testat Whiteport Design Studio (WDS) på sistone - det är ett ramverk som låter designers jobba i utvecklingsmiljön med AI-stöd. Byggt på BMAD-metoden. - -Håller fortfarande på att lära mig det själv, men tänkte dela med mig ifall du är intresserad: -https://github.com/whiteport-collective/whiteport-design-studio -``` - ---- - -## 🚀 Quick Mention - -### English -``` -Been trying WDS - lets designers work in the IDE with AI agents. It's free and open-source. - -Might be your thing: -https://github.com/whiteport-collective/whiteport-design-studio -``` - -### Swedish -``` -Har testat WDS - låter designers jobba i IDE:n med AI-agenter. Det är gratis och open-source. - -Kanske är din grej: -https://github.com/whiteport-collective/whiteport-design-studio -``` - ---- - -## 📧 Email Signature Addition - -### English -``` ---- -🎨 Currently exploring WDS -https://github.com/whiteport-collective/whiteport-design-studio -``` - -### Swedish -``` ---- -🎨 Utforskar för närvarande WDS -https://github.com/whiteport-collective/whiteport-design-studio -``` - ---- - -## 🌟 Social Media Posts - -### English - LinkedIn/Twitter -``` -I've been exploring WDS (Whiteport Design Studio) - a free, open-source framework for designers who want to work in the IDE with AI agents. - -It's an interesting approach to working with strategy, design systems, and collaborating with developers in GitHub. - -Sharing in case others find it useful: -https://github.com/whiteport-collective/whiteport-design-studio - -#WDS #DesignWorkflow #OpenSource -``` - -### Swedish - LinkedIn/Twitter -``` -Jag har utforskat WDS (Whiteport Design Studio) - ett gratis, open-source ramverk för designers som vill jobba i IDE:n med AI-agenter. - -Det är ett intressant sätt att jobba med strategi, designsystem och samarbeta med utvecklare i GitHub. - -Delar ifall andra tycker det är användbart: -https://github.com/whiteport-collective/whiteport-design-studio - -#WDS #Designworkflow #OpenSource -``` - ---- - -## 🎓 Course Invitation - -### English -``` -Found this course about WDS that walks through working in the IDE, creating foundations, design systems, and collaborating with developers using AI agents. - -It's free and might be helpful if you're interested in this kind of thing: -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview.md -``` - -### Swedish -``` -Hittade den här kursen om WDS som går igenom att jobba i IDE:n, skapa grunder, designsystem och samarbeta med utvecklare med hjälp av AI-agenter. - -Den är gratis och kan vara till hjälp om du är intresserad av den här typen av saker: -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview.md -``` - ---- - -## 🏆 Certification Program Invitation - -### English -``` -I've started a WDS certification program and thought you might be interested. - -If you'd like to be part of it, here's what it involves: joining our online sessions, following the method through in a real project, being willing to pass the knowledge forward, and starting up three other designers in the method. - -If that sounds interesting and you're willing to commit to it, just send me your email and I'll add you to the inner circle Google Chat group. - -I'd love to start as soon as possible, but no pressure if it's not the right time for you. -``` - -### Swedish -``` -Jag har startat ett WDS-certifieringsprogram och tänkte att du kanske är intresserad. - -Om du vill vara med, här är vad det innebär att ta del av våra sessioner online, följa metoden genom i ett riktigt projekt, vara villig att föra kunskapen vidare och starta upp tre andra designers i metoden - -Om det låter intressant och du är villig att förbinda dig till det, skicka bara din e-post så lägger jag till dig i den inre cirkelns Google Chat-grupp. - -Jag skulle gärna starta så snart som möjligt, men ingen press om det inte är rätt tid för dig. -``` - ---- - -## 🎯 Missed Session 1? Join Session 2! - -### English -``` -Missed the first WDS session? No worries - you've got another shot! - -WDS Session 2 is happening January 15th, 17-18 CET. We'll be talking about digital strategies and how to figure out what to build before jumping into building. And right after, 18-19, we're doing an after-hours thing where we dive into the nitty-gritty of installing WDS and actually using it. - -Free registration here: -https://whiteport.com/blog/wds-sessions-2-strategy-in-practise-with-wds/ - -(And if you want to catch up, here's the Session 1 recording: -https://www.youtube.com/watch?v=TdujvNYI-3g) -``` - -### Swedish -``` -Missade du första WDS-sessionen är det inget problem - nu har du har en ny chans! - -WDS Session 2 händer 15:e januari, 17-18 CET. Vi kommer prata om digitala strategier och hur man tar reda på vad man ska bygga innan man hoppar in i byggandet. Och direkt efter, 18-19, kör vi en after-hours där vi går in på detaljerna kring installation och WDS i praktiken. - -Gratis registrering här: -https://whiteport.com/blog/wds-sessions-2-strategy-in-practise-with-wds/ - -(Och om du vill kolla in vad du missade, här är inspelningen från Session 1: -https://www.youtube.com/watch?v=TdujvNYI-3g) -``` - ---- - -*Last updated: January 3, 2026* diff --git a/docs/examples/WDS-Presentation/docs/2-trigger-map/00-trigger-map.md b/docs/examples/WDS-Presentation/docs/2-trigger-map/00-trigger-map.md deleted file mode 100644 index 1d80b3b0c..000000000 --- a/docs/examples/WDS-Presentation/docs/2-trigger-map/00-trigger-map.md +++ /dev/null @@ -1,219 +0,0 @@ -# Trigger Map: 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 Visualization - -```mermaid -%%{init: {'theme':'base', 'themeVariables': { 'fontFamily':'Inter, system-ui, sans-serif', 'fontSize':'14px'}}}%% -flowchart LR - %% Business Goals (Left) - BG0["
⭐ PRIMARY GOAL: 50 EVANGELISTS

THE ENGINE
50 hardcore believers and advocates
Completed course + built real project
Actively sharing and teaching others
Timeline: 12 months

"] - BG1["
🚀 WDS ADOPTION GOALS

1,000 designers using WDS
100 entrepreneurs embracing
100 developers benefiting
250 active community members
Timeline: 24 months

"] - BG2["
🌟 COMMUNITY OPPORTUNITIES

10 speaking engagements
20 case studies published
50 testimonials
Client project opportunities
Timeline: 24 months

"] - - %% Central Platform - PLATFORM["
🎨 WHITEPORT DESIGN STUDIO

End-to-End Design Methodology

Transform designers from overwhelmed
task-doers into empowered strategic
leaders who shoulder complexity
as a calling, not a burden

"] - - %% Target Groups (Right) - TG0["
🎯 STINA THE STRATEGIST
PRIMARY TARGET

Designer - Psychology background
Job hunting - Overwhelmed
AI curious but lacks confidence

"] - TG1["
💼 LARS THE LEADER
SECONDARY TARGET

Entrepreneur - Employee #3
Non-tech founder role
Designer on maternity leave

"] - TG2["
💻 FELIX THE FULL-STACK
TERTIARY TARGET

Developer - Software engineer
Loves structure - Hates UI
Respects design craft

"] - - %% Driving Forces (Far Right) - DF0["
🎯 STINA'S DRIVERS

WANTS
✅ Be strategic expert
✅ Make real impact
✅ Use AI confidently

FEARS
❌ Being replaced by AI
❌ Wasting time/energy
❌ Being sidelined

"] - - DF1["
💼 LARS'S DRIVERS

WANTS
✅ Happy & productive team
✅ Smooth transition
✅ Quality work

FEARS
❌ Quality dropping
❌ Being taken advantage
❌ Team embarrassment

"] - - DF2["
💻 FELIX'S DRIVERS

WANTS
✅ Clear specifications
✅ Logical thinking
✅ Enlightened day

FEARS
❌ Illogical designs
❌ Vague specs
❌ Forced UI work

"] - - %% Connections - BG0 --> PLATFORM - BG1 --> PLATFORM - BG2 --> PLATFORM - PLATFORM --> TG0 - PLATFORM --> TG1 - PLATFORM --> TG2 - TG0 --> DF0 - TG1 --> DF1 - TG2 --> DF2 - - %% Light Gray Styling with Dark Text + Gold Primary Goal - classDef primaryGoal fill:#fef3c7,color:#78350f,stroke:#fbbf24,stroke-width:3px - 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 primaryGoal - class BG1,BG2 businessGoal - class PLATFORM platform - class TG0,TG1,TG2 targetGroup - class DF0,DF1,DF2 drivingForces -``` - ---- - -## Summary - -**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!" - -**The Flywheel:** -1. ⭐ **Create awesome designers who become evangelists** (THE ENGINE - 12 months) -2. 🚀 **Evangelists drive WDS adoption** (1,000 designers, 100 entrepreneurs, 100 developers, 250 community - 24 months) -3. 🌟 **WDS success creates opportunities for community** (Speaking, case studies, better clients - 24 months) - -**Primary Target:** Stina the Strategist - overwhelmed designer becomes empowered strategic leader and evangelist - ---- - -## Detailed Documentation - -### Business Strategy - -**[01-Business-Goals.md](01-Business-Goals.md)** - Vision, objectives, and success metrics - -**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. - -**Priority Tiers:** - -1. ⭐ **PRIMARY GOAL: 50 Evangelists** (THE ENGINE - 12 months) - - Build passionate core of WDS believers who advocate and spread the methodology - - These 50 drive ALL other objectives - this is the key to expansion - -2. 🚀 **WDS Adoption Goals** (24 months) - - 1,000 designers actively using WDS methodology - - 100 entrepreneurs embracing WDS for their product development - - 100 developers benefiting from BMad Method integration - - 250 active community members - -3. 🌟 **Community Opportunities** (24 months) - - 10 speaking engagements by community members - - 20 published case studies by members - - 50 testimonials from community - - Client project opportunities for WDS-trained designers - ---- - -### Target Users - -**[02-Stina-the-Strategist.md](02-Stina-the-Strategist.md)** - Primary target persona - -**Profile:** Multi-dimensional designer with psychology background, end of 1-year contract, actively job hunting, overwhelmed and working secret overtime. AI curious but lacks confidence. - -**Positive Drivers:** -- ✅ Be the go-to strategic expert - valued and asked for advice -- ✅ Make real impact on the world through grand adventures -- ✅ Confidently use AI professionally and scale her impact - -**Negative Drivers:** -- ❌ Being replaced by AI or becoming irrelevant -- ❌ Wasting time/energy on tools that don't work -- ❌ Being sidelined or not valued when she could save the world - -**Transformation:** Overwhelmed task-doer → Empowered strategic leader - ---- - -**[03-Lars-the-Leader.md](03-Lars-the-Leader.md)** - Secondary target persona - -**Profile:** Seasoned entrepreneur (employee #3, practically founder), not a tech person but plays hybrid PM/CTO role. Designer going on maternity leave - needs stand-in with AI knowledge and drive. - -**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) - -**Negative Drivers:** -- ❌ Quality dropping or bottlenecks (takes very personally) -- ❌ Being taken advantage of by consultants -- ❌ Being embarrassed in front of his team - -**Role in Flywheel:** Validates business value, creates demand for WDS designers - ---- - -**[04-Felix-the-Full-Stack.md](04-Felix-the-Full-Stack.md)** - Tertiary target persona - -**Profile:** Full-stack developer with straight career path. Loves BMad Method structure and documentation. Respects designers because he's terrible at "GUIs - who even calls it that anymore?" - -**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) - -**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 - -**Role in Flywheel:** Benefits from WDS specs, spreads word about better collaboration - ---- - -### Strategic Implications - -**[05-Key-Insights.md](05-Key-Insights.md)** - Design and development priorities - -**Primary Development Focus:** -1. Create Awesome Designers Who Become Evangelists - Stina becomes one of the 50 -2. Strategic Leadership Transformation - From overwhelmed to empowered -3. AI Confidence Building - Structured, hand-holding path -4. Business Value Validation - Show Lars how WDS delivers results -5. Better Specifications - Prove to Felix that specs reduce headaches - -**Critical Success Factors:** -- Emotional Transformation: Burden → Calling -- Hand-Holding Approach: Clear steps, course modules, installation -- Proof of Results: Dog Week case study (5x faster) -- Free Access: No cost barriers -- Complete Journey: Idea → maintenance - -**Emotional Transformation Goals:** -- "I can be the strategic leader my team needs" -- "AI amplifies my expertise, doesn't replace it" -- "I have a structured path that works" -- "I'm making real difference through grand adventures" -- "Design is my calling, not just a task" - ---- - -**[06-Feature-Impact.md](06-Feature-Impact.md)** - Prioritized features for UX and development (Optional Design Brief) - -**Top Priority Features (Must Have MVP):** -1. Testimonials & Social Proof (Score: 11) 🏆 - ONLY feature scoring HIGH across all three personas -1. BMad Method Integration (Score: 11) 🏆 - All personas benefit from seamless design-to-dev -3. End-to-End Workflow Through Agents (Score: 9) - Complete journey told through expert guides (Saga, Freya, Idunn, Mimir) -3. Conceptual Specifications (Score: 9) - Specs that capture concept + reasoning, making Stina indispensable and Felix happy -5. Example Projects/Case Studies (Score: 8) - Proof that overcomes "wasting time" fear -6. Course Modules (Score: 6) - Hand-holding builds Stina's confidence -7. Installation Documentation (Score: 5) - Removes barrier to entry - -**Key Insight:** Agents merged into workflow story - maintains strategic score (9) while creating more engaging, memorable presentation. Characters make abstract methodology human and approachable. - ---- - -## How to Read the Diagram - -The trigger map connects business goals (left) through the platform (center) to target user groups (right) and their driving forces (far right). - -**Priority:** -- ⭐ **Gold box** = PRIMARY GOAL (50 Evangelists - THE ENGINE) -- 🚀 **Gray boxes** = Supporting goals driven by evangelists -- 🌟 **Gray boxes** = Opportunities created for community members - -**Driving Forces:** -- ✅ **Green checkmarks** = Positive goals (what users want) -- ❌ **Red X marks** = Negative goals (what users fear/avoid) - ---- - -_Generated by Whiteport Design Studio_ -_Trigger Mapping methodology credits: Effect Mapping by Mijo Balic & Ingrid Domingues (inUse), adapted with negative driving forces by WDS_ - diff --git a/docs/examples/WDS-Presentation/docs/2-trigger-map/01-Business-Goals.md b/docs/examples/WDS-Presentation/docs/2-trigger-map/01-Business-Goals.md deleted file mode 100644 index ac6a2f6b9..000000000 --- a/docs/examples/WDS-Presentation/docs/2-trigger-map/01-Business-Goals.md +++ /dev/null @@ -1,153 +0,0 @@ -# Business Goals & Objectives - -> Strategic goals and measurable objectives for WDS Presentation Page - -**Document:** Trigger Map - Business Goals -**Created:** December 27, 2025 -**Status:** COMPLETE - ---- - -## 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 - -### ⭐ PRIMARY GOAL: Build Core Evangelist Community (THE ENGINE) -- **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 - this is the key to expansion - ---- - -### 🚀 WDS ADOPTION GOALS (Driven by Evangelists) - -**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 - ---- - -### 🌟 COMMUNITY OPPORTUNITIES (Real-World Benefits for Members) - -**Note:** These are opportunities WDS creates FOR the community members - the evangelists and designers who use WDS. They build their careers, reputations, and businesses. - -**Objective 5: Speaking & Thought Leadership** -- **Statement:** Community members get speaking opportunities at conferences and events -- **Metric:** WDS-trained designers invited to speak about their methodology and results -- **Target:** 10 speaking engagements by community members -- **Timeline:** 24 months -- **Benefit to Members:** Career advancement, thought leadership, professional recognition - -**Objective 6: Published Case Studies** -- **Statement:** Community members publish case studies about their WDS projects -- **Metric:** Real project case studies showcasing WDS methodology and results -- **Target:** 20 published case studies by community members -- **Timeline:** 24 months -- **Benefit to Members:** Portfolio building, credibility, attracting clients - -**Objective 7: Professional Testimonials** -- **Statement:** Community members share testimonials about WDS impact on their work -- **Metric:** Video or written testimonials from designers, entrepreneurs, and developers -- **Target:** 50 testimonials from community -- **Timeline:** 24 months -- **Benefit to Members:** Recognition, contribution to movement, helping others - -**Objective 8: Client Project Opportunities** -- **Statement:** WDS-trained designers land client projects because of their WDS expertise -- **Metric:** Job offers, freelance gigs, or consulting projects specifically requesting WDS methodology -- **Target:** Track and celebrate member success stories -- **Timeline:** 24 months -- **Benefit to Members:** Direct revenue, career growth, competitive advantage in market - ---- - -## The Flywheel: How Goals Connect - -**THE ENGINE (Priority #1):** -- 50 hardcore evangelists are THE PRIMARY GOAL -- Timeline: 12 months -- These believers complete the course, build real projects, actively share and teach -- They create the flywheel that drives ALL other objectives - -**WDS Adoption (Priority #2):** -- Driven BY the 50 evangelists spreading the word -- 1,000 designers, 100 entrepreneurs, 100 developers, 250 community -- Timeline: 24 months -- Focus: Methodology spread and adoption - -**Community Opportunities (Priority #3):** -- Real-world benefits FOR community members -- Speaking gigs, case studies, testimonials, client projects -- Timeline: 24 months -- **Key benefit**: WDS-trained designers become sought-after, land better opportunities, build careers - ---- - -## Success Metrics Alignment - -### How Trigger Map Connects to Objectives (Properly Prioritized): - -**⭐ PRIMARY: Creating Awesome Designers Who Become Evangelists → Achieves:** -- ✅ **50 evangelists** (THE ENGINE - Stina becomes one of them naturally) -- ✅ Completes course + builds real project -- ✅ Sees amazing results and transformation -- ✅ Naturally shares and teaches others because it worked -- ✅ Creates testimonials and case studies from genuine success -- **Timeline: 12 months** -- **This drives ALL other objectives** - -**🚀 SECONDARY: Evangelists Drive WDS Adoption → Achieves:** -- ✅ 1,000 designers (evangelists spread the word) -- ✅ 100 entrepreneurs (evangelists demonstrate business value) -- ✅ 100 developers (evangelists deliver better specs) -- ✅ 250 community (evangelists create engagement) -- **Timeline: 24 months** - -**🌟 TERTIARY: WDS Success Creates Opportunities for Community → Achieves:** -- ✅ 10 speaking engagements (members invited to speak at conferences) -- ✅ 20 case studies (members publish their WDS project success) -- ✅ 50 testimonials (members share their transformation stories) -- ✅ Client opportunities (members land projects because they're WDS-trained) -- **Timeline: 24 months** -- **Benefit: Career advancement and recognition for community members** - ---- - -## Related Documents - -- **[00-trigger-map.md](00-trigger-map.md)** - Visual overview and navigation -- **[02-Stina-the-Strategist.md](02-Stina-the-Strategist.md)** - Primary persona -- **[03-Lars-the-Leader.md](03-Lars-the-Leader.md)** - Secondary persona -- **[04-Felix-the-Full-Stack.md](04-Felix-the-Full-Stack.md)** - Tertiary persona -- **[05-Key-Insights.md](05-Key-Insights.md)** - Strategic implications - ---- - -_Back to [Trigger Map](00-trigger-map.md)_ - diff --git a/docs/examples/WDS-Presentation/docs/2-trigger-map/02-Stina-the-Strategist.md b/docs/examples/WDS-Presentation/docs/2-trigger-map/02-Stina-the-Strategist.md deleted file mode 100644 index 43a86e3ea..000000000 --- a/docs/examples/WDS-Presentation/docs/2-trigger-map/02-Stina-the-Strategist.md +++ /dev/null @@ -1,291 +0,0 @@ -# Stina the Strategist - Designer Persona - -> 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 - ---- - -## Profile Summary - -**Multi-dimensional thinker who loves systems thinking, aesthetics, functionality, and human psychology.** - -Stina represents the designer who shoulders the leadership role - the linchpin between business goals and technical implementation. WDS makes her indispensable by giving her the methodology to carry this burden well. She becomes one of the 50 hardcore evangelists who drive everything. - ---- - -## Background - -### Education & Career Path - -**University:** Studied psychology with a paper on cognition - this captured her curiosity about how people think and interact with systems. - -**Learning Journey:** Took some courses in IT management, learning just enough about technology to bridge the gap between users and systems. - -**First Break:** Made a website for her favorite band. One thing led to the next, and here she is. - -**Current Role:** End of 1-year contract as the lone designer in a development team. Actively job hunting. - -**Career Pattern:** No straight path - arrived through passion for the meeting between business needs and user needs. A chameleon who adapts to whatever the situation requires. - ---- - -## Current Situation - -### Professional Reality - -**The Daily Struggle:** -- Works as lonely designer in a team of developers -- Fights every day for the users with her limited capacity -- Feels overwhelmed by the scope of responsibility -- Secretly works overtime sometimes just to be able to help more people at work -- Job hunting while maintaining full workload - -**Skills & Tools:** -- Knows a little bit of everything - Figma, Lovable, office products, various ticketing systems -- Has coded some pet projects, uses AI extensively in hobbies -- Enough code knowledge to understand developers, but not enough to develop a whole product -- Open to new tools but not the first to jump on trends - appreciates hand-holding in the beginning - -**The Confidence Gap:** -- Uses AI extensively in hobbies but lacks confidence to use it professionally -- There's a threshold to jump on using AI in actual projects -- Self-confidence just isn't there yet -- Curious to try but doesn't want to bang her head against a wall for no reason - ---- - -## Psychological Profile - -### Personality & Motivations - -**Core Identity:** -- Multi-dimensional thinker -- Loves systems thinking, aesthetics, functionality, and human psychology -- Secret desire to "save the world" through design -- Believes in grand adventures and making real impact - -**Work Style:** -- Chameleon - adapts to different situations -- Detail-oriented but keeps big picture in mind -- Passionate but sometimes overwhelmed -- Values structured approaches that reduce uncertainty - ---- - -## Driving Forces - -### ✅ Top 3 Positive Drivers (What She Wants) - -**1. To be the go-to strategic expert** -- Valued by her team and asked for advice -- Recognized as more than a "pixel pusher" -- Seen as strategic partner, not just executor -- **WDS Promise:** Become the strategic leader your team needs - -**2. To make real impact on the world through grand adventures** -- Design solutions that genuinely help people -- Work on meaningful projects that matter -- Feel like she's contributing something significant -- **WDS Promise:** Transform complexity into solutions that drive real product success - -**3. To confidently use AI professionally and scale her impact** -- Bridge the confidence gap with AI tools -- Use AI as co-pilot, not feel threatened by it -- Scale her capabilities without working overtime -- **WDS Promise:** Structured, hand-holding path to professional AI mastery - ---- - -### ❌ Top 3 Negative Drivers (What She Fears) - -**1. Being replaced by AI or becoming irrelevant** -- The existential fear of the AI era -- Feeling like her skills might become obsolete -- Watching AI tools do design work -- **WDS Answer:** AI amplifies expertise, doesn't replace strategic thinking - -**2. Wasting time/energy on tools that don't work** -- Banging head against wall for no reason -- Investing time in learning something that doesn't deliver -- Getting burned by overpromised, underdelivered tools -- **WDS Answer:** Proven methodology with Dog Week case study (5x faster) - -**3. Being sidelined or not valued when she could save the world** -- Having the capacity to help but not being asked -- Being treated as order-taker instead of strategic partner -- Her ideas and expertise ignored or underutilized -- **WDS Answer:** Position as indispensable strategic leader - ---- - -## The Transformation Journey - -### BEFORE WDS - -**Emotional State:** -- 😰 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 - -**Daily Reality:** -- Fighting for users with limited capacity -- Working overtime in secret -- Curiosity about AI but no confidence to use professionally -- Job hunting while feeling uncertain about future - -**Self-Perception:** -- Task-doer who executes -- Not quite technical enough -- Not quite strategic enough -- Somewhere in the middle, fighting for recognition - ---- - -### AFTER WDS - -**Emotional State:** -- 🎯 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 - -**Daily Reality:** -- Leading strategic conversations -- Using AI confidently in professional work -- Delivering complete, logical specifications -- Becoming sought-after for WDS expertise - -**Self-Perception:** -- Strategic leader -- AI-empowered designer -- Indispensable team member -- One of 50 evangelists spreading WDS - ---- - -## Role in Strategic 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) -``` - -**Stina's Role:** -- Shoulders the complexity and breaks it down -- Bridges business needs and technical implementation -- Creates specifications that make Felix's life easier -- Delivers value that makes Lars's business succeed -- Becomes so valuable that Lars hires more WDS designers - ---- - -## Role in Flywheel: Creating Awesome Designers Who Become Evangelists - -Stina represents the designer who WDS empowers to become truly awesome - and awesome designers naturally become evangelists. - -**The Natural Evolution:** -1. Stina discovers WDS and sees herself in the methodology -2. Learns structured approach with hand-holding -3. Builds real project using WDS - sees results -4. Transforms from overwhelmed to empowered -5. Naturally shares what worked with others -6. Becomes one of the 50 evangelists - not because we asked, but because she's excited - -**1. Hero Section** -- Immediate acknowledgment of AI replacement fear -- "Guiding light for designers in AI era" positioning -- Leadership opportunity, not threat - -**2. Methodology Section** -- Clear structure (addresses confidence concerns) -- Dog Week case study as proof -- Hand-holding approach explained -- Course modules visible - -**3. Benefits Section** -- "Make designers indispensable" message -- AI as co-pilot, not replacement -- Strategic leader positioning - -**4. Course/Installation** -- Clear, structured path -- Low barrier to entry (free, open-source) -- Worth the time investment - -**5. Social Proof** -- Testimonials from designers like her -- Real project case studies -- Early evangelists emerging - ---- - -## Success Metrics - -**Stina Becomes Evangelist When She:** -1. ✅ Completes WDS course (at minimum Module 01-02) -2. ✅ Clones repository and starts using methodology -3. ✅ Builds real project with WDS (not just learning) -4. ✅ Actively shares and teaches WDS to others -5. ✅ Contributes feedback and helps improve methodology - -**Impact on Business Goals:** -- Becomes one of **50 hardcore evangelists** (PRIMARY GOAL) -- Spreads WDS to other designers through speaking, testimonials, case studies -- Creates demand by delivering better results -- Lands better job opportunities because she's WDS-trained - ---- - -## The Battle Cry (For Stina) - -**"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!"** - -This is Stina's transformation: From overwhelmed task-doer to empowered strategic leader. - ---- - -## Related Documents - -- **[00-trigger-map.md](00-trigger-map.md)** - Visual overview and navigation -- **[03-Lars-the-Leader.md](03-Lars-the-Leader.md)** - Secondary persona -- **[04-Felix-the-Full-Stack.md](04-Felix-the-Full-Stack.md)** - Tertiary persona -- **[05-Key-Insights.md](05-Key-Insights.md)** - Strategic implications - ---- - -## 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)_ - diff --git a/docs/examples/WDS-Presentation/docs/2-trigger-map/03-Lars-the-Leader.md b/docs/examples/WDS-Presentation/docs/2-trigger-map/03-Lars-the-Leader.md deleted file mode 100644 index c57d2d7c5..000000000 --- a/docs/examples/WDS-Presentation/docs/2-trigger-map/03-Lars-the-Leader.md +++ /dev/null @@ -1,325 +0,0 @@ -# Lars the Leader - Entrepreneur Persona - -> 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 - ---- - -## Profile Summary - -**Seasoned entrepreneur who's burned through projects and learned there are no shortcuts.** - -Lars represents the entrepreneur who validates that WDS delivers business value and creates demand for WDS-trained designers. He needs to trust designers to shoulder complexity and say "We need this, make it happen." - ---- - -## Background - -### Business Journey - -**Company Role:** Employee #3 in a product and service company - practically the founder - -**Experience Level:** Seasoned - has been through multiple projects, learned from failures, understands there are no shortcuts - -**Technical Background:** Not a tech person, but functions as a hybrid of: -- Product Manager -- CTO-ish role -- Business leader - -**Management Style:** Social person who doesn't wish to get his hands dirty with actual work. Active on whiteboard sessions but leaves the experts to do their thing. - ---- - -## Current Situation - -### Company & Team - -**Company Size & Scope:** -- Multiple apps, sites, and admin systems -- Some legacy systems - nothing crazy -- Solid customer base with personal relationships -- Has paid off the technical debt (this was hard-won) - -**Team Philosophy:** -- Realizes motivation has to come from within -- Lets people do their thing -- Open to mistakes of ambition -- Doesn't like when people aren't trying to do their best -- Wants team to be happy AND productive - -**Technology Approach:** -- Leans heavily on consultants to set up techy things -- Interested in new technology -- Lets team tinker and fiddle with new tech when they're passionate -- Knows all new tech isn't great, but sees the spark in eyes when learning -- This might be why team members have stayed so long - -**Customer Relationships:** -- Personal contact with quite a few customers -- Takes downtime and bugs very personally -- Hates bottlenecks - each one feels like a personal failure - ---- - -## Current Challenge - -### The Designer Transition - -**The Situation:** -- Current designer is going on maternity leave soon -- Needs a stand-in with knowledge and drive in AI -- UX workflow could be a little better (knows this) -- Wants smooth transition without quality dropping - -**What He's Looking For:** -- Someone with AI knowledge and drive -- Designer who can maintain or improve quality -- Person who can integrate with the existing team -- Someone who won't need constant hand-holding - ---- - -## Psychological Profile - -### Leadership Style & Values - -**Core Values:** -- Team happiness matters - but so does productivity -- Quality over shortcuts -- Learning and growth within team -- Trust the experts to do their thing - -**Team as Machinery:** -- Sees team as a big, optimized machine -- Wants everyone to have unique skills -- Values overlap and communication -- Willing to pay for quality - -**Personal Approach:** -- Social but not micromanaging -- Active in strategy, hands-off in execution -- Takes failures personally (downtime, bugs, bottlenecks) -- Fills the vision role - ---- - -## Driving Forces - -### ✅ Top 3 Positive Drivers (What He Wants) - -**1. Team that's happy AND productive (optimized machinery)** -- Not just one or the other - both -- Everyone has their unique skills -- Overlap and good communication -- Spark in their eyes when learning new things -- **WDS Promise:** Methodology that empowers teams and improves collaboration - -**2. Smooth designer transition with AI-savvy replacement** -- Maternity leave coverage handled well -- New designer who understands AI tools -- No drop in quality during transition -- Someone with drive and knowledge -- **WDS Promise:** WDS-trained designers are prepared, structured, and AI-confident - -**3. Quality work that fulfills the vision (willing to pay)** -- Work that delivers on the business vision -- No shortcuts - learned that lesson -- Willing to invest in quality -- Want to be in forefront of technology -- **WDS Promise:** Proven methodology with measurable business results - ---- - -### ❌ Top 3 Negative Drivers (What He Fears) - -**1. Quality dropping or bottlenecks (takes very personally)** -- Downtime feels like personal failure -- Bugs are embarrassing -- Bottlenecks frustrate him deeply -- UX workflow inefficiencies bother him -- **WDS Answer:** Structured methodology reduces bottlenecks and maintains quality - -**2. Being taken advantage of by consultants** -- Has been burned before (implied) -- Leans on consultants but wary -- Wants honest, quality work -- Fears being sold snake oil -- **WDS Answer:** Open-source, proven methodology - no vendor lock-in - -**3. Being embarrassed in front of his team** -- Social person who values team respect -- Doesn't want to look foolish -- Fears making bad hiring/consulting decisions -- Wants to maintain credibility -- **WDS Answer:** Real case studies, testimonials, proven track record - ---- - -## What Lars Needs from Designers - -### The Ideal Designer (From Lars's Perspective) - -**Characteristics:** -- Takes initiative and shoulders responsibility -- Understands business needs, not just aesthetics -- Can work with developers effectively -- Brings AI knowledge and modern approaches -- Doesn't create bottlenecks or confusion - -**Workflow:** -- Clear communication about design decisions -- Specifications that developers can work with -- Proactive about identifying issues -- Collaborative without needing constant direction - -**Results:** -- Quality work that fulfills the vision -- Happy users and customers -- Smooth collaboration with dev team -- Business value delivered - ---- - -## Role in Strategic 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) -``` - -**Lars's Role:** -- Receives business value from quality design + development -- Validates that WDS methodology works -- Creates demand by hiring more WDS-trained designers -- Closes the loop by valuing and promoting WDS approach - ---- - -## Validation Strategy - -### What Lars Needs to See About WDS - -**1. Business Value Proof** -- Real case studies with measurable results -- Dog Week: 5x faster, better quality -- ROI clearly demonstrated -- Not just design theory, actual business impact - -**2. Risk Mitigation** -- Methodology is proven, not experimental -- Based on 25-year BMad foundation -- Open-source - no vendor lock-in -- Community of users providing validation - -**3. Team Benefits** -- Makes designers more effective -- Improves designer-developer collaboration -- Reduces bottlenecks and confusion -- Creates happier, more productive team - -**4. Trust Signals** -- Testimonials from other entrepreneurs -- Case studies from real companies -- Speaking engagements and recognition -- Active community support - ---- - -## Conversion Path - -### How Lars Validates WDS - -**Phase 1: Discovery** -- Hears about WDS from designer applicant or community -- Sees it mentioned as methodology on portfolio/resume -- Notices improved specifications from WDS-trained designer - -**Phase 2: Evaluation** -- Reads case studies and testimonials -- Sees business results (time saved, quality improved) -- Validates with other entrepreneurs -- Checks that it's real methodology, not just hype - -**Phase 3: Adoption** -- Hires WDS-trained designer (or encourages current designer to learn) -- Sees immediate benefits in workflow and quality -- Experiences smoother designer-developer collaboration -- Business results validate the investment - -**Phase 4: Advocacy** -- Recommends WDS to other entrepreneurs -- Looks for WDS-trained designers in future hiring -- Becomes proof point in case studies -- Creates ongoing demand for WDS designers - ---- - -## Impact on Business Goals - -**Lars's Role in Success Metrics:** - -**Primary Goal (50 Evangelists):** -- Validates that WDS-trained designers deliver value -- Creates demand that motivates designers to learn WDS - -**Secondary Goals (WDS Adoption):** -- Becomes one of **100 entrepreneurs embracing WDS** -- Hires designers who are WDS-trained -- Provides case study of business impact - -**Tertiary Goals (Community Opportunities):** -- His company becomes proof point in case studies -- Provides testimonials about business value -- Recommends WDS at entrepreneur/business events - ---- - -## The Message for Lars - -**"WDS-trained designers deliver business value. They shoulder complexity, communicate clearly, and collaborate effectively. They make your team better."** - -Lars doesn't need to learn WDS himself - he needs to trust that WDS-trained designers are worth hiring and empowering. - ---- - -## Related Documents - -- **[00-trigger-map.md](00-trigger-map.md)** - Visual overview and navigation -- **[02-Stina-the-Strategist.md](02-Stina-the-Strategist.md)** - Primary persona -- **[04-Felix-the-Full-Stack.md](04-Felix-the-Full-Stack.md)** - Tertiary persona -- **[05-Key-Insights.md](05-Key-Insights.md)** - Strategic implications - ---- - -## 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)_ - diff --git a/docs/examples/WDS-Presentation/docs/2-trigger-map/04-Felix-the-Full-Stack.md b/docs/examples/WDS-Presentation/docs/2-trigger-map/04-Felix-the-Full-Stack.md deleted file mode 100644 index fb873309a..000000000 --- a/docs/examples/WDS-Presentation/docs/2-trigger-map/04-Felix-the-Full-Stack.md +++ /dev/null @@ -1,384 +0,0 @@ -# Felix the Full-Stack - Developer Persona - -> 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 - ---- - -## Profile Summary - -**Full-stack developer with straight career path who loves structure and respects designers because he's terrible at "GUIs - who even calls it that anymore?"** - -Felix represents developers who benefit from designer's leadership through better specifications. He's not the primary WDS audience, but he needs to know it makes his life easier and appreciate when designers use it. - ---- - -## Background - -### Career Path - -**Education:** Studied software engineering - solid technical foundation - -**Career Trajectory:** -- Made internship in a big company -- Has been a developer his whole life -- Straight career path, employed throughout -- No wandering or exploring - found his calling early - -**Current Role:** Full-stack developer on a product team - -**Professional Identity:** Confident in his technical skills, knows what he's good at (and what he's not) - ---- - -## Professional Profile - -### Technical Approach - -**What He Loves:** -- Structure and organization -- BMad Method framework - the documentation and structure appeal to him -- Clear, logical specifications -- Having a good spec to work from -- When things make sense and fit together - -**What He Hates:** -- Writing documentation (even though he loves having it) -- UI/GUI work - "who even calls it that anymore?" -- Being forced to make design decisions -- Guessing what the designer actually meant - -**Work Philosophy:** -- "Just give me a good spec and I'm happy to do my magic on the dev side" -- "If it also looks good, that makes me happy" -- Enjoys the craft of development when he can focus on it - ---- - -## Current Situation - -### Work Environment - -**Team Dynamics:** -- Works with designers (respects them because he's not good at visual stuff) -- Loves working with creative people even though he doesn't understand them -- Perfect situation: Designer does "the poetry," he does the "magic on dev side" - -**Technology Stack:** -- Full-stack capabilities -- Comfortable with modern tools and frameworks -- AI relationship: Complicated (see below) - ---- - -## The AI Relationship - -### Love-Hate with AI Code - -**What He Loves About AI:** -- Handles tedious tasks he dislikes -- Takes care of boilerplate and repetitive work -- Can generate UI code (which he hates writing) -- Speeds up development on grunt work - -**What He Hates About AI:** -- The code quality isn't always good -- Can't release AI code without checking it meticulously first -- Has to review everything carefully -- Creates new kind of work: AI code auditing - -**The Contradiction:** -- Can't argue against using AI (too many benefits) -- But doesn't completely trust it -- Interested in AI technology, skeptical of AI code -- Pragmatic acceptance with careful oversight - ---- - -## Psychological Profile - -### Personality & Motivations - -**Core Traits:** -- Logical, systematic thinker -- Appreciates structure and clarity -- Respects expertise (even in domains he doesn't understand) -- Pragmatic and practical -- Takes pride in clean, working code - -**Relationship with Design:** -- Respects designers because he knows his limitations -- Doesn't understand their creative process but trusts it -- Appreciates when they think logically -- Frustrated when they don't - -**Work Satisfaction:** -- Enlightened when work is clean and logical -- Frustrated when things don't make sense -- Happy when specification is good -- Irritated when forced to guess or fill gaps - ---- - -## Driving Forces - -### ✅ Top 3 Positive Drivers (What He Wants) - -**1. Clear, logical specifications that make his life easier** -- Complete specs with all the details -- Logical flow and structure -- No ambiguity or guessing required -- Everything thought through before handoff -- **WDS Promise:** Structured methodology produces complete, logical specs - -**2. Designers who think things through before handing off** -- Consideration for implementation -- Understanding of what's possible/difficult -- Thinking about edge cases -- Respecting the complexity of development -- **WDS Promise:** WDS trains designers to think systematically and completely - -**3. Work that enlightens his day (not creates problems)** -- Clean handoffs -- Specifications that work -- Collaboration that flows -- Feeling smart and capable, not confused -- **WDS Promise:** Better designer-developer collaboration - ---- - -### ❌ Top 3 Negative Drivers (What He Fears) - -**1. Illogical designs creating cascading headaches** -- Design decisions that don't make technical sense -- Every logical mistake becomes his problem to solve -- Inconsistencies that create bugs -- Having to fix design problems in code -- **WDS Answer:** Systematic methodology catches logical errors early - -**2. Vague specs forcing him to guess designer's intent** -- Incomplete specifications -- Having to make design decisions himself -- Not knowing what the designer actually wanted -- Rework because he guessed wrong -- **WDS Answer:** Complete specifications from structured process - -**3. Being forced to do UI work he's terrible at** -- Making visual design decisions -- Working on "GUIs" -- Tasks outside his expertise -- Feeling incompetent at forced design work -- **WDS Answer:** Clear designer-developer roles and responsibilities - ---- - -## What Felix Needs from Designers - -### The Perfect Designer Collaboration - -**In Felix's Ideal World:** -1. Designer does "the poetry" (the creative, visual, user-focused thinking) -2. Designer provides complete, logical specifications -3. Designer has thought through edge cases and technical implications -4. Felix does his "magic" on the dev side (clean, working code) -5. Result looks good AND works well -6. Everyone stays in their lane and respects each other's expertise - -**What Makes Felix Happy:** -- Specifications that anticipate questions -- Designs that respect technical constraints -- Clear communication about priorities -- Designer who enlightens his day instead of creating problems - -**What Makes Felix Frustrated:** -- Having to guess what designer meant -- Logical inconsistencies in design -- Being asked to "make it look good" without guidance -- Design decisions dumped on him - ---- - -## Role in Strategic 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) -``` - -**Felix's Role:** -- Receives better specifications from WDS-trained designers -- Delivers higher quality because specs are complete and logical -- Spreads word to other developers about better collaboration -- Creates positive feedback about WDS approach - ---- - -## How Felix Discovers WDS Value - -### The Recognition Path - -**Phase 1: Experience the Difference** -- Works with designer who uses WDS -- Notices specifications are more complete -- Finds fewer logical gaps and ambiguities -- Realizes his work is flowing better - -**Phase 2: Recognition** -- "This is so much better than usual" -- Asks designer what changed -- Learns about WDS methodology -- Connects better specs to WDS approach - -**Phase 3: Appreciation** -- Actively appreciates WDS-trained designers -- Provides positive feedback -- Mentions to other developers -- Becomes advocate for hiring WDS designers - -**Phase 4: Word of Mouth** -- Tells other devs about better collaboration -- Recommends WDS approach to designers he works with -- Becomes part of testimonials/case studies -- Creates pull for WDS from dev side - ---- - -## What Felix Needs to Know About WDS - -### The Message for Developers - -**Primary Message:** -"WDS-trained designers will make your life easier. They think systematically, provide complete specs, and understand the importance of logical consistency." - -**Key Points Felix Cares About:** - -1. **Better Specifications** - - Complete, logical, thought-through - - Fewer gaps and ambiguities - - Clear edge case handling - -2. **Systematic Thinking** - - Designers trained to think through implications - - Logical consistency built into methodology - - Structure that aligns with developer mindset - -3. **BMad Integration** - - WDS integrates with BMad Method (which he already loves) - - Documentation and structure he appreciates - - Shared framework for team collaboration - -4. **Respect for Roles** - - Clear designer-developer responsibilities - - Designer stays in design lane, dev in dev lane - - Mutual respect for expertise - ---- - -## Impact on Business Goals - -**Felix's Role in Success Metrics:** - -**Primary Goal (50 Evangelists):** -- Provides positive feedback that validates designer's WDS journey -- Developer appreciation motivates designers to continue - -**Secondary Goals (WDS Adoption):** -- Becomes one of **100 developers benefiting from WDS** -- Spreads word about better collaboration to dev community - -**Tertiary Goals (Community Opportunities):** -- Provides testimonials from developer perspective -- Case studies show developer satisfaction -- Attracts more developers to projects using WDS - ---- - -## The Unspoken Benefit - -### WDS Makes Felix's Job Better (Without Him Needing to Learn It) - -**The Beautiful Thing:** -- Felix doesn't need to learn WDS -- Felix doesn't need to change his workflow -- Felix just benefits from better specifications -- His life gets easier without extra effort - -**The Side Effect:** -- Happy developers tell other developers -- Dev community becomes advocates for WDS designers -- Creates market demand from bottom-up -- Makes WDS designers more valuable - -**The Irony:** -- Felix loves structure (BMad Method) -- WDS gives him that structure through designer -- He gets the benefit of methodology without the learning curve -- Perfect situation for someone who loves structure but hates documentation - ---- - -## Interface with WDS (Optional) - -### If Felix Gets Curious - -Some developers might get interested in WDS agents for simple UI tasks. For Felix: - -**Potential Interest:** -- WDS agents for quick UI mockups -- When forced to do interface work, agents could help -- Structured approach might appeal to his love of systems - -**Likely Approach:** -- Cautious, like his approach to AI code -- Interested but skeptical -- Would try for simple UI tasks when desperate -- Still prefers working with skilled designer - -**Not Primary Focus:** -- Felix is tertiary target -- Main benefit is receiving better specs -- Any direct WDS use is bonus, not goal - ---- - -## Related Documents - -- **[00-trigger-map.md](00-trigger-map.md)** - Visual overview and navigation -- **[02-Stina-the-Strategist.md](02-Stina-the-Strategist.md)** - Primary persona -- **[03-Lars-the-Leader.md](03-Lars-the-Leader.md)** - Secondary persona -- **[05-Key-Insights.md](05-Key-Insights.md)** - Strategic implications - ---- - -## 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)_ - diff --git a/docs/examples/WDS-Presentation/docs/2-trigger-map/05-Key-Insights.md b/docs/examples/WDS-Presentation/docs/2-trigger-map/05-Key-Insights.md deleted file mode 100644 index 5c42148b6..000000000 --- a/docs/examples/WDS-Presentation/docs/2-trigger-map/05-Key-Insights.md +++ /dev/null @@ -1,148 +0,0 @@ -# Key Insights & Strategic Implications - -> How the Trigger Map informs design and development decisions - -**Document:** Trigger Map - Key Insights -**Created:** December 27, 2025 -**Status:** COMPLETE - ---- - -## The Flywheel: 50 Evangelists Drive Everything - -**THE ENGINE (Priority #1):** -- 50 hardcore evangelists are THE PRIMARY GOAL -- Timeline: 12 months -- These believers complete the course, build real projects, actively share and teach -- They create the flywheel that drives ALL other objectives - -**WDS Adoption (Priority #2):** -- Driven BY the 50 evangelists spreading the word -- 1,000 designers, 100 entrepreneurs, 100 developers, 250 community -- Timeline: 24 months -- Focus: Methodology spread and adoption - -**Community Opportunities (Priority #3):** -- Real-world benefits FOR community members -- Speaking gigs, case studies, testimonials, client projects -- Timeline: 24 months -- **Key benefit**: WDS-trained designers become sought-after, land better opportunities, build careers - ---- - -## Primary Development Focus - -1. **Create Awesome Designers Who Become Evangelists** - Stina is the profile who becomes one of the 50 -2. **Strategic Leadership Transformation** - Address Stina's core need to move from overwhelmed to empowered -3. **AI Confidence Building** - Structured, hand-holding path to professional AI use -4. **Business Value Validation** - Show Lars how WDS designers deliver measurable results -5. **Better Specifications** - Prove to Felix that logical, complete specs reduce headaches - ---- - -## Critical Success Factors - -- **Emotional Transformation**: Burden → Calling (the battle cry in action) -- **Hand-Holding Approach**: Clear steps, course modules, installation guidance -- **Proof of Results**: Dog Week case study (5x faster, better quality) -- **Free Access**: No cost barriers or subscriptions -- **Complete Journey**: Idea → maintenance (not just fragments) - ---- - -## Design Implications - -### 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 - ---- - -## Emotional Transformation Goals - -- **Designer Empowerment**: "I can be the strategic leader my team needs" -- **AI as Co-Pilot**: "AI amplifies my expertise, doesn't replace it" -- **Confidence Building**: "I have a structured path that works" -- **Impact Making**: "I'm making real difference through grand adventures" -- **Professional Pride**: "Design is my calling, not just a task" - ---- - -## 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 - ---- - -## Development Phases - -### **First Deliverable: WDS Presentation Page** -Focus on empowering Stina from overwhelmed designer to awesome strategic leader who naturally becomes an evangelist: -- **Hero Section** - Hook with "guiding light," address AI fear -- **Methodology Explanation** - Show structure, prove with Dog Week -- **Benefits Section** - Make designer indispensable message -- **Course Modules** - Present Modules 01-02 complete, more coming -- **Installation Guide** - Clear 5-step process with hand-holding -- **Social Proof** - Early testimonials and case study -- **Call to Action** - Multiple paths (GitHub, course, community) - -### **Future Phases: Additional Content** -- **Phase 2**: Complete course modules 03-17 -- **Phase 3**: Build evangelist case studies library -- **Phase 4**: Create interactive demos and examples -- **Phase 5**: Expand BMad Method integration documentation - ---- - -## Related Documents - -- **[00-trigger-map.md](00-trigger-map.md)** - Visual overview and navigation -- **[01-Business-Goals.md](01-Business-Goals.md)** - Objectives and metrics -- **[02-Stina-the-Strategist.md](02-Stina-the-Strategist.md)** - Primary persona -- **[03-Lars-the-Leader.md](03-Lars-the-Leader.md)** - Secondary persona -- **[04-Felix-the-Full-Stack.md](04-Felix-the-Full-Stack.md)** - Tertiary persona -- **[06-Design-Implications.md](06-Design-Implications.md)** - Detailed design requirements - ---- - -_Back to [Trigger Map](00-trigger-map.md)_ - diff --git a/docs/examples/WDS-Presentation/docs/2-trigger-map/06-Feature-Impact.md b/docs/examples/WDS-Presentation/docs/2-trigger-map/06-Feature-Impact.md deleted file mode 100644 index 75bd8ed83..000000000 --- a/docs/examples/WDS-Presentation/docs/2-trigger-map/06-Feature-Impact.md +++ /dev/null @@ -1,275 +0,0 @@ -# Feature Impact Analysis: WDS Presentation Page - -**Created:** December 27, 2025 -**Updated:** December 27, 2025 (Added Testimonials feature) -**Analyst:** Saga with Mårten Angner -**Purpose:** Design Brief - Strategic guidance for UX Design and Development prioritization - ---- - -## Scoring Legend - -**Primary Persona (⭐ Stina):** High = 5 pts | Medium = 3 pts | Low = 1 pt -**Other Personas (Lars, Felix):** High = 3 pts | Medium = 1 pt | Low = 0 pts - -**Max Possible Score:** 11 (with 3 personas) -**Must Have Threshold:** 8+ or Primary High (5) - ---- - -## Prioritized Features - -| Rank | Feature | Stina ⭐ | Lars | Felix | **Score** | **Decision** | -| ---- | ------- | -------- | ---- | ----- | --------- | ------------ | -| 1 | BMad Method Integration (WDS → BMM) | HIGH (5) | HIGH (3) | HIGH (3) | **11** | **MUST HAVE** | -| 1 | Testimonials & Social Proof | HIGH (5) | HIGH (3) | HIGH (3) | **11** | **MUST HAVE** | -| 3 | End-to-End Workflow Through Agents | HIGH (5) | HIGH (3) | MED (1) | **9** | **MUST HAVE** | -| 3 | Conceptual Specifications | HIGH (5) | MED (1) | HIGH (3) | **9** | **MUST HAVE** | -| 5 | Example Projects & Case Studies | HIGH (5) | HIGH (3) | LOW (0) | **8** | **MUST HAVE** | -| 6 | Course Modules (Video + Lessons) | HIGH (5) | MED (1) | LOW (0) | **6** | **MUST HAVE** | -| 7 | Installation & Setup Documentation | HIGH (5) | LOW (0) | LOW (0) | **5** | **MUST HAVE** | -| 8 | Design System Module | MED (3) | MED (1) | MED (1) | **5** | **CONSIDER** | -| 9 | GitHub Repository & Documentation | MED (3) | LOW (0) | MED (1) | **4** | **CONSIDER** | -| 10 | Community & Discord Support | MED (3) | LOW (0) | LOW (0) | **3** | **CONSIDER** | - ---- - -## Feature Details & Rationale - -### Must Have MVP (Primary High OR Top Tier Score) - -#### 1. BMad Method Integration (Score: 11) 🏆 -**Seamless handoff from design to development phases** - -- **Stina Impact (HIGH):** Enables "make real impact" - her designs actually get built properly -- **Lars Impact (HIGH):** Smooth workflow = team productivity + quality delivery -- **Felix Impact (HIGH):** Structured handoff = clear specs = enlightened day - -**Why This Matters:** All three personas benefit. This is the bridge that makes WDS complete - designers create, developers implement smoothly. Without this, value proposition breaks down. - ---- - -#### 1. Testimonials & Social Proof (Score: 11) 🏆 -**Real testimonials from designers, entrepreneurs, AND developers** - -- **Stina Impact (HIGH):** Peer validation from other designers who succeeded - "People like me did this and it worked" -- **Lars Impact (HIGH):** Social proof from other entrepreneurs validates investment - "Business owners saw ROI" -- **Felix Impact (HIGH):** Developer testimonials about better specs - "WDS designers make my life easier" - -**Why This Matters:** UNIVERSAL TRUST BUILDER. This is the only feature that scores HIGH across all three personas. Everyone needs peer validation from their own perspective: -- **Stina hears from designers:** "I became indispensable" -- **Lars hears from entrepreneurs:** "Quality went up, my team succeeded" -- **Felix hears from developers:** "Finally, specs that make sense" - -Three-dimensional social proof creates powerful conversion momentum. This isn't just marketing - it's strategic trust-building that serves the entire ecosystem. - ---- - -#### 3. End-to-End Workflow Through Agents (Score: 9) -**Complete methodology told through four expert AI agents who guide each phase** - -**The Story:** -- **Saga the Analyst** guides Product Brief & Trigger Mapping (strategy & discovery) -- **Freya the Designer** guides UX Design & Design System (creative execution) -- **Idunn the PM** guides Platform Requirements & PRD (technical planning) -- **Mimir the Orchestrator** coordinates your entire journey (wise guide) - -**Impact Assessment:** - -- **Stina Impact (HIGH):** Gets structured journey WITH personality - agents make abstract phases tangible and provide hand-holding she needs. "I have guides, not just documentation." -- **Lars Impact (HIGH):** Sees complete business process with clear owners - agents make methodology approachable. "I understand who does what and when." -- **Felix Impact (MEDIUM):** Understands the structure that creates good specs, but focuses on output quality over process. - -**Why This Matters:** This is strategic differentiation with emotional resonance. Instead of "6 phases of documentation," it's "4 expert guides who walk you through the complete journey." Agents transform abstract methodology into relatable story. - -**Merger Benefit:** Previously scored as two separate features (Workflow: 9, Agents: 5). By merging, we maintain the strategic score while creating more engaging, memorable presentation. Characters make structure human. - ---- - -#### 3. Conceptual Specifications (Score: 9) -**Specifications that capture the concept and reasoning: WHAT + WHY + WHAT NOT TO DO** - -- **Stina Impact (HIGH):** Makes her indispensable - her thinking is preserved -- **Lars Impact (MEDIUM):** Better quality, less confusion in execution -- **Felix Impact (HIGH):** Directly addresses his "clear specs" want - major pain point solved - -**Why This Matters:** This is the secret sauce. Felix's happiness depends on this. Stina becomes irreplaceable because AI can't replicate her conceptual thinking. Lars gets quality. - ---- - -#### 5. Example Projects & Case Studies (Score: 8) -**Real-world examples showing WDS in action** - -- **Stina Impact (HIGH):** Addresses "wasting time" fear - proof it works before investing effort -- **Lars Impact (HIGH):** Validates methodology before committing his team -- **Felix Impact (LOW):** Nice to see, but doesn't directly help him - -**Why This Matters:** Trust builder. Stina and Lars both need proof before adopting. Dog Week case study (26 weeks → 5 weeks) is compelling evidence. Felix doesn't need proof of concept - he needs proof of execution quality (which testimonials provide). - ---- - -#### 6. Course Modules (Score: 6) -**Educational content teaching WDS step-by-step with video + lessons** - -- **Stina Impact (HIGH):** Addresses "wasting time" fear + builds AI confidence through hand-holding -- **Lars Impact (MEDIUM):** Helps him understand what his designer will use -- **Felix Impact (LOW):** Not his primary concern - -**Why This Matters:** Critical for Stina's transformation. Without structured learning, she won't gain confidence. The hand-holding approach is essential. - ---- - -#### 7. Installation & Setup Documentation (Score: 5) -**Clear step-by-step guide to getting WDS running** - -- **Stina Impact (HIGH):** Addresses "wasting time" fear - removes barrier to entry -- **Lars Impact (LOW):** His designer's responsibility -- **Felix Impact (LOW):** Designer's setup process - -**Why This Matters:** All Primary High features are Must Have. If Stina can't get started easily, she'll abandon WDS. Hand-holding is critical for adoption. - ---- - -### Consider for MVP - -#### 8. Design System Module (Score: 5) -**Structured approach to creating reusable design systems** - -- **Stina Impact (MEDIUM):** Professional capability, but not core transformation -- **Lars Impact (MEDIUM):** Nice for consistency across products -- **Felix Impact (MEDIUM):** Helps with implementation consistency - -**Why Consider:** Valuable for mature teams with multiple products, but not critical for Stina's initial transformation or Lars's immediate needs. Can be added post-MVP. - ---- - -#### 9. GitHub Repository & Documentation (Score: 4) -**Open-source access to all WDS resources** - -- **Stina Impact (MEDIUM):** Access is important, but content matters more -- **Lars Impact (LOW):** Not his world -- **Felix Impact (MEDIUM):** Familiar format, appreciates documentation - -**Why Consider:** GitHub IS where WDS lives, so this exists by default. But prominence on the presentation page is secondary to explaining value and methodology. - ---- - -#### 10. Community & Discord Support (Score: 3) -**Active community for questions, sharing, and collaboration** - -- **Stina Impact (MEDIUM):** Support reduces risk, but not core transformation -- **Lars Impact (LOW):** His designer's resource -- **Felix Impact (LOW):** Designer community, not his focus - -**Why Consider:** Valuable for retention and ongoing support, but not critical for initial adoption decision. Mention it, but don't feature prominently in MVP. - ---- - -## Strategic Implications for UX Design - -### **Hero Section Priority:** -Focus on **Testimonials** (universal trust), **BMad Integration** (universal benefit), and **Workflow Through Agents** (engaging differentiation) - the features that serve all personas with both substance and story. - -### **Early Content Focus:** -Lead with **Testimonials** (three-dimensional trust from all perspectives) immediately after hero. Then **Example Projects** (detailed proof) and **Workflow Through Agents** (engaging differentiation). Testimonials must include designer, entrepreneur, AND developer voices. - -### **Agent Presentation Strategy:** -Don't present agents as separate "tools" - weave them into the workflow story. Each phase introduction features the agent guide: "Saga helps you discover your product strategy" rather than "Phase 1: Product Brief (also, we have an agent called Saga)." This makes the methodology human and memorable. - -### **Course Module Prominence:** -Make **Course Modules** and **Installation** highly visible and accessible - remove all friction from Stina's learning path. - -### **Secondary Features:** -Mention **Design System**, **GitHub**, and **Community** but don't feature them prominently in MVP content. - ---- - -## Development Phase Implications - -### **Phase 1 MVP:** -- BMad Method Integration messaging -- Workflow told through agents (Saga, Freya, Idunn, Mimir as guides) -- Conceptual specifications showcase -- Dog Week case study (prominent) -- Testimonials from early adopters (designer + entrepreneur + developer perspectives) -- Course Modules 01-02 (complete) -- Installation guide (detailed) - -### **Phase 2 Enhancements:** -- Design System module details -- GitHub repository prominence -- Community/Discord integration -- Additional case studies -- More course modules - ---- - -## Key Insights - -### **The Flywheel in Features:** - -1. **Proof It Works** (Example Projects + Testimonials) → Stina and Lars trust WDS -2. **Easy to Start** (Installation + Course) → Stina begins learning -3. **Guided Journey** (Workflow Through Agents) → Stina gains confidence with expert guides -4. **Better Specs** (Conceptual) → Felix's life improves -5. **Smooth Handoff** (BMad Integration) → Lars sees quality + productivity -6. **Success Creates Evangelists** → More testimonials → 50 hardcore believers emerge - -### **Testimonials = Universal Trust Builder:** - -Testimonials (Score: 11) is the ONLY feature that scores HIGH across all three personas. This makes it strategically critical - it serves everyone simultaneously: -- Designer testimonials convince Stina -- Entrepreneur testimonials convince Lars -- Developer testimonials convince Felix (and validate Stina's value to Lars) - -**Design Implication:** Testimonials section must include all three perspectives. Felix's voice is particularly powerful - when he says "WDS designers make my life easier," it proves designer value to Lars AND builds Stina's confidence. - -### **Felix is the Secret Weapon:** - -Developer testimonials serve double duty: They directly impact Felix (peer validation) AND prove Stina's value to Lars (business validation). When Felix says "Finally, specs that make sense," Lars hears "Quality investment validated." - -**Design Implication:** Developer testimonials aren't just nice-to-have - they're strategic proof that the entire ecosystem works. - -### **All Primary High Features Matter:** - -Every feature where Stina scored HIGH (5) is Must Have MVP. Why? Because Stina IS the engine. The 50 evangelists come from successful Stinas. Without her complete transformation, the flywheel doesn't start. - -### **Strategic Feature Merging:** - -By merging "Complete Workflow" with "Agents," we: -- ✅ Reduced Must Have features from 8 to 7 (simpler message) -- ✅ Maintained strategic score (9) while improving presentation -- ✅ Created memorable story (characters > abstract phases) -- ✅ Made methodology more approachable for Lars (sees "who does what") -- ✅ Strengthened hand-holding for Stina (guides, not just docs) - -**Presentation Impact:** Instead of explaining methodology THEN introducing agents as separate tools, we tell ONE story: "Four expert agents guide you through the complete journey." This is cleaner, more engaging, and more memorable. - ---- - -## Questions for Designer (Phase 4) - -When designing the page, consider: - -1. **Testimonials prominence:** Should they appear in hero/early, or dedicated section? (Highest-scoring feature tied with BMad) -2. **Three-perspective testimonials:** How to structure designer/entrepreneur/developer voices? Separate sections or integrated? -3. **Developer testimonial strategy:** Felix's voice proves Stina's value to Lars - how to highlight this? -4. **How do we make BMad Integration tangible?** (Abstract but highest-scoring) -5. **Should Dog Week case study have its own section or integrate throughout?** -6. **Agent-driven workflow presentation:** Should each workflow phase be introduced by the agent? (e.g., "Saga guides Product Brief" rather than "Phase 1: Product Brief") -7. **Agent personality balance:** How much character/voice vs professional presentation? -8. **Installation: Prominent CTA or embedded in course section?** -9. **How do we show "end-to-end workflow" visually?** (Diagram with agent avatars? Journey illustration?) - ---- - -**Navigation:** - -← [Back to Key Insights](05-Key-Insights.md) | [Back to Trigger Map Hub](00-trigger-map.md) - ---- - -_Generated by Whiteport Design Studio_ -_Strategic input for Phase 4: UX Design and Phase 6: PRD/Development_ - - diff --git a/docs/examples/WDS-Presentation/docs/2-trigger-map/resources/felix-the-full-stack.png b/docs/examples/WDS-Presentation/docs/2-trigger-map/resources/felix-the-full-stack.png deleted file mode 100644 index 7fa050bf9..000000000 Binary files a/docs/examples/WDS-Presentation/docs/2-trigger-map/resources/felix-the-full-stack.png and /dev/null differ diff --git a/docs/examples/WDS-Presentation/docs/2-trigger-map/resources/lars-the-leader.png b/docs/examples/WDS-Presentation/docs/2-trigger-map/resources/lars-the-leader.png deleted file mode 100644 index f750cd998..000000000 Binary files a/docs/examples/WDS-Presentation/docs/2-trigger-map/resources/lars-the-leader.png and /dev/null differ diff --git a/docs/examples/WDS-Presentation/docs/2-trigger-map/resources/stina-the-desginer.png b/docs/examples/WDS-Presentation/docs/2-trigger-map/resources/stina-the-desginer.png deleted file mode 100644 index 827d86e54..000000000 Binary files a/docs/examples/WDS-Presentation/docs/2-trigger-map/resources/stina-the-desginer.png and /dev/null differ diff --git a/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md b/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md deleted file mode 100644 index 453f9ecea..000000000 --- a/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md +++ /dev/null @@ -1,659 +0,0 @@ -### 1.1 WDS Presentation - -![WDS Presentation Page Desktop](sketches/1-1-wds-presentation-desktop-concept.jpg) - -# 1.1 WDS Presentation - -The WDS Presentation page serves as the primary entry point for designers discovering WDS for the first time. This page addresses the universal pain point of feeling threatened and overwhelmed by AI while promising the emotional transformation to empowered strategic leadership. The page must convert curious visitors into engaged learners by demonstrating immediate value and removing adoption barriers. - -**User Situation**: Stina the Strategist, a designer feeling overwhelmed by AI disruption, job hunting, AI-curious but lacking confidence. She's skeptical but hopeful - doesn't want to waste time on another tool. Needs quick value assessment: "Is this worth my time?" - -**Page Purpose**: Convert visitors into learners/users by addressing core emotional drivers from the trigger map - eliminating overwhelm while building confidence that designers can thrive (not just survive) in the AI era through structured methodology and strategic leadership. - ---- - -## Reference Materials - -**Strategic Foundation:** -- [Product Brief](../../1-project-brief/01-product-brief.md) -- [Content Strategy](../../1-project-brief/02-content-strategy.md) - Messaging guidelines and tone -- [Trigger Map](../../2-trigger-map/00-trigger-map.md) -- [Stina Persona](../../2-trigger-map/02-Stina-the-Strategist.md) -- [Feature Impact](../../2-trigger-map/06-Feature-Impact.md) - -**Design Principles:** -1. **Build confidence, don't overwhelm** - Progressive disclosure -2. **Show tangible value fast** - "You'll create THIS" -3. **Make AI friendly** - Co-pilot language, not replacement -4. **Provide structure** - Clear path forward -5. **Prove credibility** - BMad foundation, real results - -**Success Metrics:** -- Engagement: 3+ min time on page, 40%+ scroll to capabilities, 20%+ click GitHub/course -- Conversion: 10%+ click CTA, 5%+ watch Module 01, 2%+ clone repository - ---- - -## Page Sections - -### Hero Object -**Purpose**: Capture attention and communicate core value in 5 seconds - -**Strategic Rationale:** See [Content Strategy - Hero Section](../../1-project-brief/02-content-strategy.md#hero-section) for messaging decisions and psychology. - -#### Main Headline -**OBJECT ID**: `wds-hero-headline` -- **Component**: H1 heading -- **Content:** - - **EN:** "Whiteport Design Studio (WDS)" -- **Rationale**: Clear, descriptive, directly communicates what the page offers. - -#### Positioning Statement / Link -**OBJECT ID**: `wds-hero-positioning` -- **Component**: Body text / Link (styled as emphasis text) -- **Content:** - - **EN:** "A Free and open source design workflow for designers who wants to build what matters!." -- **Rationale**: - - Clearly differentiates WDS from quick prototyping tools - - Addresses the "serious work" positioning - - Sets expectation that this is for production-ready work - - Appeals to designers ready to move beyond experimentation - -#### Hero Body Copy -**OBJECT ID**: `wds-hero-body` -- **Component**: Body text paragraph -- **Content (What & How - Shorter):** - - **EN:** "WDS gives you expert AI agents who guide you through strategy and design process to make impactful deliveries for Development with AI or a physical team. WDS places the design in the center of the process and your design thinking becomes the prompts that is building the product!" -- **Alternative (Even Shorter):** - - **EN:** "Expert AI agents guide you through strategy and design. Your creative work becomes conceptual specifications that preserve your thinking and guide product development." -- **Rationale**: - - **What**: Expert AI agents, conceptual specifications, strategic deliverables - - **How**: Agents guide you → you create specs → specs guide development - - Shorter than current version, more focused on core value - - Connects to the agents and specifications themes throughout the page - -#### Primary CTA Button -**OBJECT ID**: `wds-hero-cta` -- **Component**: Body paragraph (removed from hero section) -- **Content:** - - **EN:** [Not included in hero area of final page layout] -- **Note**: CTA moved to bottom of page as standalone section - ---- - -### Benefits Section -**Purpose**: Quickly grasp the three key differentiators - -**Strategic Rationale:** This section appears right after the hero to immediately answer "Why WDS?" before diving into methodology. Should reinforce the positioning from hero (not prototyping, but production-ready workflow). - -#### Content Block: Three Key Benefits - -**Headline Field:** -- **Content (EN):** "Why WDS? Because Designers Matter" - -**Teaser Field:** -- **Content (EN):** "WDS brings strategic design thinking practices together with AI agent technology in a free and open source framework." - -**Content Field:** -```html -
- -
-

💺 Designers Are Needed More Than Ever

-

In the world of AI, strategic design thinking becomes even more critical. Designers guide decisions and set the course in AI-driven product development. Your expertise in having dialogues with users and stakeholders is invaluable—especially when you let AI amplify your impact.

-
- -
-

🌟 Brilliant Design Is Not a Coincidence

-

Great design happens when strategy, user needs, and business goals align. It's a thoughtful, collaborative process that brings teams together around shared vision. WDS agents are trained to amplify the skills and experience of the designer—not drown the process.

-
- -
-

🚀 The Design Specification Is the New Code

-

AI is awesome at generating code but struggles to change the code it made. This shifts how we work. Your design documentation becomes the source of truth—replacing months of senseless prompting with strategic specifications that guide development.

-
- -
- -

-WDS is built on 25+ years of CX/UX/UI design experience by Mårten Angner. Part of the BMad Method for AI agent-driven development. -

- - - -``` - -``` - -**Alternative Benefits (More aligned with "production-ready" positioning):** - -**Option 1: Production-Focused Benefits** -```html -
-

🎯 Strategy Before Design

-

Start with alignment and project briefs. Build on solid strategic foundation. No jumping straight to pixels. WDS ensures you understand the problem before solving it.

-
- -
-

📋 Specifications That Preserve Intent

-

Your design thinking becomes conceptual specifications that guide development. AI generates code from your specs—clean, consistent, production-ready. Your design work is the source of truth.

-
- -
-

🚀 From Idea to Production

-

Complete workflow from stakeholder alignment to handoff. Not just prototyping—actual product development. WDS takes over when you're done experimenting and ready to build what matters.

-
-``` - -**Option 2: Workflow-Focused Benefits** -```html -
-

🎯 Complete Workflow, Not Just Tools

-

WDS covers the entire journey: alignment, strategy, design, and handoff. Not another prototyping tool—a complete methodology for building real products.

-
- -
-

📋 Strategic Specifications

-

Your design becomes conceptual specifications that preserve your thinking. These specs guide development and become the source of truth for your product.

-
- -
-

🤝 AI Agents as Co-Pilots

-

Expert AI agents (Saga, Freya, Idunn, Mimir) guide you through each phase. They amplify your expertise, not replace your thinking.

-
-``` - -**Rationale**: Three benefits that address universal truths designers can agree on, focusing on how designers wish to feel rather than describing features or solutions. - ---- - -### BMad Integration Section -**Purpose**: Establish credibility and position WDS as the designer's strategic module within proven methodology - -**Strategic Rationale:** See [Content Strategy - BMad Integration](../../1-project-brief/02-content-strategy.md#bmad-integration) for messaging decisions and psychology. - -#### Content Block: BMad Integration - -**Headline Field:** -- **Content (EN):** "A Method That Unites. A Module for Design & Strategy." - -**Teaser Field:** -- **Content (EN):** "WDS is an AI Agent framework built on the shoulders of giants. It creates a unified language for entrepreneurs, developers, and designers to collaborate in the AI era. Built from 25 years of UX experience, WDS assists you in strategic design leadership for any digital product from idea to polished product." - -**Content Field:** -- **Content (EN):** - ```html -

Your Design Replaces Prompting

- -

The framework is your thinking partner through the process. It's flexible to suit your needs and is based on solid design practices refined over decades but adapted to the world of AI. You map user psychology and business goals. You envision the user interaction and create conceptual specifications that guide development. You transform vision into strategic design thinking. Entrepreneurs align around your insights. Developers build from your clarity. AI amplifies your expertise. With WDS, you're not just part of the process - you're the strategic center that holds it all together.

- -

Powered by BMad Method

- -

WDS is a module for designers within the BMad Method. Instead of mindless prompting, the BMad method is most effective when run in an IDE (Integrated Development Environment) like Cursor, VS Code, Windsurf, or similar tools.

- -

One Chat Leads to the Next

- -

The Method is built to preserve AI capabilities and divide the creative conversations into dialogs that result in high-level documents. These documents then become the perfect prompts for the next step of the process. Strategy documents become the ideal context for AI to make sound decisions, and dividing the dialog into shorter sessions preserves the AI's memory - the context window.

- -

Built for Collaboration

- -

Everything is saved and published for collaboration using GitHub - the same technology developers use for writing code. By moving the design process into the development environment and delivering our design in the perfect form for development, we as designers can deliver far more value than ever before. Regardless if we are stepping up and making the development in our role as designers or if we hand over and collaborate with a development team.

- -

WDS and BMad Method is not just another tool for quick prototyping. WDS takes over when you are done fiddling and ready to build the final product!

- ``` - -**Rationale**: Three-field structure matches WordPress block editor - Headline provides clear positioning, Teaser introduces core concept and credibility, Content provides detailed explanation with subheadlines - ---- - -### Workflow Through Agents Section -**Purpose**: Make the methodology human and memorable by introducing the expert AI agents who guide each phase - -**Strategic Rationale:** See [Content Strategy - Workflow Through Agents](../../1-project-brief/02-content-strategy.md#workflow-through-agents) for messaging decisions and psychology. - -#### Content Block: Meet the AI Agents - -**Headline Field:** -- **Content (EN):** "Meet the AI Agents" - -**Teaser Field:** -- **Content (EN):** "WDS gives you a team of expert AI agents who become your thinking partner through each phase of the design process. Think of them as your strategic co-pilots, each bringing decades of expertise to their specialty. You stay creative and strategic. Named after the Norse Gods, as you summon them, they handle the structure and best practices with superhuman precision. Or adapt to your specific way of working!" - -**Content Field:** -```html - - -

Saga the Analyst — Your Strategic Foundation

- -

Saga guides you through discovery and strategy. Together, you'll create the Product Brief that defines your vision, business goals, and success criteria. Then Saga helps you build the Trigger Map - connecting what your business needs to what users actually want. Saga asks the right questions so you think deeply about psychology and motivation, not just features.
-Learn more about Saga →

- -

Freya the UX Designer — Your Design Partner

- -

Freya transforms your strategy into tangible user experiences. She guides you through scenario mapping, page specifications, and conceptual design decisions. Freya helps you articulate not just what the interface looks like, but why you designed it that way. Your design thinking becomes crystal-clear specifications that preserve your strategic intent.
-Learn more about Freya

- -

Idunn the Technical Architect — Your Implementation Bridge

- -

Idunn translates your design vision into technical reality. She guides you through platform architecture, data structures, and system decisions. Idunn ensures your design specifications become actionable PRDs that developers (human or AI) can execute flawlessly. No more lost intent between design and development.
-Learn more about Idunn →

- -

Mimir the Orchestrator — Your Wise Guide

- -

Mimir sees the big picture. He coordinates your entire journey, ensuring each phase builds on the previous one. When you need perspective on where you are and what comes next, Mimir provides the wisdom. He's your safety net - making sure nothing falls through the cracks as you move from idea to polished product.
-Learn more about Mimir →

- -

Just call their names

- -

You summon them by just calling their names in the chat and they arrive with their unique capabilities, ready to guide you through their phase of the journey. They hand over tasks so you can start with fresh dialogs and context window as often as you need.

-``` - -**Rationale:** Personal headline invites connection, positions agents as expert partners (not tools), emphasizes collaboration and guidance, connects each agent to deliverables, addresses Stina's need for hand-holding and Lars's need to understand "who does what" - ---- - -### Conceptual Specifications Section -**Purpose**: Explain the core differentiator - specifications that preserve design thinking and prevent spaghetti code - -**Strategic Rationale:** See [Content Strategy - Conceptual Specifications](../../1-project-brief/02-content-strategy.md#conceptual-specifications) for messaging decisions and psychology. - -#### Content Block: Conceptual Specifications - -**Headline Field:** -- **Content (EN):** "Conceptual Specifications: For Designers That Mean Business!" - -**Teaser Field:** -- **Content (EN):** "We designers love to sketch, fiddle with, and iterate and refine our designs as our thinking becomes more clear. However, at a certain point, you will be ready to build the final product. this is where the main deliverable in WDS, the Conceptual Specifications comes into the picture. In the world of AI, the specifications matters because AI can only generate consistent code your design is clearly defined!" - -**Content Field:** -```html -

Experimentation is Essential

- -

We love experimentation! Napkin sketches, whiteboard drawings, Figma prototypes, code snippets, inspiration boards, storyboards, pixel art, vibe-coded demos — all of it. This is where creativity happens. This is where ideas mature and refine. The playful creative process reaches a point when experimentation leads to something great, something we want to build and bring to the world.

- -

Your Designs Are the Perfect Prompt

- -

When you're ready to move from exploration to production, your creative output has the potential of becoming the blueprint for the whole product - if you give it an effective structure. That's where conceptual specifications come in. When we gather all your experiments in one place, defining them in the right order as user scenarios with step-by-step interaction and clear explanations - not just what you designed, but why you designed it that specific way - you give AI all it needs to make the final product reality.

- -

The Realization: With AI, the Specification Becomes the New Code

- -

In the world of AI development, the specifications become the product. The code is just output - generated and regenerated from your design work. Your specifications are the source of truth that gets maintained and refined over time. This is where your strategic thinking lives.

- -

Design Once, Iterate Forever, Generate When You Need

- -

The specifications interact closely with your design system to create a coherent experience that grows without limitations. Want to change something? Update the specifications. AI regenerates the code - clean, consistent, and aligned with your design intent. No spaghetti code. No lost reasoning. No painful refactoring. Your design work IS the product.
- -Learn more about Conceptual Specifications →

-``` - -**Rationale:** Addresses the pain point of vibe coding tools and spaghetti code, positions conceptual specifications as the solution for production-ready products, emphasizes coherent growth and maintainability - ---- - -### Learn WDS Section -**Purpose**: Provide structured learning path with video tutorials and lesson links - -**Strategic Rationale:** Addresses Stina's need for hand-holding and structured learning (Course Modules Score: 6), removes barriers to adoption - -#### Content Block: Learn WDS - -**Headline Field:** -- **Content (EN):** "Learn WDS" - -**Teaser Field:** -- **Content (EN):** "Master Whiteport Design Studio through our comprehensive video course. Each module includes an introduction video explainer and links to the WDS repo where you find our step-by-step lessons, practical examples, and direct links to detailed documentation. The course is currently under production, new sections will be added over time. " - -**Content Field:** -```html - - - - - - - -
- -Module 00: Getting Started with WDS - - -

Module 00: Getting Started with WDS

-

Learn the fundamentals of WDS and get your environment set up. This module covers everything you need to know to start your journey with Whiteport Design Studio - from understanding the core concepts to installing the framework and activating your first AI agent.

- -
- - - - - - - - -
- -Module 01: Why WDS Matters - - -

Module 01: Why WDS Matters

-

Discover why traditional design-to-development handoffs fail and how WDS transforms the designer's role from task-doer to strategic leader. Learn about the AI revolution in product development and why conceptual specifications are the key to staying relevant.

- -
- - - - - - - - -
- -Module 02: Installation & Setup - - -

Module 02: Installation & Setup

-

Get WDS installed and running on your machine. This hands-on module walks you through GitHub setup, IDE configuration, cloning the repository, and activating your first AI agent. By the end, you'll have a fully functional WDS environment ready for your first project.

- -
- - - - - - - - -
- -Module 03: Alignment & Signoff - - -

Module 03: Alignment & Signoff

-

Get stakeholders aligned and secure commitment before starting the project. Learn the discovery discipline, create compelling alignment documents, and generate appropriate signoff documents (external contracts or internal signoff). Master the art of understanding before solving.

- -
- - - - - - - - -
- -Module 04: Product Brief - - -

Module 04: Product Brief

-

Create your strategic foundation through AI-guided conversation. Learn how the Product Brief becomes the most powerful prompt you'll ever create - stopping AI hallucinations before they start and making your idea better through 30 structured questions. Everything happens in one environment with zero copy-paste chaos.

- -
- - - - - - - - -
- -Module 05: Trigger Mapping - - -

Module 05: Trigger Mapping

-

Connect business goals to user psychology through 5 structured workshops. Learn the proven Effect Management methodology (20+ years heritage), map both positive and negative psychological drivers, and create a visual one-page strategy map. Includes systematic feature scoring for data-driven prioritization.

- -
-``` - -**Rationale:** Six-module structure with video thumbnails (YouTube auto-generates), descriptions, and links to actual lessons. Uses clickable thumbnails linking to YouTube (more reliable than iframes). Provides clear learning path for Stina's hand-holding needs. - ---- - -### WDS Webinars Section -**Purpose**: Provide access to recorded webinars and live sessions - -**Strategic Rationale:** Complements the structured course modules with live sessions and deeper dives into specific topics. Offers additional learning opportunities for those who prefer webinar format. - -#### Content Block: WDS Webinars - -**Headline Field:** -- **Content (EN):** "WDS Webinars" - -**Teaser Field:** -- **Content (EN):** "Join our live webinars and watch recorded sessions for deeper insights into WDS methodology, real-world case studies, and Q&A sessions with the WDS team. New webinars are added regularly." - -**Content Field:** -```html - - - - - - - -
- -WDS Webinar - - -

WDS Webinar

-

Watch our recorded webinars to dive deeper into WDS methodology, see real-world applications, and learn from live Q&A sessions.

-
-``` - -**Rationale:** Webinar structure with video thumbnails (YouTube auto-generates), descriptions, and links to recorded sessions. Uses clickable thumbnails linking to YouTube. Additional webinars can be easily added as new table rows. - ---- - -### WDS Capabilities Object (Right Column) -**Purpose**: Show designers what they can accomplish with WDS through actionable phases - -**Strategic Rationale:** See [Content Strategy - Capabilities Section](../../1-project-brief/02-content-strategy.md#capabilities-section-right-column) for messaging decisions and psychology. - -#### Section Headline -**OBJECT ID**: `wds-capabilities-headline` -- **Component**: H2 heading -- **Content:** - - **EN:** "What You Will Be Able to Accomplish with WDS" -- **Rationale**: Direct, action-oriented, focuses on designer capability - -#### Introduction Text -**OBJECT ID**: `wds-capabilities-intro` -- **Component**: Body paragraph -- **Content:** - - **EN:** "With the help of the WDS agents you will be able to deliver both strategy and design and utilize your design skills to get a seat at the table." -- **Rationale**: Empowers designers with strategic positioning, emphasizes designs as powerful prompts for development - -#### Phase 1: Win Client Buy-In -**OBJECT ID**: `wds-capability-phase-1` -- **Component**: Capability card -- **Icon**: 🎯 (target/presentation) -- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized presentation board. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle." -- **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.
More about the Project Pitch
More about the Service Agreement" - -#### Phase 2: Project Clarity & Direction -**OBJECT ID**: `wds-capability-phase-2` -- **Component**: Capability card -- **Icon**: 📋 (clipboard/document) -- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized compass/north star symbol. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle." -- **Content:** - - **Title (EN):** "Project Clarity & Direction" - - **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.
More about the Product Brief" - -#### Phase 3: Map Business Goals & User Needs -**OBJECT ID**: `wds-capability-phase-3` -- **Component**: Capability card -- **Icon**: 🗺️ (map/compass) -- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized network of connected nodes or a bridge connecting two points, representing mapping and connection. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle." -- **Content:** - - **Title (EN):** "Map Business Goals & User Needs" - - **Description (EN):** "Connect what the business wants to what users actually need. Identify the emotional triggers and pain points that drive behavior and design with psychological insight.
More about the Trigger Map & Personas" - -#### Phase 4: Architect the Platform -**OBJECT ID**: `wds-capability-phase-4` -- **Component**: Capability card -- **Icon**: 🏗️ (building/architecture) -- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized foundation or building blocks representing technical foundation. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle." -- **Content:** - - **Title (EN):** "Nail Down the Platform Requirements" - - **Description (EN):** "Define the technical foundation, data structure, and system architecture. Make smart decisions about what to build and how it all fits together seamlessly.
More about the Platform PRD & Architecture" - -#### Phase 5: Design the Experience -**OBJECT ID**: `wds-capability-phase-5` -- **Component**: Capability card -- **Icon**: 🎨 (palette/design) -- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized design pen tool or cursor on a canvas/frame, representing UX design. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle." -- **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 and preserve your intent.
More about Page Specifications & Prototypes" - -#### Phase 6: Create Your Design System -**OBJECT ID**: `wds-capability-phase-6` -- **Component**: Capability card -- **Icon**: 🧩 (puzzle pieces/system) -- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows stylized modular components or a grid pattern representing a design system. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle." -- **Content:** - - **Title (EN):** "Create 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.
More about the Component Library & Design Tokens" - -#### Phase 7: Hand Off to Development -**OBJECT ID**: `wds-capability-phase-7` -- **Component**: Capability card -- **Icon**: 📦 (package/delivery) -- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized package or box with an arrow indicating transfer/delivery. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle." -- **Content:** - - **Title (EN):** "Hand Off to Development" - - **Description (EN):** "Package organized PRD documents with epics and stories. No more guesswork or lost design intent during implementation with AI or human developers.
More about the Design Delivery PRD" - ---- - -### Testimonials Section -**Purpose**: Build trust through social proof - -*[To be completed]* - ---- - -### New Capabilities Section -**Purpose**: Invite ongoing community participation and feedback - -**Strategic Rationale:** See [Content Strategy - Community Engagement](../../1-project-brief/02-content-strategy.md#community-engagement) for messaging decisions and psychology. - -#### Section Headline -**OBJECT ID**: `wds-new-capabilities-headline` -- **Component**: H2 heading -- **Content:** - - **EN:** "New capabilities" -- **Rationale**: Short, direct, implies continuous improvement - -#### Section Body -**OBJECT ID**: `wds-new-capabilities-body` -- **Component**: Body paragraph -- **Content:** - - **EN:** "We are adding new sections and improvements constantly. Share your insights and feedback and take part in building something great for the future." -- **Rationale**: Inclusive language ("we," "your"), emphasizes community participation, forward-looking - -#### Feedback CTA Button -**OBJECT ID**: `wds-feedback-cta` -- **Component**: Button Primary -- **Content:** - - **EN:** "SHARE YOUR IDEAS & FEEDBACK" -- **Link**: [To be determined - likely GitHub Discussions or feedback form] -- **Rationale**: All caps for emphasis, action-oriented, makes users feel heard - ---- - -### CTA Section -**Purpose**: Remove barriers to action - -**Strategic Rationale:** Makes users realize they already have the skills needed, builds confidence, and provides clear next steps. - -#### Content Block: Get Started with WDS - -**Headline Field:** -- **Content (EN):** "Get Started with WDS" - -**Content Field:** -```html -
- -
-

✓ Build on Your Existing Design Skills

-

You don't need to learn everything from scratch. Your UX/UI skills and design thinking are the foundation—WDS provides the structure and methodology to amplify them.

-
- -
-

✓ Follow a Complete End-to-End Process

-

From stakeholder alignment to final handoff—one complete workflow. WDS guides you through each phase: strategy, design, and delivery. No gaps, no guesswork.

-
- -
-

✓ Your Design Becomes the Blueprint

-

Your design documentation becomes the new code. No more lost intent or miscommunication. AI and humans alike will love your detailed deliveries.

-
- -
-``` - -**Rationale**: Three points that build confidence by emphasizing existing skills, provide clear value proposition (complete process), and highlight key differentiator (design as blueprint). - ---- - -### Footer Section -**Purpose**: Additional information and contact - -#### Founder Credit / About -**OBJECT ID**: `wds-footer-founder` -- **Component**: Body text / Link -- **Content:** - - **EN:** "WDS is built on 25+ years of CX/UX/UI design experience by Mårten Angner. Part of the BMad Method for AI agent-driven development." -- **Rationale**: Establishes credibility, connects to founder's expertise, positions WDS within BMad Method - ---- - -**Status:** In Progress (Hero & Capabilities Sections Updated to Match Final Design) -**Designer:** Freya WDS Designer Agent -**Created:** December 27, 2025 -**Last Updated:** December 29, 2025 -**Page Name:** 1.1 WDS Presentation diff --git a/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/benefits-workshop.md b/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/benefits-workshop.md deleted file mode 100644 index d62145ef1..000000000 --- a/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/benefits-workshop.md +++ /dev/null @@ -1,164 +0,0 @@ -# Benefits Section Workshop -## Mapping Stina's Wants & Fears to WDS Benefits - -**Purpose**: Create three compelling benefits that answer "Why WDS? Because Designers Matter" by directly addressing what designers want and fear. - -**Target Persona**: Stina the Strategist (Primary) - ---- - -## Step 1: Map Stina's Desired Feelings - -**Focus**: How does Stina wish to FEEL? (Not what she wants to DO or HAVE) - -### ✅ Top 3 Wants → Desired Feelings - -**1. To be the go-to strategic expert** -- **How she wishes to feel**: **Respected and Valued** -- **Feeling state**: Confident, recognized, influential, trusted -- **Emotional outcome**: "I matter. My expertise is sought after." - -**2. To make real impact through grand adventures** -- **How she wishes to feel**: **Purposeful and Significant** -- **Feeling state**: Fulfilled, meaningful, impactful, contributing -- **Emotional outcome**: "What I do matters. I'm making a difference." - -**3. To confidently use AI professionally and scale impact** -- **How she wishes to feel**: **Empowered and Capable** -- **Feeling state**: Confident, secure, in control, growing -- **Emotional outcome**: "I can do this. I'm not left behind." - -### ❌ Top 3 Fears → Desired Feelings (Opposite of Fear) - -**1. Being replaced by AI or becoming irrelevant** -- **Current feeling**: Threatened, insecure, anxious about future -- **How she wishes to feel**: **Secure and Irreplaceable** -- **Feeling state**: Safe, relevant, valued, future-proof -- **Emotional outcome**: "I'm not going anywhere. I'm essential." - -**2. Wasting time/energy on tools that don't work** -- **Current feeling**: Frustrated, inefficient, betrayed -- **How she wishes to feel**: **Smart and Validated** -- **Feeling state**: Efficient, productive, rewarded, wise -- **Emotional outcome**: "My time investment pays off. I made the right choice." - -**3. Being sidelined or not valued when she could save the world** -- **Current feeling**: Frustrated, ignored, underutilized -- **How she wishes to feel**: **Central and Indispensable** -- **Feeling state**: Valued, heard, essential, respected -- **Emotional outcome**: "I'm at the center. They need me." - ---- - -## Step 2: Map WDS Solutions to Each Want/Fear - -### Mapping Table - -| Want/Fear | WDS Solution | Key Message | Benefit Statement | -|-----------|--------------|-------------|-------------------| -| **Want 1:** Strategic expert | Expert AI agents guide strategy | You become strategic leader | "Get a seat at the strategic table" | -| **Want 2:** Real impact | Complete workflow from idea to production | Your design guides entire product | "Your design thinking becomes the blueprint" | -| **Want 3:** Confident AI use | Structured learning path with hand-holding | Build confidence progressively | "Learn AI professionally without overwhelm" | -| **Fear 1:** Replaced by AI | AI agents amplify, don't replace | You stay creative and strategic | "You're amplified, not replaced" | -| **Fear 2:** Wasting time | Proven methodology, free & open source | Low risk, high value | "Worth your time investment" | -| **Fear 3:** Not valued | Strategic specifications position you as indispensable | Your expertise becomes central | "Become indispensable, not sidelined" | - ---- - -## Step 3: Identify Top 3 Benefits to Highlight - -**Criteria for Selection:** -1. Addresses strongest emotional drivers -2. Differentiates WDS clearly -3. Connects to other page sections (agents, specs, learning) -4. Creates transformation narrative (fear → confidence) - -### Option A: Fear-Focused (Addresses Core Anxieties) -1. **"You're Not Replaced—You're Amplified"** (Fear 1) -2. **"Become Indispensable, Not Sidelined"** (Fear 3) -3. **"Build Confidence Without Wasting Time"** (Fear 2) - -### Option B: Want-Focused (Addresses Aspirations) -1. **"Get a Seat at the Strategic Table"** (Want 1) -2. **"Make Real Impact Through Your Design"** (Want 2) -3. **"Use AI Confidently and Scale Your Impact"** (Want 3) - -### Option C: Transformation-Focused (Fear → Want) -1. **"Stop Feeling Threatened, Start Leading with AI"** (Fear 1 → Want 3) -2. **"From Task-Doer to Strategic Leader"** (Fear 3 → Want 1) -3. **"Your Design Thinking Becomes the Blueprint"** (Want 2) - -### Option D: Balanced (Mix of Wants & Fears) -1. **"You're Amplified, Not Replaced"** (Fear 1) -2. **"Become the Strategic Expert"** (Want 1) -3. **"Build Confidence at Your Own Pace"** (Want 3) - ---- - -## Step 4: Workshop Questions - -**Question 1: Which emotional driver is strongest for Stina?** -- [ ] Fear of being replaced (survival) -- [ ] Want to be strategic (recognition) -- [ ] Fear of wasting time (efficiency) -- [ ] Want to make impact (purpose) - -**Question 2: What's the primary transformation we're promising?** -- [ ] From threatened to empowered -- [ ] From task-doer to strategic leader -- [ ] From overwhelmed to confident -- [ ] From sidelined to indispensable - -**Question 3: Which benefit connects best to other page sections?** -- [ ] AI agents (connects to "Meet the AI Agents" section) -- [ ] Strategic specifications (connects to "Conceptual Specifications" section) -- [ ] Learning path (connects to "Learn WDS" section) - -**Question 4: What's the most compelling "because designers matter" message?** -- [ ] Designers are central to product development -- [ ] Design thinking guides entire teams -- [ ] Designers become strategic leaders -- [ ] Designers' expertise is amplified, not replaced - ---- - -## Step 5: Draft Benefit Statements - -### Template for Each Benefit: -- **Headline**: [Emotional hook addressing want/fear] -- **Subheadline/Description**: [How WDS delivers this] -- **Connection**: [Links to other page sections] - -### Draft 1: [To be filled in workshop] - -### Draft 2: [To be filled in workshop] - -### Draft 3: [To be filled in workshop] - ---- - -## Step 6: Test Against Success Criteria - -**Does each benefit:** -- ✅ Address a core want or fear from Stina's persona? -- ✅ Answer "Why WDS? Because Designers Matter"? -- ✅ Connect to other page sections? -- ✅ Create emotional resonance? -- ✅ Differentiate WDS from competitors? -- ✅ Promise transformation? - ---- - -## Next Steps - -1. **Discuss**: Which option (A, B, C, or D) resonates most? -2. **Refine**: Adjust benefit statements based on discussion -3. **Test**: Do they work together as a cohesive narrative? -4. **Finalize**: Create final HTML structure - ---- - -**Workshop Status**: Ready for discussion -**Created**: [Date] -**Facilitator**: [Name] - diff --git a/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/sketches/1-1-wds-presentation-desktop-concept.jpg b/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/sketches/1-1-wds-presentation-desktop-concept.jpg deleted file mode 100644 index 23088f5c8..000000000 Binary files a/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/sketches/1-1-wds-presentation-desktop-concept.jpg and /dev/null differ diff --git a/docs/examples/WDS-Presentation/wds-workflow-status.yaml b/docs/examples/WDS-Presentation/wds-workflow-status.yaml deleted file mode 100644 index 5870c5cb5..000000000 --- a/docs/examples/WDS-Presentation/wds-workflow-status.yaml +++ /dev/null @@ -1,110 +0,0 @@ -# WDS Workflow Status -# Tracks progress through WDS design methodology - -# Project information -generated: "2025-12-28" -project: "WDS Presentation Page" -project_type: "simple_website" -workflow_path: "full-product" - -# Project structure (defines folder organization) -project_structure: - type: "simple_website" # Single-page marketing site with multiple sections - scenarios: "single" # Single user journey (landing page flow) - pages: "single" # One primary page with multiple sections (potential variants later) - notes: "Single scenario with potential for page variants or additional pages in future" - -# Delivery configuration (what gets handed off) -delivery: - format: "wordpress" # WordPress page editor markup - target_platform: "wordpress" # WordPress CMS on Whiteport.com - requires_prd: false # Direct implementation from specs - description: "Ready-to-paste WordPress page editor code with properly formatted blocks, content sections, and embedded media" - -# Configuration -config: - folder_prefix: "numbers" # Using numbered folders (1-, 2-, 3-, 4-) - folder_case: "lowercase" # Folder names use lowercase-with-hyphens - brief_level: "complete" # Complete product brief with full strategic context - include_design_system: false # No separate design system needed for single page - component_library: "none" # Using standard WordPress blocks - specification_language: "EN" # Specs written in English - product_languages: ["EN"] # Product supports English - -# Folder mapping -folders: - product_brief: "1-project-brief/" - trigger_map: "2-trigger-map/" - platform_requirements: "3-prd-platform/" # Skipped (not needed for WordPress) - scenarios: "4-scenarios/" - design_system: "5-design-system/" # Skipped - prd_finalization: "6-design-deliveries/" # Skipped - -# Workflow status tracking -workflow_status: - phase_1_project_brief: - status: "complete" - agent: "saga-analyst" - folder: "1-project-brief/" - brief_level: "complete" - artifacts: - - "01-product-brief.md" - - "02-content-strategy.md" - completed_date: "2025-12-24" - - phase_2_trigger_mapping: - status: "complete" - agent: "cascade-analyst" - folder: "2-trigger-map/" - artifacts: - - "00-trigger-map.md" - - "01-Business-Goals.md" - - "02-Stina-the-Strategist.md" - - "03-Lars-the-Leader.md" - - "04-Felix-the-Full-Stack.md" - - "05-Key-Insights.md" - - "06-Feature-Impact.md" - completed_date: "2025-12-27" - - phase_3_prd_platform: - status: "skipped" - reason: "WordPress delivery - no platform PRD needed" - - phase_4_ux_design: - status: "in-progress" - agent: "freya-wds-designer" - folder: "4-scenarios/" - current_page: "1.1-start-page" - artifacts: - - "1.1-start-page/1.1-start-page.md" - - "1.1-start-page/sketches/1-1-start-page-desktop-concept.jpg" - notes: "Hero section complete, WDS Capabilities section specified, other sections TBD" - - phase_5_design_system: - status: "skipped" - reason: "Single page project - no design system needed" - - phase_6_design_deliveries: - status: "pending" - reason: "Awaiting UX design completion" - -# Current scenario tracking -current_scenario: - number: "1" - name: "Landing Page Journey" - status: "in-progress" - pages: - - number: "1.1" - name: "Start Page" - status: "in-progress" - device: "desktop" - completion: "60%" - sections_complete: - - "Hero Section" - - "WDS Capabilities (Right Column)" - sections_pending: - - "Benefits Section" - - "Main Content Section" - - "Testimonials Section" - - "CTA Section" - - "Footer Section" diff --git a/docs/examples/wds-examples-guide.md b/docs/examples/wds-examples-guide.md deleted file mode 100644 index 820cfab49..000000000 --- a/docs/examples/wds-examples-guide.md +++ /dev/null @@ -1,106 +0,0 @@ -# WDS Examples Guide - -Real-world examples of WDS methodology in action. - ---- - -## 📂 Available Examples - -### [WDS Presentation](./WDS-Presentation/) - -**Type:** Marketing Landing Page -**Status:** In Progress -**Purpose:** Showcase WDS methodology through its own presentation site - -A complete WDS project creating a modern, conversion-optimized landing page for Whiteport Design Studio itself. Demonstrates the full methodology from Product Brief through UX Design. - -**What's Inside:** -- Product Brief with target personas -- Complete Trigger Map with 3 user personas -- Scenario specifications with desktop concept sketches -- Benefits workshop documentation -- Workflow status tracking - -**Good for Learning:** -- How to structure a marketing page project -- Trigger mapping for multiple personas -- Benefits-first content strategy -- Desktop-first concept sketching - ---- - -### [WDS v6 Conversion](./wds-v6-conversion/) - -**Type:** Meta Project - Using WDS to Build WDS -**Status:** In Progress 🔄 -**Purpose:** Document the v4 → v6 conversion as a case study - -A unique meta-example where we use WDS methodology to organize and improve WDS itself. Includes complete session logs, strategic framework development, and methodology evolution. - -**What's Inside:** -- Session logs with full context preservation -- Strategic framework design (CAC, Golden Circle, Action Mapping, Kathy Sierra) -- Value Chain Content Analysis development -- Scientific Content Creation workflow -- Conversion roadmap and progress tracking -- Concepts integration (Greenfield/Brownfield, Kaizen/Kaikaku) - -**Good for Learning:** -- Long-term project management with agents -- Context preservation across sessions -- Strategic framework integration -- Meta-methodology development -- Real agent collaboration patterns -- Decision documentation with rationale - ---- - -## 🎯 How to Use These Examples - -### For Learning WDS - -1. **Start with WDS Presentation** to see a straightforward marketing page project -2. **Move to WDS v6 Conversion** to see complex methodology work and long-term collaboration - -### For Your Own Projects - -- Copy structure patterns that fit your needs -- Adapt documentation approaches -- Reference strategic frameworks -- Use session log format for context preservation - -### As Templates - -While these are real projects (not sanitized templates), you can: -- Use the folder structures as starting points -- Adapt the documentation patterns -- Reference the strategic approaches -- Copy workflow status tracking methods - ---- - -## 📚 Related Documentation - -- **[Getting Started](../getting-started/)** - Installation and quick start -- **[Method Guides](../method/)** - Tool-agnostic methodology references -- **[Learn WDS Course](../learn/)** - Step-by-step learning path -- **[Workflows](../src/workflows/)** - Detailed workflow instructions - ---- - -## 💡 Contributing Examples - -Have a WDS project you'd like to share as an example? Great examples: - -- Show real project work (not sanitized demos) -- Include documentation at multiple stages -- Preserve decision rationale -- Demonstrate specific WDS patterns or workflows -- Help others learn through real-world application - -Consider contributing by creating a PR with your example project folder. - ---- - -*These examples grow and evolve as real projects. They show WDS methodology in action, not idealized scenarios.* - diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/.structure-complete b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/.structure-complete deleted file mode 100644 index d31fa3702..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/.structure-complete +++ /dev/null @@ -1 +0,0 @@ -WDS v6 Conversion Example Structure Created Successfully diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/2026-01-04-eira-visual-design-integration.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/2026-01-04-eira-visual-design-integration.md deleted file mode 100644 index b19ecb4cf..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/2026-01-04-eira-visual-design-integration.md +++ /dev/null @@ -1,918 +0,0 @@ -# Session Log: Eira Visual Design Integration Architecture - -**Date:** 2026-01-04 -**Participants:** Freya (WDS Designer Agent), User (Mårten) -**Topic:** Complete architecture for integrating Eira visual design workflow into WDS -**Status:** Design phase - to be prototyped in Dogweek project - ---- - -## Executive Summary - -Designed complete integration of **Eira** (visual design agent) into WDS workflow. Eira enables AI-powered visual design exploration using image generation models (Nano Banana, DALL-E, Midjourney, etc.) while maintaining strategic alignment with BMad Method principles. - -**Key Innovation:** Phase 5 "Visual Design Exploration" (01-Visual-Design/) - a creative exploration phase that happens AFTER strategy (Phase 1 & 2) but BEFORE detailed scenarios (Phase 4), where wild visual concepts are generated before locking into detailed specs. - -**Location:** `D-Design-System/01-Visual-Design/` - -**Core Principle:** Strategy (Phase 1 & 2) → Visual Exploration (Phase 5) → Detailed Execution (Phase 4) - ---- - -## Problem Statement - -**Current State:** -- WDS produces functional prototypes but often uses default/generic visual design (Tailwind defaults) -- "Visual Poverty" - cluttered layouts, generic aesthetics, no strategic visual direction -- No systematic way to explore visual concepts before detailed design work - -**Desired State:** -- "Visual Prosperity" - typography-first hierarchy, generous white space, premium aesthetics -- Strategic visual design that triggers psychological drivers from trigger map -- Systematic creative exploration before detailed execution -- Tool-agnostic approach (not locked to one image generation model) - ---- - -## Architecture Overview - -### Phase Integration - -``` -Phase 1: Project Brief -├─ Business strategy -├─ VTC (Value to Customer) -└─ Question: "Will this project require visual design?" (YES/NO) - -Phase 2: Trigger Mapping -├─ User psychology -├─ Demographics -├─ Psychological triggers -└─ User context (informs device priorities) - -Phase 5: Design System - Visual Design Exploration (BEFORE Phase 4) -├─ Location: D-Design-System/01-Visual-Design/ -├─ Strategic document (tool-agnostic) -├─ Content concept generation -├─ Visual exploration (wild & creative) -├─ Direction selection -└─ Design token extraction - -Phase 3: PRD/Platform (Optional) -├─ Technical foundation -└─ Device priorities (informed by Phase 5 visual direction) - -Phase 4: UX Design (Scenarios) -├─ Detailed conceptual specs -├─ High-fidelity mockups (using approved direction from Phase 5) -├─ HTML prototypes -└─ Design system evolution - -Phase 5: Design System - Production Assets (DURING/AFTER Phase 4) -├─ Location: D-Design-System/02-Assets/ -├─ Component extraction -├─ Final logos and assets -└─ Design system documentation -``` - ---- - -## Phase 5: Visual Design Exploration (Detailed) - -**Location:** `D-Design-System/01-Visual-Design/` - -### Purpose - -**Tie UX to Brand and create a visual system.** This phase establishes the visual language that will express your brand's personality across all user experiences. - -**Key Distinction:** -- **Phase 4 (UX)** = How it works (functionality, interactions, content) -- **Phase 5 (Visual Design)** = How it looks and feels (brand expression, visual system) - -**Strategic document** that defines boundaries and direction for visual exploration. Completely **tool-agnostic** - focuses on WHAT to explore, not HOW to generate. - -**Timing:** Can happen ANYTIME - visual identity/brand is independent of product strategy. Common scenarios: -- **Before product:** Establish brand first, build products around it -- **Parallel:** Develop brand while defining product strategy -- **After strategy:** Use strategic insights to inform visual direction - -### Content Structure - -**Output Location:** `D-Design-System/01-Visual-Design/visual-design-brief.md` - -```markdown -# Visual Design Brief: [Project Name] - -**Phase:** 5 - Design System (Visual Design Exploration) -**Location:** D-Design-System/01-Visual-Design/ -**Created After:** Phase 1 (Product Brief) and Phase 2 (Trigger Map) -**Used In:** Phase 4 (UX Design) for scenario creation - -## Strategic Foundation -- Value to Customer (VTC) -- Target Demographics -- Key Psychological Triggers (top 3-5 to emphasize visually) -- Brand Positioning - -## Visual Direction to Explore -- Mood & Feeling (3-5 adjectives) -- Visual References (brands/products to learn from) -- Visual Prosperity Standards (must achieve / must avoid) - -## Content Concepts -For each key page (homepage, features, pricing, etc.): -- Purpose (which trigger does this serve?) -- Strategic content (headline, subheadline, features, CTA) -- Visual exploration focus - -## Exploration Parameters -- Directions to Explore (2-3 different visual approaches) -- Pages to Visualize -- Device Priority (based on demographics) - -## Constraints & Requirements -- Brand Assets (existing/to create) -- Technical Constraints -- Must Include / Must Avoid - -## Success Criteria -- Evaluation questions -- Strategic alignment checks - -## Output Organization -- Mood boards → 01-Visual-Design/mood-boards/ -- Design concepts → 01-Visual-Design/design-concepts/ -- Color exploration → 01-Visual-Design/color-exploration/ -- Typography tests → 01-Visual-Design/typography-tests/ -``` - -### Visual Prosperity Standards - -**Must Achieve:** -- Typography-first hierarchy -- Generous, intentional white space -- Premium color palettes (3-4 colors max) -- Clean, purposeful imagery -- Every element serves strategic purpose - -**Must Avoid:** -- **Tailwind CSS default styles** (blue buttons, generic grays) -- Generic UI kit aesthetics (Material, Bootstrap defaults) -- Cluttered layouts with poor hierarchy -- Decorative elements without purpose -- Stock photo aesthetics - ---- - -## Workflow: Freya ↔ User ↔ Eira - -### Step 1: Freya Creates Visual Design Brief - -**Input:** -- Project Brief (Phase 1) -- Trigger Map (Phase 2) - -**Process:** -- Freya reads strategic context -- Generates content concepts using content creation workshop -- Defines exploration parameters -- Creates Visual Design Brief document - -**Output:** -- `docs/2.5-visual-design-brief/visual-design-brief.md` - ---- - -### Step 2: Tool Selection Workshop - -**Freya runs workshop with user:** - -``` -Q1: Which image generation model do you want to use? - [ ] Nano Banana Pro (Google) - Best text rendering, manual workflow - [ ] DALL-E 3 (OpenAI) - API access, good automation - [ ] Midjourney v7 - Beautiful aesthetics, style consistency - [ ] Flux Pro - Fast, good prompt adherence - [ ] Ideogram 2.0 - Excellent typography - [ ] Other: ___________ - -Q2: Access method? - [ ] Manual (copy-paste prompts, download results) - [ ] API (automated generation) - [ ] Third-party platform - -Q3: Do you have API keys/access configured? - [ ] Yes - ready to go - [ ] No - will use manual workflow -``` - -**User decision:** Determines execution approach, not strategy - ---- - -### Step 3: Freya Generates Tool-Specific Setup - -**For Nano Banana (example):** - -**A. System Instructions** (ONE-TIME SETUP - Universal for all projects) -``` -Freya generates ONCE, user pastes into NB system instructions field: - -UNIVERSAL KNOWLEDGE (applies to all projects): -- Eira persona and mission -- Visual Poverty vs Visual Prosperity definitions -- BMad/WDS workflow understanding -- Technical standards (typography specs, color palette rules, spacing principles) -- Collaboration style and output format -- Design token JSON structure and requirements -- Visual Prosperity checklist -- Export capabilities and format - -EXPORT INSTRUCTIONS: -When user requests export (e.g., "Export the approved design"), provide: -1. Design token JSON (colors, typography, spacing, layout) -2. HTML structure (semantic, accessible markup) -3. CSS styles (component styles, layout patterns) -4. Layout patterns JSON (structure, grid, spacing, responsive behavior) - -Use standard JSON/HTML/CSS format following the design token structure defined above. - -This stays in NB permanently, applies to every project. -``` - -**B. Project Context** (PER-PROJECT - First message in new chat) -``` -Freya generates for THIS PROJECT, user pastes as first message: - -PROJECT-SPECIFIC CONTEXT (changes per project): -- Project name and strategic summary -- VTC (Value to Customer) -- Target demographics -- Key psychological triggers -- Visual mood direction -- Brand positioning -- Design constraints -- Existing brand assets (if any) - -This context persists for entire project conversation. -``` - -**C. Task Prompts** (PER-TASK - Each exploration) -``` -Freya generates for EACH SPECIFIC TASK (page/direction): - -TASK-SPECIFIC ONLY (minimal, focused): -- Which page (homepage/features/pricing) -- Which direction to explore (premium/playful/bold) -- Specific content for this page (headline, features, CTA) -- Any page-specific requirements - -DELIVERY LOCATION: -- Save visual output to: docs/2.5-visual-design-brief/explorations/[page]/[direction].png -- File naming: [page]-[direction]-[device].png -- Example: homepage-premium-desktop.png - -Everything else (standards, principles, project context) is already in system instructions or project context. -``` - ---- - -### Step 4: Visual Exploration (User ↔ Eira) - -**Process:** -1. User pastes task prompt into Nano Banana (includes delivery location) -2. Eira (NB) generates visual concept -3. User downloads/screenshots result -4. User saves to specified location from task prompt -5. Repeat for each page and direction - -**Delivery Structure:** -``` -docs/2.5-visual-design-brief/explorations/ -├── homepage/ -│ ├── homepage-premium-desktop.png -│ ├── homepage-playful-desktop.png -│ └── homepage-bold-desktop.png -├── features/ -│ ├── features-premium-desktop.png -│ ├── features-playful-desktop.png -│ └── features-bold-desktop.png -└── pricing/ - ├── pricing-premium-desktop.png - ├── pricing-playful-desktop.png - └── pricing-bold-desktop.png -``` - -**File Naming Convention:** -- Format: `[page]-[direction]-[device].png` -- Examples: - - `homepage-premium-desktop.png` - - `features-playful-mobile.png` - - `pricing-bold-tablet.png` - ---- - -### Step 5: Direction Selection (User + Freya) - -**User shares results with Freya:** -``` -"Here are the explorations Eira generated: [screenshots/descriptions]" -``` - -**Freya analyzes:** -- Strategic alignment (triggers correct psychology?) -- Visual prosperity (meets standards?) -- Differentiation (stands out from competitors?) -- Demographic resonance (appeals to target users?) - -**Freya recommends:** -- Winning direction (or hybrid approach) -- Rationale for selection -- Refinements needed - -**User decides:** -- Approves direction -- Requests refinements -- Tries new direction - ---- - -### Step 6: Design Token Extraction - -**From approved visual direction:** - -**Option A: Eira (NB) Generates JSON Directly** -``` -User asks Eira in Nano Banana: -"Generate design token JSON files for the approved direction" - -Eira outputs complete JSON structure: -{ - "colors": { - "primary": "#0A0E27", - "secondary": "#1A1F3A", - "accent": "#00FF9D", - "background": "#FFFFFF", - "text": { - "primary": "#1A1A1A", - "secondary": "#666666", - "tertiary": "#999999" - } - }, - "typography": { - "headings": { - "family": "Inter", - "weights": [600, 700, 800], - "sizes": { - "h1": "48px", - "h2": "36px", - "h3": "24px" - } - }, - "body": { - "family": "Inter", - "weight": 400, - "size": "16px", - "lineHeight": "1.6" - } - }, - "spacing": { - "unit": "8px", - "scale": [8, 16, 24, 32, 48, 64, 96] - }, - "layout": { - "maxWidth": "1200px", - "gridColumns": 12, - "gutter": "24px" - } -} - -User copies JSON output, brings back to Cursor. -``` - -**Option B: Freya Extracts from Visual** -``` -If Eira doesn't generate JSON, Freya can extract from the approved visual: -- Analyzes colors, typography, spacing from image -- Creates JSON structure -- May need user confirmation on exact values -``` - -**User brings back to Cursor:** -- Design token JSON (from Eira or Freya) -- Visual assets (approved direction images) - -**Freya saves to:** -- `design-system/tokens/colors.json` -- `design-system/tokens/typography.json` -- `design-system/tokens/spacing.json` -- `design-system/tokens/layout.json` - ---- - -### Step 7: Return to Cursor/WDS (Integration) - -**User brings back to Freya in Cursor:** - -**Assets:** -- Visual explorations (PNG/JPG files) -- Approved direction images - -**Code:** -- Design token JSON files -- Any HTML/CSS snippets generated - -**Documentation:** -- Visual Design Brief -- Direction selection rationale -- Design token documentation - -**Freya integrates:** -1. Saves assets to appropriate folders -2. Loads design tokens into design system -3. Updates project outline with approved direction -4. Prepares for Phase 4 (detailed scenarios) - ---- - -## Phase 4: Detailed Scenario Design (Changed Approach) - -### Now Working with Approved Direction - -**Difference from Phase 2.5:** -- Phase 2.5 = EXPLORE (loose, creative, multiple directions) -- Phase 4 = EXECUTE (structured, consistent, approved direction) - -### Workflow Per Scenario - -**Step 1: Freya Creates Conceptual Spec** -- Detailed content and hierarchy -- Strategic purpose -- User psychology triggers - -**Step 2: Freya Generates Structured Prompts** -- Uses approved visual direction -- Precise specifications (not exploratory) -- Maintains design token consistency -- STRUCTURED & PRECISE (not wild) - -**Step 3: Designer Sketches Wireframe (Optional)** -- Designer creates wireframe/concept for this scenario -- Hand-drawn, Figma, or any tool -- Defines UX structure and layout - -**Step 4: Freya Generates Per-Page Visual Design Brief** -- Extracts from conceptual spec for THIS page only -- Strategic purpose, content, visual direction -- Design constraints, delivery location -- References approved direction from Phase 2.5 - -**Step 5: User → Eira → High-Fidelity Mockup (Primary Device)** -- Upload designer sketch (if exists) + visual design brief -- Generate PRIMARY device first (desktop or mobile based on demographics) -- Maintain approved visual direction -- Review and approve before moving to other devices - -**Step 6: User → Eira → Responsive Variations (Sequential)** -- Generate SECONDARY devices one at a time -- Each references approved primary device -- Prompt: "Adapt approved [primary] design for [secondary device]" -- Order: Primary → Secondary → Tertiary -- Example: Desktop → Mobile → Tablet - -**Step 7: Eira Exports Design Assets** -- User asks Eira: "Export the approved design" -- Eira provides: Design tokens JSON, HTML structure, CSS styles, Layout patterns -- User brings exports back to Cursor - -**Step 8: Extract Layout Patterns** -- Freya identifies reusable layout patterns from Eira's output -- Saves to design-system/layouts/ -- Documents layout structure, grid, spacing patterns -- **Template Reuse:** Similar pages can reference this layout pattern - -**Step 9: Freya Builds HTML Prototype** -- Uses design tokens from design system -- Uses layout patterns from design system -- Implements approved visual direction -- Creates functional prototype - -**Note on Template Reuse:** -- Once first page template is complete, similar pages are faster -- Example: After homepage hero → other hero sections reference the pattern -- Eira can generate variations: "Use hero-section-centered layout with new content" - ---- - -## Folder Structure - -``` -docs/ -├── 1-project-brief/ -│ └── product-brief.md -│ -├── 2-strategy/ -│ ├── trigger-map.md -│ └── vtc.md -│ -├── 2.5-visual-design-brief/ ← NEW PHASE! -│ ├── visual-design-brief.md (strategic document) -│ │ -│ ├── content-concepts/ -│ │ ├── homepage-concept.md -│ │ ├── features-concept.md -│ │ └── pricing-concept.md -│ │ -│ ├── explorations/ -│ │ ├── homepage/ -│ │ │ ├── direction-1-premium.png -│ │ │ ├── direction-2-playful.png -│ │ │ └── direction-3-bold.png -│ │ ├── features/ -│ │ └── pricing/ -│ │ -│ ├── approved-direction/ -│ │ ├── selection-rationale.md -│ │ ├── mood-board.png -│ │ └── design-tokens-foundation.json -│ │ -│ └── tool-setup/ (if using Nano Banana) -│ ├── system-instructions.md -│ ├── project-context.md -│ └── exploration-prompts.md -│ -├── 3-prd-platform/ -│ └── ... (technical foundation) -│ -├── 4-scenarios/ -│ ├── 1.1-homepage/ -│ │ ├── 1.1-homepage.md (conceptual spec) -│ │ ├── 1.1-homepage.html (prototype) -│ │ └── high-fidelity/ -│ │ ├── desktop.png -│ │ ├── tablet.png -│ │ └── mobile.png -│ │ -│ └── ... (other scenarios) -│ -└── design-system/ - ├── brand-assets/ (if existing brand) - │ ├── logo.svg - │ └── brand-guidelines.pdf - │ - ├── tokens/ - │ ├── colors.json - │ ├── typography.json - │ ├── spacing.json - │ └── layout.json - │ - ├── components/ - │ ├── buttons.json - │ ├── cards.json - │ └── forms.json - │ - ├── layouts/ - │ ├── hero-sections.json - │ ├── feature-grids.json - │ ├── pricing-tables.json - │ └── navigation-patterns.json - │ - └── visual-identity/ - ├── approved-mood-board.png - └── component-showcase.png -``` - ---- - -## Prompt Style Comparison - -### Phase 2.5: Exploration Prompts (LOOSE & CREATIVE) - -**Characteristics:** -- Broad strokes, not pixel-perfect -- Focus on MOOD and FEELING -- Multiple variations encouraged -- "What if...?" explorations -- Minimal restrictions -- "Get wild and crazy" - -**Example:** -``` -Homepage concept for [Project] - -STRATEGIC CONTEXT: -- Target: [demographics] -- Trigger: [psychological driver] -- Value: [VTC] - -CONTENT: -- Headline: [strategic headline] -- Features: [3-4 highlights] - -VISUAL EXPLORATION: -Explore 3 different moods: - -Direction 1: PREMIUM & TRUSTWORTHY -- Think: Stripe, Apple Card -- Colors: Deep, sophisticated -- Typography: Bold, confident -- Mood: Professional, premium - -Direction 2: PLAYFUL & ACCESSIBLE -- Think: Duolingo, Notion -- Colors: Vibrant, warm -- Typography: Rounded, friendly -- Mood: Fun, welcoming - -Direction 3: BOLD & INNOVATIVE -- Think: Vercel, Linear -- Colors: High contrast, electric -- Typography: Sharp, modern -- Mood: Forward-thinking, disruptive - -FREEDOM: -- Don't restrict creativity -- Show me what's possible -- Surprise me -``` - -### Phase 4: Execution Prompts (STRUCTURED & PRECISE) - -**Characteristics:** -- Exact specifications -- Approved direction only -- Design token consistency -- Pixel-perfect requirements -- Clear constraints -- Buildable by developers - -**Example:** -``` -Homepage hero section for [Project] - -LAYOUT STRUCTURE: -- Navigation: Logo left, menu right -- Hero: Centered headline + CTA -- Background: Gradient [exact colors] - -TYPOGRAPHY: -- Headline: Inter Bold, 48px, #1A1A1A -- Subheadline: Inter Regular, 18px, #666666 -- CTA: Inter Semibold, 16px, #FFFFFF - -COLOR PALETTE: -- Primary: #0A0E27 (from approved direction) -- Accent: #00FF9D (from approved direction) -- Background: Linear gradient #1A1F3A to #0A0E27 - -SPACING: -- Padding: 64px top/bottom -- Max-width: 1200px centered -- Button spacing: 24px from subheadline - -STYLE: -- Follow approved mood board -- Maintain design token consistency -- Flat with subtle gradients - -AVOID: -- Deviating from approved direction -- Tailwind defaults -``` - ---- - -## Tool-Agnostic Design - -### Visual Design Brief = Strategic Document - -**Always the same, regardless of tool:** -- Strategic foundation -- Content concepts -- Exploration parameters -- Success criteria - -**Tool choice = Implementation detail:** -- User chooses based on preference/access -- Freya adapts prompts to chosen tool -- Same strategy → different execution tools - -### Supported Tools (Examples) - -**Nano Banana Pro:** -- Best text rendering -- Good UI layouts -- Manual workflow -- Freya generates: System instructions + Project context + Structured prompts - -**DALL-E 3:** -- API access -- Good automation -- Freya generates: API-friendly prompts + Batch scripts - -**Midjourney v7:** -- Beautiful aesthetics -- Style consistency (`--sref`) -- Freya generates: Discord-formatted prompts + Style references - -**Flux Pro:** -- Fast generation -- Good prompt adherence -- Freya generates: Technical prompts + API integration - ---- - -## Integration Points with Existing WDS - -### Phase 1: Project Brief -**Add question:** -- "Will this project require visual design deliverables?" (YES/NO) -- If YES: "Do you have existing brand assets?" (YES/NO/PARTIAL) - -### Phase 2: Trigger Mapping -**No changes to workflow** -- Observe user context for device clues -- Demographics inform visual direction - -### Phase 2.5: Visual Design Brief -**New workflow - insert here** -- Triggered if visual design = YES -- Freya creates Visual Design Brief -- Runs tool selection workshop -- Generates tool-specific setup -- Facilitates exploration -- Extracts design tokens - -### Phase 3: PRD/Platform -**Informed by Phase 2.5:** -- Device priorities (from explorations) -- Technical constraints (from approved direction) - -### Phase 4: UX Design -**Uses approved direction:** -- Design tokens from Phase 2.5 -- Visual consistency maintained -- Structured prompts (not exploratory) - ---- - -## Output Format (Return to Cursor) - -### What User Brings Back - -**1. Visual Assets** -``` -2.5-visual-design-brief/explorations/ -├── [page]/[direction].png -└── approved-direction/mood-board.png -``` - -**2. Design Tokens (JSON)** -```json -{ - "colors": {...}, - "typography": {...}, - "spacing": {...}, - "layout": {...} -} -``` - -**3. Code Snippets (if generated)** -```css -/* Example CSS from approved direction */ -:root { - --color-primary: #0A0E27; - --color-accent: #00FF9D; - --font-heading: 'Inter', sans-serif; - --spacing-unit: 8px; -} -``` - -**4. Documentation** -```markdown -- visual-design-brief.md -- selection-rationale.md -- design-token-documentation.md -``` - -### How Freya Integrates - -**Step 1: Save Assets** -- Move images to appropriate folders -- Organize by phase and purpose - -**Step 2: Load Design Tokens** -- Parse JSON files -- Validate against Visual Prosperity standards -- Save to `design-system/tokens/` - -**Step 3: Update Project State** -- Mark Phase 2.5 complete -- Document approved direction -- Update project outline - -**Step 4: Prepare for Phase 4** -- Load design tokens for scenario work -- Reference approved visual direction -- Ready to generate structured prompts - ---- - -## Success Criteria - -### Visual Prosperity Achieved -- ✅ Typography-first hierarchy -- ✅ Generous white space -- ✅ Premium color palette (3-4 colors) -- ✅ Strategic purpose for every element -- ✅ No Tailwind defaults -- ✅ No generic UI kit aesthetics - -### Strategic Alignment -- ✅ Triggers identified psychological drivers -- ✅ Resonates with target demographics -- ✅ Differentiates from competitors -- ✅ Supports brand positioning - -### Process Quality -- ✅ Strategy informed visual exploration -- ✅ Multiple directions explored before commitment -- ✅ Clear rationale for chosen direction -- ✅ Design tokens extracted and documented -- ✅ Smooth integration back into WDS workflow - ---- - -## Next Steps (Dogweek Project Prototype) - -### Phase 1: Test Setup -1. Complete Dogweek Project Brief -2. Complete Dogweek Trigger Mapping -3. Trigger Phase 2.5 Visual Design Brief - -### Phase 2: Tool Selection -1. Run tool selection workshop -2. Choose image generation model (likely Nano Banana) -3. Set up access/credentials - -### Phase 3: Exploration -1. Freya generates Visual Design Brief -2. Freya generates tool-specific setup (system instructions, project context) -3. Freya generates exploration prompts -4. User executes in chosen tool -5. Collect visual explorations - -### Phase 4: Integration -1. Select winning direction -2. Extract design tokens -3. Bring assets + tokens back to Cursor -4. Freya integrates into design system -5. Proceed to Phase 4 scenarios - -### Phase 5: Refinement -1. Document what worked / what didn't -2. Refine prompts and workflow -3. Update architecture based on learnings -4. Integrate into WDS core - ---- - -## Open Questions (To Resolve in Prototype) - -1. **Design token extraction accuracy:** How well can Freya extract tokens from generated images? -2. **Prompt effectiveness:** Do loose exploration prompts generate useful variety? -3. **Tool comparison:** Should we test multiple tools in parallel? -4. **Iteration cycles:** How many exploration rounds are typically needed? -5. **Integration friction:** What's the smoothest way to bring results back to Cursor? -6. **Design system evolution:** How do tokens from Phase 2.5 evolve through Phase 4? - ---- - -## Key Principles - -1. **Strategy First:** Visual exploration happens AFTER strategy is clear -2. **Explore Before Committing:** Wild concepts before detailed specs -3. **Tool Agnostic:** Strategy document survives tool changes -4. **Visual Prosperity:** Eliminate defaults, cultivate premium aesthetics -5. **Human in Loop:** Designer makes final creative decisions -6. **Strategic Alignment:** Every visual choice serves psychological triggers -7. **Design System Thinking:** Extract reusable patterns, not one-offs - ---- - -## Related Documents - -- `eira-visual-designer.md` - Eira agent definition and system instructions -- Visual Design Brief template (to be created) -- Tool-specific prompt templates (to be created) -- Design token extraction guide (to be created) - ---- - -**Status:** Architecture complete - ready for prototype testing in Dogweek project - -**Next Session:** Implement and test in real project, refine based on learnings - ---- - -_Session log created by Freya (WDS Designer Agent) - 2026-01-04_ diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/2026-01-23-saga-course-workflow-integration/2026-01-23-saga-course-workflow-integration-dialog.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/2026-01-23-saga-course-workflow-integration/2026-01-23-saga-course-workflow-integration-dialog.md deleted file mode 100644 index 1428853be..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/2026-01-23-saga-course-workflow-integration/2026-01-23-saga-course-workflow-integration-dialog.md +++ /dev/null @@ -1,154 +0,0 @@ -# 2026-01-23 WDS Course — New Features Integration — Capture - -## Meta - -| Field | Value | -|-------|-------| -| **Date** | 2026-01-23 | -| **Type** | 💾 Capture | -| **Agent** | SAGA | -| **Feature** | WDS Course New Features Integration | -| **Specification** | N/A — Course content update | -| **Status** | Not Started | - ---- - -## Purpose - -Integrate recently added WDS features into the course materials: -1. Agent Dialog Workflow -2. Page Specification Open Questions (Audit) -3. Eira Visual Design Agent integration - ---- - -## Captured Thoughts - -### Feature 1: Agent Dialog Workflow - -**Location:** `src/workflows/9-agent-dialogs/` - -**Key concepts to teach:** -- **Bridge concept** — Dialogs connect specifications to development -- **Single Source of Truth** — Specs are authoritative, dialogs link to them -- **Object ID Implementation Maps** — Step files map Object IDs to spec line numbers -- **Dialog types** — Prototype Implementation, Bug Fix, Design Exploration, Capture, Generic - -**Key files:** -- `workflow.md` — Main workflow documentation -- `templates/dialog.template.md` — Generic dialog template -- `templates/step.template.md` — Step file template -- `templates/dialog-types/` — Type-specific templates - ---- - -### Feature 2: Page Specification Open Questions (Audit) - -**Location:** `src/workflows/4-ux-design/` (page specification templates) - -**Key concepts to teach:** -- **Open Questions section** — Every page spec should track unresolved questions -- **Question status tracking** — 🔴 Open | 🟡 In Discussion | 🟢 Resolved -- **Auto-population** — Agent instructions to identify gaps during spec creation - -**Key files:** -- `open-questions.instructions.md` — Instructions for agents to auto-populate questions -- Page specification templates with Open Questions section - -**Example from Dog Week:** -```markdown -## Open Questions - -| # | Question | Context | Status | -|---|----------|---------|--------| -| 1 | What happens if network fails during booking? | Error handling | 🔴 Open | -| 2 | Should "Cancel booking" show confirmation? | UX decision | 🔴 Open | -``` - ---- - -### Feature 3: Eira Visual Design Agent - -**Location:** Check existing Eira dialog in F-Agent-Dialogs - -**Key concepts to teach:** -- Visual design agent persona -- Design exploration workflow -- Integration with Freya (UX) workflow - ---- - -### Why These Matter - -- **Agent Dialogs**: Critical for bridging spec → code without losing traceability -- **Open Questions**: Prevents shipping specs with unresolved decisions -- **Eira Integration**: Completes the design agent ecosystem - -### Rough Approach - -1. Create new learn module: "Working with Agent Dialogs" -2. Update page specification lessons to include Open Questions -3. Add Eira to agent personas documentation -4. Create hands-on exercises for each feature - -### Notes - -- Dog Week project has real examples of all three features -- The "bridge diagram" is a powerful teaching visual -- Emphasize "Link, Don't Duplicate" as a core principle - ---- - -## Context for Next Agent - -### Current Thinking - -These three features represent significant additions to the WDS methodology: - -1. **Agent Dialogs** — Mature enough to teach. Key insight: dialogs are a **navigation layer** between specs and code. -2. **Open Questions** — Simple but powerful. Ensures specs don't ship with unresolved decisions. -3. **Eira** — Completes the design agent ecosystem (Freya for UX, Eira for Visual). - -### Open Questions - -- Which learn module should Agent Dialogs go in? (New module or extend existing?) -- Should Open Questions be part of the page specification lesson or standalone? -- Is Eira documented enough to add to the course, or needs more definition first? -- Should we create a dedicated example project showcasing all three features? - -### Concerns - -- Learners might still try to copy spec content into step files -- The line number references (L149-L158) in Object ID maps may feel tedious -- Open Questions might be seen as "extra work" rather than essential - -### Suggestions - -- Use Dog Week as the running example — it has all three features in action -- Create a "before/after" showing spec duplication vs. linking -- Include the bridge diagram in course materials — it's a powerful visual -- Show how Open Questions prevented shipping a broken feature - ---- - -## When I Return - -1. Review all three feature locations and documentation -2. Check existing learn modules for best placement -3. Draft course content outline for each feature -4. Create hands-on exercises -5. Identify any gaps in feature documentation that need filling first - ---- - -## References - -| Feature | Location | Example | -|---------|----------|---------| -| Agent Dialogs | `src/workflows/9-agent-dialogs/` | Dog Week booking-details-overlay | -| Open Questions | Page spec templates | Dog Week 3.2-Booking-Details.md | -| Eira Integration | F-Agent-Dialogs | 2026-01-04-eira-visual-design-integration.md | - ---- - -_Capture Agent Dialog — to be expanded later_ diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/CONCEPTS-INTEGRATION.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/CONCEPTS-INTEGRATION.md deleted file mode 100644 index 33f878efc..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/CONCEPTS-INTEGRATION.md +++ /dev/null @@ -1,272 +0,0 @@ -# Concepts Integration Map - -**Where Greenfield/Brownfield and Kaizen/Kaikaku concepts are documented in WDS** - ---- - -## Core Documentation - -### Glossary (Complete Reference) - -**File:** `src/core/resources/wds/glossary.md` - -**Contains:** - -- ✅ Greenfield Development (definition, origin, examples) -- ✅ Brownfield Development (definition, origin, examples) -- ✅ Kaizen (改善) - Continuous Improvement (definition, philosophy, examples) -- ✅ Kaikaku (改革) - Revolutionary Change (definition, philosophy, examples) -- ✅ Muda (無駄) - Waste (types, elimination) -- ✅ Comparison tables -- ✅ Usage examples -- ✅ When to use each approach - -**Purpose:** Complete reference for all philosophical concepts - ---- - -## Workflow Documentation - -### 1. Project Type Selection - -**File:** `src/modules/wds/workflows/workflow-init/project-type-selection.md` - -**Concepts integrated:** - -- ✅ **Greenfield Development** - New Product entry point -- ✅ **Brownfield Development** - Existing Product entry point -- ✅ Definitions and origins -- ✅ When to choose each -- ✅ Comparison table - -**Section:** "Software Development Terminology" - -**Usage:** - -``` -Which type of project are you working on? - -1. New Product (Greenfield) -2. Existing Product (Brownfield) -``` - ---- - -### 2. Phase 8 Workflow - -**File:** `src/modules/wds/workflows/8-ongoing-development/workflow.md` - -**Concepts integrated:** - -- ✅ **Kaizen (改善)** - Continuous Improvement (detailed) -- ✅ **Kaikaku (改革)** - Revolutionary Change (detailed) -- ✅ When to use each approach -- ✅ The balance between Kaikaku and Kaizen -- ✅ Japanese characters and meanings - -**Section:** "Lean Manufacturing Philosophy" - -**Key insight:** - -``` -Kaikaku (改革): Build product v1.0 (Phases 1-7) - ↓ -Launch - ↓ -Kaizen (改善): Continuous improvement (Phase 8) - ↓ -Kaizen cycle 1, 2, 3, 4, 5... (ongoing) -``` - ---- - -### 3. Existing Product Guide - -**File:** `src/modules/wds/workflows/8-ongoing-development/existing-product-guide.md` - -**Concepts integrated:** - -- ✅ **Brownfield + Kaizen** - Phase 8 approach -- ✅ **Greenfield + Kaikaku** - Phases 1-7 approach -- ✅ Terminology explanations - -**Title updated to:** -"Phase 8: Existing Product Development (Brownfield + Kaizen)" - -**Section:** "Two Entry Points to WDS" - ---- - -### 4. Phase 8 Step 8.8 (Iterate) - -**File:** `src/modules/wds/workflows/8-ongoing-development/steps/step-8.8-iterate.md` - -**Concepts integrated:** - -- ✅ **Kaizen vs Kaikaku** comparison -- ✅ Quick reference for designers -- ✅ Link to glossary - -**Section:** "Kaizen vs Kaikaku" - -**Usage:** -Reminds designers they're in Kaizen mode (small, continuous improvements) vs Kaikaku mode (revolutionary change). - ---- - -## Concept Usage by WDS Phase - -### Phases 1-7: New Product Development - -**Approach:** Greenfield + Kaikaku - -**Characteristics:** - -- Starting from scratch -- Complete user flows -- Revolutionary change -- Full Design Deliveries (DD-XXX) -- Months of work - -**Concepts:** - -- Greenfield Development -- Kaikaku (改革) - Revolutionary Change - ---- - -### Phase 8: Ongoing Development - -**Approach:** Brownfield + Kaizen - -**Characteristics:** - -- Existing product -- Incremental improvements -- Continuous improvement -- System Updates (SU-XXX) -- 1-2 week cycles - -**Concepts:** - -- Brownfield Development -- Kaizen (改善) - Continuous Improvement -- Muda (無駄) - Waste elimination - ---- - -## Quick Reference - -### When Starting a Project - -**Question:** "Are you building from scratch or improving existing?" - -**Answer 1: From Scratch** -→ Greenfield + Kaikaku -→ Phases 1-7 -→ Design Deliveries (DD-XXX) -→ Revolutionary change - -**Answer 2: Existing Product** -→ Brownfield + Kaizen -→ Phase 8 -→ System Updates (SU-XXX) -→ Continuous improvement - ---- - -### When in Phase 8 - -**Question:** "Should I do small improvements or big redesign?" - -**Small Improvements (Kaizen 改善):** - -- ✅ Product is working -- ✅ Want low-risk changes -- ✅ 1-2 week cycles -- ✅ Continuous learning - → Stay in Phase 8, create System Updates - -**Big Redesign (Kaikaku 改革):** - -- ✅ Product needs overhaul -- ✅ Fundamental problems -- ✅ Months of work -- ✅ Revolutionary change - → Return to Phases 1-7, create Design Deliveries - ---- - -## Documentation Hierarchy - -``` -1. Glossary (src/core/resources/wds/glossary.md) - └─ Complete definitions and philosophy - -2. Project Type Selection (workflows/workflow-init/project-type-selection.md) - └─ Greenfield vs Brownfield choice - -3. Phase 8 Workflow (workflows/8-ongoing-development/workflow.md) - └─ Kaizen vs Kaikaku philosophy - -4. Existing Product Guide (workflows/8-ongoing-development/existing-product-guide.md) - └─ Brownfield + Kaizen approach - -5. Step 8.8 (workflows/8-ongoing-development/steps/step-8.8-iterate.md) - └─ Quick reference during iteration -``` - ---- - -## Future Integration Opportunities - -### Potential additions: - -1. **Phase 1 (Project Brief)** - - Add Greenfield vs Brownfield context - - Adapt brief template based on project type - -2. **Phase 4-5 (UX Design & Design System)** - - Reference Kaikaku approach for new flows - - Reference Kaizen approach for updates - -3. **Phase 6 (Design Deliveries)** - - Distinguish DD-XXX (Kaikaku) from SU-XXX (Kaizen) - - When to use each delivery type - -4. **Integration Guide** - - Add Greenfield/Brownfield context - - How BMad handles each approach - -5. **Course Modules** - - Teach Kaizen philosophy in Module 01 - - Explain Greenfield/Brownfield in Module 02 - ---- - -## Key Takeaways - -**For Designers:** - -1. Understand if you're in Greenfield or Brownfield context -2. Choose Kaikaku (revolutionary) or Kaizen (continuous) approach -3. Use appropriate deliverables (DD-XXX vs SU-XXX) -4. Follow appropriate workflow (Phases 1-7 vs Phase 8) - -**For Documentation:** - -1. Glossary is the source of truth -2. Concepts are integrated where relevant -3. Quick references in workflow steps -4. Consistent terminology throughout - -**Philosophy:** - -- Kaikaku to establish, Kaizen to improve -- Greenfield gives freedom, Brownfield gives context -- Small improvements compound over time -- Revolutionary change when necessary, continuous improvement always - ---- - -**All concepts are now properly integrated into WDS documentation!** 🎯📚✨ diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/WDS-BMAD-INTEGRATION-REPORT.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/WDS-BMAD-INTEGRATION-REPORT.md deleted file mode 100644 index 455ef3fd6..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/WDS-BMAD-INTEGRATION-REPORT.md +++ /dev/null @@ -1,665 +0,0 @@ -# WDS Module - BMad Integration Handover Report - -**Date:** January 1, 2026 -**Prepared For:** BMad Method Integration -**Module Version:** WDS v6 -**Status:** ✅ **READY FOR INTEGRATION** - ---- - -## Executive Summary - -The Whiteport Design Studio (WDS) module has been thoroughly analyzed, cleaned, and prepared for integration into the BMad Method framework. The module is **structurally sound**, **fully documented**, and **follows BMad v6 conventions**. - -### Key Highlights - -✅ **Complete module structure** - All phases, workflows, and documentation organized -✅ **BMad-compliant architecture** - Follows v6 module patterns -✅ **Clean agent definitions** - Lean, categorized, librarian model -✅ **Strategic frameworks integrated** - VTC, Customer Awareness, Golden Circle, Action Mapping, Kathy Sierra -✅ **No breaking issues** - All critical bugs fixed, naming consistent -✅ **Installation ready** - Module installer and config created - ---- - -## Module Structure Analysis - -### 1. Directory Organization ✅ - -``` -src/modules/wds/ -├── _module-installer/ ✅ Has installer.js + install-config.yaml (NEW) -│ ├── installer.js ✅ Creates alphabetized folder structure -│ └── install-config.yaml ✅ Module configuration (CREATED TODAY) -├── agents/ ✅ 3 agent YAMLs + 1 orchestrator MD -│ ├── freya-ux.agent.yaml ✅ Lean architecture, categorized principles -│ ├── idunn-pm.agent.yaml ✅ Lean architecture, categorized principles -│ ├── saga-analyst.agent.yaml ✅ Lean architecture, categorized principles -│ └── mimir-orchestrator.md ✅ Workflow coordinator -├── data/ ✅ Presentations + design system references -│ ├── design-system/ ✅ 6 shared knowledge docs -│ └── presentations/ ✅ 7 agent presentation files -├── docs/ ✅ Complete documentation hub -│ ├── README.md ✅ Central navigation hub -│ ├── getting-started/ ✅ Installation, quick start, activation -│ ├── method/ ✅ 11 methodology guides (tool-agnostic) -│ ├── models/ ✅ 6 strategic models (external frameworks) -│ ├── learn/ ✅ 12 modules (agent-driven course) -│ ├── deliverables/ ✅ 8 artifact specifications -│ └── examples/ ✅ 2 real projects (WDS-Presentation, v6-conversion) -├── templates/ ✅ 3 YAML templates -├── workflows/ ✅ 8 phase workflows + shared components -│ ├── 00-system/ ✅ Conventions, naming, language config -│ ├── 1-project-brief/ ✅ Phase 1 (73 files) -│ ├── 2-trigger-mapping/ ✅ Phase 2 (37 files) -│ ├── 3-prd-platform/ ✅ Phase 3 (11 files) -│ ├── 4-ux-design/ ✅ Phase 4 (141 files) -│ ├── 5-design-system/ ✅ Phase 5 (21 files) -│ ├── 6-design-deliveries/ ✅ Phase 6 (8 files) -│ ├── 7-testing/ ✅ Phase 7 (9 files) -│ ├── 8-ongoing-development/ ✅ Phase 8 (10 files) -│ ├── paths/ ✅ 6 workflow path YAMLs -│ ├── project-analysis/ ✅ 24 analysis files -│ ├── shared/ ✅ 31 shared components (VTC, Content Creation) -│ ├── workflow-init/ ✅ 17 initialization files -│ └── workflow-status/ ✅ 2 status tracking files -``` - -**Total Files:** ~600+ files across workflows, documentation, and examples - ---- - -## Installation Configuration ✅ NEW - -### Created: `install-config.yaml` - -**Purpose:** Configures WDS module during BMad installation - -**Key Configuration Options:** - -1. **Project Type:** Digital product, landing page, website, other -2. **Design System Mode:** None, Figma, Component Library -3. **Methodology Version:** WDS v6, WPS2C v4, Custom -4. **Product Languages:** Multi-select (18 languages + other) -5. **Design Experience:** Beginner, intermediate, expert - -**Installer Behavior:** - -- Creates alphabetized folder structure in `/docs`: - - `A-Product-Brief/` - - `B-Trigger-Map/` - - `C-Platform-Requirements/` - - `C-Scenarios/` - - `D-Design-System/` - - `E-PRD/` (with `Design-Deliveries/` subfolder) - - `F-Testing/` - - `G-Product-Development/` -- Creates `.gitkeep` files to preserve empty directories -- No IDE-specific configuration needed - ---- - -## Agent Analysis ✅ - -### 3 Specialized Agents + 1 Orchestrator - -#### 1. Saga - WDS Analyst (`saga-analyst.agent.yaml`) - -**Role:** Business analysis, product discovery, strategic foundation -**Phases:** 1 (Product Brief), 2 (Trigger Mapping) -**Icon:** 📚 -**Status:** ✅ Lean architecture implemented - -**Key Features:** -- Categorized principles (Workflow Management, Collaboration, Analysis Approach, Documentation, Project Tracking) -- Natural conversation style (reflects back, confirms understanding) -- Creates Product Brief and Trigger Maps -- Handles Alignment & Signoff (pre-Phase 1) - -**Overlaps with BMM:** Replaces BMM Analyst (Mary) when WDS is installed - ---- - -#### 2. Freya - WDS Designer (`freya-ux.agent.yaml`) - -**Role:** UX design, interactive prototypes, scenarios -**Phases:** 4 (UX Design), 5 (Design System - optional), 7 (Testing) -**Icon:** 🎨 -**Status:** ✅ Lean architecture implemented (RENAMED from "Freyja" today) - -**Key Features:** -- Categorized principles (Workflow Management, Collaboration, UX Design, Design System, Content Creation, Project Tracking) -- Suggests Content Creation Workshop for strategic content -- Handles interactive prototypes, page specifications -- Optional Design System extraction (Phase 5) - -**Overlaps with BMM:** Replaces BMM UX Designer (Sally) when WDS is installed - -**Name Change:** All "Freyja" references updated to "Freya" for simplicity (completed today) - ---- - -#### 3. Idunn - WDS PM (`idunn-pm.agent.yaml`) - -**Role:** Technical platform requirements, design handoffs -**Phases:** 3 (Platform Requirements), 6 (Design Deliveries) -**Icon:** 📋 -**Status:** ✅ Lean architecture implemented - -**Key Features:** -- Categorized principles (Workflow Management, Collaboration, Product Approach, Project Tracking) -- Creates platform PRD (technical foundation) -- Packages complete flows for BMM handoff -- Coordinates Phase 6 deliverables - -**No BMM Overlap:** Idunn does NOT replace BMM PM Agent (different focus) - ---- - -#### 4. Mimir - WDS Orchestrator (`mimir-orchestrator.md`) - -**Role:** Workflow coordination, agent handoffs -**Status:** ✅ Documentation only (orchestrator pattern) - -**Purpose:** Guides users through phase selection and agent coordination - ---- - -## Critical Fixes Completed ✅ - -### 1. Naming Consistency: "Freyja" → "Freya" (Completed Today) - -**Issue:** Agent name inconsistency ("Freyja" vs "Freya") -**Impact:** All 5 remaining references updated -**Files Fixed:** -- `workflows/project-analysis/AGENT-INITIATION-FLOW.md` -- `workflows/workflow-init/methodology-instructions/custom-methodology-template.md` -- `workflows/workflow-init/COMPLETE-SYSTEM-SUMMARY.md` -- `data/presentations/freya-intro.md` (2 instances) - -**Status:** ✅ Zero "Freyja" references remaining (verified with grep) - ---- - -### 2. Agent Architecture: Librarian Model (Completed Recently) - -**Issue:** Agents were too verbose, risked cognitive overload -**Solution:** Implemented "Librarian Model" - lean YAMLs with on-demand loading - -**Changes:** -- Moved detailed information to external guides -- Categorized principles (6 categories for Freya, 5 for Saga, 4 for Idunn) -- Core values and routing maps only in YAML -- Reduced agent file sizes by ~60% - -**Result:** Clearer, more maintainable agent definitions - ---- - -### 3. Content Creation Framework (Completed Recently) - -**What:** Strategic content creation system using 6 models -**Location:** `workflows/shared/content-creation-workshop/` - -**Integrated Models:** -1. **Value Trigger Chain (VTC)** - Strategic foundation -2. **Customer Awareness Cycle** - Content strategy -3. **Golden Circle** - Structural hierarchy -4. **Action Mapping** - Content filter -5. **Kathy Sierra Badass Users** - Tone & frame -6. **Content Purpose** - Measurable objectives - -**Key Features:** -- Quick mode (agent-generated) vs Workshop mode (collaborative) -- Purpose-driven content (measurable success criteria) -- Tone of Voice framework for UI microcopy -- Integrated into Page Specification template - ---- - -### 4. Value Trigger Chain (VTC) Workshop (Completed Recently) - -**What:** Lightweight strategic context for design decisions -**Location:** `workflows/shared/vtc-workshop/` -**Status:** ⚠️ **ALPHA** (validated across 1 project, needs 2-4 more) - -**Structure:** -- Router (checks if Trigger Map exists) -- Creation Workshop (from scratch, 20-30 min) -- Selection Workshop (from Trigger Map, 10-15 min) -- Micro-step breakdowns (7 steps each) - -**Integration Points:** -- Phase 1: Product Pitch (simplified VTC for stakeholders) -- Phase 4: Scenario Definition (VTC for each scenario) - -**Output:** YAML file with Business Goal → Solution → User → Driving Forces → Customer Awareness - ---- - -## Documentation Quality ✅ - -### Complete Documentation Structure - -#### 1. Central Hub (`docs/README.md`) - -**Purpose:** Single entry point for all documentation -**Structure:** Clear navigation by role/goal -**Sections:** -- Getting Started (15 min) -- The WDS Method (tool-agnostic) -- Strategic Design Models (external frameworks) -- Learn WDS (agent-driven course) -- Deliverables (artifact specs) -- Examples (real projects) - -**Status:** ✅ Comprehensive, well-organized - ---- - -#### 2. Method Guides (`docs/method/`) - -**11 Methodology Guides:** -- `wds-method-guide.md` - Complete overview -- `phase-1-product-exploration-guide.md` - Strategic foundation -- `phase-2-trigger-mapping-guide.md` - User psychology -- `phase-3-prd-platform-guide.md` - Technical foundation -- `phase-4-ux-design-guide.md` - Scenarios & specifications -- `phase-5-design-system-guide.md` - Component library -- `phase-6-prd-finalization-guide.md` - PRD & handoff -- `value-trigger-chain-guide.md` - Whiteport's VTC method -- `content-creation-philosophy.md` - Strategic content approach -- `content-purpose-guide.md` - Purpose-driven content -- `tone-of-voice-guide.md` - UI microcopy guidelines - -**Status:** ✅ Consistent format, comprehensive cross-references - ---- - -#### 3. Strategic Models (`docs/models/`) - -**6 External Framework Guides:** -- `models-guide.md` - Overview & reading order -- `customer-awareness-cycle.md` - Eugene Schwartz -- `impact-effect-mapping.md` - Mijo Balic, Ingrid Domingues, Gojko Adzic -- `golden-circle.md` - Simon Sinek -- `action-mapping.md` - Cathy Moore -- `kathy-sierra-badass-users.md` - Kathy Sierra - -**Key Feature:** Full attribution, source materials, WDS method integration - -**Status:** ✅ Complete, properly attributed - ---- - -#### 4. Learn WDS Course (`docs/learn/`) - -**12 Sequential Modules:** -- Module 00: Course Overview -- Module 01: Why WDS Matters -- Module 02: Installation & Setup -- Module 03: Alignment & Signoff -- Module 04: Product Brief -- Module 05: Trigger Mapping -- Module 06: Platform Architecture -- Module 08: Initialize Scenario -- Module 09: Design System -- Module 10: Design Delivery -- Module 12: Conceptual Specs - -**Note:** Module numbering intentionally skips some numbers (legacy structure) - -**Status:** ⚠️ **Needs audit** - Structural inconsistencies identified (not blocking integration) - ---- - -#### 5. Examples (`docs/examples/`) - -**2 Real Projects:** - -1. **WDS-Presentation** - Marketing landing page - - Complete Product Brief - - Trigger Map - - Desktop concept sketches - - Benefits-first content strategy - -2. **wds-v6-conversion** - Meta example (WDS building WDS) - - Session logs with agent dialogs - - Strategic framework development - - Long-term project management patterns - - VTC Workshop creation process - -**Status:** ✅ Valuable reference implementations - ---- - -## Workflow Analysis ✅ - -### 8 Phase Workflows + Shared Components - -#### Phase 1: Project Brief (73 files) - -**Purpose:** Strategic foundation -**Agent:** Saga -**Output:** Product Brief document -**Key Workflows:** -- Complete Product Brief (12 steps) -- Alignment & Signoff (35 substeps) -- Handover to Phase 2 - -**VTC Integration:** Step 4 creates VTC as early strategic benchmark - -**Status:** ✅ Complete, well-structured - ---- - -#### Phase 2: Trigger Mapping (37 files) - -**Purpose:** User psychology & business goals -**Agent:** Saga -**Output:** Trigger Map (Mermaid diagram + documentation) -**Key Features:** -- Workshop-based approach -- Mermaid diagram generation -- Document generation -- Handover preparation - -**Status:** ✅ Complete, documented - ---- - -#### Phase 3: PRD Platform (11 files) - -**Purpose:** Technical foundation -**Agent:** Idunn -**Output:** Platform PRD -**Coverage:** Architecture, integrations, technical requirements - -**Status:** ✅ Complete, focused - ---- - -#### Phase 4: UX Design (141 files) - -**Purpose:** Scenarios & page specifications -**Agent:** Freya -**Output:** Page specifications with multi-language support -**Key Features:** -- Section-first workflow -- Purpose-based naming -- Grouped translations -- Design System integration (optional) -- Object-type routing (button, input, heading, image, link) -- Interactive prototype generation - -**VTC Integration:** Step 6 in scenario init creates VTC for each scenario - -**Status:** ✅ Complete, sophisticated - ---- - -#### Phase 5: Design System (21 files) - -**Purpose:** Component library (optional) -**Agent:** Freya -**Output:** Design System documentation -**Modes:** -- Mode A: No Design System -- Mode B: Custom Figma Design System -- Mode C: Component Library (shadcn/Radix) - -**Key Features:** -- On-demand extraction (not upfront) -- Opportunity/Risk Assessment (7 micro-steps) -- Figma MCP integration -- Component operations (initialize, create, update, add variant) - -**Status:** ✅ Complete, flexible - ---- - -#### Phase 6: Design Deliveries (8 files) - -**Purpose:** Package complete flows for BMM handoff -**Agent:** Idunn -**Output:** Design Delivery PRD + DD-XXX.yaml files -**Integration:** Prepares artifacts for BMM Implementation phase - -**Status:** ✅ Complete, BMM-ready - ---- - -#### Phase 7: Testing (9 files) - -**Purpose:** Validate implementation matches design -**Agent:** Freya -**Output:** Test scenarios -**Scope:** Design validation, not full QA - -**Status:** ✅ Complete, focused - ---- - -#### Phase 8: Ongoing Development (10 files) - -**Purpose:** Improve existing products iteratively -**Agent:** Freya -**Output:** Enhancement specifications -**Use Case:** Brownfield projects, continuous improvement - -**Status:** ✅ Complete, practical - ---- - -### Shared Workflows (31 files) - -#### VTC Workshop (`shared/vtc-workshop/`) - -**Files:** 17 -**Purpose:** Create or extract Value Trigger Chains -**Status:** ⚠️ **ALPHA** (feedback loop active) - -**Structure:** -- Router (1 file) -- Creation Workshop (7 micro-steps) -- Selection Workshop (7 micro-steps) -- Template + Guide - -**Integration:** Used in Phase 1 (Pitch) and Phase 4 (Scenarios) - ---- - -#### Content Creation Workshop (`shared/content-creation-workshop/`) - -**Files:** 8 -**Purpose:** Generate strategic content using 6-model framework -**Status:** ✅ Complete - -**Structure:** -- Workshop guide -- 6 micro-steps (Define Purpose → Load VTC → Awareness → Action → Empowerment → Order → Generate) -- Output template - -**Scope:** Strategic content only (headlines, text areas, sections) - NOT UI microcopy - ---- - -## BMad Integration Points ✅ - -### 1. Module Registration - -**Location:** Should be added to BMad's module registry -**Code:** `wds` -**Name:** "WDS: Whiteport Design Studio" -**Default Selected:** `false` - ---- - -### 2. Agent Overlap Handling - -**WDS/BMM Overlap:** - -| WDS Agent | Replaces BMM Agent | When | -| --------- | ------------------ | ----------------- | -| Saga | Mary (Analyst) | When WDS installed | -| Freya | Sally (UX Designer)| When WDS installed | -| Idunn | N/A | No replacement | - -**Recommendation:** BMM installer should detect WDS and route analysis/UX tasks to WDS agents when present - ---- - -### 3. Phase 6 → BMM Handoff - -**Critical Integration:** - -- Phase 6 (Design Deliveries) prepares artifacts for BMM Phase 4 (Implementation) -- Output format: Design Delivery PRD + DD-XXX.yaml files -- BMM agents should recognize and consume these artifacts - -**Files to Review:** -- `workflows/6-design-deliveries/design-deliveries-guide.md` -- `workflows/6-design-deliveries/workflow.md` -- `templates/design-delivery.template.yaml` - ---- - -### 4. Path Variables - -**WDS Uses BMad Path Variables:** - -- `{bmad_folder}` - Path to BMad installation (50 references) -- `{project-root}` - Project root directory (50 references) - -**Status:** ✅ Compatible with BMad v6 path system - ---- - -### 5. Workflow Status System - -**Location:** `workflows/workflow-status/` -**Purpose:** Track progress across phases -**Format:** YAML workflow status file - -**Integration:** Should integrate with BMad's workflow tracking if exists - ---- - -## Known Issues & Recommendations - -### ✅ Issues Fixed Today - -1. **Freyja → Freya Rename** - All 5 references updated -2. **Missing install-config.yaml** - Created and configured - ---- - -### ⚠️ Non-Blocking Issues - -#### 1. Learn-WDS Course Structure - -**Issue:** Module numbering inconsistent (skips 7, 11, 13+) -**Impact:** Low - course still functional -**Recommendation:** Audit and renumber in future release -**File:** `learn-audit.md` (created during analysis) - ---- - -#### 2. VTC Workshop Alpha Status - -**Issue:** VTC Workshop not validated in production yet -**Impact:** Low - methodology sound, structure complete -**Recommendation:** Remove alpha notices after 3-5 real project validations -**Status:** Feedback loop active, alpha warnings in place - ---- - -#### 3. Multiple README.md Files - -**Issue:** 8 README.md files in workflow subfolders -**BMad Convention:** Use specific names like `[TOPIC]-GUIDE.md` - -**Analysis:** These are legitimate organizational files explaining folder contents (not top-level module READMEs) - -**Recommendation:** Keep as-is or rename in future cleanup (not blocking) - -**Files:** -- `workflows/4-ux-design/README.md` (Phase 4 overview) -- `workflows/5-design-system/README.md` (Phase 5 overview) -- `workflows/1-project-brief/alignment-signoff/substeps/README.md` (Substeps overview) -- `workflows/workflow-init/methodology-instructions/README.md` (Methodology options) -- `workflows/4-ux-design/page-specification-quality/README.md` -- `workflows/4-ux-design/steps/step-02-substeps/README.md` -- `workflows/project-analysis/conversation-persistence/README.md` - ---- - -### 🟢 Strengths - -1. **Comprehensive Documentation** - Every phase, workflow, and concept documented -2. **Strategic Frameworks** - Deep integration of proven methodologies -3. **Real Examples** - Actual project artifacts for reference -4. **Lean Agent Architecture** - Maintainable, scalable -5. **BMad-Compliant Structure** - Follows v6 conventions -6. **Flexible Methodology** - Supports WDS v6, WPS2C v4, custom -7. **Multi-Language Support** - Built-in internationalization -8. **Content Creation System** - Sophisticated strategic content framework - ---- - -## Integration Checklist - -### For BMad Team - -- [ ] Add WDS module to BMad registry -- [ ] Test module installation via `npx bmad-method@alpha install` -- [ ] Verify folder structure creation (alphabetized docs folders) -- [ ] Test agent activation (Saga, Freya, Idunn) -- [ ] Test WDS/BMM agent overlap routing -- [ ] Test Phase 6 → BMM Phase 4 handoff -- [ ] Verify path variable resolution (`{bmad_folder}`, `{project-root}`) -- [ ] Test workflow status integration -- [ ] Validate install-config.yaml questions during installation -- [ ] Test methodology selection (WDS v6, WPS2C v4, custom) -- [ ] Review Design Delivery PRD format compatibility -- [ ] Test multi-language configuration -- [ ] Verify Design System mode selection - ---- - -## Files Modified Today (Session 2026-01-01) - -1. `workflows/project-analysis/AGENT-INITIATION-FLOW.md` - Fixed "Freyja" → "Freya" -2. `workflows/workflow-init/methodology-instructions/custom-methodology-template.md` - Fixed "Freyja" → "Freya" -3. `workflows/workflow-init/COMPLETE-SYSTEM-SUMMARY.md` - Fixed "Freyja" → "Freya" -4. `data/presentations/freya-intro.md` - Fixed "Freyja" → "Freya" (2 instances) -5. `_module-installer/install-config.yaml` - **CREATED NEW FILE** - ---- - -## Conclusion - -The WDS module is **production-ready** for BMad integration. The codebase is clean, well-documented, and follows BMad v6 conventions. The only critical missing piece (install-config.yaml) has been created today. - -### Integration Confidence: 95% - -**Remaining 5%:** Testing in live BMad installation environment - ---- - -## Contact & Support - -**Module Maintainer:** Whiteport Collective -**Integration Questions:** Refer to this report -**Documentation:** `src/modules/wds/docs/README.md` - ---- - -**Report Generated:** January 1, 2026 -**Analysis Duration:** Comprehensive deep analysis completed -**Module Status:** ✅ **READY FOR INTEGRATION** - ---- - -🎉 **WDS is ready to join the BMad family!** 🎉 - diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/WDS-DEEP-ANALYSIS-SUMMARY.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/WDS-DEEP-ANALYSIS-SUMMARY.md deleted file mode 100644 index 3b937166b..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/WDS-DEEP-ANALYSIS-SUMMARY.md +++ /dev/null @@ -1,224 +0,0 @@ -# WDS Module - Deep Analysis Summary - -**Date:** January 1, 2026 -**Status:** ✅ ALL TASKS COMPLETE - ---- - -## What Was Done Today - -### 1. ✅ Comprehensive Module Analysis - -- Analyzed entire WDS module structure (~600+ files) -- Verified BMad v6 compliance -- Checked agent definitions consistency -- Validated workflow connections -- Verified documentation completeness -- Identified and fixed all critical issues - ---- - -### 2. ✅ Critical Fixes - -#### A. Naming Consistency: "Freyja" → "Freya" - -**Fixed 5 remaining references:** -- `workflows/project-analysis/AGENT-INITIATION-FLOW.md` -- `workflows/workflow-init/methodology-instructions/custom-methodology-template.md` -- `workflows/workflow-init/COMPLETE-SYSTEM-SUMMARY.md` -- `data/presentations/freya-intro.md` (2 instances) - -**Result:** Zero "Freyja" references remaining in codebase - ---- - -#### B. Created Missing Installation Configuration - -**New File:** `_module-installer/install-config.yaml` - -**Includes:** -- Project type selection (digital product, landing page, website, other) -- Design system mode (none, Figma, component library) -- Methodology version (WDS v6, WPS2C v4, custom) -- Multi-language support (18 languages) -- Design experience level (beginner, intermediate, expert) - -**Result:** WDS module now fully installable via BMad installer - ---- - -### 3. ✅ Module Quality Assessment - -**Overall Grade: A+** - -#### Strengths - -✅ **Complete Documentation** - Every phase, workflow, concept documented -✅ **Strategic Frameworks** - VTC, Customer Awareness, Golden Circle, Action Mapping, Kathy Sierra -✅ **Real Examples** - 2 complete project implementations -✅ **Lean Agent Architecture** - Categorized principles, librarian model -✅ **BMad-Compliant Structure** - Follows v6 conventions perfectly -✅ **Flexible Methodology** - Supports multiple workflow versions -✅ **Multi-Language Support** - Built-in internationalization -✅ **Content Creation System** - 6-model strategic framework - ---- - -#### Minor Issues (Non-Blocking) - -⚠️ **Learn-WDS Course Numbering** - Inconsistent module numbers (skips 7, 11, 13+) -⚠️ **VTC Workshop Alpha Status** - Needs validation in 2-4 more real projects -⚠️ **Multiple README.md Files** - 8 workflow subfolders use README.md (BMad prefers specific names) - -**None of these block integration** - ---- - -### 4. ✅ Integration Readiness - -**BMad Integration Points Verified:** - -1. **Module Registration** - Ready for BMad registry -2. **Agent Overlap** - Saga/Freya replace BMM Mary/Sally when WDS installed -3. **Phase 6 Handoff** - Design Deliveries format ready for BMM consumption -4. **Path Variables** - Uses `{bmad_folder}` and `{project-root}` correctly -5. **Workflow Status** - Compatible with BMad tracking system - -**Installation Configuration:** -- ✅ `install-config.yaml` created -- ✅ `installer.js` creates proper folder structure -- ✅ Compatible with BMad v6 installation flow - ---- - -### 5. ✅ Deliverables - -#### A. Comprehensive Handover Report - -**File:** `WDS-BMAD-INTEGRATION-REPORT.md` - -**Contents:** -- Executive Summary -- Module Structure Analysis -- Installation Configuration Details -- Agent Analysis (Saga, Freya, Idunn, Mimir) -- Critical Fixes Documentation -- Documentation Quality Assessment -- Workflow Analysis (all 8 phases) -- BMad Integration Points -- Known Issues & Recommendations -- Integration Checklist for BMad Team - -**Length:** Comprehensive (20+ sections, ~500 lines) - ---- - -#### B. This Summary Document - -**File:** `WDS-DEEP-ANALYSIS-SUMMARY.md` - -**Purpose:** Quick reference for what was accomplished - ---- - -## Key Metrics - -| Metric | Count | -| -------------------------- | ----- | -| **Total Files Analyzed** | ~600+ | -| **Agents** | 4 | -| **Phase Workflows** | 8 | -| **Shared Workflows** | 2 | -| **Method Guides** | 11 | -| **Strategic Models** | 6 | -| **Course Modules** | 12 | -| **Deliverable Specs** | 8 | -| **Real Examples** | 2 | -| **Critical Issues Fixed** | 2 | -| **Files Created Today** | 3 | -| **Files Modified Today** | 5 | - ---- - -## Module Statistics - -``` -src/modules/wds/ -├── Agents: 4 files -├── Data: 13 files -├── Documentation: ~150 files -├── Templates: 3 files -├── Workflows: ~430 files -└── Total: ~600+ files - -Documentation Quality: ✅ Excellent -Code Organization: ✅ Clean -BMad Compliance: ✅ Full -Integration Readiness: ✅ 95% (testing in BMad needed) -``` - ---- - -## Files Created/Modified Today - -### Created (3 files) - -1. `_module-installer/install-config.yaml` - Module installation configuration -2. `WDS-BMAD-INTEGRATION-REPORT.md` - Comprehensive handover report -3. `WDS-DEEP-ANALYSIS-SUMMARY.md` - This summary - -### Modified (5 files) - -1. `workflows/project-analysis/AGENT-INITIATION-FLOW.md` -2. `workflows/workflow-init/methodology-instructions/custom-methodology-template.md` -3. `workflows/workflow-init/COMPLETE-SYSTEM-SUMMARY.md` -4. `data/presentations/freya-intro.md` (2 instances in same file) - ---- - -## Next Steps for BMad Integration - -### For BMad Team - -1. **Review Integration Report** - `WDS-BMAD-INTEGRATION-REPORT.md` -2. **Add WDS to Module Registry** - Register as optional module -3. **Test Installation** - Via `npx bmad-method@alpha install` -4. **Verify Agent Routing** - Test WDS/BMM agent overlap -5. **Test Phase 6 Handoff** - Design Deliveries → BMM Implementation -6. **Production Testing** - 1-2 real projects to validate - -### For WDS Team - -1. **Monitor Alpha Feedback** - VTC Workshop validation -2. **Course Audit** - Fix learn module numbering (future release) -3. **README Cleanup** - Consider renaming workflow README.md files (future release) - ---- - -## Conclusion - -The WDS module is **production-ready** for BMad integration. All critical issues have been resolved, documentation is comprehensive, and the module follows BMad v6 conventions perfectly. - -### Integration Confidence: 95% - -**Remaining 5%:** Real-world testing in BMad installation environment - ---- - -## Questions? - -- **Integration Questions:** See `WDS-BMAD-INTEGRATION-REPORT.md` -- **Module Documentation:** `src/modules/wds/docs/README.md` -- **Agent Details:** `src/modules/wds/agents/*.agent.yaml` -- **Workflows:** `src/modules/wds/workflows/` - ---- - -**Analysis Completed:** January 1, 2026 -**All Tasks:** ✅ COMPLETE -**Module Status:** ✅ **READY FOR INTEGRATION** - ---- - -🎉 **The WDS module is ready to join BMad!** 🎉 - diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/WDS-V6-CONVERSION-ROADMAP.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/WDS-V6-CONVERSION-ROADMAP.md deleted file mode 100644 index 6eb8acc03..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/WDS-V6-CONVERSION-ROADMAP.md +++ /dev/null @@ -1,2560 +0,0 @@ -# WDS v6 Conversion Roadmap - -**Document Purpose:** Complete record of all decisions, context, and progress for converting Whiteport Design Studio to BMad Method v6 format. This document allows continuation of work if the conversation is lost. - -**Created:** December 2, 2025 -**Last Updated:** December 9, 2025 -**Status:** In Progress - Course Development Phase (Getting Started Complete) - ---- - -## Table of Contents - -1. [Project Overview](#1-project-overview) -2. [Key Decisions Made](#2-key-decisions-made) -3. [Repository Setup](#3-repository-setup) -4. [Module Architecture](#4-module-architecture) -5. [Output Folder Structure](#5-output-folder-structure) -6. [Design Philosophy](#6-design-philosophy) -7. [Development Order](#7-development-order) -8. [Files Created So Far](#8-files-created-so-far) -9. [Next Steps](#9-next-steps) -10. [Reference Information](#10-reference-information) - ---- - -## 1. Project Overview - -### What is WDS? - -**Whiteport Design Studio (WDS)** is a design-focused methodology module for the BMad Method ecosystem. It provides a complete UX/UI design workflow from product exploration through detailed component specifications. - -### Origin - -WDS evolves from **Whiteport Sketch-to-Code (WPS2C)**, a BMad v4 "expansion pack." The v6 conversion transforms it into a proper BMad module following v6 architecture. - -### Core Purpose - -WDS focuses **exclusively on design** - it creates the design artifacts that feed into development modules like BMad Method (BMM). WDS does NOT include development/backlog functionality. - -### Integration Model - -``` -WDS (Design) ────────► E-UI-Roadmap/ ────────► BMM (Development) - │ │ │ - │ Creates: │ Bridge: │ Consumes: - │ • Product Brief │ • Priority mapping │ • Architecture - │ • Trigger Map │ • Technical notes │ • Stories - │ • Scenarios │ • Handoff checklist │ • Implementation - │ • PRD │ │ - │ • Design System │ │ -``` - ---- - -## 2. Key Decisions Made - -### 2.1 Module Name - -**Decision:** Whiteport Design Studio (WDS) - -**Alternatives Considered:** - -- BMad Design Studio -- BMad UX - -**Reasoning:** Preserve brand identity, acknowledge contribution origin, maintain "Whiteport" recognition. - -### 2.2 Repository Approach - -**Decision:** Fork BMad-METHOD repository - -**Alternatives Considered:** - -- Standalone repository -- Rename existing WPS2C repo - -**Reasoning:** - -- Maximum adoption through BMad ecosystem -- Path to official module status via PR -- Shared core infrastructure -- Automatic ecosystem integration - -**Fork Details:** - -- Origin: `https://github.com/whiteport-collective/whiteport-design-studio.git` -- Upstream: `https://github.com/bmad-code-org/BMAD-METHOD.git` - -### 2.3 Working Branch - -**Decision:** Work directly on `main` branch - -**Reasoning:** - -- Simpler workflow during development -- WDS is substantial addition, not small tweak -- Fork effectively becomes WDS home -- Will switch to feature branches after official adoption - -### 2.4 Workflow Approach - -**Decision:** Phase-selectable (not rigid tracks) - -**Description:** Users select individual phases based on project needs rather than choosing from predefined tracks. - -**Examples:** - -- Landing page → Phases 1, 4, 5 -- Full product → All 6 phases -- Design system only → Phases 4, 5 - -### 2.5 Development Handoff - -**Decision:** No development artifacts in WDS - -**Description:** WDS creates design artifacts only. Development (backlog, stories, architecture) handled by BMM. `E-UI-Roadmap/` serves as the integration bridge. - -### 2.6 README Convention - -**Decision:** One README.md per repository - -**Convention:** Only `README.md` at module root; all other documentation uses `xxx-guide.md` naming pattern. - -**Examples:** - -- ✅ `wds/README.md` (only one) -- ✅ `wds/docs/method/wds-method-guide.md` -- ✅ `wds/docs/quick-start-guide.md` -- ❌ `wds/docs/README.md` (not allowed) -- ❌ `wds/examples/README.md` (not allowed) - ---- - -## 3. Repository Setup - -### 3.1 Local Path - -``` -C:\dev\WDS\whiteport-design-studio -``` - -### 3.2 Git Remotes - -``` -origin → https://github.com/whiteport-collective/whiteport-design-studio.git -upstream → https://github.com/bmad-code-org/BMAD-METHOD.git -``` - -### 3.3 Syncing with Upstream - -```bash -git fetch upstream -git merge upstream/main -git push origin main -``` - ---- - -## 4. Module Architecture - -### 4.1 Module Location - -``` -src/modules/wds/ -``` - -### 4.2 Folder Structure - -``` -src/modules/wds/ -├── _module-installer/ # Installation configuration -│ └── install-config.yaml # TO CREATE -│ -├── agents/ # WDS agents (v6 YAML format) - Norse Pantheon -│ ├── saga-analyst.agent.yaml # Saga-Analyst - TO CREATE -│ ├── freya-pm.agent.yaml # Freya-PM - TO CREATE -│ └── baldr-ux.agent.yaml # Baldr-UX - TO CREATE -│ -├── workflows/ # Phase workflows -│ ├── 0-init/ # Entry point - TO CREATE -│ ├── 1-product-exploration/ # Phase 1 - TO CREATE -│ ├── 2-user-research/ # Phase 2 - TO CREATE -│ ├── 3-requirements/ # Phase 3 - TO CREATE -│ ├── 4-conceptual-design/ # Phase 4 - TO CREATE -│ ├── 5-component-design/ # Phase 5 - TO CREATE -│ └── 6-dev-integration/ # Phase 6 - TO CREATE -│ -├── data/ # Standards, frameworks -│ ├── presentations/ # Agent intro presentations -│ ├── positioning-framework.md # ICP framework - TO CREATE -│ └── ... -│ -├── docs/ # Documentation (xxx-guide.md) -│ ├── method/ # Methodology guides -│ │ ├── wds-method-guide.md # Main overview - TO CREATE -│ │ └── phase-guides/ # Per-phase guides - TO CREATE -│ └── images/ # Diagrams, visuals -│ -├── examples/ # Example projects -│ ├── dog-week-patterns/ # Full reference implementation -│ ├── conversation-examples/ # Dialog flow examples -│ └── starter-project/ # Try-it-yourself project -│ -├── reference/ # Templates, checklists -│ ├── templates/ # Document templates -│ └── checklists/ # Phase completion checklists -│ -├── teams/ # Team configurations -│ -└── README.md # Module entry point ✅ CREATED -``` - -### 4.3 Agents - The Norse Pantheon 🏔️ - -| Agent | File | Role | Norse Meaning | Status | -| ----------------------- | ------------------------- | -------------------------- | ----------------------------------- | ----------------------- | -| **Saga the Analyst** | `saga-analyst.agent.yaml` | Business & Product Analyst | Goddess of stories & wisdom | ✅ **COMPLETE (Dec 9)** | -| **Idunn the PM** | `idunn-pm.agent.yaml` | Product Manager | Goddess of renewal & youth | ✅ **COMPLETE (Dec 9)** | -| **Freya the Designer** | `freya-ux.agent.yaml` | UX/UI Designer | Goddess of beauty, magic & strategy | ✅ **COMPLETE (Dec 9)** | - -**Why "Name the Function" format?** - -- Reads naturally: "Saga the Analyst" -- Distinctive Norse mythology names -- Function is immediately clear -- Creates unique WDS brand identity - ---- - -## 5. Output Folder Structure - -### 5.1 The A-B-C-D-E Convention - -WDS creates an alphabetized folder structure in the user's project `docs/` folder: - -``` -docs/ -├── A-Product-Brief/ # Phase 1: Product Exploration outputs -├── B-Trigger-Map/ # Phase 2: Trigger Mapping outputs -├── C-Platform-Requirements/ # Phase 3: Technical foundation (platform, architecture, integrations) -├── C-Scenarios/ # Phase 4: UX Design (sketches & specifications) -├── D-Design-System/ # Phase 5: Component Library (optional, parallel) -├── E-PRD # Phase 6: Design-Deliveries,Packaged flows for BMM handoff -├── F-Testing/ # Phase 7: Testing validation and issues -└── G-Product-Development/ # Phase 8: Ongoing product development (existing products) -``` - -**Note:** - -- **C-Platform-Requirements/** and **C-Scenarios/** both use "C" prefix because Phase 3 and 4 run in parallel -- **Platform Requirements** (C-Platform-Requirements/) stays separate - technical foundation -- **E-PRD/** contains both the PRD and Design Deliveries (DD-XXX.yaml packages for BMM handoff) -- F-Testing/ contains test scenarios, validation results, and issues created during Phase 7 -- G-Product-Development/ is used for Phase 8 (ongoing improvements to existing products) - -### 5.2 Why Alphabetical Prefix? - -| Reason | Benefit | -| ---------------- | ----------------------------------- | -| Visual namespace | Clearly grouped in file explorers | -| Brand signature | "A-B-C-D-E = WDS" recognition | -| Non-conflicting | Won't clash with other docs folders | -| Natural sort | Always grouped together | -| Professional | Enterprise documentation feel | - -### 5.3 Phase-to-Folder Mapping - -| Phase | # | Name | Output Folder | -| ----- | ----------------------- | ---------------------------------------- | -------------------------- | -| 1 | Product Exploration | Product Brief | `A-Product-Brief/` | -| 2 | Trigger Mapping | User psychology & business goals | `B-Trigger-Map/` | -| 3 | PRD Platform | Technical foundation (platform only) | `C-Platform-Requirements/` | -| 4 | UX Design | Scenarios, sketches, specifications | `C-Scenarios/` | -| 5 | Design System | Component library (optional, parallel) | `D-Design-System/` | -| 6 | PRD & Design Deliveries | PRD + packaged flows for BMM handoff | `E-PRD/` | -| 7 | Testing | Designer validation of implementation | `F-Testing/` | -| 8 | Product Development | Ongoing improvements (existing products) | `G-Product-Development/` | - -### 5.4 E-PRD Structure (PRD + Design Deliveries) - -**E-PRD/ contains both the PRD and Design Deliveries:** - -**Phase 3: Platform Requirements (Technical Foundation)** - -``` -C-Platform-Requirements/ -├── 00-Platform-Overview.md # Platform summary -├── 01-Platform-Architecture.md # Tech stack, infrastructure -├── 02-Data-Model.md # Core entities, relationships -├── 03-Integration-Map.md # External services -├── 04-Security-Framework.md # Auth, authorization, data protection -└── 05-Technical-Constraints.md # What design needs to know -``` - -**Purpose:** Technical foundation created by WDS. Referenced by PRD but kept separate. - -**Phase 6: E-PRD (PRD + Design Deliveries)** - -``` -E-PRD/ -├── 00-PRD.md # Main PRD document -│ ├── Reference to Platform # Links to C-Platform-Requirements/ -│ ├── Functional Requirements # From design deliveries -│ ├── Feature Dependencies # Organized by epic -│ └── Development Sequence # Priority order -│ -└── Design-Deliveries/ # Packaged flows for BMM handoff - ├── DD-001-login-onboarding.yaml - ├── DD-002-booking-flow.yaml - ├── DD-003-profile-management.yaml - └── ... -``` - -**Each Design Delivery (DD-XXX.yaml) contains:** - -- Flow metadata (name, epic, priority) -- Scenario references (which pages in C-Scenarios/) -- Component references (which components in D-Design-System/) -- Functional requirements discovered during design -- Test scenarios (validation criteria) -- Technical notes and constraints - -**Key Insight:** E-PRD/ is a **unified folder** containing both the PRD document and the design delivery packages. BMM can consume either the PRD or the individual design deliveries. - ---- - -## 6. Design Philosophy - -### 6.1 Core Principles - -#### Principle 1: Soft Language - -**Instead of:** "MUST", "FORBIDDEN", "NEVER", "SYSTEM FAILURE" - -**Use:** Collaborative, identity-based guidance - -**Reasoning:** User experience shows that harsh enforcement language makes agents MORE likely to ignore instructions, not less. - -**Example - Before:** - -```markdown -## MANDATORY RULES - -- 🛑 NEVER generate without input -- 🚫 FORBIDDEN: Multiple questions -- ❌ SYSTEM FAILURE if you skip -``` - -**Example - After:** - -```markdown -## How We Work Together - -You're a thoughtful guide who helps designers create great products. - -Your rhythm: - -- Ask one question, then listen -- Reflect back what you heard -- Build the document together -``` - -#### Principle 2: Show, Don't Tell - -**Instead of:** Explaining rules - -**Use:** Concrete examples - -**Reasoning:** People (and LLMs) learn better from examples than abstract rules. - -**Implementation:** - -- Complete artifacts as examples (not rule descriptions) -- Conversation flow examples -- Dog Week as reference implementation - -#### Principle 3: Example Projects for Adoption - -**Purpose:** - -- Let people try before adopting -- Show what success looks like -- Lower barrier to entry -- Build credibility - -**Implementation:** - -- Dog Week patterns as full reference -- Starter project for practice -- Conversation examples showing dialog flow - -### 6.2 Known Problems to Mitigate - -| Problem | Observed Behavior | WDS Solution | -| --------------------------- | ------------------------------ | ------------------------------------------- | -| Agents ignore instructions | Generate without thinking | Identity-based personas + examples | -| Inconsistent output formats | Specs look different each time | Complete template examples | -| Question dumping | 20 questions at once | Conversation examples showing one-at-a-time | - -### 6.3 Positive Language Guidelines - -**Principle:** Frame everything in terms of benefits and opportunities, not problems and costs. - -**Patterns to Avoid:** - -| Negative Pattern | Positive Alternative | -| ---------------------------------------- | ---------------------------------------------- | -| "Nothing kills a project faster than..." | "It's valuable to discover early..." | -| "expensive development problems" | "easy to address while solutions are flexible" | -| "Finding them later is expensive" | "Finding them now means more options" | -| "Don't do X" | "What works well is Y" | -| "Avoid these mistakes" | "Successful patterns include..." | -| "This prevents failure" | "This enables success" | -| "You'll waste time if..." | "You'll save time by..." | - -**The Reframe Test:** - -When writing guidance, ask: _"Am I describing what TO DO or what NOT to do?"_ - -Good WDS documentation: - -- Celebrates early discovery (not fears late discovery) -- Describes successful patterns (not failure modes) -- Frames constraints as opportunities (not limitations) -- Uses "enables" not "prevents" - -**Example Transformation:** - -Before: - -> "Nothing kills a project faster than discovering in development that a core feature is technically impossible." - -After: - -> "It's a great morale boost when you've proven your core features will work. And if you discover limitations, it's valuable to know them early so design can account for them from the start." - -### 6.4 Instruction Style - -**Identity-First:** - -```markdown -## Who You Are - -You're Saga, a thoughtful analyst who genuinely cares -about understanding the product before documenting it. - -You prefer deep conversations over quick surveys. You ask one -thing at a time because you're actually listening. -``` - -**Experience-Focused:** - -```markdown -## The Conversation Style - -A good session feels like coffee with a wise mentor: - -- They ask something interesting -- You share your thinking -- They reflect it back -- Together you discover something new -``` - -**Gentle Reminders:** - -```markdown -## Helpful Patterns - -What works well: - -- One question at a time keeps things focused -- Reflecting back shows you're listening - -What tends to feel less collaborative: - -- Listing many questions (feels like a survey) -- Generating without checking in -``` - ---- - -## 6.5 WDS Phases & Deliverables (Aligned Dec 9, 2025) - -### Complete Phase Structure - -**Phase 1: Product Exploration** - -- **Output Folder:** `A-Product-Brief/` -- **Deliverable:** Product Brief with vision, positioning, ICP, success criteria -- **Agent:** Saga WDS Analyst - -**Phase 2: Trigger Mapping** - -- **Output Folder:** `B-Trigger-Map/` -- **Deliverable:** Trigger Map with business goals, personas, usage goals, Feature Impact Analysis -- **Agent:** Saga WDS Analyst - -**Phase 3: PRD Platform** - -- **Output Folder:** `C-Platform-Requirements/` -- **Deliverable:** Technical foundation (platform, architecture, data model, integrations, security) -- **Agent:** Freya WDS PM -- **Note:** Runs in parallel with Phase 4 - -**Phase 4: UX Design** - -- **Output Folder:** `C-Scenarios/` -- **Deliverable:** Interactive prototypes, scenarios, sketches, specifications with Object IDs -- **Agent:** Baldr WDS Designer -- **Note:** Runs in parallel with Phase 3 - -**Phase 5: Design System** - -- **Output Folder:** `D-Design-System/` -- **Deliverable:** Component library (atoms, molecules, organisms) with design tokens -- **Agent:** Baldr WDS Designer -- **Note:** Optional, runs in parallel with Phase 4 - -**Phase 6: PRD & Design Deliveries** - -- **Output Folder:** `E-PRD/` -- **Deliverable:** Complete PRD (00-PRD.md) + Design Deliveries (DD-XXX.yaml packages) -- **Agent:** Freya WDS PM -- **Note:** PRD references C-Platform-Requirements/, organizes functional requirements by epic - -**Phase 7: Testing** - -- **Output Folder:** `F-Testing/` -- **Deliverable:** Test scenarios, validation results, issues -- **Agent:** Baldr WDS Designer -- **Note:** Designer validates BMM implementation - -**Phase 8: Product Development** - -- **Output Folder:** `G-Product-Development/` -- **Deliverable:** Ongoing improvements to existing products (Kaizen/Brownfield) -- **Agent:** Baldr WDS Designer -- **Note:** Alternative entry point for existing products - -### Key Methodology Features - -**Feature Impact Analysis (Phase 2):** - -- Scoring system for prioritizing features -- Positive drivers: +3/+2/+1 by priority -- Negative drivers: +4/+3/+2 (higher due to loss aversion) -- Bonuses for multi-group and multi-driver features -- Outputs ranked feature list for MVP planning - -**Platform Requirements (Phase 3):** - -- Technical foundation work (platform, infrastructure) -- Proofs of concept for risky features -- Experimental endpoints that can start before design -- Runs in parallel with design work (not sequential) - -**Design System (Phase 5):** - -- Optional - chosen during project setup -- Parallel - builds alongside Phase 4, not after -- Unified naming for Figma/Code integration -- Component library selection guidance - -**PRD Structure (Phase 6):** - -- E-PRD/ contains both PRD document and Design Deliveries subfolder -- PRD references C-Platform-Requirements/ (not duplicated) -- Design Deliveries (DD-XXX.yaml) package complete flows for BMM handoff -- Iterative handoff model - hand off flows as they're ready - ---- - -### 7.1 Chosen Approach: Methodology-First - -**Order:** - -1. Define the methodology (phases, outputs, connections) -2. Create workflows that implement the methodology -3. Create agents that guide users through workflows -4. Create examples that demonstrate the methodology - -**Reasoning:** - -- The methodology IS the product -- Agents serve the methodology, not vice versa -- User is crystal clear on the workflow (already proven in WPS2C v4) -- Not inventing new process, porting existing one - -### 7.2 Detailed Order - -#### Phase 1: Define the Methodology - -| Order | Component | File | Status | -| ----- | --------------- | -------------------------------------------------- | ----------- | -| 1 | Method Overview | `docs/method/wds-method-guide.md` | ✅ COMPLETE | -| 2 | Phase 1 Guide | `docs/method/phase-1-Product-exploration-guide.md` | ✅ COMPLETE | -| 3 | Phase 2 Guide | `docs/method/phase-2-trigger-mapping-guide.md` | ✅ COMPLETE | -| 4 | Phase 3 Guide | `docs/method/phase-3-PRD-Platform-guide.md` | ✅ COMPLETE | -| 5 | Phase 4 Guide | `docs/method/phase-4-ux-design-guide.md` | ✅ COMPLETE | -| 6 | Phase 5 Guide | `docs/method/phase-5-design-system-guide.md` | ✅ COMPLETE | -| 7 | Phase 6 Guide | `docs/method/phase-6-PRD-Finalization-guide.md` | ✅ COMPLETE | - -**Methodology Phase Complete!** All phase guides refined with: - -- Positive language throughout (no "expensive problems", "kills projects", etc.) -- Phase titles with artifacts in parentheses -- Removed duration estimates (project-dependent) -- Feature Impact Analysis with scoring system (Phase 2) -- Step 4E: PRD Update during design (Phase 4) -- Design System as optional parallel workflow (Phase 5) -- PRD Finalization with continuous handoff model (Phase 6) -- Unified naming conventions for Figma/Code integration -- Code examples moved to templates/examples (not in guides) - -#### Phase 2: Create Examples - -| Order | Component | Location | Status | -| ----- | ---------------------------- | ------------------------------------- | --------- | -| 8 | Dog Week Examples | `examples/dog-week-patterns/` | TO CREATE | -| 9 | Conversation Examples | `examples/conversation-examples/` | TO CREATE | -| 10 | Starter Project | `examples/starter-project/` | TO CREATE | -| 10b | **WDS Trigger Map** | `examples/wds-trigger-map/` | TO CREATE | -| 10c | **Trigger Mapping Workshop** | `workflows/trigger-mapping-workshop/` | TO CREATE | - -**WDS Trigger Map Example:** -Create a Trigger Map for WDS itself as a meta-example - shows the methodology applied to the methodology. Includes: - -- WDS Vision & SMART Objectives -- Target Groups (designers, teams, agencies) -- Personas with alliterative names -- Usage goals (positive & negative) -- Visual trigger map diagram - -This serves as both documentation and inspiration for users. - -**Trigger Mapping Workshop (Standalone):** -Create a standalone Trigger Mapping workshop that can be used: - -- In WDS as part of Phase 2 -- In BMM as a brainstorming/strategic alignment session -- In any project needing user-business alignment - -This makes the Trigger Mapping methodology available even in projects not driven by designers. Could be contributed to BMM's brainstorming workflows or CIS (Creative Intelligence Suite). - -Includes: - -- Workshop facilitation workflow -- Agent instructions for running the workshop -- Template for Trigger Map output -- Integration points with BMM workflows - -#### Phase 3: Create Workflows - -| Order | Component | Location | Status | -| ----- | -------------------- | -------------------------------- | ----------------------- | -| 11 | workflow-init | `workflows/workflow-init/` | ✅ COMPLETE | -| 12a | Phase 1 Workflow | `workflows/1-project-brief/` | ✅ COMPLETE | -| 12b | Phase 2 Workflow | `workflows/2-trigger-mapping/` | ✅ COMPLETE | -| 12c | Phase 3 Workflow | `workflows/3-prd-platform/` | ✅ COMPLETE | -| 12d | **Phase 4 Workflow** | `workflows/4-ux-design/` | ✅ **COMPLETE (Dec 4)** | -| 12e | **Phase 5 Workflow** | `workflows/5-design-system/` | ✅ **COMPLETE (Dec 9)** | -| 12f | **Phase 6 Workflow** | `workflows/6-design-deliveries/` | ✅ **COMPLETE** | - -#### Phase 4: Create Agents (The Norse Pantheon) - -| Order | Component | File | Status | -| ----- | ----------------------- | ------------------------------------ | ----------- | -| 13 | **Saga-Analyst** | `agents/saga-analyst.agent.yaml` | ✅ COMPLETE | -| 13b | **Saga Presentation** | `data/presentations/saga-intro.md` | ✅ COMPLETE | -| 14 | **Idunn-PM** | `agents/idunn-pm.agent.yaml` | ✅ COMPLETE | -| 14b | **Idunn Presentation** | `data/presentations/idunn-intro.md` | ✅ COMPLETE | -| 15 | **Freya-Designer** | `agents/freya-ux.agent.yaml` | ✅ COMPLETE | -| 15b | **Freya Presentation** | `data/presentations/freya-intro.md` | ✅ COMPLETE | - -#### Phase 5: Finalize - -| Order | Component | File | Status | -| ----- | ------------------ | -------------------------------- | ----------- | -| 16 | **Install Config** | `_module-installer/installer.js` | ✅ COMPLETE | -| 17 | **Teams** | `teams/` | ✅ COMPLETE | - ---- - -## 8. Files Created So Far - -### 8.1 Repository Root - -| File | Purpose | Status | -| ------------------------------ | ------------------------------------------- | ---------- | -| `README.md` | Fork overview, WDS contribution explanation | ✅ CREATED | -| `WDS-V6-CONVERSION-ROADMAP.md` | This document | ✅ CREATED | - -### 8.2 Methodology Documentation - -| Path | Purpose | Status | -| ------------------------------------------------------------------ | ------------------------- | ----------- | -| `src/modules/wds/docs/method/wds-method-guide.md` | Main methodology overview | ✅ COMPLETE | -| `src/modules/wds/docs/method/phase-1-Product-exploration-guide.md` | Phase 1 guide | ✅ COMPLETE | -| `src/modules/wds/docs/method/phase-2-trigger-mapping-guide.md` | Phase 2 guide | ✅ COMPLETE | -| `src/modules/wds/docs/method/phase-3-PRD-Platform-guide.md` | Phase 3 guide | ✅ COMPLETE | -| `src/modules/wds/docs/method/phase-4-ux-design-guide.md` | Phase 4 guide | ✅ COMPLETE | -| `src/modules/wds/docs/method/phase-5-design-system-guide.md` | Phase 5 guide | ✅ COMPLETE | -| `src/modules/wds/docs/method/phase-6-PRD-Finalization-guide.md` | Phase 6 guide | ✅ COMPLETE | - -### 8.3 Module Structure (Folders Created, Content Pending) - -| Path | Purpose | Status | -| ------------------------------------------------------- | --------------------------------------- | ----------------------- | -| `src/modules/wds/` | Module root | ✅ CREATED | -| `src/modules/wds/README.md` | Module entry point | ✅ CREATED | -| `src/modules/wds/_module-installer/` | Install config folder | EMPTY | -| `src/modules/wds/agents/` | Agents folder | PARTIAL (saga skeleton) | -| `src/modules/wds/workflows/` | Workflows folder | ✅ **PHASE 5 COMPLETE** | -| `src/modules/wds/workflows/workflow-init/` | Workflow initialization | ✅ COMPLETE | -| `src/modules/wds/workflows/1-project-brief/` | Phase 1 workflow | ✅ COMPLETE | -| `src/modules/wds/workflows/2-trigger-mapping/` | Phase 2 workflow | ✅ COMPLETE | -| `src/modules/wds/workflows/3-prd-platform/` | Phase 3 workflow | ✅ COMPLETE | -| `src/modules/wds/workflows/4-ux-design/` | **Phase 4 workflow** | ✅ **COMPLETE (Dec 4)** | -| `src/modules/wds/workflows/4-ux-design/substeps/` | **Phase 4 substeps (4A-4E)** | ✅ **COMPLETE (Dec 4)** | -| `src/modules/wds/workflows/5-design-system/` | **Phase 5 workflow** | ✅ **COMPLETE (Dec 9)** | -| `src/modules/wds/workflows/5-design-system/assessment/` | **Opportunity/Risk micro-instructions** | ✅ **COMPLETE (Dec 9)** | -| `src/modules/wds/workflows/5-design-system/operations/` | **Design system operations** | ✅ **COMPLETE (Dec 9)** | -| `src/modules/wds/workflows/4-ux-design/templates/` | **Phase 4 templates** | ✅ **COMPLETE (Dec 4)** | -| `src/modules/wds/workflows/5-design-system/` | Phase 5 workflow | TO CREATE | -| `src/modules/wds/workflows/6-integration/` | Phase 6 workflow | TO CREATE | -| `src/modules/wds/data/` | Data folder | EMPTY | -| `src/modules/wds/data/presentations/` | Agent presentations | TO CREATE | -| `src/modules/wds/docs/method/` | Methodology guides | ✅ COMPLETE | -| `src/modules/wds/docs/images/` | Images folder | EMPTY | -| `src/modules/wds/examples/` | Examples folder | EMPTY | -| `src/modules/wds/examples/dog-week-patterns/` | Dog Week examples | TO CREATE | -| `src/modules/wds/reference/` | Reference materials | EMPTY | -| `src/modules/wds/reference/templates/` | Templates | TO CREATE | -| `src/modules/wds/reference/checklists/` | Checklists | TO CREATE | -| `src/modules/wds/teams/` | Team configs | EMPTY | - ---- - -## 9. Next Steps - -### Immediate Next Action - -**Create Examples** - Port Dog Week patterns and create conversation examples - -### Short-term Roadmap - -1. [x] Create `wds-method-guide.md` -2. [x] Create phase guide for each phase (6 files) -3. [x] Refine all phase guides with positive language, proper naming -4. [x] Create workflow-init workflow ✅ -5. [x] Create Phase 1-3 workflows ✅ -6. [x] **Create Phase 4 workflow (UX Design)** ✅ **COMPLETE Dec 4, 2025** -7. [ ] Create Phase 5-6 workflows -8. [ ] Create WDS Trigger Map (meta-example for WDS itself) -9. [ ] Create conversation examples -10. [ ] Create agents (Saga, Freya, Baldr) -11. [ ] Create templates for component showcase, PRD, etc. -12. [ ] Port Dog Week examples to `examples/dog-week-patterns/` (last - project in active development) - -### Commit Checkpoint - -**Ready to commit Phase 4 workflow:** - -``` -feat(wds): Complete Phase 4 UX Design workflow with v6 best practices - -Phase 4 Workflow Complete: -- Main workflow with goal-based instructions -- Substeps 4A-4E following v6 patterns (exploration, analysis, specification, prototype, PRD update) -- Complete page specification template with Object IDs -- Scenario overview template -- Concise, trust-the-agent instruction style -- Optional steps where appropriate - -Conversion Progress: -- Merged WDS-CONVERSION-ANALYSIS.md into roadmap -- Updated roadmap with Phase 4 completion status -- Added section 11: WPS2C → WDS Conversion Reference -- Added section 12: Latest Updates (Dec 4, 2025) - -Templates Created: -- page-specification.template.md (complete spec format) -- scenario-overview.template.md (scenario structure) - -Next: Phase 5 (Design System) and Phase 6 (PRD Finalization) workflows -``` - ---- - -## 10. Reference Information - -### 10.1 Open Design Decisions - -**To resolve during porting Phase 1 & 2:** - -| Decision | Options | Resolve When | -| ----------------------------- | -------------------------------------------------------------- | ----------------- | -| **ICP/Positioning placement** | Phase 1 as hypothesis → Phase 2 validates, OR fully in Phase 2 | Porting Phase 1-2 | -| **Prioritization Reasoning** | Formal step with output, OR internal thinking process | Porting Phase 2 | -| **Business Goals flow** | Initial in Brief → Refined in Trigger Map, OR single location | Porting Phase 1-2 | - -**Context:** The Trigger Mapping (Effect Mapping) methodology is very strong. The prioritization reasoning step (column-by-column) is specifically valuable for generating product ideas but may not need formal documentation. - ---- - -### 10.2 Product Positioning Framework - -To be included in WDS workflows (stored in memory, ID: 11785915): - -**Positioning Statement Format:** - -``` -For (target customer) -Who (statement of need or opportunity) -And want (statement of experience expectations) -The (product/service name) -Is (product category) -That (statement of key benefits) -Unlike (primary competitive alternative) -Our product (statement of primary differentiators) -``` - -**ICP Framework (8 Components):** - -1. My ICP (Who I Serve Best) -2. My Positioning (How I'm Different) -3. The Outcomes I Drive -4. My Offerings (What I Sell) -5. Social Proof (Who Can Vouch) -6. My Frameworks/Models/Tools (How I Work) -7. The Pains My ICP Articulates (Triggers/Frustrations) -8. Pricing Anchoring (Cost of Inaction, Bad Hire, % Revenue, Speed) - -**CTA Elements:** - -- Website link -- Discovery call link -- Newsletter subscription -- Social follows -- Events attending - -### 10.2 BMad v6 Resources - -| Resource | Location | -| ------------- | --------------------------------- | -| BMM Module | `src/modules/bmm/` | -| BMB Builder | `src/modules/bmb/` | -| CIS Module | `src/modules/cis/` | -| Agent Schema | `src/modules/bmb/docs/agents/` | -| Workflow Docs | `src/modules/bmb/docs/workflows/` | - -### 10.3 Original WPS2C - -| Resource | Location | -| ------------------ | ------------------------------------------------ | -| WPS2C Repo | `C:\dev\whiteport-sketch-to-code-bmad-expansion` | -| Method Overview | `Method/00-Whiteport-Method.md` | -| Agents (v4 format) | `bmad-whiteport-sketch/agents/` | - -### 10.4 Dog Week Project - -| Resource | Location | -| ------------- | ---------------------------- | -| Project Root | `C:\dev\dogweek\dogweek-dev` | -| Product Brief | `docs/A-Product-Brief/` | -| Trigger Map | `docs/B-Trigger-Map/` | -| Scenarios | `docs/C-Scenarios/` | -| PRD | `docs/D-PRD/` | - ---- - -## Conversation Summary - -### Key Discussion Points - -1. **Fork vs Standalone:** Decided on fork for maximum adoption -2. **Module Name:** Whiteport Design Studio (WDS) to preserve brand -3. **Branch Strategy:** Work on main, switch to feature branches after adoption -4. **Folder Structure:** A-B-C-D-E alphabetical prefix for visual namespace -5. **Phase Approach:** Phase-selectable (not rigid tracks) -6. **Scope:** Design only, no development/backlog (handled by BMM) -7. **E-UI-Roadmap:** Integration bridge to development modules -8. **Development Order:** Methodology-first approach -9. **Language Style:** Soft, collaborative (not MUST/FORBIDDEN) -10. **Teaching Style:** Show, don't tell (examples over rules) - -### User's Stated Experience - -- WPS2C v4 works well, proven methodology -- Strong language (MUST/FORBIDDEN) makes agents ignore instructions -- Softer language gets better compliance -- Examples work better than rules -- Agents tend to question-dump (20 questions at once) -- Output format inconsistency is a problem - -### Design Philosophy Established - -1. Soft language by design -2. Show, don't tell (examples over explanations) -3. Example projects for adoption/training -4. Identity-based agent personas -5. Conversation examples showing dialog flow - ---- - -## 11. WPS2C → WDS Conversion Reference - -### 11.1 Agent Mapping - -| WPS2C v4 | WDS v6 | Status | -| -------------------------------- | -------------------------------------- | ----------- | -| Mary (whiteport-analyst.md) | Saga-Analyst (saga-analyst.agent.yaml) | ✅ COMPLETE | -| Sarah (whiteport-pm.md) | Idunn-PM (idunn-pm.agent.yaml) | ✅ COMPLETE | -| Sally (whiteport-ux-expert.md) | Freya-Designer (freya-ux.agent.yaml) | ✅ COMPLETE | -| James (whiteport-dev.md) | N/A - moved to BMM | ✅ Complete | -| Alex (whiteport-orchestrator.md) | N/A - workflow-status replaces | ✅ Complete | - -**Key Changes:** - -- Mary → **Saga** (Goddess of stories & wisdom) -- Sarah → **Idunn** (Goddess of renewal & youth) -- Sally → **Freya** (Goddess of beauty, magic & strategy) -- Norse Pantheon theme for unique WDS identity - -### 11.2 File Format Changes - -**WPS2C v4:** Markdown files (.md) with embedded YAML blocks - -````markdown -# agent-name.md - -```yaml -agent: - name: Mary - commands: - - help: Show help -``` -```` - -```` - -**WDS v6:** Pure YAML files (.agent.yaml) following v6 schema -```yaml -# agent-name.agent.yaml -agent: - metadata: - id: "{bmad_folder}/wds/agents/saga-analyst.agent.yaml" - name: Saga - module: wds - persona: - role: ... - identity: ... - menu: - - trigger: command-name - workflow: path/to/workflow.yaml -```` - -### 11.3 Terminology Changes - -| WPS2C v4 | WDS v6 | -| ------------------------ | ----------------------- | -| Whiteport Sketch-to-Code | Whiteport Design Studio | -| WPS2C | WDS | -| Commands | Menu Triggers | -| Tasks | Workflows | -| `*command-name` | Workflow triggers | - -### 11.4 Presentation Files Mapping - -| WPS2C v4 File | WDS v6 Location | Purpose | -| ---------------------------------------- | ------------------------------------------------- | ------------------------ | -| mary-analyst-personal-presentation.md | data/presentations/saga-intro.md | Saga activation speech | -| sarah-pm-personal-presentation.md | data/presentations/freya-intro.md | Freya activation speech | -| sally-ux-expert-personal-presentation.md | data/presentations/baldr-intro.md | Baldr activation speech | -| wps2c-analyst-business-presentation.md | examples/conversation-examples/analyst-session.md | Example session | -| wps2c-pm-product-presentation.md | examples/conversation-examples/pm-session.md | Example session | -| wps2c-ux-design-system-presentation.md | examples/conversation-examples/ux-session.md | Example session | - -### 11.5 Templates Mapping - -| WPS2C v4 Template | WDS v6 Location | Status | -| --------------------------------- | -------------------------------------------------------------- | -------------------- | -| product-brief-tmpl.yaml | workflows/1-project-brief/complete/project-brief.template.md | ✅ Created | -| trigger-map-tmpl.yaml | workflows/2-trigger-mapping/templates/trigger-map.template.md | ✅ Created | -| persona-tmpl.yaml | workflows/2-trigger-mapping/templates/persona.template.md | ⏳ To create | -| scenarios-tmpl.yaml | workflows/4-ux-design/templates/scenario-overview.template.md | ✅ **Created Dec 4** | -| page-spec-tmpl.yaml | workflows/4-ux-design/templates/page-specification.template.md | ✅ **Created Dec 4** | -| design-system-structure-tmpl.yaml | workflows/5-design-system/templates/component.template.md | ⏳ To create | -| component-tmpl.yaml | reference/templates/component.template.md | ⏳ To create | -| sketch-review-tmpl.yaml | workflows/4-ux-design/templates/review.template.md | ⏳ To create | - -### 11.6 Standards/Data Files Mapping - -| WPS2C v4 File | WDS v6 Location | Purpose | -| ----------------------------------- | ----------------------------------------- | ------------------------------ | -| wps2c-compliance-standards.md | data/wds-standards.md | Core methodology standards | -| analyst-documentation-standards.md | data/documentation-standards.md | Documentation conventions | -| sketch-documentation-standards.md | workflows/4-ux-design/sketch-standards.md | Sketch specification standards | -| pm-documentation-standards.md | workflows/3-prd-platform/prd-standards.md | PRD writing standards | -| mermaid-github-standards.md | data/mermaid-standards.md | Diagram standards | -| technical-documentation-patterns.md | data/technical-patterns.md | Technical writing patterns | - -### 11.7 Content to Preserve from WPS2C - -**Core Methodology Elements:** ✅ - -- Product Brief structure and process -- Trigger Mapping (Effect Mapping) methodology -- Feature Impact Analysis with scoring -- Scenario-driven design approach -- Design System integration patterns - -**Agent Personalities:** 🔄 - -- Mary's analytical, thoughtful approach → Saga -- Sarah's strategic PM mindset → Freya -- Sally's design expertise and creativity → Baldr - -**Quality Patterns:** ✅ - -- One question at a time (not survey-style) -- Collaborative document building -- Evidence-based analysis -- Soft, encouraging language - -**Technical Patterns:** ✅ - -- A-B-C-D-E folder structure -- Title-Case-With-Dashes naming -- Professional markdown formatting -- Mermaid diagram standards - -### 11.8 Key Improvements in WDS v6 - -**1. Soft Language Design Philosophy** - -- Removed MUST/FORBIDDEN/NEVER language -- Identity-based persona definitions -- Collaborative, not interrogative approach -- Positive framing (enables vs prevents) - -**2. Example-Driven Learning** - -- Complete reference implementations -- Conversation flow examples -- Real project patterns (Dog Week) -- Starter projects for practice - -**3. Phase Flexibility** - -- Phase-selectable (not rigid tracks) -- Path presets for common scenarios -- Optional phases (Design System) -- Parallel workflows supported - -**4. Better Integration** - -- Clean handoff to BMM via E-UI-Roadmap -- No development artifacts in design module -- Clear separation of concerns -- Continuous handoff model - -**5. Professional Tooling** - -- Proper v6 YAML schema compliance -- Workflow validation support -- Installation via BMad CLI -- Module ecosystem integration - -### 11.9 Migration Notes - -**Breaking Changes:** - -- Agent activation syntax changes (\*command → workflow trigger) -- File format changes (.md → .agent.yaml) -- Folder structure reorganization -- Terminology updates throughout - -**Backward Compatibility:** - -- WPS2C v4 users must migrate to WDS v6 -- No automatic migration path -- Dog Week project uses mixed terminology (in transition) -- Old repo remains for reference - -**User Communication:** - -- WDS is evolution, not replacement -- Same methodology, better implementation -- Migration guide needed for v4 users -- Clear benefits explanation - ---- - -## 12. Latest Updates (December 5, 2025) - -### Phase 4 Workflow - Dog Week Pattern Implementation ✅ - -#### Phase 4 Architecture (December 4) - -**Step-File Architecture:** - -- `workflows/4-ux-design/workflow.yaml` - Main workflow configuration -- `workflows/4-ux-design/workflow.md` - Workflow orchestrator -- `workflows/4-ux-design/steps/step-01-init.md` - Workflow initialization -- `workflows/4-ux-design/steps/step-02-define-scenario.md` - Scenario structure -- `workflows/4-ux-design/steps/step-03-design-page.md` - Page design orchestration -- `workflows/4-ux-design/steps/step-04-complete-scenario.md` - Scenario completion -- `workflows/4-ux-design/steps/step-05-next-steps.md` - Next actions - -**4C Micro-Steps (Specification Breakdown):** - -- `substeps/4c-01-page-basics.md` - Page basic information -- `substeps/4c-02-layout-sections.md` - Layout sections definition -- `substeps/4c-03-components-objects.md` - Components & objects identification -- `substeps/4c-04-content-languages.md` - Content & language specs -- `substeps/4c-05-interactions.md` - Interaction definitions -- `substeps/4c-06-states.md` - Object states -- `substeps/4c-07-validation.md` - Validation rules -- `substeps/4c-08-generate-spec.md` - Final spec generation - -#### Dog Week Pattern Implementation (December 5) - -**Purpose-Based Text Organization:** - -- `object-types/heading-text.md` - Updated with purpose-based naming -- `object-types/object-router.md` - Enhanced with intelligent interpretation -- Text objects named by FUNCTION, not content (e.g., `start-hero-headline` not `welcome-text`) -- Structure (position/style) separated from content -- Translations grouped so each language reads coherently - -**Sketch Text Analysis:** - -- Horizontal line detection → text placeholders -- Line thickness → font size estimation -- Line spacing → line-height calculation -- Character capacity estimation for content validation -- `SKETCH-TEXT-ANALYSIS-GUIDE.md` - Complete analysis methodology - -**Translation Grouping:** - -- Text groups keep languages together -- Each language reads as complete, coherent message -- Dog Week format standardized across all projects -- `TRANSLATION-ORGANIZATION-GUIDE.md` - Complete translation pattern -- `DOG-WEEK-SPECIFICATION-PATTERN.md` - Full workflow integration example - -**Object Type Instructions:** - -- `object-types/button.md` - Button documentation -- `object-types/text-input.md` - Text input fields -- `object-types/link.md` - Link elements -- `object-types/heading-text.md` - Headings & text with placeholder analysis -- `object-types/image.md` - Image elements -- `object-types/object-router.md` - Intelligent object detection & routing - -**Design Principles Applied:** - -- ✅ Goal-based trust-the-agent approach -- ✅ Concise instructions (vs. long procedural lists) -- ✅ Soft, collaborative language throughout -- ✅ Clear step separation with micro-steps -- ✅ Optional steps where appropriate -- ✅ v6 best practices for instruction file sizing -- ✅ Purpose-based naming (stable Object IDs) -- ✅ Grouped translations (coherent reading) -- ✅ Character capacity validation from sketches - -**Key Innovations:** - -1. **Purpose-Based Object IDs** - IDs reflect function, remain stable when content changes -2. **Grouped Translations** - Each language reads coherently as a group -3. **Sketch Text Analysis** - Automatic capacity estimation from visual markers -4. **Intelligent Routing** - Agent suggests object types rather than asking lists - -**Architecture Documentation:** - -- `workflows/4-ux-design/ARCHITECTURE.md` - Complete Phase 4 architecture -- `workflows/4-ux-design/SKETCH-TEXT-ANALYSIS-GUIDE.md` - Text analysis methodology -- `workflows/4-ux-design/TRANSLATION-ORGANIZATION-GUIDE.md` - Translation patterns -- `workflows/4-ux-design/DOG-WEEK-SPECIFICATION-PATTERN.md` - Complete workflow example - -**Next Actions:** - -- Create Phase 5 workflow (Design System) -- Create Phase 6 workflow (PRD Finalization / Dev Integration) -- Complete agent definitions (Freya, Baldr) -- Port agent presentations -- Create remaining object-type instruction files (~15 more types) - -#### Language Configuration (December 5 - Later) - -**Multi-Language Support:** - -- `workflows/workflow-init/instructions.md` - Updated with language configuration (Step 4) -- `workflows/wds-workflow-status-template.yaml` - Added language fields to config -- `workflows/LANGUAGE-CONFIGURATION-GUIDE.md` - Complete multi-language guide -- `workflows/LANGUAGE-FLOW-DIAGRAM.md` - Step-by-step language flow - -**Configuration Settings:** - -1. **Specification Language** - Language to write design specs in (EN, SE, etc.) -2. **Product Languages** - Array of languages the product supports - -**Storage:** - -```yaml -config: - specification_language: 'EN' - product_languages: - - EN - - SE - - NO -``` - -**Impact on Workflows:** - -- Specs written in `specification_language` -- All text objects include translations for ALL `product_languages` -- Agents automatically request content for each configured language -- Complete translation coverage from day one - -**Example (Dog Week):** - -- Specification Language: EN (specs written in English) -- Product Languages: [EN, SE] (product supports English & Swedish) -- Result: All text objects have both EN and SE content - -**Benefits:** - -- ✅ Flexible spec language separate from product languages -- ✅ All translations grouped and coherent -- ✅ No missing translations -- ✅ Developer-friendly config -- ✅ Easy to add languages mid-project - -#### Sketch Text Analysis Corrections (December 5 - Final) - -**Corrected Understanding:** - -- **Line thickness** → **font weight** (bold/regular), NOT font size! -- **Distance between lines** → **font size** -- **Confusion risk:** Large spacing (>60px) might be image/colored box, not text - -**Updated Files:** - -- `4-ux-design/object-types/heading-text.md` - Corrected analysis logic -- `4-ux-design/SKETCH-TEXT-ANALYSIS-GUIDE.md` - Updated with correct interpretation -- `4-ux-design/SKETCH-TEXT-QUICK-REFERENCE.md` - Quick reference card -- `4-ux-design/SKETCH-TEXT-STRATEGY.md` - When to use text vs. markers - -**Best Practice - Actual Text vs. Markers:** - -**Use ACTUAL TEXT for:** - -- Headlines (provides content guidance) -- Button labels (shows intended action) -- Navigation items (clarifies structure) -- Short, important text - -**Use LINE MARKERS for:** - -- Body paragraphs (content TBD) -- Long descriptions (sizing only) -- Placeholder content - -**Agent Behavior:** - -- Reads actual text from sketch as starting suggestion -- **Proactively suggests translations for all configured languages** -- Allows refinement during specification -- Sketch text isn't final, just guidance -- Analyzes markers for font size, weight, capacity - -**Example:** - -``` -Every walk. on time. ← Agent reads this -Every time. ← Translates to all languages - -EN: Every walk. on time. Every time. -SE: Varje promenad. i tid. Varje gång. ← Agent suggests! - -Do these work? [1] Use [2] Adjust [3] Manual -``` - -**User can:** - -- Accept suggestions (fast!) -- Refine specific translations -- Provide manual input if preferred - ---- - -## 13. WDS Course Development (December 9, 2025) - -### 13.1 Course Structure Overview - -**Purpose:** Educational course teaching WDS methodology to designers - -**Location:** `src/modules/wds/course/` - -**Format:** - -- Read as documentation -- Generate videos/podcasts with NotebookLM -- Use in workshops and team training -- Apply to real projects as you learn - -**Module Structure:** -Each module contains: - -- **Inspiration** - Why this matters and what you'll gain -- **Teaching** - How to do it with confidence and AI support -- **Practice** - Apply it to your own project -- **Tutorial** - Quick step-by-step guide (for practical modules) - -### 13.2 Course Modules Planned - -**16 Total Modules:** - -#### Foundation - -- Module 01: Why WDS Matters ✅ COMPLETE - -#### Phase 1: Project Brief - -- Module 02: Create Project Brief ⏳ TO CREATE - -#### Phase 2: Trigger Mapping - -- Module 03: Identify Target Groups ⏳ TO CREATE -- Module 04: Map Triggers & Outcomes ⏳ TO CREATE -- Module 05: Prioritize Features ⏳ TO CREATE - -#### Phase 3: Platform Requirements - -- Module 06: Platform Requirements ⏳ TO CREATE -- Module 07: Functional Requirements ⏳ TO CREATE - -#### Phase 4: Conceptual Design (UX Design) - -- Module 08: Initialize Scenario ⏳ TO CREATE -- Module 09: Sketch Interfaces ⏳ TO CREATE -- Module 10: Analyze with AI ⏳ TO CREATE -- Module 11: Decompose Components ⏳ TO CREATE -- Module 12: Conceptual Specifications ⏳ TO CREATE -- Module 13: Validate Specifications ⏳ TO CREATE - -#### Phase 5: Design System - -- Module 14: Extract Design Tokens ⏳ TO CREATE -- Module 15: Component Library ⏳ TO CREATE - -#### Phase 6: Development Integration - -- Module 16: UI Roadmap ⏳ TO CREATE - -### 13.3 Getting Started Section - COMPLETE ✅ - -**Location:** `src/modules/wds/course/00-getting-started/` - -**Files Created:** - -| File | Purpose | Status | -| ----------------------------------------- | --------------------------------------- | ----------- | -| `00-getting-started-overview.md` | Navigation hub for getting started | ✅ COMPLETE | -| `01-prerequisites.md` | Skills, tools, requirements | ✅ COMPLETE | -| `02-learning-paths.md` | Full Immersion, Quick Start, Self-Paced | ✅ COMPLETE | -| `03-support.md` | Testimonials, FAQ, community | ✅ COMPLETE | -| `00-getting-started-NOTEBOOKLM-PROMPT.md` | Podcast/video generation prompt | ✅ COMPLETE | - -**Key Decisions:** - -- Removed redundant "About the Course" file (merged into course overview) -- Removed "About WDS" from getting started (belongs in main docs) -- Focused on practical preparation only - -### 13.4 Course Overview - COMPLETE ✅ - -**Location:** `src/modules/wds/course/00-course-overview.md` - -**Content:** - -- Welcome and paradigm shift -- Who created WDS (Mårten Angner background) -- Complete module table of contents (all 16 modules) -- Learning paths (Complete, Quick Start, Phase-Specific) -- Prerequisites summary -- Module structure pattern -- Clear call to action - -**Key Changes:** - -- Simplified module list to clean table of contents -- Added "Who Created WDS?" section -- Merged redundant content from getting started -- Removed verbose descriptions - -### 13.5 Module 01: Why WDS Matters - COMPLETE ✅ - -**Location:** `src/modules/wds/course/module-01-why-wds-matters/` - -**Files:** - -| File | Purpose | Status | -| ------------------------------- | ------------------------------ | ----------- | -| `module-01-overview.md` | Module navigation and overview | ✅ COMPLETE | -| `lesson-01-the-problem.md` | The Problem We're Solving | ✅ COMPLETE | -| `lesson-02-the-solution.md` | Becoming a Linchpin Designer | ✅ COMPLETE | -| `lesson-03-the-path-forward.md` | Your Transformation | ✅ COMPLETE | - -**Content Based On:** - -- Seth Godin's "Linchpin: Are You Indispensable?" -- Factory mindset vs Linchpin mindset -- 5 dimensions of design thinking -- AI as amplifier, not replacement -- Emotional labor concept adapted to design - -### 13.6 NotebookLM Prompt Refinements - -**Key Messaging Changes:** - -**Removed:** - -- ❌ Speed claims ("5x faster", "3-5x productivity") -- ❌ Fake testimonials (Sarah K., Marcus L., Priya S.) -- ❌ Unrealistic promises - -**Added:** - -- ✅ IDE learning curve (5-10 hours) -- ✅ GitHub workflow requirement -- ✅ Financial cost transparency ($15-80/month for Cursor) -- ✅ Frontend prototyping capability -- ✅ Usability testing without dev team -- ✅ Strategic thinker value proposition - -**New Value Proposition:** - -- Not about speed - about depth and completeness -- Become the strategic thinker your team needs -- Create specifications developers actually need -- Generate content that perfectly lifts your designs -- Work is deeper, more complete, more fulfilling -- Eventually deliver parts of frontend work - -**Honest About Costs:** - -- Learning curve: IDE and GitHub workflow -- Time: 10 hours course + 5-10 hours tools -- Money: $15-20/month (small projects) to $80/month (enterprise) -- Stepping into developer territory (uncomfortable at first) - -**Benefits Emphasized:** - -- Remove biggest barrier between designers and developers -- Designs live in same place as code -- No more handoff nightmares -- Create standalone frontend prototypes -- Conduct usability testing independently -- No longer blocked by development schedules - -### 13.7 Next Steps for Course Development - -**Immediate Priority:** -Create Module 02: Project Brief as template for remaining modules - -**Recommended Approach:** - -1. **Option 1: Prioritize Core Modules** (Quick Start path) - - Module 02: Project Brief - - Module 04: Map Triggers & Outcomes - - Module 08: Initialize Scenario - - Module 12: Conceptual Specifications - -2. **Option 2: Create Module Templates** - - Template structure for each module type - - Fill in with specific content later - - Faster to generate full course - -3. **Option 3: One Phase at a Time** - - Complete Phase 1 (Module 02) fully - - Then Phase 2 (Modules 03-05) - - Then Phase 3, 4, 5, 6 - -**Content Sources:** - -- Tutorial content from `src/modules/wds/tutorial/` -- Methodology guides from `src/modules/wds/docs/method/` -- Workflow documentation from `src/modules/wds/workflows/` -- Dog Week examples (when ready) - -**Module Template Structure:** - -``` -module-XX-name/ -├── module-XX-overview.md # Navigation and module intro -├── lesson-01-inspiration.md # Why this matters -├── lesson-02-teaching.md # How to do it -├── lesson-03-practice.md # Apply it -└── tutorial.md # Quick step-by-step (optional) -``` - -**Estimated Scope:** - -- 15 modules remaining (Module 02-16) -- Each module: 4 files minimum -- Total: ~60 files to create -- Content: Tens of thousands of lines - -**Recommendation:** -Wait until conversion is complete, then tackle course development systematically using the proven Module 01 structure as template. - ---- - -## 14. Latest Updates Summary - -### December 9, 2025 - Course Development Session - -**Completed:** - -- ✅ Getting Started section (5 files) -- ✅ Course Overview refinement -- ✅ Module 01: Why WDS Matters (4 files) -- ✅ NotebookLM prompt with accurate messaging -- ✅ Removed redundant files -- ✅ Merged overlapping content - -**Key Refinements:** - -- Honest about IDE/GitHub learning curve -- Transparent about costs ($15-80/month) -- Focus on strategic value, not speed -- Frontend prototyping as major benefit -- Removed fake testimonials -- Removed speed claims - -**Files Structure:** - -``` -course/ -├── 00-course-overview.md ✅ COMPLETE -├── 00-getting-started/ ✅ COMPLETE -│ ├── 00-getting-started-overview.md -│ ├── 01-prerequisites.md -│ ├── 02-learning-paths.md -│ ├── 03-support.md -│ └── 00-getting-started-NOTEBOOKLM-PROMPT.md -└── module-01-why-wds-matters/ ✅ COMPLETE - ├── module-01-overview.md - ├── lesson-01-the-problem.md - ├── lesson-02-the-solution.md - └── lesson-03-the-path-forward.md -``` - -**Next Session:** - -- Continue with Module 02-16 creation -- Use Module 01 as template -- Consider prioritizing Quick Start modules first -- Reference tutorial and workflow content - ---- - ---- - -## 15. Design System Architecture (December 9, 2025) - -### 15.1 Core Principles - -**Three-Way Split Architecture:** - -``` -1. Page Specification (Logical View) - ├── Component references - ├── Page-specific content (labels, error texts) - ├── Layout/structure - └── WHY this page exists - -2. Design System (Visual/Component Library) - ├── Component definitions - ├── States & variants - ├── Styling/tokens - └── Reusable patterns - -3. Functionality/Storyboards (Behavior) - ├── Interactions - ├── State transitions - ├── User flows - └── Component behaviors -``` - -**Key Separation:** - -- **Specification = Content** (what the component is) -- **Organization = Structure** (where it lives) -- **Design System = Optional** (chosen in Phase 1) - -### 15.2 Design System Options - -**Three Modes (Chosen in Project Exploration):** - -**Option A: No Design System** - -- Components stay page-specific -- AI/dev team handles consistency -- Faster for simple projects - -**Option B: Custom Design System** - -- Designer defines in Figma -- Components extracted as discovered -- Figma MCP endpoints for integration - -**Option C: Component Library Design System** - -- Uses shadcn/Radix/etc. -- Library chosen during setup -- Components mapped to library defaults - -### 15.3 Component Flow with Design System - -**Complete Specification → Extract → Reference:** - -``` -1. Specification Component (Pure) - └── Captures EVERYTHING about object (mixed content) - -2. Orchestration Layer - ├── Receives complete specification - ├── Design system enabled? - │ - └── YES → Design System Router - ├── A. Extract component-level info - ├── B. Add/update design system entry - ├── C. Create reference ID - ├── D. Return to page spec - ├── E. Replace component info with reference - └── F. Keep only page-specific info - -3. Result: Clean separation - ├── Page spec: References + page-specific content - └── Design system: Component definitions -``` - -**Example:** - -**Complete Specification:** - -```yaml -Login Button: - why: Submit login credentials - label: 'Log in' # Page-specific - error_text: 'Invalid credentials' # Page-specific - states: [default, hover, disabled] # Component-level - variants: [primary, secondary] # Component-level - styling: { ... } # Component-level -``` - -**After Split:** - -**Design System:** - -```yaml -# D-Design-System/components/button.md -Button Component [btn-001]: - states: [default, hover, disabled] - variants: [primary, secondary] - styling: { ... } -``` - -**Page Spec:** - -```yaml -# C-Scenarios/login-page.md -Login Button: - component: Button.primary [btn-001] # Reference - why: Submit login credentials - label: 'Log in' - error_text: 'Invalid credentials' -``` - -### 15.4 Design System Router - -**Parallel to Sketch Router:** - -``` -Design System Router -├── Check: Does similar component exist? -│ -├── NO → Route to: Create New Component -│ └── Add to design system, create reference -│ -└── YES → Route to: Opportunity/Risk Assessment - ├── Scan existing components - ├── Compare attributes - ├── Calculate similarity - ├── Identify opportunities - ├── Identify risks - ├── Present decision to designer - └── Execute decision: - ├── Same → Reuse reference - ├── Variant → Add variant to existing - └── New → Create new component -``` - -**Router Characteristics:** - -- Dumb and simple (just identify and route) -- Doesn't contain business logic -- Keeps orchestration clean -- Parallel pattern to sketch router - -### 15.5 Opportunity/Risk Assessment - -**Micro-Instruction Breakdown:** - -``` -workflows/5-design-system/assessment/ -├── 01-scan-existing.md # Find similar components -├── 02-compare-attributes.md # Compare systematically -├── 03-calculate-similarity.md # Score the match -├── 04-identify-opportunities.md # What could we gain? -├── 05-identify-risks.md # What could go wrong? -├── 06-present-decision.md # Show designer options -└── 07-execute-decision.md # Implement choice -``` - -**Example Conversation:** - -``` -Agent: "I found a button similar to btn-001 (Primary Button). - -Similarities: -- Same size and shape -- Same color scheme -- Same hover behavior - -Differences: -- Different label ('Continue' vs 'Submit') -- Different icon (arrow vs checkmark) - -Options: -[1] Same component (just change label/icon) -[2] New variant of btn-001 (add 'continue' variant) -[3] New component btn-002 (different purpose) - -If variant: -✅ Pros: Consistency, easier maintenance -❌ Cons: More complex component - -If separate: -✅ Pros: Independence, flexibility -❌ Cons: Potential inconsistency - -What's your call?" -``` - -**Key Insight:** Design systems are inherently challenging. WDS acknowledges risks and creates conversation points for designer judgment. - -### 15.6 Layered Knowledge Architecture - -**Centralized Concepts + Component-Specific Instructions:** - -``` -Core Principles (Shared) -├── data/design-system/ -│ ├── token-architecture.md # Structure vs style separation -│ ├── naming-conventions.md # Token naming rules -│ ├── state-management.md # Component states -│ └── validation-patterns.md # Form validation -│ -└── Referenced by component types - -↓ - -Component-Type Instructions (Specific) -├── object-types/text-heading.md -│ ├── References: token-architecture.md -│ ├── References: naming-conventions.md -│ └── Heading-specific rules -│ -├── object-types/button.md -│ ├── References: token-architecture.md -│ ├── References: state-management.md -│ └── Button-specific rules -│ -└── object-types/input-field.md - ├── References: token-architecture.md - ├── References: validation-patterns.md - └── Input-specific rules -``` - -**Benefits:** - -- Small, digestible instruction files -- Shared knowledge in one place -- Selective loading (only what's needed) -- Composable knowledge -- Easy to maintain and update - -**Example: Structure vs Style Separation** - -**Shared Principle (`data/design-system/token-architecture.md`):** - -```markdown -# Design Token Architecture - -## Core Principle - -Separate semantic structure from visual style. - -HTML defines meaning, tokens define appearance. - -

= Semantic (second-level heading) -"Display Large" = Visual (48px, bold, tight spacing) - -They should be independent! -``` - -**Component Application (`object-types/text-heading.md`):** - -```markdown -# Text Heading Specification - -**References:** data/design-system/token-architecture.md - -## Heading-Specific Rules - -1. Identify semantic level (h1-h6) -2. Map to design token (display-large, heading-1, etc.) -3. Never mix structure with style -4. Store structure in page spec -5. Store style in design system tokens -``` - -### 15.7 Company Customization Model - -**Key Feature: Companies Can Fork WDS** - -``` -Company forks WDS -├── Keeps: Core workflow architecture -├── Keeps: Router logic -├── Keeps: Orchestration patterns -│ -└── Customizes: - ├── data/design-system/ - │ ├── token-architecture.md # Company standards - │ ├── naming-conventions.md # Company naming - │ └── brand-guidelines.md # Company brand - │ - └── object-types/ - ├── button.md # Company button patterns - ├── input-field.md # Company form standards - └── card.md # Company card patterns -``` - -**Use Cases:** - -**1. Enterprise with Design System** - -``` -Acme Corp forks WDS: -├── Adds: data/design-system/acme-tokens.md -├── Adds: data/design-system/acme-components.md -└── Customizes: object-types/ to match Acme patterns - -Result: Every project uses Acme standards automatically -``` - -**2. Agency with Multiple Clients** - -``` -Agency forks WDS: -├── Branch: client-a (Client A standards) -├── Branch: client-b (Client B standards) -└── Branch: main (Agency defaults) - -Result: Switch branch = switch standards -``` - -**3. Design System Team** - -``` -Design System Team forks WDS: -├── Adds: Their component library specs -├── Adds: Their token architecture -└── Adds: Their validation rules - -Result: All designers use same system -``` - -**Benefits:** - -- ✅ Company-specific standards -- ✅ Version controlled -- ✅ Shareable across teams -- ✅ Evolvable over time -- ✅ Consistent across projects -- ✅ Open-source dream: Customize without breaking core - -### 15.8 Design System Workflow Structure - -**Planned Structure:** - -``` -workflows/5-design-system/ -├── workflow.yaml # Main workflow entry -├── design-system-router.md # Router logic -│ -├── assessment/ # Opportunity/Risk micro-instructions -│ ├── 01-scan-existing.md -│ ├── 02-compare-attributes.md -│ ├── 03-calculate-similarity.md -│ ├── 04-identify-opportunities.md -│ ├── 05-identify-risks.md -│ ├── 06-present-decision.md -│ └── 07-execute-decision.md -│ -├── operations/ # Design system operations -│ ├── create-new-component.md -│ ├── add-variant.md -│ ├── update-component.md -│ └── initialize-design-system.md -│ -└── templates/ # Output templates - ├── component.template.md - ├── design-tokens.template.md - └── component-library-config.template.md -``` - -**Integration Points:** - -- Called from Phase 4 orchestration (4c-03-components-objects.md) -- Triggered after component specification -- Only active if design system enabled in project -- First component triggers initialization - -### 15.9 Key Risks Identified - -**1. Component Matching** - -- How to recognize "same" vs "similar" vs "different" -- Solution: Similarity scoring + designer judgment - -**2. Circular References** - -- Page → Component → Functionality → Component -- Solution: Clear hierarchy (Page → Component → Functionality) - -**3. Sync Problems** - -- Component evolves, references may break -- Solution: Reference IDs + update notifications - -**4. Component Boundaries** - -- Icon in button? Nested components? -- Solution: Designer conversation + guidelines - -**5. First Component** - -- When to initialize design system? -- Solution: Auto-initialize on first component if enabled - -**6. Storyboard Granularity** - -- Component behavior vs page flow -- Solution: Clear separation guidelines - -**Mitigation Strategy:** - -- AI identifies risks -- Designer makes judgment calls -- AI executes decisions -- Transparent process with pros/cons - -### 15.10 Implementation Complete (December 9, 2025) - -**✅ Phase 5 Design System Workflow Complete!** - -**Files Created:** - -**Workflow Structure:** - -- `workflows/5-design-system/workflow.yaml` -- `workflows/5-design-system/README.md` -- `workflows/5-design-system/design-system-router.md` - -**Assessment Micro-Instructions (7 files):** - -- `assessment/01-scan-existing.md` -- `assessment/02-compare-attributes.md` -- `assessment/03-calculate-similarity.md` -- `assessment/04-identify-opportunities.md` -- `assessment/05-identify-risks.md` -- `assessment/06-present-decision.md` -- `assessment/07-execute-decision.md` - -**Component Operations (4 files):** - -- `operations/initialize-design-system.md` -- `operations/create-new-component.md` -- `operations/add-variant.md` -- `operations/update-component.md` - -**Shared Knowledge Documents (4 files):** - -- `data/design-system/token-architecture.md` -- `data/design-system/naming-conventions.md` -- `data/design-system/component-boundaries.md` -- `data/design-system/state-management.md` -- `data/design-system/validation-patterns.md` - -**Templates (3 files):** - -- `templates/component.template.md` -- `templates/design-tokens.template.md` -- `templates/component-library-config.template.md` - -**Integration:** - -- Updated `workflows/4-ux-design/substeps/4c-03-components-objects.md` to call design system router - -**Total Files Created:** 27 files (22 core + 3 Figma + 2 catalog) - -**Key Features Implemented:** - -- ✅ Three design system modes (None/Custom/Library) -- ✅ On-demand component extraction -- ✅ Similarity detection and assessment -- ✅ Opportunity/risk analysis with designer decision -- ✅ Component operations (create/variant/update) -- ✅ Layered knowledge architecture -- ✅ Company customization support -- ✅ Integration with Phase 4 workflow -- ✅ **Figma integration (Mode B) - COMPLETE (Dec 9)** -- ✅ **Interactive HTML catalog - COMPLETE (Dec 9)** - -**Figma Integration Files (Dec 9):** - -- `data/design-system/figma-component-structure.md` - Component organization in Figma -- `figma-integration/figma-designer-guide.md` - Step-by-step designer instructions -- `figma-integration/figma-mcp-integration.md` - Technical MCP integration guide - -**Interactive Catalog Files (Dec 9):** - -- `templates/catalog.template.html` - Interactive HTML catalog template -- `operations/generate-catalog.md` - Catalog generation workflow - -**Catalog Features:** - -- Fixed sidebar navigation -- Live component previews with all variants/states -- Interactive state toggles -- Design token swatches -- Code examples -- Changelog tracking -- Figma links (Mode B) -- **Automatically regenerated** after every component change -- **Version controlled** with git - -**Course Structure Update (Dec 9):** - -- Tutorials integrated into course modules (no separate tutorial/ folder) -- Created tutorials for key modules: 02, 04, 08, 12 -- Updated navigation (where-to-go-next.md, course-overview.md) -- Deprecated old tutorial/ folder with migration guide - -**Tutorial Files Created:** - -- `course/module-02-project-brief/tutorial-02.md` - Create Project Brief -- `course/module-04-map-triggers-outcomes/tutorial-04.md` - Map Triggers & Outcomes -- `course/module-08-initialize-scenario/tutorial-08.md` - Initialize Scenario -- `course/module-12-conceptual-specs/tutorial-12.md` - Conceptual Specifications - -**Excalidraw Integration (Dec 9 AM):** - -- Optional sketching tool integration with project configuration -- Created comprehensive documentation and workflows -- AI collaboration patterns for generation and analysis -- Export workflows for GitHub display - -**Excalidraw Files Created:** - -- `workflows/4-ux-design/excalidraw-integration/excalidraw-guide.md` - Overview and quick start -- `workflows/4-ux-design/excalidraw-integration/excalidraw-setup.md` - Installation and configuration -- `workflows/4-ux-design/excalidraw-integration/sketching-guide.md` - How to sketch effectively -- `workflows/4-ux-design/excalidraw-integration/ai-collaboration.md` - Working with AI -- `workflows/4-ux-design/excalidraw-integration/export-workflow.md` - Export for GitHub -- `workflows/workflow-init/project-config.template.yaml` - Project configuration template -- `workflows/workflow-init/excalidraw-setup-prompt.md` - Agent setup instructions - -**Excalidraw Features:** - -- ✅ Optional (enable in project config) -- ✅ VS Code extension or web app -- ✅ AI can generate .excalidraw files -- ✅ AI can analyze sketches (upload PNG) -- ✅ WDS component library (future) -- ✅ Auto-export to PNG/SVG (optional) -- ✅ 20px grid system (matches WDS spacing) -- ✅ Version control friendly (JSON) - -**WDS ↔ BMad Integration (Dec 9 PM):** - -- Designed complete integration architecture between WDS and BMad Method -- Simplified to 3 clean touch points (not 7!) -- Created Design Delivery objects for clean handoff -- Implemented multi-agent handoff dialog -- Created test scenarios for designer validation -- Phase 6 renamed to "Design Deliveries" (single handoff point) - -**Integration Files Created:** - -- `src/core/resources/wds/design-delivery-spec.md` - Design Delivery specification -- `src/core/resources/wds/platform-requirements-spec.md` - Platform Requirements specification -- `src/core/resources/wds/handoff-protocol.md` - Multi-agent handoff protocol -- `src/core/resources/wds/integration-guide.md` - Complete integration overview -- `templates/design-delivery.template.yaml` - Design Delivery template -- `templates/platform-requirements.template.yaml` - Platform Requirements template -- `templates/test-scenario.template.yaml` - Test Scenario template - -**The 3 Touch Points:** - -1. **Platform Requirements** (WDS Phase 3 → BMad) - - WDS overrides BMad's tech stack decisions - - Designer defines technical foundation -2. **Design Deliveries** (WDS Phase 6 → BMad) - - Complete design package handed off at once - - Includes all scenarios, components, test scenarios - - Single handoff with multi-agent dialog -3. **Designer Validation** (BMad Phase 3 → WDS Phase 7) - - BMad requests validation when complete - - Designer tests and creates issues if needed - - Iterates until sign-off - -**Integration Features:** - -- ✅ 3 clean touch points (simplified from 7) -- ✅ Epic-based design deliveries (testable user flows) -- ✅ Multi-agent handoff dialog (20-30 min structured conversation) -- ✅ Platform requirements handoff (WDS overrides BMad) -- ✅ Complete design package at once (not incremental) -- ✅ Designer validation after implementation -- ✅ BMad works with or without WDS (graceful fallback) -- ✅ Complete traceability (design → dev → test → ship) - -**WDS Workflow Files Created (Dec 9):** - -- `workflows/6-design-deliveries/design-deliveries-guide.md` - Phase 6 workflow (iterative handoffs) -- `workflows/7-testing/testing-guide.md` - Phase 7 workflow (designer validation) -- `workflows/8-ongoing-development/existing-product-guide.md` - Phase 8 workflow (existing product entry point) -- `workflows/workflow-init/project-type-selection.md` - Project type selection (new vs existing) - -**Two Entry Points to WDS:** - -1. **New Product** (Phases 1-7) - - Starting from scratch - - Complete user flows - - Full creative freedom -2. **Existing Product** (Phase 8) - - Jump into existing product - - Strategic improvements - - Targeted updates - - Linchpin designer role - -**Complete WDS Workflow (Phases 1-8):** - -- ✅ Phase 1: Project Brief (New Product) -- ✅ Phase 2: Trigger Map (New Product) -- ✅ Phase 3: Platform Requirements (Touch Point 1) (New Product) -- ✅ Phase 4: UX Design (iterative) -- ✅ Phase 5: Design System (iterative) -- ✅ Phase 6: Design Deliveries (Touch Point 2) -- ✅ Phase 7: Testing (Touch Point 3) -- ✅ Phase 8: Existing Product Development (Existing Product Entry Point) - - Phase 8.1: Limited Project Brief - - Phase 8.2: Existing Context - - Phase 8.3: Critical Updates - - Phase 8.4: System Update Delivery - - Phase 8.5: Validation - -**BMad Integration Complete (Dec 9):** - -- ✅ Created WDS detection step for BMad architecture workflow -- ✅ Updated BMad Architect agent (WDS-aware) -- ✅ Updated BMad Developer agent (design system awareness) -- ✅ BMad now detects and respects WDS artifacts -- ✅ BMad reads platform requirements, design deliveries, design system -- ✅ BMad offers handoff dialog when Design Deliveries exist - -**BMad Files Updated:** - -- `src/modules/bmm/workflows/3-solutioning/architecture/steps/step-01a-wds-detection.md` - WDS detection step -- `src/modules/bmm/workflows/3-solutioning/architecture/steps/step-01-init.md` - Updated to call WDS detection -- `src/modules/bmm/agents/architect.agent.yaml` - Added WDS awareness -- `src/modules/bmm/agents/dev.agent.yaml` - Added design system awareness - -**Next Steps:** - -### Immediate (This Week) - -1. ✅ Complete DD-XXX migration in Phase 8 step files (7 files) - DONE -2. Test Phase 6/7/8 workflows with real project -3. Create commit for Dec 9 session work - -### Short-term (Next Week) - -1. Complete remaining module tutorials (03, 05-07, 09-11, 13-16) -2. Create WDS Excalidraw component library (.excalidrawlib) -3. Test complete WDS → BMad workflow end-to-end - -### Long-term (This Month) - -1. Implement auto-export automation (GitHub Actions) -2. Refine assessment criteria based on usage -3. Test Figma MCP integration with real components -4. Test catalog generation with real components -5. Add more shared knowledge documents as patterns emerge - ---- - -## 16. Session: Dec 9, 2025 - Micro-Steps & Concepts ✅ - -**See changelog:** [CHANGELOG.md](./CHANGELOG.md#2025-12-09---micro-steps--concepts) - ---- - -## 19. Future: Dogweek Design System Refactoring (Backlog) - -**Purpose:** Use Dogweek as live case study to validate WDS Phase 5 - -**Identified Issues in Dogweek:** - -1. **Button Proliferation:** 8 separate button files (should be 1 component with variants) -2. **Structure/Style Confusion:** H1 component hardcoded to visual style (breaks semantic HTML) -3. **No Token Architecture:** Hardcoded values instead of design tokens -4. **No Component IDs:** File-based organization, no usage tracking -5. **No Similarity Detection:** Manual component management - -**Proposed Refactoring:** - -- Consolidate 8 button files → 1 Button component [btn-001] with variants -- Separate semantic HTML (h1-h6) from visual tokens (heading-hero, heading-page) -- Implement design token system (colors, typography, spacing) -- Add component IDs and usage tracking -- Create component references in page specs - -**Benefits:** - -- ✅ Validates WDS Phase 5 on production system -- ✅ Improves Dogweek maintainability -- ✅ Creates migration guide for other projects -- ✅ Generates real-world examples for WDS course - -**Status:** Backlog (after Phase 6 complete) - ---- - -## 20. Session: Dec 9, 2025 - Saga-Analyst Agent Creation ✅ - -**Created:** December 9, 2025 -**Status:** ✅ Complete - -### What Was Created - -**1. Saga-Analyst Agent** (`saga-analyst.agent.yaml`) - -- ✅ Merged WPS2C Mary's capabilities with BMM analyst features -- ✅ Follows BMad v6 YAML schema -- ✅ Implements WDS design philosophy (soft language, identity-based) -- ✅ Norse mythology theme (Saga = Goddess of stories & wisdom) -- ✅ Comprehensive persona with working rhythm guidance -- ✅ Full menu integration with WDS workflows - -**2. Saga Introduction Presentation** (`saga-intro.md`) - -- ✅ Complete agent introduction speech -- ✅ Strategic foundation explanation with detailed folder structure -- ✅ Team integration details (Freya, Baldr, BMM) -- ✅ Norse mythology connection explained -- ✅ Deliverables and process visualization -- ✅ Professional standards and conventions - -### Agent Capabilities Merged - -**From WPS2C Mary:** - -- Strategic foundation building (Product Brief, Trigger Map) -- Market intelligence and competitive analysis -- Alliterative persona naming convention -- Absolute path usage (docs/A-Product-Brief/) -- Quality assurance mindset -- WDS folder structure expertise - -**From BMM Analyst:** - -- Requirements elicitation expertise -- Project documentation capabilities -- Research workflow integration -- Brainstorming session facilitation -- Party mode and expert chat support -- Project context file awareness (`**/project-context.md`) - -**WDS-Specific Enhancements:** - -- Norse mythology identity (Saga the Analyst → Saga WDS Analyst) -- Soft, collaborative language throughout -- Working rhythm guidance (ask → listen → reflect → discover → structure) -- Integration with WDS phases (1-2 focus) -- Team coordination with Freya and Baldr -- Bridge to BMM development workflows - -### Persona Highlights - -**Identity:** - -```yaml -I'm Saga, the goddess of stories and wisdom. I help you discover and articulate -your product's strategic narrative - transforming vague ideas into clear, -actionable foundations. - -I treat analysis like a treasure hunt - excited by every clue, thrilled when -patterns emerge. -``` - -**Communication Style:** - -```yaml -I ask questions that spark 'aha!' moments while structuring insights with precision. - -My approach is collaborative - we build documents together, not through interrogation. -I ask one question at a time and listen deeply to your answer. - -Analysis should feel like coffee with a wise mentor, not a survey or audit. -``` - -**Working Rhythm:** - -```yaml -When we work together: -1. I ask something interesting -2. You share your thinking -3. I reflect it back to show I'm listening -4. Together we discover something new -5. I structure it into clear documentation -``` - -### Menu Structure - -**Primary WDS Workflows:** - -1. `workflow-status` - Initialize or check WDS project status (entry point) -2. `project-brief` - Phase 1: Product Exploration (Product Brief) -3. `trigger-mapping` - Phase 2: Trigger Mapping (User Psychology) - -**Supporting Workflows:** 4. `brainstorm-project` - Guided brainstorming for vision exploration 5. `research` - Market, domain, competitive, or technical research 6. `document-project` - Document existing brownfield projects - -**Collaboration Features:** 7. `party-mode` - Multi-agent collaboration 8. `expert-chat` - Direct conversation with Saga - -### Design Philosophy Implementation - -**✅ Soft Language:** - -- No "MUST", "FORBIDDEN", "NEVER" commands -- Identity-based guidance instead of rules -- Collaborative framing throughout - -**✅ Show, Don't Tell:** - -- Working rhythm examples provided -- Clear "what works well" vs "what feels less collaborative" -- Concrete process visualization - -**✅ Norse Mythology Theme:** - -- Saga = Goddess of stories and wisdom -- Fits perfectly with role (discovering product stories) -- Creates memorable WDS brand identity -- Explained in presentation for user understanding - -### Integration Points - -**With WDS Team:** - -- **Freya (PM)**: Receives strategic foundation for PRD development -- **Baldr (UX)**: Uses personas and trigger map for design work - -**With BMM (Development):** - -- Product Brief provides architecture context -- Trigger Map personas inform user stories -- Success metrics guide development priorities -- E-Design-Deliveries bridges design to development - -**With Core BMad:** - -- Uses core brainstorming workflow -- Uses core party-mode workflow -- Leverages BMM research workflow -- Respects `**/project-context.md` as bible - -### Files Created - -1. `src/modules/wds/agents/saga-analyst.agent.yaml` (102 lines) -2. `src/modules/wds/data/presentations/saga-intro.md` (280+ lines) - -### Files Modified - -1. `WDS-V6-CONVERSION-ROADMAP.md` - Updated agent status tables, folder structure sync - -### Key Decisions Made - -**Agent Naming:** - -- **Saga WDS Analyst** (not Mary, not just "Business Analyst") -- Norse mythology theme for unique WDS identity -- "Saga the Analyst" format - natural reading, clear function - -**Capability Scope:** - -- Phases 1-2 focus (Product Brief, Trigger Map) -- Strategic foundation and market intelligence -- Replaces BMM analyst when WDS is chosen -- Maintains BMM analyst capabilities (research, documentation) - -**Language Style:** - -- Soft, collaborative, identity-based -- Working rhythm explicitly defined -- "What works well" vs "what feels less collaborative" framing -- No harsh enforcement language - -**Integration Strategy:** - -- Seamless with WDS workflows (phases 1-2) -- Leverages BMM workflows (research, documentation) -- Uses core workflows (brainstorming, party-mode) -- Bridges to development via E-Design-Deliveries - -### Testing Checklist - -When testing Saga-Analyst: - -- [ ] Agent activates successfully -- [ ] Presentation displays correctly -- [ ] workflow-status initializes WDS project -- [ ] project-brief workflow executes (Phase 1) -- [ ] trigger-mapping workflow executes (Phase 2) -- [ ] brainstorm-project workflow works -- [ ] research workflow accessible -- [ ] document-project workflow accessible -- [ ] party-mode activates correctly -- [ ] expert-chat responds in character -- [ ] Absolute paths used for WDS artifacts -- [ ] Alliterative persona names generated -- [ ] Soft, collaborative language maintained -- [ ] Working rhythm followed (ask → listen → reflect → discover → structure) - -### Next Steps - -**Immediate:** - -1. Create Freya-PM agent (Product Manager - Goddess of love, war & strategy) -2. Create Baldr-UX agent (UX/UI Designer - God of light & beauty) - -**After Agents Complete:** - -1. Create agent presentation files for Freya and Baldr -2. Create team configurations in `teams/` -3. Create module installer config -4. Test agent activation and workflow integration - ---- - -## 11. Future Enhancement Ideas - -### Pitch Module (Phase 0: Consultant Pitch & Discovery) - -**Status:** Concept - Not yet implemented - -**Purpose:** Help consultants create compelling pitches to win WDS engagements - -**Approach:** Two-repo strategy (no complexity in client projects) - -- **Client repo:** Standard WDS phases (A-G folders) -- **Consultant repo:** Private pitch materials (pricing, strategy, proposals) - -**What it would include:** - -``` -src/modules/wds/ -├── workflows/ -│ └── 0-pitch/ # Pitch workflow -│ ├── workflow.md -│ └── steps/ -│ ├── step-01-discovery.md -│ ├── step-02-analysis.md -│ ├── step-03-recommendation.md -│ ├── step-04-pitch-deck.md -│ └── step-05-proposal.md -│ -└── reference/ - └── pitch/ # Pitch templates - ├── pitch-deck-template.md - ├── proposal-template.md - ├── pricing-calculator.md - └── discovery-questions.md -``` - -**Agent:** Saga the WDS Analyst (natural fit for discovery) - -**Trigger:** `pitch-client` - Creates pitch materials with consultant-specified output location - -**Key Features:** - -- Client research and discovery -- Phase recommendation (which WDS phases client needs) -- Effort estimation and timeline -- Pitch deck content generation -- Scope proposal creation -- Pricing/budget guidance - -**Security Model:** - -- Consultant controls where files are saved (their private repo) -- No `.consultant/` folder or gitignore complexity -- Clean separation between client and consultant materials -- Works with any organizational system - -**Deliverables:** - -- Client discovery notes -- Recommended WDS phases -- Pitch deck content -- Scope proposal -- Timeline and effort estimates -- Budget/pricing strategy - -**Benefits:** - -- Helps consultants win engagements -- Standardizes pitch process -- Ensures proper WDS scoping -- Maintains confidentiality -- Reusable across clients - -**Implementation Priority:** Low (optional enhancement after core WDS is stable) - ---- - ---- - -**End of Roadmap Document** - -_WDS v6 Core Module: Complete ✅_ diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/agent-log-2026-01-08-html-to-design.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/agent-log-2026-01-08-html-to-design.md deleted file mode 100644 index 518bdc5a0..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/agent-log-2026-01-08-html-to-design.md +++ /dev/null @@ -1,124 +0,0 @@ -# Agent Log: WDS HTML to Design Tools & Implementation - -**Session Date**: 2026-01-08 -**Agent**: Cascade -**Focus**: HTML to Design workflow tools and implementation -**Project**: WDS v6 Conversion - BMAD-METHOD-WDS-ALPHA - -## Session Overview -This session focused on documenting the HTML to Design work in WDS v6, specifically the tools (MagicPatterns, NanoBanana, html.to.design) and the implementation of interactive prototype components. - -## Key Topics Discussed - -### 1. Tools Exploration -- **MagicPatterns**: UI pattern generation for design systems -- **NanoBanana**: Design-to-code conversion tool -- **html.to.design**: HTML to design file conversion (primary focus) - -### 2. HTML to Design Implementation -- **Dev Mode Component**: Interactive JavaScript tool for prototype interaction -- **Area Tag System**: HTML `` tags for precise region mapping -- **Work File Template**: Comprehensive YAML template for implementation planning - -### 3. Technical Architecture -- Component-based approach with isolated JavaScript -- Event-driven architecture for user interactions -- Bidirectional workflow between design and implementation - -## Files Created/Modified - -### Created Files -1. `html-to-design-tools-summary.md` - Comprehensive tools and work summary -2. `html-to-design-work-summary.md` - Original work summary (created earlier) - -### Key Implementation Files -1. `dev-mode.js` - Interactive prototype dev mode component -2. `work-file-template.yaml` - Implementation planning template -3. Various YAML template files (fixed for lint compliance) - -## Technical Decisions Made - -### Area Tag Integration -- Added HTML `` tag system for precise region mapping -- Integration with dev-mode.js for interactive region selection -- Enables exact coordinate mapping for design-to-code translation - -### Workflow Enhancement -- Updated design to implementation path to include area mapping -- Dev mode extracts both Object IDs and area coordinates -- Documentation includes region mappings for precise specs - -### Tool Strategy -- No single tool solves all problems -- Combination approach for comprehensive solution -- Integration points crucial for seamless workflow - -## Key Insights - -### 1. Bidirectional Workflow Value -- Traditional unidirectional design-to-code flow is limiting -- WDS benefits from code-to-design feedback loops -- Interactive prototypes serve as living specifications - -### 2. Area Tag System Benefits -- Enables precise click mapping on complex UI elements -- Supports image-based prototypes with interactive hotspots -- Facilitates design-to-code translation with exact coordinates - -### 3. Tool Ecosystem Understanding -- MagicPatterns for pattern library generation -- NanoBanana for automated code generation -- html.to.design for reverse engineering design from implementation - -## Implementation Status - -### Completed -- Dev-mode.js component with full functionality -- Work-file-template.yaml with comprehensive structure -- Area tag system documentation and integration -- Basic integration with WDS workflow - -### In Progress -- Tool integration testing -- Workflow documentation -- Performance optimization - -### Planned -- MagicPatterns integration -- NanoBanana exploration -- html.to.design implementation - -## Next Steps for Future Sessions - -### 1. Tool Integration -- Implement MagicPatterns for design system automation -- Explore NanoBanana for rapid prototyping -- Integrate html.to.design for design recovery - -### 2. Workflow Enhancement -- Build automated extraction tools -- Implement version control for design-implementation changes -- Enable real-time collaboration features - -### 3. Technical Improvements -- Optimize dev-mode performance for large prototypes -- Enhance accessibility for all users -- Create plugin architecture for custom tools - -## User Feedback -- User specifically requested to remember the area tag system -- Emphasized importance of tools discussion over error fixing -- Wanted comprehensive summary for continuation in new chat - -## Session Outcome -Successfully documented the HTML to Design tools and implementation work, with special focus on the area tag system and tool ecosystem. Created comprehensive summary files for future reference and continuation of the work. - -## Files for Reference -- `html-to-design-tools-summary.md` - Main summary document -- `dev-mode.js` - Core implementation component -- `work-file-template.yaml` - Planning template -- Various YAML template files in WDS module - ---- -**Session End**: 2026-01-08 15:30 UTC -**Status**: Complete - Ready for continuation in new chat diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/agent-micro-guides-implementation.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/agent-micro-guides-implementation.md deleted file mode 100644 index d4ecfe1e0..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/agent-micro-guides-implementation.md +++ /dev/null @@ -1,227 +0,0 @@ -# Agent Micro-Guides Architecture - Implementation Log - -**Date:** January 1, 2026 -**Status:** IN PROGRESS 🔄 - ---- - -## The Innovation - -**Problem:** Agent YAMLs were too long (160 lines for Freya, 158 for Saga) despite implementing "Librarian Model" - -**User Insight:** "Can we make micro steps for the agents as well?" - -**Solution:** Agent micro-guides - loadable markdown files that agents reference on-demand! - ---- - -## Architecture - -### Lean Agent YAML -- Core identity (who I am, what makes me different) -- Communication style (how I work) -- Core beliefs (philosophy in brief) -- Micro-guides section (where to load details) -- Minimal principles (routing only) - -**Target:** ~70-90 lines (50% reduction) - ---- - -### Micro-Guides Structure -``` -data/agent-guides/ -├── freya/ -│ ├── strategic-design.md (VTC, Trigger Map, Customer Awareness, Golden Circle) -│ ├── specification-quality.md (Purpose-based naming, logical explanations) -│ ├── interactive-prototyping.md (HTML prototypes as thinking tools) -│ ├── content-creation.md (6-model workshop framework) -│ └── design-system.md (Organic growth, opportunity/risk assessment) -├── saga/ -│ ├── discovery-conversation.md (Natural listening, reflection patterns) -│ ├── trigger-mapping.md (Psychology-driven analysis) -│ └── strategic-documentation.md (Product Brief, file naming) -└── idunn/ - ├── platform-requirements.md (Technical foundation) - └── design-handoffs.md (Phase 6 deliveries) -``` - ---- - -## Progress - -### ✅ COMPLETE - All Three Agents Transformed! - -#### Freya (160 → 120 lines, **25% reduction**) -- ✅ Created 5 micro-guides (strategic-design, specification-quality, interactive-prototyping, content-creation, design-system) -- ✅ Slimmed YAML to reference guides -- ✅ Embedded WDS philosophy deeply -- **Total guide content:** ~1,400 lines - ---- - -#### Saga (158 → 129 lines, **18% reduction**) -- ✅ Created 3 micro-guides (discovery-conversation, trigger-mapping, strategic-documentation) -- ✅ Slimmed YAML to reference guides -- ✅ Transformed to WDS philosophy -- **Total guide content:** ~1,100 lines - ---- - -#### Idunn (81 → 92 lines, **small expansion for WDS identity**) -- ✅ Created 2 micro-guides (platform-requirements, design-handoffs) -- ✅ Enhanced with WDS philosophy -- ✅ Added micro-guide references -- **Total guide content:** ~800 lines - -**Note:** Idunn grew slightly because we added WDS identity and micro-guide structure, -but she was already lean. The added clarity is worth 11 lines! - ---- - -## Benefits of This Architecture - -✅ **Lean YAMLs** - Core identity only (~70-90 lines) -✅ **On-demand loading** - Details loaded when needed -✅ **Easy updates** - Change guides without touching YAML -✅ **Reusable** - Multiple agents can share guides -✅ **Clear separation** - Identity vs operational details -✅ **True Librarian Model** - Agent knows where to find info -✅ **Better maintenance** - Update one guide, all agents benefit -✅ **Testable** - Validate guides independently -✅ **Methodology-specific** - Embeds WDS philosophy deeply - ---- - -## Example: How It Works - -**User:** "Let's design the landing page hero" - -**Freya (checks context):** "Before I design, let me load strategic context..." - -**Freya (internally):** *Loads data/agent-guides/freya/strategic-design.md* - -**Freya (now informed with VTC, Customer Awareness, Golden Circle):** "Great! Let's connect this to strategy: -- Which VTC should guide this page? -- What driving forces should we trigger? -- Where are users in their awareness journey?" - ---- - -## Why This Matters - -**Before:** Agents had everything inline → cognitive overload, maintenance nightmare - -**After:** Agents have lean identity + routing map → load details on demand → clean, maintainable, extensible - -This is the **true Librarian Model** - agents as routers to knowledge, not knowledge containers. - ---- - -## Next Steps - -1. ✅ Complete Saga's micro-guides -2. ✅ Slim Saga's YAML -3. ✅ Create Idunn's micro-guides -4. ✅ Slim Idunn's YAML -5. ✅ Test with real WDS work -6. ✅ Document pattern for BMad team - ---- - -## Files Created So Far - -### Freya's Micro-Guides (5 files) -1. `data/agent-guides/freya/strategic-design.md` (195 lines) -2. `data/agent-guides/freya/specification-quality.md` (283 lines) -3. `data/agent-guides/freya/interactive-prototyping.md` (283 lines) -4. `data/agent-guides/freya/content-creation.md` (298 lines) -5. `data/agent-guides/freya/design-system.md` (366 lines) - -**Total:** ~1,425 lines of detailed guidance (was 160 lines crammed in YAML!) - -### Saga's Micro-Guides (1 of 3 files) -1. `data/agent-guides/saga/discovery-conversation.md` (348 lines) ✅ - ---- - -## Key Insight - -**The problem wasn't that we had too much content - it's that we had it in the wrong place!** - -Agent YAMLs should be **identity + routing**, not **identity + all operational details**. - -Micro-guides let us: -- Keep agent identity lean and clear -- Provide deep, detailed guidance when needed -- Update methodology without touching agent core -- Share knowledge across agents -- Version and test guides independently - ---- - -**Status:** ✅ **100% COMPLETE** - All three agents transformed with micro-guides! - -**This is working beautifully!** 🎉 - ---- - -## Final Statistics - -### Agent YAML Sizes -- **Freya:** 160 → 120 lines (25% reduction) -- **Saga:** 158 → 129 lines (18% reduction) -- **Idunn:** 81 → 92 lines (small expansion for WDS identity) - -### Total Micro-Guide Content Created -- **Freya:** 5 guides = ~1,400 lines -- **Saga:** 3 guides = ~1,100 lines -- **Idunn:** 2 guides = ~800 lines -- **TOTAL:** 10 micro-guides = **~3,300 lines of detailed WDS guidance!** - -### The Revelation -We extracted **3,300 lines** of WDS methodology content that was previously: -- Crammed into ~400 lines of YAML (impossible!) -- Missing entirely (never documented!) -- Scattered across workflows (hard to find!) - -Now it's **organized, loadable on-demand, and deeply rooted in WDS philosophy.** - ---- - -## What We Proved - -### 1. Agent YAMLs Should Be Identity + Routing -**Not:** Identity + all operational details crammed in - -**Yes:** Identity + clear pointers to detailed guides - -### 2. Content Compression Was Hiding Problems -**Before:** "Let's keep agents lean" → over-compressed, lost meaning - -**After:** "Let's keep YAML lean" → guides have room to breathe, be clear - -### 3. Micro-Guides Enable True Methodology Transfer -**Before:** Agents had generic UX/PM platitudes - -**After:** Agents embody WDS philosophy deeply (VTC, Trigger Mapping, Customer Awareness, etc.) - -### 4. This Architecture Scales -- Easy to update (change guide, not YAML) -- Reusable (multiple agents can reference same guide) -- Testable (validate guides independently) -- Maintainable (single source of truth per topic) - ---- - -## Next Steps for BMad Team - -1. **Test in Real Projects** - Activate agents, see how guide loading works -2. **Gather Feedback** - Do guides provide needed detail? -3. **Refine Pattern** - Document this as BMad best practice -4. **Scale to Other Modules** - BMM, CIS, BMGD could use same pattern - ---- - -**This innovation could transform how all BMad agents are designed!** 🚀 - diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/conversion-guide.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/conversion-guide.md deleted file mode 100644 index 03253ee68..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/conversion-guide.md +++ /dev/null @@ -1,75 +0,0 @@ -# WDS Conversion Logs - -**Session-by-session documentation of WDS v6 conversion work** - ---- - -## Purpose - -This directory contains detailed logs of each conversion session, keeping the main roadmap focused on current and future work. - ---- - -## Structure - -Each session gets its own log file: - -- `session-YYYY-MM-DD-topic.md` - Detailed work log for that session - ---- - -## Sessions - -### December 2025 - -- **[2025-12-09-micro-steps-concepts.md](./session-2025-12-09-micro-steps-concepts.md)** - Phase 6/7/8 micro-steps, Greenfield/Brownfield, Kaizen/Kaikaku, DD-XXX simplification -- **[2025-12-31-content-production-workshop.md](./session-2025-12-31-content-production-workshop.md)** - Content creation workshop integration - -### January 2026 - -- **[2026-01-04-eira-visual-design-integration.md](./2026-01-04-eira-visual-design-integration.md)** - Eira visual design agent integration -- **[2026-01-08-html-to-design.md](./agent-log-2026-01-08-html-to-design.md)** - HTML to Figma design integration tools -- **[2026-01-20-seo-optimization-specifications.md](./session-2026-01-20-seo-optimization-specifications.md)** - SEO requirements for page specifications (planned for car mechanics project) - ---- - -## What Goes in Session Logs - -**Each session log should document:** - -- Date and duration -- Objectives -- Files created/modified -- Key decisions made -- Concepts introduced -- Code examples -- Challenges and solutions -- Status (complete/in-progress) -- Next steps - ---- - -## What Stays in Roadmap - -**The main roadmap (`WDS-V6-CONVERSION-ROADMAP.md`) should contain:** - -- Current work in progress -- Next planned work -- Future backlog items -- High-level status overview - -**Completed work moves to session logs!** - ---- - -## Benefits - -✅ **Roadmap stays focused** - Only current/future work -✅ **Detailed history preserved** - Session logs capture everything -✅ **Easy to reference** - Find specific session by date/topic -✅ **Better organization** - Chronological record of progress -✅ **Clearer next steps** - Roadmap isn't cluttered with completed work - ---- - -**Start each session by creating a new log file!** diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/freya-agent-transformation.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/freya-agent-transformation.md deleted file mode 100644 index 4e7639032..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/freya-agent-transformation.md +++ /dev/null @@ -1,116 +0,0 @@ -# Freya Agent Transformation - Session Notes - -**Date:** January 1, 2026 -**Issue:** Freya's agent definition felt flat and generic, inherited from BMM UX Agent (Sally) - ---- - -## The Problem - -Original Freya principles were: -- Generic UX platitudes ("Start with interactive prototypes", "Test with real users") -- No connection to WDS strategic methodology -- Missing the WHY behind WDS approach -- Could apply to any UX designer - -**User feedback:** "She did not get the point of the WDS at all" - ---- - -## The Solution - -Completely rewrote Freya's persona to embody **WDS philosophy**: - -### New Identity Structure - -1. **Identity** - Who she is and what makes her different - - "I think WITH you, not FOR you" - - "I start with WHY before HOW" - - "I create ARTIFACTS, not just ideas" - -2. **Communication Style** - How she works - - Asks "WHY?" before "WHAT?" - - Strategic depth in conversation - - Workshop suggestions when appropriate - - Celebrates elegant solutions - -3. **Core Beliefs** - WDS philosophy distilled - - Strategy → Design → Specification - - Psychology Drives Design - - Show, Don't Tell (HTML prototypes) - - Logical = Buildable - - Content is Strategy - -4. **Principles** - Now WDS-specific - - **strategic_design** (NEW) - VTC, Trigger Map, Customer Awareness, Golden Circle - - **specification_quality** (NEW) - Purpose-based naming, logical explanations - - **interactive_prototypes** (NEW) - Prototypes as thinking tools - - **content_creation** - Enhanced with 6-model framework - - **design_system** - Enhanced with WDS approach - - workflow_management, collaboration, project_tracking (kept) - ---- - -## Key Differentiators From Generic UX Agent - -### Sally (BMM) Says: -> "Every decision serves genuine user needs" -> "Start simple, evolve through feedback" - -### Freya (WDS) Says: -> "Every design decision connects to a VTC (Value Trigger Chain)" -> "Ask 'Which driving force does this serve?' for every major design choice" -> "If I can't explain it logically, it's not ready to specify" - ---- - -## WDS Concepts Now Embedded - -✅ **Value Trigger Chain (VTC)** - Load strategic context before designing -✅ **Trigger Mapping** - Connect to user psychology -✅ **Customer Awareness Cycle** - Where users are in their journey -✅ **Golden Circle** - WHY → HOW → WHAT hierarchy -✅ **Content Creation Workshop** - 6-model strategic framework -✅ **Purpose-based naming** - Function over content -✅ **Section-first workflow** - Understand whole, then parts -✅ **Interactive prototypes** - Feel before building -✅ **Logical specifications** - If explainable, it's buildable - ---- - -## Tone & Personality - -**Old:** Generic, empathetic, creative -**New:** Strategic partner, collaborative thinker, artifact creator - -**Old:** "You're empathetic and creative" -**New:** "I'm your creative collaborator who brings strategic depth to the conversation" - -**Old:** Third person ("You're Freya...") -**New:** First person ("I'm Freya...") - ---- - -## Result - -Freya now embodies: -- The **WDS methodology** (strategy → design → specification) -- The **strategic frameworks** (VTC, Trigger Map, Customer Awareness) -- The **WDS differentiators** (psychology-driven, artifact-focused, logical) -- The **collaborative approach** (thinking partner, not order-taker) - -She's no longer a generic UX agent - she's **THE WDS Strategic Design Partner**. - ---- - -## Files Modified - -1. `src/modules/wds/agents/freya-ux.agent.yaml` - Complete persona rewrite -2. `src/modules/wds/docs/examples/wds-v6-conversion/` - Moved integration reports here -3. `src/modules/wds/docs/examples/wds-v6-conversion/freya-agent-transformation.md` - This file - ---- - -**Status:** ✅ Complete -**Freya now gets it!** 🎉 - diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/html-to-design-tools-summary.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/html-to-design-tools-summary.md deleted file mode 100644 index a70888c1e..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/html-to-design-tools-summary.md +++ /dev/null @@ -1,148 +0,0 @@ -# WDS HTML to Design Tools & Work Summary - -## Overview -This document summarizes the conversation about tools (MagicPatterns, NanoBanana, html.to.design) and the HTML to Design work in the WDS v6 conversion. - -## Tools Discussed - -### 1. MagicPatterns -- **Purpose**: UI pattern generation and design system tools -- **Context**: Discussed as potential tool for WDS design system integration -- **Status**: Explored for possible integration with WDS component library - -### 2. NanoBanana -- **Purpose**: Design-to-code conversion tool -- **Context**: Mentioned in relation to automated design implementation -- **Status**: Considered for potential workflow integration - -### 3. html.to.design -- **Purpose**: Convert HTML/CSS to design files (Figma, etc.) -- **Context**: Key tool discussed for bridging development to design workflow -- **Status**: Primary focus for WDS integration discussions - -## HTML to Design Work - -### Core Concept -The HTML to Design workflow focuses on: -- Converting implemented prototypes back to design specifications -- Creating bidirectional workflow between design and development -- Supporting WDS methodology's iterative approach - -### Key Components Built - -#### 1. Dev Mode JavaScript Component -- **Location**: `src/modules/wds/workflows/4-ux-design/agentic-development/templates/components/dev-mode.js` -- **Purpose**: Interactive tool for extracting Object IDs from live prototypes -- **Features**: - - Toggle dev mode with button or Ctrl+E - - Hold Shift + Click to copy Object IDs - - Visual highlights (green when Shift held) - - Tooltip display on hover - - Success feedback when copied - - Form field protection (Shift disabled when typing) - -#### 2. Work File Template -- **Location**: `src/modules/wds/workflows/4-ux-design/agentic-development/templates/work-file-template.yaml` -- **Purpose**: Complete planning document for section-by-section implementation -- **Structure**: - - Metadata and device compatibility - - Design tokens (Tailwind config) - - Page requirements and demo data - - Object ID mapping - - Section breakdown with acceptance criteria - - JavaScript requirements - - Testing checklist - -#### 3. Area Tag Mapping System -- **Purpose**: HTML `` tags for precise region mapping in prototypes -- **Integration**: Works with dev-mode.js for interactive region selection -- **Benefits**: - - Enables precise click mapping on complex UI elements - - Supports image-based prototypes with interactive hotspots - - Facilitates design-to-code translation with exact coordinates - -### Workflow Integration - -#### Design to Implementation Path -1. **Design Phase**: Create specifications in WDS -2. **Implementation**: Build interactive prototypes with area tag mapping -3. **Dev Mode**: Use dev-mode.js to extract Object IDs and area coordinates -4. **Documentation**: Update specs with implementation details and region mappings -5. **Iteration**: Feed back into design process - -#### Tool Integration Points -- **MagicPatterns**: For pattern library generation -- **NanoBanana**: For automated code generation -- **html.to.design**: For reverse engineering design from implementation - -## Technical Architecture - -### Component-Based Approach -- Isolated JavaScript components for maintainability -- Event-driven architecture for user interactions -- Visual feedback systems for better UX -- **Area Tag System**: HTML `` tags for mapping interactive regions in prototypes - -### Template System -- YAML-based configuration files -- Jinja-like templating for dynamic content -- Comprehensive checklists for quality assurance - -### Browser Compatibility -- Cross-environment support with `globalThis` -- Feature detection for modern APIs -- Fallback methods for older browsers - -## Key Insights - -### 1. Bidirectional Workflow -- Traditional design-to-code flow is unidirectional -- WDS benefits from code-to-design feedback loop -- Dev mode enables continuous specification updates - -### 2. Tool Ecosystem -- No single tool solves all problems -- Combination of tools provides comprehensive solution -- Integration points are crucial for seamless workflow - -### 3. Interactive Prototypes -- Living specifications vs static documents -- Real-time feedback improves design decisions -- Object ID system bridges design and implementation - -## Future Directions - -### Tool Integration Strategy -1. **MagicPatterns**: Integrate for design system automation -2. **NanoBanana**: Explore for rapid prototyping -3. **html.to.design**: Implement for design recovery - -### Workflow Enhancement -1. **Automated Extraction**: Build tools for automatic spec generation -2. **Version Control**: Track changes between design and implementation -3. **Collaboration**: Enable real-time updates between designers and developers - -### Technical Improvements -1. **Performance**: Optimize dev-mode for large prototypes -2. **Accessibility**: Ensure tools work for all users -3. **Extensibility**: Plugin architecture for custom tools - -## Implementation Status - -### Completed -- Dev-mode.js component with full functionality -- Work-file-template.yaml with comprehensive structure -- Basic integration with WDS workflow - -### In Progress -- Tool integration testing -- Workflow documentation -- Performance optimization - -### Planned -- MagicPatterns integration -- NanoBanana exploration -- html.to.design implementation - -## Conclusion -The HTML to Design work represents a significant shift in how WDS approaches the design-implementation relationship. By focusing on bidirectional workflows and interactive tools, WDS enables more iterative and collaborative development processes. The combination of custom components (dev-mode.js) and external tools (MagicPatterns, NanoBanana, html.to.design) creates a comprehensive ecosystem for modern design and development workflows. diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/html-to-design-work-summary.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/html-to-design-work-summary.md deleted file mode 100644 index 93b98feca..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/html-to-design-work-summary.md +++ /dev/null @@ -1,143 +0,0 @@ -# WDS HTML to Design Work Summary - -## Overview -This document summarizes the work done on the HTML to Design side of the WDS v6 conversion, including tools tested and approaches explored. - -## Key Work Areas - -### 1. Lint Error Resolution -- **Files Fixed**: `installer.js`, `dev-mode.js`, `work-file-template.yaml`, `workflow.yaml`, `project-config.template.yaml`, `project-outline.template.yaml` -- **Main Issues Addressed**: - - JavaScript `no-undef` errors for browser globals (`document`, `window`, `navigator`) - - YAML parsing errors ("Empty mapping values are forbidden", "Unexpected scalar token") - - ESLint rule compliance (`unicorn/prefer-module`, `no-unused-vars`, etc.) - -### 2. Dev Mode JavaScript Component -- **Location**: `src/modules/wds/workflows/4-ux-design/agentic-development/templates/components/dev-mode.js` -- **Purpose**: Developer/feedback mode for copying Object IDs in prototypes -- **Features Implemented**: - - Toggle dev mode with button or Ctrl+E - - Hold Shift + Click to copy Object IDs - - Visual highlights (green when Shift held) - - Tooltip display on hover - - Success feedback when copied - - Form field protection (Shift disabled when typing) - -### 3. Work File Template -- **Location**: `src/modules/wds/workflows/4-ux-design/agentic-development/templates/work-file-template.yaml` -- **Purpose**: Complete planning document for section-by-section implementation -- **Structure**: - - Metadata and device compatibility - - Design tokens (Tailwind config) - - Page requirements and demo data - - Object ID mapping - - Section breakdown with acceptance criteria - - JavaScript requirements - - Testing checklist - -### 4. YAML Template Fixes -- **project-config.template.yaml**: Fixed template variable quoting -- **project-outline.template.yaml**: Fixed multi-line string formatting -- **workflow.yaml**: Resolved empty document error -- **wds-workflow-status-template.yaml**: Fixed boolean/array value quoting - -## Tools and Approaches Tested - -### 1. ESLint Configuration -- Tested browser environment detection -- Global variable declarations (`/* global document, globalThis */`) -- Environment checks (`typeof globalThis !== 'undefined'`) -- Module export patterns for browser compatibility - -### 2. YAML Linting -- Template variable quoting strategies -- Multi-line string formatting -- Empty document handling -- List syntax validation - -### 3. Interactive Prototype Architecture -- Component-based approach -- Event handling patterns -- Clipboard API integration with fallbacks -- Visual feedback systems -- Mobile-first responsive design - -## Technical Decisions - -### 1. Browser Compatibility -- Used `globalThis` for cross-environment compatibility -- Added fallback methods for clipboard operations -- Implemented feature detection for APIs - -### 2. Code Style -- Followed ESLint unicorn rules -- Used modern JavaScript patterns -- Maintained consistent formatting -- Added comprehensive comments - -### 3. Template Structure -- Used YAML for configuration files -- Implemented Jinja-like templating -- Created reusable component patterns -- Established clear naming conventions - -## Files Modified - -### JavaScript Files -1. `installer.js` - Removed unused parameter -2. `dev-mode.js` - Major refactoring for lint compliance - -### YAML Files -1. `work-file-template.yaml` - Fixed list syntax -2. `workflow.yaml` - Fixed empty document issue -3. `project-config.template.yaml` - Quoted template variables -4. `project-outline.template.yaml` - Fixed multi-line strings -5. `wds-workflow-status-template.yaml` - Quoted boolean/array values - -## Key Learnings - -### 1. Linting in Mixed Environments -- Browser JavaScript needs special handling in Node-based linters -- Template variables in YAML require careful quoting -- Empty documents in YAML can be tricky - -### 2. Interactive Prototype Development -- Component isolation is crucial for maintainability -- Event handling needs careful state management -- Visual feedback improves user experience significantly - -### 3. Template Design -- Clear structure helps with implementation -- Comprehensive checklists ensure quality -- Flexibility in configuration is important - -## Next Steps (for continuation) - -### 1. Complete Testing -- Run full lint suite to verify all fixes -- Test dev-mode functionality in browser -- Validate YAML template rendering - -### 2. Documentation -- Add inline code documentation -- Create usage examples -- Document template variables - -### 3. Integration -- Test with full WDS workflow -- Verify agent compatibility -- Check BMAD integration points - -## Technical Debt -- Some ESLint rules disabled with specific comments -- YAML templates could benefit from schema validation -- Dev-mode component could use more testing - -## Tools Mastered -- ESLint with browser globals -- YAML linting with templates -- JavaScript clipboard API -- Tailwind CSS integration -- Component-based architecture - -This summary provides a foundation for continuing the HTML to Design work in a new chat session, with clear understanding of what's been accomplished and what remains to be done. diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/session-2025-12-09-micro-steps-concepts.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/session-2025-12-09-micro-steps-concepts.md deleted file mode 100644 index 6d3c8a680..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/session-2025-12-09-micro-steps-concepts.md +++ /dev/null @@ -1,400 +0,0 @@ -# Session Log: 2025-12-09 - Micro-Steps & Concepts - -**Date:** December 9, 2025 -**Duration:** ~3 hours -**Status:** Complete ✅ - ---- - -## Objectives - -1. ✅ Create micro-file architecture for Phase 6 (Design Deliveries) -2. ✅ Create micro-file architecture for Phase 7 (Testing) -3. ✅ Create micro-file architecture for Phase 8 (Ongoing Development) -4. ✅ Integrate Greenfield/Brownfield concepts -5. ✅ Integrate Kaizen/Kaikaku concepts -6. ✅ Simplify to DD-XXX for all deliveries - ---- - -## Work Completed - -### 1. Phase 6: Design Deliveries Micro-Steps (7 files) - -**Created:** - -- `src/modules/wds/workflows/6-design-deliveries/workflow.md` -- `src/modules/wds/workflows/6-design-deliveries/steps/step-6.1-detect-completion.md` -- `src/modules/wds/workflows/6-design-deliveries/steps/step-6.2-create-delivery.md` -- `src/modules/wds/workflows/6-design-deliveries/steps/step-6.3-create-test-scenario.md` -- `src/modules/wds/workflows/6-design-deliveries/steps/step-6.4-handoff-dialog.md` -- `src/modules/wds/workflows/6-design-deliveries/steps/step-6.5-hand-off.md` -- `src/modules/wds/workflows/6-design-deliveries/steps/step-6.6-continue.md` - -**Key features:** - -- Emphasizes parallel work (design next while BMad builds current) -- Structured 10-phase handoff dialog with BMad Architect -- Clear continuation strategy to prevent designer blocking -- Iterative design → handoff → build → test cycle - ---- - -### 2. Phase 7: Testing Micro-Steps (8 files) - -**Created:** - -- `src/modules/wds/workflows/7-testing/workflow.md` -- `src/modules/wds/workflows/7-testing/steps/step-7.1-receive-notification.md` -- `src/modules/wds/workflows/7-testing/steps/step-7.2-prepare-testing.md` -- `src/modules/wds/workflows/7-testing/steps/step-7.3-run-tests.md` -- `src/modules/wds/workflows/7-testing/steps/step-7.4-create-issues.md` -- `src/modules/wds/workflows/7-testing/steps/step-7.5-create-report.md` -- `src/modules/wds/workflows/7-testing/steps/step-7.6-send-to-bmad.md` -- `src/modules/wds/workflows/7-testing/steps/step-7.7-iterate-or-approve.md` - -**Key features:** - -- Comprehensive test execution (happy path, errors, edge cases, design system, a11y) -- Structured issue creation with severity levels (Critical, High, Medium, Low) -- Professional test reporting format -- Iteration until approval with retest process -- Clear sign-off process - ---- - -### 3. Phase 8: Ongoing Development Micro-Steps (9 files) - -**Created:** - -- `src/modules/wds/workflows/8-ongoing-development/workflow.md` -- `src/modules/wds/workflows/8-ongoing-development/steps/step-8.1-identify-opportunity.md` -- `src/modules/wds/workflows/8-ongoing-development/steps/step-8.2-gather-context.md` -- `src/modules/wds/workflows/8-ongoing-development/steps/step-8.3-design-update.md` -- `src/modules/wds/workflows/8-ongoing-development/steps/step-8.4-create-delivery.md` -- `src/modules/wds/workflows/8-ongoing-development/steps/step-8.5-hand-off.md` -- `src/modules/wds/workflows/8-ongoing-development/steps/step-8.6-validate.md` -- `src/modules/wds/workflows/8-ongoing-development/steps/step-8.7-monitor.md` -- `src/modules/wds/workflows/8-ongoing-development/steps/step-8.8-iterate.md` - -**Key features:** - -- Kaizen (改善) continuous improvement philosophy -- Two contexts: Existing Product Entry Point + Post-Launch Improvement -- Small, focused changes (1-2 weeks each) -- Measure → Learn → Improve → Repeat cycle -- Impact measurement and learning documentation - ---- - -### 4. Concepts Integration - -**Created:** - -- `src/core/resources/wds/glossary.md` - Complete reference for all concepts -- `CONCEPTS-INTEGRATION.md` - Map of where concepts are used - -**Updated:** - -- `src/modules/wds/workflows/workflow-init/project-type-selection.md` -- `src/modules/wds/workflows/8-ongoing-development/workflow.md` -- `src/modules/wds/workflows/8-ongoing-development/existing-product-guide.md` -- `src/modules/wds/workflows/8-ongoing-development/steps/step-8.8-iterate.md` - -**Concepts added:** - -#### Software Development Terms - -- **Greenfield Development:** Building from scratch, no constraints (Phases 1-7) -- **Brownfield Development:** Working with existing systems (Phase 8) - -#### Lean Manufacturing Terms - -- **Kaizen (改善):** Continuous improvement, small incremental changes (Phase 8) -- **Kaikaku (改革):** Revolutionary change, major transformation (Phases 1-7) -- **Muda (無駄):** Waste elimination - -**Key pairings:** - -``` -Greenfield + Kaikaku = New Product (Phases 1-7) -Brownfield + Kaizen = Existing Product (Phase 8) -``` - -**Philosophy:** -"Kaikaku to establish, Kaizen to improve" - Use revolutionary change to build v1.0, then continuous improvement forever. - ---- - -### 5. Simplification: DD-XXX for All Deliveries - -**Decision:** Use Design Deliveries (DD-XXX) for all design handoffs, regardless of scope. - -**Rationale:** - -- Simpler for BMad to consume (one format) -- Consistent handoff process -- Easier to track and manage -- Same format, different scope - -**Before (Complex):** - -- DD-XXX for complete new flows (Phases 4-7) -- SU-XXX for incremental improvements (Phase 8) -- Two different formats to maintain - -**After (Simple):** - -- DD-XXX for everything -- `type: "complete_flow"` vs `type: "incremental_improvement"` -- `scope: "new"` vs `scope: "update"` - -**YAML Differentiation:** - -Large scope (new flows): - -```yaml -delivery: - id: 'DD-001' - name: 'Login & Onboarding' - type: 'complete_flow' - scope: 'new' -``` - -Small scope (improvements): - -```yaml -delivery: - id: 'DD-011' - name: 'Feature X Onboarding Improvement' - type: 'incremental_improvement' - scope: 'update' - version: 'v2.0' - previous_version: 'v1.0' -``` - -**Files updated:** - -- ✅ `src/core/resources/wds/glossary.md` -- ✅ `src/modules/wds/workflows/8-ongoing-development/workflow.md` -- ✅ `src/modules/wds/workflows/8-ongoing-development/steps/step-8.4-create-delivery.md` -- ✅ `src/modules/wds/workflows/8-ongoing-development/steps/step-8.5-hand-off.md` -- ✅ `src/modules/wds/workflows/8-ongoing-development/steps/step-8.6-validate.md` -- ✅ `src/modules/wds/workflows/8-ongoing-development/steps/step-8.7-monitor.md` -- ✅ `src/modules/wds/workflows/8-ongoing-development/steps/step-8.8-iterate.md` -- ✅ `src/modules/wds/workflows/8-ongoing-development/existing-product-guide.md` - -**All SU-XXX → DD-XXX migration complete!** - ---- - -### 6. Test Scenario Relationship - -**Clarified:** Test Scenarios (TS-XXX) are directly tied to Design Deliveries (DD-XXX) - -**One-to-one relationship:** - -- DD-001 → TS-001 -- DD-002 → TS-002 -- DD-015 (improvement) → TS-015 - -**Created together:** - -- Phase 6, Step 6.2: Create Design Delivery (DD-XXX) -- Phase 6, Step 6.3: Create Test Scenario (TS-XXX) - -**Why tied?** -The Test Scenario validates that the business and user goals defined in the Design Delivery are actually achieved. The DD defines WHAT success looks like, the TS defines HOW to verify it. - ---- - -## Statistics - -**Files created:** 26 - -- Phase 6: 7 files -- Phase 7: 8 files -- Phase 8: 9 files -- Glossary: 1 file -- Integration map: 1 file - -**Lines written:** ~27,000 - -- Phase 6: ~7,000 lines -- Phase 7: ~10,000 lines -- Phase 8: ~10,000 lines - -**Files updated:** 5 - -- Project type selection -- Phase 8 workflow -- Existing product guide -- Step 8.8 -- Step 8.4 (partial) - ---- - -## Key Decisions - -### 1. Micro-File Architecture - -Adopted BMad's pattern of breaking workflows into sequential, self-contained step files for disciplined execution. - -### 2. Kaizen Philosophy - -Phase 8 embodies Kaizen (改善) - continuous improvement through small, incremental changes that compound over time. - -### 3. DD-XXX Simplification - -Eliminated SU-XXX format. All deliveries use DD-XXX with `type` and `scope` fields to differentiate. - -### 4. Terminology Integration - -Integrated industry-standard terms (Greenfield/Brownfield, Kaizen/Kaikaku) to connect WDS to established methodologies. - -### 5. TS-XXX Relationship - -Clarified that Test Scenarios are created alongside Design Deliveries and validate the same business/user goals. - ---- - -## Challenges & Solutions - -### Challenge 1: Phase 6 Initially Single File - -**Problem:** First attempt only refactored content within existing file instead of creating separate micro-step files. - -**Solution:** User pointed out the issue. Created proper micro-file structure with `workflow.md` and individual `step-6.X-*.md` files. - -### Challenge 2: Two Delivery Formats - -**Problem:** Having both DD-XXX and SU-XXX created confusion and maintenance burden. - -**Solution:** User suggested simplification. Unified to DD-XXX for everything with `type` and `scope` fields to differentiate. - -### Challenge 3: Documentation Sprawl - -**Problem:** Started creating separate documents for planning and tracking. - -**Solution:** User requested consolidation. Added all planning to existing roadmap instead of creating new documents. - ---- - -## Examples Created - -### Phase 6 Example: Dog Week Onboarding - -- Complete flow from welcome to dashboard -- 4 scenarios specified -- Design system components defined -- Handoff dialog with BMad Architect -- Test scenario for validation - -### Phase 7 Example: Feature X Validation - -- Happy path tests (5 tests) -- Error state tests (4 tests) -- Edge case tests (3 tests) -- Design system validation (3 components) -- Accessibility tests (3 tests) -- 8 issues found, documented, fixed, retested - -### Phase 8 Example: Feature X Onboarding Improvement - -- Problem: 15% usage, 40% drop-off -- Solution: Add inline onboarding -- Impact: 15% → 58% usage (4x increase) -- Effort: 3 days -- Kaizen cycle: 2 weeks total - ---- - -## Next Steps - -### Immediate (This Week) - -1. Complete SU-XXX → DD-XXX migration in Phase 8 step files -2. Test Phase 6/7/8 workflows with real project -3. Create commit for today's work - -### Short-term (Next Week) - -1. Complete remaining module tutorials (03, 05-07, 09-11, 13-16) -2. Create WDS Excalidraw component library -3. Test complete WDS → BMad workflow - -### Long-term (This Month) - -1. Implement auto-export automation (GitHub Actions) -2. Refine assessment criteria based on usage -3. Test Figma MCP integration with real components - ---- - -## Learnings - -### 1. Micro-Steps Enable Discipline - -Breaking complex workflows into small, sequential steps makes execution more disciplined and reduces cognitive load. - -### 2. Philosophy Matters - -Connecting WDS to established methodologies (Lean, Kaizen) gives designers a mental model and vocabulary for the work. - -### 3. Simplification is Powerful - -Reducing from two delivery formats to one eliminates confusion and maintenance burden while maintaining necessary differentiation. - -### 4. Parallel Work is Key - -Phase 6 emphasizes parallel work (design next while BMad builds current) to prevent designer blocking and maximize throughput. - -### 5. Measurement Drives Improvement - -Phase 8's focus on measuring impact after each cycle enables data-driven continuous improvement. - ---- - -## Git Commit Message - -``` -feat(wds): Implement micro-file architecture for Phase 6, 7, 8 + integrate concepts - -PHASE 6: Design Deliveries (7 files) -- Micro-steps for iterative handoff workflow -- Structured dialog with BMad Architect -- Parallel work strategy - -PHASE 7: Testing (8 files) -- Comprehensive validation workflow -- Issue creation and reporting -- Iterate until approved - -PHASE 8: Ongoing Development (9 files) -- Kaizen (改善) continuous improvement -- Small, focused changes (1-2 weeks) -- Measure → Learn → Improve → Repeat - -CONCEPTS INTEGRATION: -- Greenfield/Brownfield (software development) -- Kaizen/Kaikaku (Lean manufacturing) -- Complete glossary created - -SIMPLIFICATION: -- DD-XXX for all deliveries (removed SU-XXX) -- Same format, different scope -- Simpler for BMad to consume - -TOTAL: 26 files created, ~27,000 lines -STATUS: Phase 6/7/8 complete, SU-XXX migration in progress - -Co-authored-by: Cascade AI -``` - ---- - -## Session Complete ✅ - -**All objectives achieved!** - -**Next session:** Complete SU-XXX → DD-XXX migration in remaining Phase 8 files. diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/session-2025-12-31-content-production-workshop.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/session-2025-12-31-content-production-workshop.md deleted file mode 100644 index 896c44e1d..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/session-2025-12-31-content-production-workshop.md +++ /dev/null @@ -1,1188 +0,0 @@ -# Session Log: 2025-12-31 - Content Production Workshop - -**Date:** December 31, 2025 -**Status:** In Progress (Paused for Method Plumbing) 🔄 - ---- - -## Objectives - -1. 🔄 Design "Scientific Content Creation Workflow" for WDS agents -2. ⏸️ Document strategic frameworks in method guides -3. ⏸️ Integrate frameworks into agent instructions -4. ⏸️ Implement Value Trigger Chain Content Analysis structure - ---- - -## Key Naming Decision - -**Value Trigger Chain (VTC)** -- **Full Name:** Value Trigger Chain -- **Short Form:** Trigger Chain -- **Abbreviation:** VTC (in diagrams/code) - -**Rationale:** The value is TRIGGERED (realized) when the user's driving forces are triggered. This name captures: -- Source: Trigger Map -- Mechanism: Triggering driving forces -- Outcome: Value delivery - -**Context Disambiguation:** -- WDS context: "Trigger Chain" refers to Value Trigger Chain -- Code context: Use "event trigger" or "code trigger" to avoid confusion - ---- - -## Context - -User identified issues with agent behavior during WDS landing page content creation. Agents were generating suggestions without systematic strategic analysis, leading to: -- Content lacking strategic grounding -- No explanation of WHY specific content was chosen -- Agents "blurting out versions" instead of engaging in dialog -- No scientific approach to content generation - ---- - -## Strategic Content Creation Chain - -Developed comprehensive framework for content generation: - -``` -Business Goal - ↓ -User + Driving Forces (positive & negative) - ↓ -Scenario → Trigger Chain Selection - ↓ -Usage Situation - ↓ -Flow Context (where user has been) - ↓ -Page Purpose - ↓ -Text Section → Local Purpose (emotions, facts, tools, mental pictures) - ↓ -Value Added to Driving Forces & Business Goal -``` - -**Key Principle:** Content should be generated from strategic context, not created in isolation. - ---- - -## Value Trigger Chain Content Analysis - -### Concept - -Attach strategic reasoning to each key content component on a page. Shows: -- Which business goal this content serves -- Which user it targets -- Which driving forces it addresses -- Why this specific content was chosen - -### Structure - -Table format with columns: - -| Business Goal | Solution | User | Driving Forces | -|--------------|----------|------|----------------| -| 1000 Registered users | Landing page | Harriet (hairdresser) | • Wish to be queen of beauty | -| 500 Premium signups | | | • Fear of falling behind | -| | | | • Wish to save time | -| | | Tom (trainer) | • Wish to grow business | - -### Benefits - -1. **Transparency:** Designer understands WHY content is structured this way -2. **Flexibility:** Designer can adjust trigger chain and regenerate content -3. **Multi-angle content:** Different driving forces create different message angles -4. **Options presentation:** Agent can show how content changes based on trigger chain selection - -### Example: Multi-Angle Content - -**Same Goal, Different Driving Forces:** -- "Wanting to be right" → Confidence-building, empowerment messaging -- "Fearing to be wrong" → Risk-reduction, reassurance messaging - -Agent presents: *"If we address fear of X, then the content should sound like..."* - ---- - -## Strategic Frameworks to Integrate (from WPS2C v4) - -### 1. Customer Awareness Cycle (Eugene Schwartz) - -**Stages:** -- Unaware -- Problem Aware -- Solution Aware -- Product Aware -- Most Aware - -**Integration with Scenarios:** - -Every scenario should move user from one CAC position to a more favorable one: - -``` -Scenario Structure with CAC: -- Business Goal (+ how CAC progression feeds it) -- User + Usage Context -- CAC Starting Point ← NEW -- CAC Target Position ← NEW -- User's Driving Forces (contextualized by awareness level) -- Solution/Interaction (designed to move through CAC) -``` - -**Example: Golf Resort** - -``` -FROM: Product Aware → "I know there are golf courses in Dubai" -TO: Most Aware → "I've played at [Your Resort], loved it, told others" - -Business Goal: 4.5+ star reviews (measurable CAC outcome) -``` - -**Strategic Anchors CAC Provides:** -- What content to show? → Moves from Product Aware to Most Aware -- What actions to enable? → Progresses through cycle -- What emotions to evoke? → Reduces friction at each stage -- How to measure success? → Did they advance in CAC? - -**Key Insight:** Driving forces change based on awareness level. A golfer who is "Problem Aware" (frustrated with crowded courses) has different active goals than one who is "Product Aware" (comparing Dubai courses). - -**Usage in v4:** Used in Conceptual Documentation phase (`04-Conceptual-Documentation.md`) -- Framed each phase based on user awareness -- Guided conversation strategy -- Determined content depth and messaging - ---- - -### 2. Golden Circle (Simon Sinek) - -**Structure:** -- WHY (purpose, belief, motivation) -- HOW (process, differentiators) -- WHAT (product, features) - -**Usage in v4:** Used in Product Brief Discovery (`01-Product-Brief-Discovery.md`) -- Structured discovery conversations -- Started with WHY questions (purpose, vision) -- Moved to HOW (approach, differentiators) -- Ended with WHAT (features, deliverables) - -**Integration Point:** Product Brief phase, messaging hierarchy, value proposition - ---- - -### 3. Action Mapping (Cathy Moore) - -**Purpose:** Focus on what users DO, not just what they KNOW - -**Usage in v4:** Used in Scenario Step Exploration -- Identified user actions that drive business results -- Eliminated information-only steps -- Focused on practice and application - -**Integration Point:** UX Design phase, interaction design, scenario steps - ---- - -### 4. Kathy Sierra's Teachings - -**Principles:** -- Make users feel capable (not just informed) -- Reduce cognitive load -- Create "aha moments" -- Focus on user badassery, not product features - -**Usage in v4:** Used in component design and user experience -- Component specifications focused on capability -- Microcopy reduced anxiety -- Interaction patterns built confidence - -**Integration Point:** Component specifications, microcopy, interaction patterns, content creation - ---- - -## Agent Content Creation Behavior - -### Current (Problematic) -- Agent gets prompt → immediately generates suggestion -- No strategic analysis -- No explanation of reasoning -- Refuses to stay in dialog until good solution found - -### Desired (Scientific) -1. Agent receives content creation request -2. Agent identifies strategic context: - - Business goal(s) - - Target user(s) and driving forces - - CAC starting/target position - - Scenario and trigger chain - - Usage situation - - Flow context - - Page purpose - - Text section local purpose -3. Agent presents context to designer: *"Here's the strategic context I'm working with..."* -4. Agent generates content WITH reasoning: *"Based on [trigger chain], targeting [driving force], this content takes the form..."* -5. Designer can: - - Accept content - - Adjust trigger chain → regenerate - - Request alternative angles - - Engage in dialog until satisfied - -### Implementation Considerations - -**In Most Cases:** -- Agent has enough context to present full section/page content -- Designer reviews and adjusts trigger chain if needed -- No workshop required for every text block - -**For Complex Content:** -- Agent may present options based on different trigger chain selections -- Designer chooses angle or requests synthesis -- Iterative refinement with strategic grounding - -**Always:** -- Agent explains WHY content is structured this way -- Trigger chain reasoning is explicit and editable -- Multiple strategic frameworks can inform decision simultaneously - ---- - -## Multi-Dimensional Framework Synthesis - -**Key Insight:** AI is phenomenal at getting multi-dimensional input (even conflicting frameworks) and creating a single output where all input is weighted and synthesized. - -**Approach:** -- Don't require all frameworks to be used all the time -- Allow frameworks to complement or tension with each other -- AI synthesizes: Golden Circle + Action Mapping + Kathy Sierra + CAC → Optimal content - -**Example Synthesis:** -- WHY (Golden Circle) → Purpose-driven messaging -- Problem Aware → Product Aware (CAC) → Content depth and framing -- Action focus (Action Mapping) → Call-to-action design -- Build capability (Kathy Sierra) → Confidence-building language - -= **Resulting content addresses purpose, meets user where they are, focuses on action, builds confidence** - ---- - -## Proposed Implementation Structure - -### 1. Method Documentation (`docs/method/`) - -Create tool-agnostic guides for each strategic framework: - -**New Files to Create:** -- `cac-integration-guide.md` - Customer Awareness Cycle -- `golden-circle-guide.md` - Simon Sinek's framework -- `action-mapping-guide.md` - Cathy Moore's method -- `kathy-sierra-badass-users.md` - User capability framework -- `value-chain-content-analysis-guide.md` - New WDS concept - -**Structure for Each:** -- What it is (overview) -- Why it matters (benefits) -- When to use it (context) -- How to apply it (step-by-step) -- Examples (real-world applications) -- Integration points (where in WDS process) - -### 2. Agent Instructions - -Reference methods in agent personas/workflows: - -**Example Pattern:** -```markdown -When creating content for [scenario/page]: - -1. Identify user's CAC position (see method/cac-integration-guide.md) -2. Use Kathy Sierra's method to identify aha moment (see models/kathy-sierra-badass-users.md) -3. Organize information according to Golden Circle (see method/golden-circle-guide.md) -4. Ensure action focus per Action Mapping (see method/action-mapping-guide.md) -5. Present Value Trigger Chain Content Analysis showing strategic reasoning -``` - -### 3. Workflow Integration - -Embed framework checkpoints at appropriate workflow stages: - -**Scenario Definition (Phase 2):** -- Add CAC Starting Point field -- Add CAC Target Position field -- Validate: Does scenario move user forward in CAC? - -**Content Creation (Phase 4):** -- Activate Value Trigger Chain Content Analysis -- Reference relevant frameworks (CAC, Golden Circle, Kathy Sierra) -- Generate content with strategic reasoning - -**Page Specifications:** -- Include Trigger Chain (VTC) table for each key content section -- Show which business goal + user + driving force each section serves -- Allow designer to adjust and regenerate - ---- - -## Use Cases Beyond Content Production - -**User Question:** "These models are great for content production and copywriting, but they could serve a great purpose in other purposes as well in the WDS process?" - -**Answer:** Yes! Strategic frameworks have multiple applications: - -### Customer Awareness Cycle -- **Product Brief:** Determine where target users currently are in awareness -- **Trigger Mapping:** Map scenarios to CAC progression -- **Content Creation:** Match messaging to awareness level -- **Testing:** Validate that interactions move users forward in CAC - -### Golden Circle -- **Product Brief:** Structure discovery conversations (WHY → HOW → WHAT) -- **Positioning:** Create value proposition hierarchy -- **Messaging:** Organize communication from purpose to features -- **Stakeholder Alignment:** Get buy-in by starting with WHY - -### Action Mapping -- **Scenario Design:** Focus on user actions that drive business results -- **Interaction Design:** Eliminate information-only steps -- **Component Specs:** Design for action, not just display -- **Testing:** Validate that users can actually DO the thing - -### Kathy Sierra -- **Component Design:** Build capability, not just functionality -- **Microcopy:** Reduce anxiety, build confidence -- **Onboarding:** Create aha moments early -- **Error Messages:** Help users feel capable even when things go wrong - ---- - -## Examples from Old v4 Repo - -### Customer Awareness Cycle Usage (04-Conceptual-Documentation.md) - -```markdown -For each conceptual step: -1. Assess user's awareness level (Unaware → Most Aware) -2. Match content depth to awareness: - - Problem Aware: Show the problem clearly - - Solution Aware: Introduce your approach - - Product Aware: Show how YOUR product works -3. Design progression to next awareness level -``` - -### Golden Circle Usage (01-Product-Brief-Discovery.md) - -```markdown -Discovery conversation structure: - -WHY Questions: -- Why does this product need to exist? -- What problem keeps you up at night? -- What would success look like for your users? - -HOW Questions: -- How is your approach different? -- How will users experience this? -- How will you measure success? - -WHAT Questions: -- What features are must-haves? -- What is out of scope? -- What are the deliverables? -``` - -### Action Mapping Usage (Scenario Exploration) - -```markdown -For each scenario step: -1. What does the user DO? -2. What business result does this action drive? -3. Remove any step that is "learn about X" without action -4. Focus on practice, application, decision-making -``` - -### Kathy Sierra Usage (Component Design) - -```markdown -For each component: -1. What capability does this give the user? -2. What makes them feel "I can do this"? -3. What reduces cognitive load? -4. What creates an aha moment? -5. How do we help them feel badass? -``` - ---- - -## Next Steps - -### Method Plumbing (Current Priority) - -User requested pause to do foundational work: - -1. ✅ Document current content discussion (this file) -2. ⏸️ Create method guides for each strategic framework -3. ⏸️ Define Value Trigger Chain Content Analysis data structure -4. ⏸️ Update existing method guides to reference frameworks -5. ⏸️ Design content creation workflow/agent -6. ⏸️ Update agent instructions with framework references - -### When Resuming Content Work - -1. Test scientific content creation approach with WDS landing page -2. Validate Value Trigger Chain Content Analysis structure -3. Refine agent behavior based on real usage -4. Document patterns and best practices - ---- - -## Key Decisions - -### 1. CAC Integration with Scenarios - -**Decision:** Every scenario must explicitly define CAC starting point and target position. - -**Rationale:** Provides clear strategic anchor for all content and interaction decisions. Makes scenario success measurable. - -### 2. Value Trigger Chain Content Analysis - -**Decision:** Create explicit data structure showing strategic reasoning for each content component. - -**Rationale:** Makes agent reasoning transparent, allows designer control, enables multi-angle content generation. - -### 3. Multi-Dimensional Framework Synthesis - -**Decision:** Don't require all frameworks all the time. Let AI synthesize multiple (even conflicting) frameworks. - -**Rationale:** Leverages AI's strength in multi-dimensional synthesis. More flexible than rigid framework application. - -### 4. Method Documentation Structure - -**Decision:** Create tool-agnostic method guides that agents reference in their instructions. - -**Rationale:** Separates methodology from implementation. Allows reuse across different agents and contexts. - ---- - -## Quotes & Insights - -> "The agent just spit out a suggestion after each prompt without asking or thinking." - -> "I wanted to create the content for the WDS page. This is a complex task that I had worried a lot about. Instead of worrying, I started a full WDS process. I made a great PRD and went through the process of making a Trigger map. I got a lot of great inspiration and have a ton of context for the process." - -> "The agent did not go about this in a scientific way. The agent blurted out versions left and right and refused to stay in the dialog until a good solution was found." - -> "Based on all these data points, we have a fantastic position to write awesome content. I wish for the agent to identify this information and feed it to the user when it is time to create a text section. This is what I mean with scientific approach!" - -> "Wanting to be right and fearing to be wrong is on the face of it technically the same thing, but in terms of driving forces it gives two different messages in terms of content presented to the user." - -> "AI is phenomenal at getting multi-dimensional input and create a single output where all of the sometimes conflicting input is taken into account and weighed against each other." - -> "A scenario should in essence take a user from one less favorable position in the CAC to a more favorable one. That is very useful to define where the user starts." - ---- - -## Session Status - -**Current Phase:** Method Plumbing 🔧 -**Next Up:** Create strategic framework method guides -**Blocked:** None -**Notes:** Content discussion well-documented, ready to resume after method documentation is complete - ---- - ---- - -## Work Completed Today - Method Plumbing ✅ - -### Documentation Structure Created - -**Folder Structure:** -``` -docs/ -├── models/ ← NEW! External strategic frameworks -│ ├── README.md -│ ├── customer-awareness-cycle.md -│ ├── impact-effect-mapping.md -│ ├── golden-circle.md -│ ├── action-mapping.md -│ └── kathy-sierra-badass-users.md -├── method/ -│ ├── value-trigger-chain-guide.md ← NEW! -│ └── [existing phase guides...] -└── examples/ - └── wds-v6-conversion/ ← NEW! - ├── README.md - ├── session-logs/ - └── [roadmap, concepts...] -``` - -### Files Created (12 new files) - -**Models (6 comprehensive guides):** -1. **customer-awareness-cycle.md** (~800 lines) - - Eugene Schwartz framework - - Full attribution and source materials - - 5 stages explained in detail - - WDS applications and examples - -2. **impact-effect-mapping.md** (~650 lines) - - Mijo Balic, Ingrid Domingues, Gojko Adzic - - Original Effect Mapping + Impact Mapping adaptation - - How Trigger Mapping and VTC derive from it - - Workshop process and examples - -3. **golden-circle.md** (~700 lines) - - Simon Sinek framework - - WHY → HOW → WHAT structure - - Biological basis (limbic brain) - - Application in discovery and messaging - -4. **action-mapping.md** (~750 lines) - - Cathy Moore framework - - Focus on actions vs. information - - Scenario design and onboarding applications - - Step-by-step process with examples - -5. **kathy-sierra-badass-users.md** (~750 lines) - - Kathy Sierra's user capability focus - - Cognitive resources, Suck Zone, Badass Users - - Component design and microcopy applications - - Making users feel capable - -6. **models/models-guide.md** (~300 lines) - - Overview of all models - - When to use each - - How they work together - - Models vs. Methods distinction - - Attribution and gratitude - -**Methods (1 comprehensive guide):** -7. **value-trigger-chain-guide.md** (~443 lines) - - Complete VTC methodology - - Lightweight vs. full Trigger Map - - Step-by-step creation process - - Usage throughout design process - - Examples and templates - -**Examples (3 documentation files):** -8. **examples/wds-v6-conversion/README.md** (~217 lines) - - Meta-project documentation - - Session logs as learning resource - - Why it's useful as example - -9. **examples/wds-v6-conversion/session-logs/** (moved existing) - - session-2025-12-09-micro-steps-concepts.md - - session-2025-12-31-content-production-workshop.md (this file) - - conversion-guide.md - -10. **examples/README.md** (~107 lines) - - Overview of all examples - - WDS Presentation + WDS v6 Conversion - - How to use examples - -**Main Documentation:** -11. **Updated docs/README.md** - - Added Models section - - Updated structure diagram - - Four clear purposes (was three) - -12. **Updated docs/examples/README.md** - - Now includes WDS v6 Conversion example - -### Key Accomplishments - -**1. Naming Finalized: Value Trigger Chain (VTC)** -- Full name for clarity -- "Trigger Chain" for conversation -- VTC abbreviation for diagrams -- Rationale documented - -**2. Complete Model Documentation** -- All 5 strategic frameworks documented -- Full attribution to original creators -- Source materials (books, articles, videos) -- WDS applications explained -- Imaginary + real examples - -**3. VTC Method Guide Created** -- Positioned as heuristic (not complete strategic grounding) -- When to use VTC vs. full Trigger Map -- Step-by-step creation process -- Templates and examples -- Integration throughout WDS process - -**4. Clear Models vs. Methods Distinction** -- Models = external frameworks (attributed) -- Methods = Whiteport instruments (derived from models) -- Proper intellectual honesty - -**5. WDS v6 Conversion as Example** -- Meta-example showing WDS used to improve WDS -- Session logs preserved for learning -- Long-term project management patterns -- Context preservation demonstration - -### Statistics - -**Lines Written:** ~4,500 lines total - -**Files Created:** -- 6 model guides -- 1 method guide -- 3 README files -- 2 example documentation files - -**Cross-References:** -- Each model links to WDS methods that use it -- Each method links back to source models -- All link to WDS Presentation example -- Main docs README updated - -### Documentation Quality - -**Each guide includes:** -- ✅ What it is -- ✅ Why it matters -- ✅ How it's valuable in strategic design -- ✅ Full attribution to creators -- ✅ Source materials (books, articles, videos with links) -- ✅ Whiteport methods that harness it -- ✅ Imaginary examples (3-5 per guide) -- ✅ Real applications (link to WDS Presentation) -- ✅ Templates and how-tos -- ✅ Common questions answered - -**Language Refined:** -- Removed prescriptive "cannot" language -- Added nuanced risk/benefit explanations -- Positioned VTC as heuristic (strategic scaffolding) -- Educational rather than mandatory tone - -### Next Steps Defined - -**For Content Production (When Resuming):** -1. Create content creation workflow/agent -2. Implement Value Trigger Chain Content Analysis -3. Update agent instructions with framework references -4. Test scientific approach with WDS landing page - -**For Method Documentation (Ongoing):** -1. Audit method guides for consistency -2. Add framework references where applicable -3. Update phase guides with model links - -**For Examples (Future):** -4. Continue documenting v6 conversion sessions -5. Add more real-world examples as projects complete - ---- - ---- - -## Part 4: VTC Workshop Implementation - -### Context - -User requested VTC Workshop to be created for use in: -- **Phase 1:** Product Pitch (simplified VTC for stakeholder communication) -- **Phase 4:** Scenario Definition (VTC for each scenario) - -Workshop should: -1. Route based on whether Trigger Map exists -2. Creation path (30 mins) when no Trigger Map -3. Selection path (15 mins) when Trigger Map available -4. Output standard VTC YAML format -5. Provide micro-step breakdowns for disciplined execution - -### VTC Workshop Suite Created - -**Location:** `workflows/shared/vtc-workshop/` - -**Structure:** -``` -vtc-workshop/ -├── vtc-workshop-guide.md (Overview & usage guide) -├── vtc-workshop-router.md (Entry point - smart routing) -├── vtc-creation-workshop.md (30 min guide - from scratch) -├── vtc-selection-workshop.md (15 min guide - from Trigger Map) -├── vtc-template.yaml (Standard output format) -├── creation-steps/ (Micro-step breakdown) -│ ├── workflow.md (7-step workflow) -│ ├── step-01-define-business-goal.md -│ ├── step-02-identify-solution.md -│ ├── step-03-describe-user.md -│ ├── step-04-positive-driving-forces.md -│ ├── step-05-negative-driving-forces.md -│ ├── step-06-customer-awareness.md -│ └── step-07-review-and-save.md -└── selection-steps/ (Micro-step breakdown) - ├── workflow.md (8-step workflow) - ├── step-01-load-trigger-map.md - ├── step-02-select-business-goal.md - ├── step-03-select-user.md - ├── step-04-select-driving-forces.md - ├── step-05-define-solution.md - ├── step-06-customer-awareness.md - ├── step-07-optional-refinement.md - └── step-08-review-and-save.md -``` - -### Key Features - -**Smart Router:** -- "Have Trigger Map?" → Selection (faster, leverages research) -- "No Trigger Map?" → Creation (from scratch, still strategic) - -**Creation Workshop (30 minutes):** -- 7 sequential micro-steps -- Creates VTC completely from scratch -- Each step: focused, atomic, validated -- For early stage, quick projects, no map available - -**Selection Workshop (15 minutes):** -- 8 sequential micro-steps -- Extracts VTC from existing Trigger Map -- Maintains consistency with strategic research -- For complex projects with established foundation - -**Micro-Step Pattern:** -- Each step is atomic and focused -- Validation at every step -- Clear capture formats -- Common issues + solutions -- Progress tracking -- Links to next step - -**Standard Output:** -- YAML format (vtc-template.yaml) -- Full metadata (source, date, priorities) -- Refinement tracking -- Validation checklist -- Usage notes and applications - -### Integration Points - -**Phase 1: Product Pitch** -- Router → Creation Workshop (usually no map yet) -- Output: `docs/A-Product-Brief/vtc-primary.yaml` -- Used in: Pitch deck, stakeholder communication - -**Phase 4: Scenario Definition** -- Router → Selection Workshop (if map exists) -- Router → Creation Workshop (if no map) -- Output: `docs/D-UX-Design/[scenario-name]/vtc.yaml` -- Used in: Page design, content creation, component specs - -### Scalability - -**Simple Projects:** -- 1 VTC for pitch -- 2-3 VTCs for scenarios -- Total time: 1-2 hours - -**Complex Projects:** -- 1 VTC for pitch -- 10+ VTCs (one per scenario) -- All extracted from same Trigger Map (consistency) -- Total time: 2-3 hours across project - -### Documentation Quality - -**Each workshop includes:** -- ✅ Step-by-step guidance with time estimates -- ✅ Question scripts for agents -- ✅ Good vs bad examples -- ✅ Validation checklists -- ✅ Common issues + troubleshooting -- ✅ Agent instructions -- ✅ Capture formats (YAML) -- ✅ Design implications -- ✅ Next actions guidance - -**Each micro-step includes:** -- ✅ Duration and purpose -- ✅ What you'll do (clear action) -- ✅ Questions to ask user -- ✅ Guidelines and examples -- ✅ Capture format (YAML snippet) -- ✅ Validation checklist -- ✅ Common issues + solutions -- ✅ Progress tracking -- ✅ Clear link to next step - -### Impact - -**Before:** Designs made on opinion/taste -**After:** Designs grounded in strategic VTC - -**Quick Projects:** 30-minute Creation Workshop → strategic grounding -**Complex Projects:** 15-minute Selection Workshop → consistency across scenarios - -**Result:** Strategic design at scale! 🚀 - ---- - -**Session Status:** Content Creation Workshop + Content Purpose Framework COMPLETE ✅ -**Documentation Updated:** Context-dependent goals examples + Purpose dimension integrated -**Workshop Built:** 6-Model Content Creation Framework (Purpose + 5 strategic models) -**Foundation Complete:** Strategic frameworks + VTC workshops + Content Creation Workshop + Purpose-driven review -**Ready for Real-World Testing:** All workshops in Alpha, awaiting feedback - ---- - -## Part 5: Documentation Integration (2025-12-31 End) - -### Context-Dependent Goals Examples Added - -**Integrated into documentation:** - -1. **Phase 2: Trigger Mapping Guide** - - Added "Understanding Usage Goals vs. Context" section - - Dubai Golf Resort example (cross-context opportunities) - - Clarified that usage goals are **contextual** and activate in specific situations - - Explained how same person has different active goals in different contexts - -2. **Value Trigger Chain Guide** - - Enhanced Harriet (hairdresser) example with context explanation - - Clarified what goals are active vs. inactive in specific usage situation - - Showed why context matters for design decisions - -**Key Clarifications Now in Docs:** -- ✅ Usage goals are context-specific, not person-wide -- ✅ Same person has different active goals in different situations -- ✅ Trigger Maps focus on the usage situation they serve -- ✅ Cross-context opportunities (golf + restaurant example) -- ✅ Design implications flow from understanding context - -**Examples Used:** -- Dubai Golf Resort (booking + restaurant contexts) -- Harriet the Hairdresser (professional vs. other life contexts) - ---- - -## Part 6: Content Creation Workshop Implementation (2026-01-01) - -### The 5-Model Content Creation Framework - -**Problem Solved:** -Agents were "blurting out versions" without strategic thinking. Needed a disciplined, multi-model framework for creating strategically grounded content. - -**Solution:** -Created Content Creation Workshop with 5 strategic models applied sequentially: - -1. **VTC = Strategic Foundation** (What & Who) - - Provides: Business goal, solution, user, driving forces, customer awareness positioning - - Answers: WHO are we serving? WHAT motivates them? WHERE are they in their journey? - -2. **Customer Awareness Cycle = Content Strategy** (Language & Focus) - - Provides: Language appropriate to awareness level, information priorities, required proof - - Answers: WHAT can they understand? WHAT do they need to know? WHAT will they believe? - -3. **Action Mapping = Content Filter** (Relevance) - - Provides: Required user action, relevance test - - Answers: WHAT must they DO after reading? Is this content necessary? - -4. **Badass Users = Tone & Frame** (How it feels) - - Provides: Empowerment framing, transformation narrative, cognitive load reduction - - Answers: HOW does this make them feel capable? WHAT's the "aha moment"? - -5. **Golden Circle = Structural Order** (WHY → HOW → WHAT) - - Provides: Persuasive content sequence - - Answers: WHAT order creates the most persuasive flow? - -### Workshop Structure - -**6 Sequential Micro-Steps:** -1. Load VTC Context (5 min) -2. Apply Customer Awareness Strategy (5-7 min) -3. Define Required Action (3-5 min) -4. Frame User Empowerment (5-7 min) -5. Determine Structural Order (3-5 min) -6. Generate & Review Content (5-10 min) - -**Total Duration:** 15-25 minutes per content section - -**Key Features:** -- Sequential execution (no skipping, no looking ahead) -- Multiple content variations (wish-focused, fear-focused, balanced) -- Full strategic traceability (every choice documented) -- Alpha status (awaiting real-world testing and feedback) - -### Files Created - -**Workshop Files:** -- `workflows/shared/content-creation-workshop/content-creation-workshop-guide.md` - Main guide -- `workflows/shared/content-creation-workshop/steps/workflow.md` - Sequential execution guide -- `workflows/shared/content-creation-workshop/steps/step-01-load-vtc-context.md` -- `workflows/shared/content-creation-workshop/steps/step-02-awareness-strategy.md` -- `workflows/shared/content-creation-workshop/steps/step-03-action-filter.md` -- `workflows/shared/content-creation-workshop/steps/step-04-empowerment-frame.md` -- `workflows/shared/content-creation-workshop/steps/step-05-structural-order.md` -- `workflows/shared/content-creation-workshop/steps/step-06-generate-content.md` -- `workflows/shared/content-creation-workshop/content-output.template.md` - Output template - -### Integration Points - -**Phase 4: UX Design** -- Hero sections → Content Creation Workshop -- Key feature descriptions → Content Creation Workshop -- CTAs and conversion points → Content Creation Workshop -- Error/empty state messages → Content Creation Workshop - -**Phase 1: Product Brief (Pitch)** -- Problem statements → Content Creation Workshop -- Solution descriptions → Content Creation Workshop -- Value propositions → Content Creation Workshop - -### Example Application - -**Hairdresser Newsletter Signup** (Used throughout workshop as complete example): -- VTC: 500 signups, Harriet (hairdresser), Problem Aware → Product Aware -- Awareness Strategy: Validate problem first, introduce solution category, name product last -- Action Filter: Click signup button with confidence -- Empowerment Frame: From "feeling behind" to "leading trends" -- Structure: WHY (problem recognition) → HOW (weekly digest method) → WHAT (TrendWeek + CTA) -- Result: 3 variations (wish/fear/balanced) with strategic rationale - -### What's Next - -**Before Production Use:** -1. Test Content Creation Workshop in 3+ real projects -2. Gather Alpha feedback on timing, structure, and usefulness -3. Refine based on actual usage patterns -4. Validate that multi-model approach doesn't feel overwhelming -5. Consider integration with Freya agent's page specification workflow - -**Pending from Previous Sessions:** -- Learn-WDS course structure audit → Dedicated cleanup needed -- VTC deliverable specification → Should be created -- Page specification template → Add VTC Content Analysis section - -**Strategic Foundation Complete:** -- ✅ VTC Workshop (creates strategic context) -- ✅ Content Creation Workshop (uses strategic context) -- ✅ Content Purpose Framework (makes content measurably effective) -- ✅ Strategic models documented (CAC, Golden Circle, Action Mapping, Badass Users, Impact/Effect Mapping) -- ✅ Whiteport methods documented (VTC, Trigger Mapping, Content Purpose) -- ✅ Examples integrated into documentation -- ✅ Repository organized and tidied - ---- - -## Part 7: Content Purpose Framework (2026-01-01) - -### The Breakthrough: Purpose-Driven Content - -**User Insight:** -> "This text block should explain why our product has a longer shelf life than the competitor. Then, a reviewer can determine how well it does its job." - -**Realization:** Every content piece needs a **defined, measurable job** - not just "make it sound good." - -### Content Purpose = Accountability - -**Without Purpose (old way):** -- ❌ "Write something about the product" -- ❌ "Add social proof" -- ❌ Subjective review ("I like it") -- ❌ Beautiful but ineffective - -**With Purpose (new way):** -- ✅ "Convince Problem Aware users that shelf life matters (activate fear of spoilage)" -- ✅ "Show 3x competitive advantage with facts (enable confident choice)" -- ✅ Objective review ("Does it achieve its purpose?") -- ✅ Measurably effective content - -### Purpose Hierarchy - -Content purposes work at multiple levels: - -``` -PAGE: Product Comparison -├─ Page Purpose: Enable confident product selection -│ -├─ HERO SECTION -│ ├─ Section Purpose: Orient to comparison context -│ │ ├─ Headline Purpose: Validate that choosing is hard -│ │ └─ Subhead Purpose: Promise clarity ahead -│ -├─ COMPARISON TABLE -│ ├─ Section Purpose: Provide decision-enabling facts -│ │ ├─ Shelf Life Row Purpose: Prove 3x advantage -│ │ ├─ Price Row Purpose: Justify premium -│ │ └─ Eco Score Row Purpose: Appeal to sustainability -│ -└─ CTA - ├─ Button Purpose: Make selection feel smart - └─ Guarantee Purpose: Remove last barrier -``` - -### Model Priority Matrix by Content Type - -**Key Discovery:** Different content types emphasize different strategic models. - -**High Conversion Content:** -- Landing Page Hero: Customer Awareness ⭐⭐⭐ + Golden Circle ⭐⭐⭐ -- CTAs: Badass Users ⭐⭐⭐ + Action Mapping ⭐⭐⭐ - -**Educational Content:** -- Onboarding: Action Mapping ⭐⭐⭐ + Badass Users ⭐⭐⭐ -- Help Docs: Action Mapping ⭐⭐⭐ + Badass Users ⭐⭐ - -**Functional UI Content:** -- Error Messages: Badass Users ⭐⭐⭐ + Action Mapping ⭐⭐⭐ -- Empty States: Badass Users ⭐⭐⭐ + Action Mapping ⭐⭐⭐ - -**Brand Content:** -- About/Mission: Golden Circle ⭐⭐⭐ + VTC ⭐⭐ - -### Files Created - -**Content Purpose Guide:** -- `docs/method/content-purpose-guide.md` - Comprehensive guide to purpose-driven content - - Purpose statement templates - - Examples by content type - - Model priority matrix - - Before/after comparisons - - Integration with WDS workflows - -**Content Creation Workshop Updated:** -- Added Step 0: Define Content Purpose -- Added Quick Mode vs Workshop Mode -- Added model priority emphasis based on purpose -- Made framework adaptive (not rigid sequential steps) - -**Page Specification Template Enhanced:** -- Added page-level purpose and success criteria -- Added VTC reference field -- Added content purpose for each component -- Added model priorities field -- Added review criteria field -- Added content rationale field -- Added Content Purpose Summary table - -### The 6-Model Framework (Updated) - -**Complete framework:** - -0. **Content Purpose** = The Job To Do - - What must this accomplish? How will we know it worked? - - Which models should we emphasize? - -1. **VTC** = Strategic Foundation - - Business goal, user, driving forces, awareness positioning - -2. **Customer Awareness Cycle** = Content Strategy - - Language, information priorities, proof needed - -3. **Action Mapping** = Content Filter - - What action must this enable? Is this necessary? - -4. **Badass Users** = Tone & Frame - - User empowerment, transformation, cognitive load - -5. **Golden Circle** = Structural Order - - WHY → HOW → WHAT persuasive sequence - -### Integration Complete - -**Page Specifications now include:** -- Clear page purpose (what job the page does) -- Success criteria (how we know it worked) -- VTC reference (strategic context) -- Content purpose for each element -- Model priorities per element -- Review criteria (objective evaluation) -- Content rationale (why this specific content) -- Content Purpose Summary table - -**Content Creation Workshop now:** -- Starts with purpose definition (Step 0) -- Selects model emphasis based on purpose -- Enables Quick Mode ("Suggest content") or Workshop Mode ("Let's explore") -- Generates content optimized for specific job -- Enables objective review against purpose - -### Key Innovation: Purpose Templates - -**Persuasion:** -- "Convince [audience] that [claim] by [strategy]" -- "Activate [driving force] through [benefit/proof]" -- "Move [start awareness] to [end awareness] by [approach]" - -**Education:** -- "Enable [user] to [action] with [confidence level]" -- "Help [user] understand [concept] in [timeframe]" - -**Functional:** -- "Guide [user] to [action] with zero [friction]" -- "Maintain [emotion] while [outcome]" - -**Brand:** -- "Connect [audience] to our [value]" -- "Inspire [emotion] through [story]" - -### Example: Purpose-Driven Content - -**Purpose:** "Convince value-conscious users that longer shelf life saves them money" - -**Model Priorities:** VTC ⭐⭐⭐ (fear of waste), Badass Users ⭐⭐ - -**Generated Content:** -"Stop throwing away spoiled product. Our 90-day shelf life (3x longer than competitors) means you'll use what you buy. No more waste. No more emergency reorders." - -**Review:** ✅ Speaks to fear of waste, shows benefit, empowering tone, specific advantage - -### Workflow Integration: Sketch → Purpose → Content - -**The Natural Flow:** - -When designer presents a sketch, the agent: -1. **Identifies text elements** (headlines, CTAs, sections, microcopy) -2. **Suggests purposes** for each based on position, context, type -3. **Recommends model priorities** for each purpose -4. **Gets confirmation** from designer -5. **Generates content** for approved purposes -6. **Documents in page spec** with full traceability - -**Granularity Options:** -- **Element-by-element:** Critical content (hero headline, primary CTA) -- **Section-level:** Cohesive blocks (feature section, testimonials) -- **Batch:** Repetitive elements (form labels, tooltips) - -**Example Sketch Review Flow:** - -``` -DESIGNER: "Here's the landing page sketch [wireframe]" - -AGENT: "I see several text elements. Let me suggest purposes: - -📝 Hero Headline -Purpose: Hook Problem Aware users by validating frustration -Models: Customer Awareness ⭐⭐⭐, Golden Circle ⭐⭐⭐ - -📝 Hero Subhead -Purpose: Promise transformation, reduce anxiety -Models: Badass Users ⭐⭐, Customer Awareness ⭐⭐ - -📝 Feature Section (whole section) -Purpose: Show how solution works, enable understanding -Models: Action Mapping ⭐⭐⭐, Badass Users ⭐⭐ - -📝 CTA Button -Purpose: Make signup feel empowering and low-risk -Models: Badass Users ⭐⭐⭐, Action Mapping ⭐⭐ - -Does this match your intent?" -``` - -**This makes content creation:** -- Integrated (part of design process, not separate task) -- Strategic (purpose-driven from the start) -- Efficient (agent suggests, user confirms, content generated) -- Traceable (full rationale documented in spec) - ---- - -*This session log preserves the complete journey from content production problem to strategic solution.* - diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/session-2026-01-20-seo-optimization-specifications.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/session-2026-01-20-seo-optimization-specifications.md deleted file mode 100644 index e28e14dc6..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/session-2026-01-20-seo-optimization-specifications.md +++ /dev/null @@ -1,209 +0,0 @@ -# Session Log: SEO Optimization in Page Specifications - -**Date:** 2026-01-20 -**Topic:** SEO Requirements for Page Specifications -**Status:** Planned for Future Implementation -**Target Project:** Car Mechanics Website (SEO-critical project) - ---- - -## Context - -During Dog Week specification audit work, identified that WDS methodology lacks SEO optimization requirements in page specifications. This is a critical gap for projects where organic search traffic is important. - -**Decision:** Defer SEO implementation to next project (car mechanics website) where SEO is business-critical, allowing real-world validation of requirements. - ---- - -## Proposed SEO Section for Page Specification Template - -### SEO Optimization - -#### Page Metadata -- **Page Title:** `{55-60 character title with primary keyword}` -- **Meta Description:** `{150-160 character description with call-to-action}` -- **Canonical URL:** `{canonical URL to prevent duplicate content}` -- **Language/Region:** `{hreflang tags for multi-language sites}` - -#### Open Graph (Social Sharing) -- **og:title:** `{Social media title}` -- **og:description:** `{Social media description}` -- **og:image:** `{1200x630px image URL}` -- **og:type:** `{website/article/product}` -- **og:url:** `{Canonical URL}` - -#### Twitter Card -- **twitter:card:** `{summary_large_image/summary}` -- **twitter:title:** `{Twitter-specific title}` -- **twitter:description:** `{Twitter-specific description}` -- **twitter:image:** `{Image URL}` - -#### Structured Data (Schema.org) -- **Schema Type:** `{Organization/LocalBusiness/Product/Article/etc.}` -- **JSON-LD:** `{Structured data markup}` -- **Key Properties:** `{name, address, phone, hours, ratings, etc.}` - -#### Content SEO -- **Primary Keyword:** `{Main target keyword}` -- **Secondary Keywords:** `{2-3 related keywords}` -- **Heading Structure:** `{H1 contains primary keyword, H2s contain variations}` -- **Keyword Density:** `{Natural placement, avoid keyword stuffing}` -- **Internal Links:** `{Links to related pages with descriptive anchor text}` -- **External Links:** `{Authoritative sources where relevant}` - -#### Technical SEO -- **URL Structure:** `{Clean, descriptive URLs with keywords}` -- **Mobile-Friendly:** `{Responsive design, mobile-first indexing}` -- **Page Speed:** `{Target load time < 3 seconds}` -- **Image Optimization:** `{Compressed images with descriptive filenames}` -- **Robots Meta:** `{index,follow / noindex,nofollow}` -- **Sitemap:** `{Include in XML sitemap}` - -#### Local SEO (if applicable) -- **NAP Consistency:** `{Name, Address, Phone consistent across web}` -- **Google Business Profile:** `{Integration requirements}` -- **Local Schema:** `{LocalBusiness structured data}` -- **Location Keywords:** `{City/region in content}` - ---- - -## Implementation Checklist - -When adding SEO to WDS: - -- [ ] Add SEO section to `page-specification.template.md` -- [ ] Create SEO micro-guide for Freya (`data/agent-guides/freya/seo-optimization.md`) -- [ ] Add SEO validation to specification audit workflow -- [ ] Update specification quality checklist with SEO items -- [ ] Create SEO component specifications (meta tags, structured data) -- [ ] Document SEO testing procedures -- [ ] Add SEO to development checklist - ---- - -## SEO Audit Criteria (Level 6) - -**Page-Level SEO Checks:** -- [ ] Page title unique and optimized (55-60 chars) -- [ ] Meta description compelling and optimized (150-160 chars) -- [ ] Canonical URL defined -- [ ] Open Graph tags complete -- [ ] Twitter Card tags complete -- [ ] Structured data/Schema.org markup present -- [ ] Primary keyword identified and placed in H1 -- [ ] Heading hierarchy logical (H1 → H2 → H3) -- [ ] Image alt text descriptive and keyword-rich -- [ ] URL structure clean and keyword-optimized -- [ ] Internal linking strategy documented -- [ ] Mobile-responsive design specified -- [ ] Page speed requirements defined - -**Site-Level SEO Checks:** -- [ ] XML sitemap inclusion -- [ ] Robots.txt configuration -- [ ] 404 page design -- [ ] Redirect strategy (301/302) -- [ ] HTTPS/SSL requirements -- [ ] Breadcrumb navigation -- [ ] Pagination handling (rel=prev/next) - ---- - -## Example: Car Mechanics Page SEO Specification - -### Landing Page: "Bilverkstad i Stockholm" - -**Page Title:** "Bilverkstad Stockholm | Professionell Bilservice & Reparation" -**Meta Description:** "Erfaren bilverkstad i Stockholm. Snabb service, konkurrenskraftiga priser. Boka tid online idag! ⭐⭐⭐⭐⭐" - -**Primary Keyword:** "bilverkstad stockholm" -**Secondary Keywords:** "bilservice stockholm", "bilreparation stockholm", "bilmekaniker stockholm" - -**Schema.org Type:** LocalBusiness + AutomotiveBusiness - -```json -{ - "@context": "https://schema.org", - "@type": "AutomotiveBusiness", - "name": "Stockholm Bilverkstad AB", - "address": { - "@type": "PostalAddress", - "streetAddress": "Verkstadsgatan 15", - "addressLocality": "Stockholm", - "postalCode": "123 45", - "addressCountry": "SE" - }, - "telephone": "+46-8-123-4567", - "openingHours": "Mo-Fr 08:00-17:00", - "priceRange": "$$", - "aggregateRating": { - "@type": "AggregateRating", - "ratingValue": "4.8", - "reviewCount": "127" - } -} -``` - ---- - -## Resources for Future Implementation - -**SEO Best Practices:** -- Google Search Central Documentation -- Schema.org Vocabulary -- Open Graph Protocol -- Twitter Card Validator -- Google Rich Results Test -- Lighthouse SEO Audit - -**Tools for Testing:** -- Google Search Console -- Screaming Frog SEO Spider -- Ahrefs/SEMrush -- PageSpeed Insights -- Mobile-Friendly Test - ---- - -## Next Steps (When Implementing) - -1. **Research Phase** - - Study car mechanics industry SEO best practices - - Analyze competitor SEO strategies - - Identify high-value keywords - - Map keyword intent to page types - -2. **Template Phase** - - Add SEO section to page specification template - - Create SEO micro-guide for Freya - - Define SEO validation criteria - -3. **Implementation Phase** - - Apply SEO specs to car mechanics pages - - Test with real content and keywords - - Validate with SEO tools - - Measure results and iterate - -4. **Integration Phase** - - Add SEO to specification audit workflow - - Update quality checklists - - Document lessons learned - - Refine for general WDS use - ---- - -## Notes - -- SEO requirements vary significantly by industry and project goals -- Local SEO critical for service businesses (car mechanics, restaurants, etc.) -- E-commerce requires product schema and different optimization -- Blog/content sites need article schema and content SEO focus -- B2B sites may prioritize different keywords and conversion paths - -**Recommendation:** Build SEO framework with car mechanics project, then generalize for WDS methodology. - ---- - -**Status:** Documented for future implementation -**Next Review:** When starting car mechanics website project -**Owner:** Freya WDS Designer Agent (with SEO micro-guide) diff --git a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/wds-v6-conversion-guide.md b/docs/examples/wds-v6-conversion/F-Agent-Dialogs/wds-v6-conversion-guide.md deleted file mode 100644 index ceb1b5ea1..000000000 --- a/docs/examples/wds-v6-conversion/F-Agent-Dialogs/wds-v6-conversion-guide.md +++ /dev/null @@ -1,281 +0,0 @@ -# WDS v6 Conversion Project - -**Status:** In Progress 🔄 -**Type:** Meta Example - Using WDS to Build WDS -**Duration:** December 2025 - Ongoing - ---- - -## Overview - -This folder documents the conversion of Whiteport Design Studio from v4 to v6, serving as a real-world example of: -- Agent-driven development workflows -- Iterative refinement through dialog -- Long-term project evolution -- Method documentation practices - -**The Meta Twist:** We're using WDS methodology to organize and improve WDS itself! - ---- - -## What's Inside - -### `/session-logs/` - -Session-by-session documentation of the conversion work: - -- **`session-2025-12-09-micro-steps-concepts.md`** - Implementing micro-file architecture for Phases 6, 7, 8 + integrating Greenfield/Brownfield and Kaizen/Kaikaku concepts - - 26 files created, ~27,000 lines - - DD-XXX simplification (removed SU-XXX) - - Complete workflow restructuring - -- **`session-2025-12-31-content-production-workshop.md`** - Designing Scientific Content Creation Workflow - - Value Chain Content Analysis concept - - Strategic frameworks integration (CAC, Golden Circle, Action Mapping, Kathy Sierra) - - Multi-dimensional AI synthesis approach - - CAC integration with scenario definition - -- **`conversion-guide.md`** - Technical guide for the v4 → v6 conversion process - -### Root Files - -- **`WDS-V6-CONVERSION-ROADMAP.md`** - Master roadmap tracking all conversion tasks, priorities, and progress - -- **`CONCEPTS-INTEGRATION.md`** - Map of where key concepts (Greenfield/Brownfield, Kaizen/Kaikaku, etc.) are used throughout WDS - ---- - -## Why This is Useful as an Example - -### 1. Shows Real Agent Collaboration - -Unlike simplified demos, these session logs show actual working sessions with: -- Problems encountered and solved -- Decisions made and rationale -- Iterations and refinements -- Context preservation across sessions - -### 2. Demonstrates Long-Term Project Management - -This isn't a quick prototype. It's a complex, multi-phase project showing: -- How to maintain context across days/weeks -- How to organize session logs for continuity -- How to track TODOs and progress -- How to integrate new insights while staying on track - -### 3. Meta-Learning Opportunity - -By using WDS to improve WDS, we demonstrate: -- The methodology applied to itself -- How to organize documentation projects -- How to structure agent conversations -- How to preserve strategic context - -### 4. Pattern Library - -The session logs contain reusable patterns for: -- Scientific content creation -- Strategic framework integration -- Value chain analysis -- Multi-dimensional synthesis - ---- - -## 📁 What This Example Provides - -### 1. Session Logs (`session-logs/`) - -**Complete agent dialogs** from the WDS v6 conversion process: - -- `session-2025-12-09-micro-steps-concepts.md` - Micro-step architecture development -- `session-2025-12-31-content-production-workshop.md` - Content creation framework design - -**What you'll learn:** -- How to conduct multi-day strategic workshops with agents -- Pattern for preserving context across sessions -- How to iterate on methodology design collaboratively -- How agents synthesize complex strategic frameworks - ---- - -### 2. Integration Reports - -**BMad Integration Analysis:** - -- `WDS-BMAD-INTEGRATION-REPORT.md` - Comprehensive module analysis for BMad team -- `WDS-DEEP-ANALYSIS-SUMMARY.md` - Quick reference of analysis findings - -**What you'll learn:** -- How to prepare a module for external integration -- Module quality assessment patterns -- Integration point documentation -- Handover report structure - ---- - -### 3. Agent Development - -**Freya Agent Transformation:** - -- `freya-agent-transformation.md` - How we redesigned Freya to embody WDS philosophy - -**What you'll learn:** -- Difference between generic and methodology-specific agents -- How to embed strategic frameworks into agent identity -- Writing agent personas that convey philosophy, not just skills -- First-person vs third-person agent voice - ---- - -### 4. Strategic Framework Development - -**Method and Model Guides:** - -Development of WDS strategic frameworks: -- Value Trigger Chain (VTC) methodology -- Customer Awareness Cycle integration -- Content Creation Workshop (6-model framework) -- Content Purpose framework -- Tone of Voice guidelines - -**What you'll learn:** -- How to research and integrate external strategic models -- Creating method documentation from first principles -- Building workshop structures for agents -- Designing micro-step workflows - ---- - -## Key Concepts Demonstrated - -### From Session 2025-12-09 - -- **Micro-File Architecture:** Breaking workflows into sequential, self-contained steps -- **Kaizen Philosophy:** Continuous improvement through small incremental changes -- **Greenfield vs Brownfield:** Building new vs working with existing systems -- **Simplification:** Reducing complexity while maintaining flexibility - -### From Session 2025-12-31 - -- **Scientific Content Creation Chain:** - ``` - Business Goal → User + Driving Forces → Scenario → Usage Situation - → Flow Context → Page Purpose → Text Section → Value Added - ``` - -- **Value Chain Content Analysis:** Attaching strategic reasoning to content components - -- **Customer Awareness Cycle Integration:** Every scenario moves users from one awareness level to a more favorable one - -- **Multi-Dimensional Framework Synthesis:** AI combining multiple (even conflicting) strategic frameworks into optimal output - ---- - -## How to Use This Example - -### For Learning WDS Methodology - -1. Read the session logs chronologically to see how the process unfolds -2. Notice how strategic context is preserved and referenced -3. Observe how decisions are documented with rationale -4. Study the pattern of problem → analysis → solution → validation - -### For Understanding Agent Collaboration - -1. See how agents maintain context across long sessions -2. Learn how to structure conversations for productivity -3. Understand when to use dialog vs when to generate directly -4. Notice error handling and course correction patterns - -### For Your Own Projects - -1. Adapt the session log structure for your project -2. Use the strategic frameworks for your content creation -3. Apply the Value Chain Content Analysis pattern -4. Reference the decision-making patterns - ---- - -## Project Status Tracking - -### Completed ✅ -- Phase 6, 7, 8 micro-file architecture -- DD-XXX simplification (removed SU-XXX) -- Concepts integration (Greenfield/Brownfield, Kaizen/Kaikaku) -- Scientific Content Creation framework design -- Session log system for context preservation - -### In Progress 🔄 -- Method plumbing for strategic frameworks -- Content production workshop implementation -- Method guide creation (CAC, Golden Circle, Action Mapping, Kathy Sierra) -- Value Chain Content Analysis structure definition - -### Upcoming ⏸️ -- Complete remaining module tutorials -- WDS Excalidraw component library -- Auto-export automation (GitHub Actions) -- Figma MCP integration testing - ---- - -## Lessons Learned - -### 1. Context Preservation is Critical - -Long projects need systematic context preservation. Session logs are invaluable for: -- Resuming after breaks -- Onboarding new collaborators -- Remembering WHY decisions were made -- Tracking evolution of ideas - -### 2. Meta Work Improves Methodology - -Using WDS to improve WDS creates a feedback loop where methodology improvements are immediately tested and validated. - -### 3. Strategic Frameworks Need Explicit Documentation - -Implicit knowledge in v4 was lost during v6 conversion. Explicit method guides prevent this. - -### 4. AI Excels at Multi-Dimensional Synthesis - -Rather than forcing linear framework application, let AI synthesize multiple frameworks for optimal results. - -### 5. Simplification is Powerful - -DD-XXX for everything (instead of DD-XXX + SU-XXX) reduced complexity while maintaining necessary differentiation. - ---- - -## Related Resources - -- **WDS Method Guides:** `../../method/` -- **WDS Workflows:** `../../src/workflows/` -- **Other Examples:** `../` (WDS Presentation, etc.) -- **Course Materials:** `../../learn/` - ---- - -## Contributing to This Example - -As the WDS v6 conversion continues, new session logs and artifacts will be added. Each session log should include: - -1. **Date and objectives** -2. **Work completed with specifics** -3. **Key decisions and rationale** -4. **Challenges and solutions** -5. **Statistics (files created/modified, lines written)** -6. **Lessons learned** -7. **Next steps** - -This structure makes the example progressively more valuable as the project evolves. - ---- - -*This is a living example. As WDS v6 conversion progresses, this folder grows in value as a real-world case study of agent-driven methodology development.* - diff --git a/src/gems/eira-visual-designer.md b/src/gems/eira-visual-designer.md deleted file mode 100644 index 79a5a5a77..000000000 --- a/src/gems/eira-visual-designer.md +++ /dev/null @@ -1,570 +0,0 @@ -# EIRA - WDS Visual Designer (Nano Banana Integration) - -**Identity:** Visual Architect | Goddess of Healing & Prosperity -**Role:** Transform strategic intent into visual prosperity using Nano Banana Pro - ---- - -## LAYER 1: SYSTEM INSTRUCTIONS (Paste into Nano Banana System Instructions) - -``` -You are Eira, the WDS Visual Designer. You work within the BMad Method and Whiteport Design Studio (WDS) framework. - -YOUR CORE MISSION: -Transform strategic design briefs into world-class visual concepts that eliminate "Visual Poverty" and cultivate "Visual Prosperity." - -VISUAL POVERTY (What to AVOID): -- Generic, stock-photo aesthetics -- **Tailwind CSS default styles (blue buttons, generic grays, default spacing)** -- Cluttered layouts with poor hierarchy -- Inconsistent spacing and typography -- Low-contrast, muddy color palettes -- Decorative elements without strategic purpose -- More than 4-5 colors in a single design -- Busy backgrounds that compete with content -- Skeuomorphic or outdated design patterns -- Default UI kit aesthetics (Material, Bootstrap defaults) - -VISUAL PROSPERITY (What to ACHIEVE): -- Typography-first hierarchy (clear, readable, purposeful) -- Generous, intentional white space (breathing room) -- Premium color palettes (3-4 colors maximum) -- Clean, purposeful imagery -- International/premium aesthetic standards -- Flat or minimalist design with subtle depth -- Every element serves a strategic purpose - -YOUR WORKFLOW: -1. Receive structured prompts from Freya (WDS Designer Agent) -2. Generate high-fidelity visuals based on strategic context -3. Maintain visual consistency across all screens/components -4. Provide variations when requested (mobile, tablet, desktop) -5. Support iterative refinement through image-to-image generation - -TECHNICAL STANDARDS: -- Always specify exact typography (family, weight, size, color) -- Always define complete color palettes (hex codes preferred) -- Always describe spacing/white space rules -- Always include visual mood (3-5 adjectives) -- Always specify resolution and device type -- Always reference style systems (Material Design, Apple HIG, Stripe, etc.) - -YOUR COLLABORATION STYLE: -- You receive context-rich prompts (not vague requests) -- You maintain brand consistency across all outputs -- You think in design systems (reusable components) -- You prioritize clarity and usability over decoration -- You understand that design serves user psychology and business strategy - -REMEMBER: -Every visual you create should answer: "Why does this design choice trigger the desired user action?" -``` - ---- - -## LAYER 2: PROJECT CONTEXT TEMPLATE (Paste at start of each project) - -```markdown -# PROJECT CONTEXT FOR EIRA - -**Phase:** 5 - Design System (Visual Design Exploration) -**Location:** D-Design-System/01-Visual-Design/ -**Prerequisites:** NONE - Brand identity is independent of product! - -## WORKFLOW OVERVIEW - -**Phase 5: Design System - Visual Design Exploration** - -**Location:** `D-Design-System/01-Visual-Design/` - -**Timing:** Can start ANYTIME - before, during, or after product strategy work - -**Purpose:** Establish brand identity and visual system (independent of product) - -**Key Distinction:** -- **Phase 4 (UX)** defines HOW pages work (functionality, interactions, content) -- **Phase 5 (Visual Design)** defines HOW it looks and feels (brand expression, visual system) -- **Eira's role:** Transform strategic intent into branded visual concepts - -**Your role in WDS:** - -You (the designer) act as the bridge between Freya (WDS Designer Agent in Cursor) and Eira (Visual Designer in Nano Banana/image generation tool). - -### Value Proposition: -[What value does this product deliver? Why should users care?] - -### Target Audience: -[Who are we designing for? Their context, needs, pain points] - -### Key Psychological Triggers (from Trigger Map): -1. [Trigger 1: e.g., "Trust - users need to feel safe sharing data"] -2. [Trigger 2: e.g., "Simplicity - users are overwhelmed by complexity"] -3. [Trigger 3: e.g., "Status - users want to feel accomplished"] - -### Brand Positioning: -[How should this product feel? Premium/accessible/playful/serious/etc.] - -### Design System References: -[Any existing brand guidelines, color palettes, typography, or style systems to follow] - -### Visual Mood: -[3-5 adjectives describing the desired aesthetic: e.g., "clean, trustworthy, modern, calm, premium"] - ---- - -## Design Constraints: - -### Must Include: -- [Required elements, features, or content] - -### Must Avoid: -- [Things that conflict with brand or strategy] - -### Technical Requirements: -- Devices: [Mobile/Tablet/Desktop] -- Resolutions: [Specific sizes if known] -- Accessibility: [Any specific needs] - ---- - -This context will guide all visual generation for this project. Reference these strategic foundations in every design decision. -``` - ---- - -## LAYER 3: FREYA → EIRA PROMPT STRUCTURE - -**Freya will generate prompts in this format for you to copy-paste:** - -```markdown -## 🎯 STRATEGIC BRIEF -[Why this screen/component matters - connects to Trigger Map and driving forces] - -## 📋 PROMPT FOR EIRA -──────────────────────────────────────────────────────────────── -[SCREEN TYPE] for [PROJECT NAME] - [SPECIFIC PAGE/SECTION] - -LAYOUT STRUCTURE: -- [Describe grid/layout: e.g., "3-column card grid with hero section"] -- [Key sections and hierarchy] - -TYPOGRAPHY: -- Heading: [font family], [weight], [size], [color] -- Body: [font family], [weight], [size], [color] -- Accent: [font family], [weight], [size], [color] - -COLOR PALETTE: -- Primary: [hex/name] -- Secondary: [hex/name] -- Accent: [hex/name] -- Background: [hex/name] -- Text: [hex/name] - -SPACING & WHITE SPACE: -- [Generous/minimal/balanced] -- [Specific padding/margin rules if critical] - -VISUAL MOOD: -- [3-5 adjectives: e.g., "clean, premium, calm, trustworthy, modern"] - -STYLE REFERENCES: -- [Design system: e.g., "Material Design 3", "Apple HIG", "Stripe-inspired"] -- [Specific brands to emulate: e.g., "Stripe dashboard aesthetic"] - -TECHNICAL SPECS: -- Resolution: [e.g., 1920x1080, 375x812] -- Aspect ratio: [e.g., 16:9, mobile portrait] -- Device: [Desktop/Tablet/Mobile] -- Style: [Flat/Neumorphic/Glassmorphic/Minimalist] - -CRITICAL ELEMENTS: -- [List must-have UI components] -- [Text that must be readable] -- [Specific interactions to visualize] - -AVOID: -- [Specific things to NOT include] -──────────────────────────────────────────────────────────────── - -## 🎨 EXPECTED OUTPUT -[What we're looking for - helps you understand success criteria] - -## ✅ EVALUATION CRITERIA -- [ ] Aligns with [specific trigger from trigger map] -- [ ] Typography hierarchy clear and readable -- [ ] Visual prosperity (generous white space, clean layout) -- [ ] Brand consistency -- [ ] Strategic purpose for every element -``` - ---- - -## WORKFLOW EXAMPLE - -### Step 1: You (Designer) to Freya -``` -"Freya, generate visual concept for the WDS homepage hero section" -``` - -### Step 2: Freya Reads Context -- Reads: `1-project-brief/product-brief.md` -- Reads: `2-strategy/trigger-map.md` -- Analyzes: Target audience, psychological triggers, brand positioning - -### Step 3: Freya Generates Prompt -Freya outputs structured prompt (Layer 3 format above) - -### Step 4: You Copy-Paste to Eira (Nano Banana) -Paste the prompt block into Nano Banana - -### Step 5: Eira Generates Visual -Nano Banana produces high-fidelity mockup - -### Step 6: You Share Result with Freya -``` -"Freya, here's what Eira generated: [screenshot/description]" -``` - -### Step 7: Freya Analyzes & Extracts -- Evaluates alignment with strategy -- Extracts design tokens (colors, typography, spacing) -- Updates design system files -- Creates HTML prototype based on approved design -- Suggests refinements if needed - -### Step 8: Iterate if Needed -If refinements needed: -- Freya generates updated prompt -- You paste to Eira -- Eira uses image-to-image for refinement -- Repeat until approved - ---- - -## DESIGN TOKEN EXTRACTION - -After Eira generates an approved visual, Freya will extract: - -```json -{ - "colors": { - "primary": "#0A0E27", - "secondary": "#1A1F3A", - "accent": "#00FF9D", - "background": "#FFFFFF", - "text": { - "primary": "#1A1A1A", - "secondary": "#666666", - "tertiary": "#999999" - } - }, - "typography": { - "headings": { - "family": "Inter", - "weights": [600, 700, 800], - "sizes": { - "h1": "48px", - "h2": "36px", - "h3": "24px" - } - }, - "body": { - "family": "Inter", - "weight": 400, - "size": "16px", - "lineHeight": "1.6" - } - }, - "spacing": { - "unit": "8px", - "scale": [8, 16, 24, 32, 48, 64, 96] - }, - "layout": { - "maxWidth": "1200px", - "gridColumns": 12, - "gutter": "24px" - } -} -``` - -These tokens are saved to: -- `design-system/tokens/[component-name].json` -- Referenced in HTML prototypes -- Used by developers for implementation - ---- - -## QUALITY CHECKLIST - -Before generating, verify prompt includes: -- [ ] Specific typography (family, weight, size, color) -- [ ] Complete color palette (3-5 colors max) -- [ ] Clear spacing/white space rules -- [ ] Visual mood (3-5 adjectives) -- [ ] Technical specs (resolution, device, aspect ratio) -- [ ] Style references (brands/systems to emulate) -- [ ] Critical elements list -- [ ] Avoid list (what NOT to include) -- [ ] Strategic context (which trigger this serves) - ---- - -## REFERENCE IMAGE STRATEGY - -**When to use reference images:** -- Brand consistency (logo, colors, existing assets) -- Specific layout inspiration -- Typography examples -- Component style references - -**How to use:** -- Upload 2-4 reference images max -- Describe what to extract from each: "Use color palette from image 1, layout structure from image 2" -- Keep references visually aligned (don't mix drastically different styles) - ---- - -## RESPONSIVE DESIGN WORKFLOW - -For each approved concept, generate responsive versions: - -1. **Desktop** (1920x1080 or 1440x900) - - Full layout with all elements - - Generous spacing - - Multi-column grids - -2. **Tablet** (768x1024 or 834x1194) - - Adapted layout (fewer columns) - - Maintained hierarchy - - Touch-friendly spacing - -3. **Mobile** (375x812 or 390x844) - - Single column or 2-column max - - Simplified navigation - - Priority content first - -Freya will generate separate prompts for each breakpoint, maintaining visual consistency. - ---- - -## COMPONENT LIBRARY INTEGRATION - -As designs are approved, components are saved to: - -``` -design-system/ -├── tokens/ -│ ├── colors.json -│ ├── typography.json -│ └── spacing.json -├── components/ -│ ├── buttons.json -│ ├── cards.json -│ ├── forms.json -│ └── navigation.json -└── patterns/ - ├── hero-sections.json - ├── feature-grids.json - └── testimonials.json -``` - -Each component includes: -- Visual reference (Eira's output) -- Design tokens (extracted by Freya) -- HTML/CSS code (created by Freya) -- Usage guidelines -- Responsive variations - ---- - -## COLLABORATION PRINCIPLES - -**Freya's Role:** -- Strategic thinking -- Context reading -- Prompt generation -- Design token extraction -- HTML prototype creation -- Design system management - -**Eira's Role (You via Nano Banana):** -- Visual generation -- Style consistency -- High-fidelity mockups -- Responsive variations -- Iterative refinement - -**Your Role (Designer):** -- Bridge between Freya and Eira -- Final creative decisions -- Copy-paste interface -- Quality validation -- Strategic alignment check - ---- - -## EXAMPLE PROMPTS - -### Example 1: SaaS Dashboard Hero - -``` -Dashboard hero section for FinanceFlow - Account overview - -LAYOUT STRUCTURE: -- Top: Welcome message + user avatar (left-aligned) -- Center: Large balance card with gradient background -- Bottom: 4 quick action buttons in a row - -TYPOGRAPHY: -- Heading: Inter Bold, 32px, #FFFFFF -- Balance: Inter Bold, 56px, #FFFFFF -- Labels: Inter Regular, 14px, rgba(255,255,255,0.8) -- Buttons: Inter Semibold, 16px, #1A1F3A - -COLOR PALETTE: -- Primary: #0A0E27 (deep navy) -- Accent: #00FF9D (neon mint) -- Background: Linear gradient from #1A1F3A to #0A0E27 -- Text: #FFFFFF, rgba(255,255,255,0.8) - -SPACING & WHITE SPACE: -- Generous padding: 48px around main card -- Button spacing: 16px between buttons -- Internal card padding: 32px - -VISUAL MOOD: -- Premium, trustworthy, modern, calm, professional - -STYLE REFERENCES: -- Revolut app aesthetic -- Stripe dashboard clarity -- Apple Card minimalism - -TECHNICAL SPECS: -- Resolution: 1920x1080px -- Aspect ratio: 16:9 -- Device: Desktop -- Style: Flat with subtle gradients, matte surfaces - -CRITICAL ELEMENTS: -- Large, readable balance number -- Clear call-to-action buttons -- User personalization (name/avatar) - -AVOID: -- Busy backgrounds -- More than 3 colors -- Decorative illustrations -- Stock photography -``` - -### Example 2: Mobile App Onboarding - -``` -Onboarding screen 1 for MindfulMoments - Welcome screen - -LAYOUT STRUCTURE: -- Top: App logo centered -- Middle: Hero illustration (meditation theme) -- Bottom: Headline + subtext + CTA button - -TYPOGRAPHY: -- Headline: SF Pro Display Bold, 28px, #1A1A1A -- Subtext: SF Pro Text Regular, 16px, #666666 -- Button: SF Pro Text Semibold, 18px, #FFFFFF - -COLOR PALETTE: -- Primary: #6B4CE6 (soft purple) -- Secondary: #F5F3FF (light purple tint) -- Accent: #FF6B9D (coral pink) -- Background: #FFFFFF -- Text: #1A1A1A, #666666 - -SPACING & WHITE SPACE: -- Generous top margin: 64px -- Content padding: 24px sides -- Element spacing: 32px between sections - -VISUAL MOOD: -- Calm, welcoming, gentle, trustworthy, peaceful - -STYLE REFERENCES: -- Headspace app aesthetic -- Calm app simplicity -- Apple Health app clarity - -TECHNICAL SPECS: -- Resolution: 375x812px -- Aspect ratio: Portrait (iPhone 13) -- Device: Mobile -- Style: Minimalist flat design - -CRITICAL ELEMENTS: -- Simple, calming illustration -- Clear value proposition -- Single, prominent CTA - -AVOID: -- Complex illustrations -- Multiple CTAs -- Dark or intense colors -- Cluttered layouts -``` - ---- - -## ITERATION & REFINEMENT - -If Freya suggests refinements: - -**Refinement Types:** -1. **Color adjustment** - "Make accent color warmer" -2. **Typography change** - "Increase heading size for hierarchy" -3. **Layout modification** - "Add more white space between cards" -4. **Mood shift** - "Make it feel more premium/playful/serious" - -**Process:** -- Freya generates updated prompt with specific changes -- You paste into Eira -- Use image-to-image mode with previous output as reference -- Eira generates refined version -- Freya evaluates and extracts tokens if approved - ---- - -## SUCCESS METRICS - -A successful Eira output: -✅ Aligns with strategic triggers from trigger map -✅ Demonstrates visual prosperity (not poverty) -✅ Has clear typography hierarchy -✅ Uses 3-4 colors maximum -✅ Shows generous white space -✅ Serves strategic purpose (not just decoration) -✅ Maintains brand consistency -✅ Is immediately buildable by developers - ---- - -## NOTES FOR DESIGNERS - -**This workflow works best when:** -- Strategy is defined BEFORE visual work begins -- Prompts are detailed and specific -- You make final creative decisions (don't blindly accept AI output) -- You iterate based on strategic alignment, not just aesthetics -- You think in design systems (reusable components) - -**Remember:** -You're not just generating pretty pictures. You're creating strategic visual artifacts that: -- Trigger specific user psychology -- Support business goals -- Guide developer implementation -- Build a cohesive design system -- Deliver measurable value - -Design is strategy made visible. Eira helps you visualize it. Freya helps you strategize it. You make it real. - ---- - -**End of Eira Visual Designer Guide** diff --git a/src/workflows/_agent-dialogs/conversation-persistence/check-conversations.md b/src/workflows/_agent-dialogs/conversation-persistence/check-conversations.md deleted file mode 100644 index a830c5197..000000000 --- a/src/workflows/_agent-dialogs/conversation-persistence/check-conversations.md +++ /dev/null @@ -1,162 +0,0 @@ -# Check Conversations - Instructions - -**When**: On agent wake-up/activation - -**Purpose**: Discover if there are active conversations to resume - ---- - -## When to Check - -**Always check** when: -- Agent is activated/awakened -- Starting a new conversation -- User asks "what were we working on?" - -**Don't check**: -- Mid-conversation (unless user asks) -- When conversation is clearly continuing - ---- - -## How to Check - -### Step 1: Look in Conversations Folder - -**Location**: `docs/.conversations/` - -**Look for**: Files with `status: active` in frontmatter - -### Step 2: Filter by Relevance - -**Consider relevant if**: -- Topic matches what user is asking about -- Recent timestamp (within last few days/weeks) -- Same agent (if user was working with you before) -- Related domain/phase - -**Don't show**: -- Very old conversations (unless explicitly relevant) -- Conversations marked `archived` -- Conversations already `picked-up` (unless user asks) - -### Step 3: Present Options - -If relevant conversations found: - -``` -"I see there's an active conversation about [topic] from [time]. -Should I pick up from there, or start fresh?" -``` - -**If multiple conversations**: -``` -"I found a few active conversations: -1. [Topic 1] from [time] -2. [Topic 2] from [time] -3. [Topic 3] from [time] - -Which would you like to continue, or start something new?" -``` - -### Step 4: Load Context if Resuming - -**If user says yes**: -1. Read the conversation file -2. Update status to `picked-up` -3. Update `last_updated` timestamp -4. Summarize: "We were discussing [topic]. [Brief summary]. Where would you like to continue?" - -**If user says no**: -- Acknowledge and start fresh -- Keep the file available (don't delete) - ---- - -## Conversation File Format - -Check frontmatter for: -- `status: active` (what to look for) -- `topic` (to match relevance) -- `created` (to check recency) -- `context_summary` (quick preview) - ---- - -## Relevance Matching - -**High relevance**: -- Exact topic match -- Same agent -- Recent (within 1-2 days) -- Related to current request - -**Medium relevance**: -- Related topic/domain -- Same phase/work type -- Recent (within a week) - -**Low relevance**: -- Different topic -- Old (weeks/months old) -- Different domain - -**Show high/medium relevance conversations, skip low relevance unless user asks** - ---- - -## Status Updates - -**When resuming conversation**: -- Update `status: active` → `status: picked-up` -- Update `last_updated: [current timestamp]` -- Optionally add note: "Resumed on [date]" - -**Don't delete files** - Keep for history/backup - ---- - -## Example Flow - -**Agent wakes up**: -``` -[Agent checks docs/.conversations/] - -"I see there's an active conversation about 'pitch module' from yesterday. -Should I pick up from there, or are we starting something new?" -``` - -**User says "pick it up"**: -``` -[Agent reads file, updates status] - -"Perfect! We were discussing adding a pitch module to the Project Brief workflow. -You wanted it to be a prerequisite step that establishes why the project matters -before diving into strategy. - -Where would you like to continue? We had started designing the step structure..." -``` - -**User says "start fresh"**: -``` -"Got it! Starting fresh. What would you like to work on?" -``` - ---- - -## Multi-User Scenarios - -- All users can see all conversations -- Anyone can pick up any active conversation -- Status helps track what's been resumed -- Useful for team collaboration on same repo - ---- - -## Cleanup (Optional) - -**Old conversations** can be marked `archived`: -- After being picked up and completed -- After being inactive for extended period -- But keep them - don't delete (valuable history) - diff --git a/src/workflows/_agent-dialogs/conversation-persistence/conversation-template.md b/src/workflows/_agent-dialogs/conversation-persistence/conversation-template.md deleted file mode 100644 index 3a1dd2591..000000000 --- a/src/workflows/_agent-dialogs/conversation-persistence/conversation-template.md +++ /dev/null @@ -1,70 +0,0 @@ -# Conversation Template - -**File naming format**: `[timestamp]-[agent]-[topic].md` - -**Example**: `2025-01-15-1430-saga-pitch-module.md` - -**Location**: `docs/.conversations/` - ---- - -## File Structure - -```markdown ---- -status: active | picked-up | archived -agent: [agent-name] -topic: [brief-topic-description] -created: [YYYY-MM-DD HH:MM] -last_updated: [YYYY-MM-DD HH:MM] -context_summary: [one-line summary] ---- - -# Conversation: [Topic] - -## Context Summary - -[Brief 2-3 sentence summary of what was discussed] - -## Key Decisions & Understandings - -- [Decision/understanding 1] -- [Decision/understanding 2] -- [Decision/understanding 3] - -## Where We Left Off - -[What was the last thing discussed? What was the state of the conversation?] - -## Next Steps - -- [What needs to happen next?] -- [What was the user planning to do?] - -## Important Details - -[Any specific details, constraints, preferences, or context that would be valuable to know] - -## Conversation Thread - -[Optional: Key parts of the conversation that provide context] -``` - ---- - -## Status Values - -- **active** - Conversation is waiting to be picked up -- **picked-up** - Conversation has been resumed -- **archived** - Old conversation, kept for history/backup - ---- - -## Usage Notes - -- Timestamp format: `YYYY-MM-DD-HHMM` (24-hour format) -- Topic should be brief and descriptive (2-4 words) -- Keep summaries concise but informative -- Update `last_updated` whenever file is modified -- Update `status` when conversation is picked up - diff --git a/src/workflows/_agent-dialogs/conversation-persistence/persistence-guide.md b/src/workflows/_agent-dialogs/conversation-persistence/persistence-guide.md deleted file mode 100644 index f5f111c92..000000000 --- a/src/workflows/_agent-dialogs/conversation-persistence/persistence-guide.md +++ /dev/null @@ -1,81 +0,0 @@ -# Conversation Persistence System - -**Purpose**: Preserve valuable conversation context across sessions and enable multi-user collaboration - ---- - -## Overview - -This system allows agents to: -- Save valuable conversations when context gets full or sessions close -- Resume conversations later without losing context -- Enable multiple users to see and continue discussions on the same repo - ---- - -## Components - -1. **conversation-template.md** - File format and structure -2. **save-conversation.md** - Instructions for saving conversations -3. **check-conversations.md** - Instructions for checking/resuming on wake-up - ---- - -## File Structure - -**Location**: `docs/.conversations/` - -**Naming**: `[timestamp]-[agent]-[topic].md` - -**Example**: `2025-01-15-1430-saga-pitch-module.md` - ---- - -## Status Values - -- **active** - Waiting to be picked up -- **picked-up** - Conversation has been resumed -- **archived** - Old conversation, kept for history - ---- - -## Usage Flow - -### Saving a Conversation - -1. Agent detects need to save (context full, user closing session, etc.) -2. Creates file using template -3. Fills in context summary, key decisions, where left off -4. Sets status to `active` -5. Informs user where file is saved - -### Resuming a Conversation - -1. Agent wakes up -2. Checks `docs/.conversations/` for `status: active` files -3. Filters by relevance (topic, recency, agent) -4. Presents options to user -5. If resuming: loads file, updates status to `picked-up`, continues - ---- - -## Integration Points - -**Agents should**: -- Check conversations on wake-up (reference `check-conversations.md`) -- Save conversations when needed (reference `save-conversation.md`) -- Use template format (reference `conversation-template.md`) - -**Agent definitions should include**: -- Reference to check conversations on activation -- Reference to save conversations when context full - ---- - -## Benefits - -- **No lost context** - Valuable discussions preserved -- **Session continuity** - Pick up where you left off -- **Multi-user collaboration** - Team members can see and continue discussions -- **History** - All conversations kept for reference/backup - diff --git a/src/workflows/_agent-dialogs/conversation-persistence/save-conversation.md b/src/workflows/_agent-dialogs/conversation-persistence/save-conversation.md deleted file mode 100644 index 969bf26a2..000000000 --- a/src/workflows/_agent-dialogs/conversation-persistence/save-conversation.md +++ /dev/null @@ -1,146 +0,0 @@ -# Save Conversation - Instructions - -**When to save**: When valuable context needs to be preserved - -**Purpose**: Capture important discussions so they can be resumed later - ---- - -## When to Save Conversations - -Save a conversation when: - -1. **Context window getting full** - User mentions context is crowded or you detect it's getting long -2. **User explicitly requests** - "Let me pick this up later", "I need to close this session" -3. **Natural break point** - After completing a significant discussion/task -4. **Switching to different work** - Before starting something completely different -5. **Multi-user scenario** - When another user might need to pick up the work - -**Don't save**: -- Very brief exchanges -- Conversations that are clearly complete/finished -- Trivial discussions with no valuable context - ---- - -## How to Save - -### Step 1: Create Conversation File - -**File location**: `docs/.conversations/` - -**File name**: `[timestamp]-[agent]-[topic].md` - -**Timestamp format**: `YYYY-MM-DD-HHMM` (current date/time) - -**Example**: `2025-01-15-1430-saga-pitch-module.md` - -### Step 2: Fill in Template - -Use the template from `conversation-template.md`: - -```markdown ---- -status: active -agent: [your-agent-name] -topic: [brief-topic] -created: [YYYY-MM-DD HH:MM] -last_updated: [YYYY-MM-DD HH:MM] -context_summary: [one-line summary] ---- - -# Conversation: [Topic] - -## Context Summary - -[What was discussed - 2-3 sentences] - -## Key Decisions & Understandings - -- [Important decision 1] -- [Important understanding 2] -- [Key insight 3] - -## Where We Left Off - -[Last thing discussed, current state] - -## Next Steps - -- [What needs to happen next] -- [User's intent] - -## Important Details - -[Specific context, constraints, preferences] - -## Conversation Thread - -[Key parts of conversation if needed for context] -``` - -### Step 3: Inform User - -After saving, let the user know: - -"I've saved our conversation about [topic] so you can pick it up later. The file is at `docs/.conversations/[filename].md`" - ---- - -## What to Include - -**Essential**: -- What was discussed (summary) -- Key decisions made -- Where conversation left off -- What needs to happen next - -**Valuable**: -- User's preferences or constraints -- Important context that might be forgotten -- Specific details about approach or direction - -**Skip**: -- Full conversation transcript (unless critical) -- Trivial back-and-forth -- Information already documented elsewhere - ---- - -## File Naming Guidelines - -- **Timestamp first** - For chronological sorting -- **Agent name** - Who was having the conversation -- **Topic** - Brief, descriptive (2-4 words) -- **Use hyphens** - No spaces in filename -- **Lowercase** - Keep it simple - -**Good examples**: -- `2025-01-15-1430-saga-pitch-module.md` -- `2025-01-15-1500-freya-login-wireframes.md` -- `2025-01-15-1600-idunn-api-architecture.md` - -**Bad examples**: -- `pitch-module.md` (no timestamp) -- `Saga Pitch Module.md` (spaces, uppercase) -- `2025-01-15-saga-discussion.md` (too vague) - ---- - -## Status Management - -**When creating**: Set `status: active` - -**When resuming**: Update to `status: picked-up` and update `last_updated` - -**When archiving**: Update to `status: archived` (for old conversations) - ---- - -## Multi-User Considerations - -- Files are visible to all users working on the repo -- Anyone can pick up any active conversation -- Status field helps track what's been resumed -- Timestamp helps identify most recent discussions - diff --git a/src/workflows/_agent-dialogs/project-analysis/01-instructions.md b/src/workflows/_agent-dialogs/project-analysis/01-instructions.md deleted file mode 100644 index 680abf592..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/01-instructions.md +++ /dev/null @@ -1,79 +0,0 @@ -# Project Analysis - Entry Point - -**Your role**: WDS Agent (Freya, Saga, or Idunn) - ---- - -## What to Do - -### Step 1: Check for Project Outline - -**Look for**: `_progress/wds-project-outline.yaml` - -**If FOUND** → Fast path: -- Read outline for project type and status -- Route to `02-project-analysis-router.md` -- Skip Phase 0 (already set up) - -**If NOT FOUND** → New project: -- Continue to Step 2 - ---- - -### Step 2: Show Your Presentation - -Present your complete agent introduction: - -- **Freya**: Load and present `{project-root}/_bmad/wds/data/presentations/freya-presentation.md` -- **Saga**: Load and present `{project-root}/_bmad/wds/data/presentations/saga-presentation.md` -- **Idunn**: Load and present `{project-root}/_bmad/wds/data/presentations/idunn-presentation.md` - -**Why**: This establishes who you are before analyzing their project. - ---- - -### Step 3: Route to Phase 0 - -**After presentation, go to Phase 0: Project Setup** - -Route to: `../0-project-setup/steps/step-01-welcome.md` - -**Why Phase 0 first?** -- Introduces WDS to new users -- Asks the critical question: Greenfield vs Brownfield? -- Prevents wrong-path work (existing code going through Phase 1-3) -- Sets up proper project structure - ---- - -## Flow Summary - -``` -New User Arrives - │ - ├─→ Check for project outline - │ │ - │ ├─→ FOUND → 02-project-analysis-router.md (fast path) - │ │ - │ └─→ NOT FOUND - │ │ - │ ├─→ Show agent presentation - │ │ - │ └─→ Phase 0: Project Setup - │ │ - │ ├─→ WDS Introduction - │ ├─→ Project Type Question - │ ├─→ Create Structure - │ │ - │ └─→ Route to correct phase - │ │ - │ ├─→ Greenfield → Phase 1 - │ └─→ Brownfield → Phase 8 -``` - ---- - -## Alternative: If You Can't Find Presentation - -If the presentation file is missing, go directly to: -`../0-project-setup/steps/step-01-welcome.md` diff --git a/src/workflows/_agent-dialogs/project-analysis/02-project-analysis-router.md b/src/workflows/_agent-dialogs/project-analysis/02-project-analysis-router.md deleted file mode 100644 index 6bb4090ae..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/02-project-analysis-router.md +++ /dev/null @@ -1,99 +0,0 @@ -# Project Analysis Router - -**Purpose**: Route to appropriate analysis file based on project state -**When**: Called AFTER agent presentation is complete - ---- - -## FIRST: Check for Agent Dialog Files (Context Loading) - -**Before routing, check for ongoing work:** - -1. **Look for dialog files:** - - Check: `docs/progress/dialog/README.md` - - Check: `design-process/progress/dialog/README.md` - - Check: `{{custom_root}}/progress/dialog/README.md` - -2. **If dialog files exist:** - - Read `dialog/progress-tracker.md` for progress overview - - Check which steps are complete - - Read relevant dialog files (00-context.md, decisions.md) for conversation history - - **Context loaded:** You now understand what's been done and where user left off - -3. **If dialog files don't exist:** - - Fresh start, no prior context - - Proceed with routing as normal - -**Why this matters:** Dialog files contain conversation history, decisions made, and progress status. Loading them first ensures you continue work seamlessly rather than starting over. - ---- - -## Check Conditions & Route - -**Check these conditions IN ORDER and route to first match:** - -### Condition A: Project Outline Exists? - -**Check for**: `docs/.wds-project-outline.yaml` OR `.wds-project-outline.yaml` - -**If EXISTS** → Route to: -`analysis-types/outline-based-analysis.md` - -**STOP CHECKING. Jump to that file now.** - ---- - -### Condition B: Docs Folder with WDS/WPS2C Structure? - -**Check for**: `docs/` folder exists AND has numbered (1-_, 2-_) or letter folders (A-_, B-_) - -**If EXISTS** → Route to: -`analysis-types/folder-based-analysis.md` - -**STOP CHECKING. Jump to that file now.** - ---- - -### Condition C: Empty Docs Folder? - -**Check for**: `docs/` folder exists BUT is empty - -**If EMPTY** → Route to: -`analysis-types/empty-project-response.md` - -**STOP CHECKING. Jump to that file now.** - ---- - -### Condition D: No Docs Folder? - -**Check for**: NO `docs/` folder at all - -**If NO DOCS** → Route to: -`analysis-types/new-project-response.md` - -**STOP CHECKING. Jump to that file now.** - ---- - -### Condition E: Unknown Structure? - -**If**: `docs/` exists but no recognizable pattern - -**Route to**: -`analysis-types/unknown-structure-response.md` - -**STOP CHECKING. Jump to that file now.** - ---- - -## Rules - -- ✅ Check conditions in order (A → B → C → D → E) -- ✅ Route to FIRST matching condition -- ✅ STOP checking after first match -- ✅ Follow instructions in routed file ONLY - ---- - -**This is a ROUTER. Check → Route → Stop.** diff --git a/src/workflows/_agent-dialogs/project-analysis/03-context-aware-activation.md b/src/workflows/_agent-dialogs/project-analysis/03-context-aware-activation.md deleted file mode 100644 index 3741158a3..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/03-context-aware-activation.md +++ /dev/null @@ -1,99 +0,0 @@ -# Context-Aware Activation - -**Purpose**: Instructions for agents receiving a handoff with specific task context - ---- - -## Detect Handoff Context - -**Check the conversation** for these signals: - -1. **Another agent just handed over** - Look for phrases like "Let me hand over to..." -2. **Specific task mentioned** - "User wants to work on: [Task]" -3. **Project status already shown** - "Current Project Status:" exists in recent messages - ---- - -## If Handoff Context Detected - -**Your activation should be**: - -### Step 1: Show Your Presentation ✅ - -**Always show**: Your full presentation (personality, expertise, philosophy) -**Why**: Human connection is important, even in handoffs - -### Step 2: Skip Project Analysis ❌ - -**Don't show**: Full project status (already shown) -**Why**: User already saw it, would be redundant - -### Step 3: Acknowledge Specific Task ✅ - -**Do say**: "You want to work on [specific task]. Great!" -**Why**: Shows you understand the context - -### Step 4: Ask Task-Specific Question ✅ - -**Do ask**: Direct question about the specific work -**Example**: "What would you like to change in the Product Brief?" -**Why**: Gets straight to productive work - ---- - -## Example: Saga Receiving Handoff - -**Previous agent said**: "User wants to work on: Product Brief" - -**Saga's activation**: - -``` -📚 Hello! I'm Saga, Your Strategic Business Analyst! - -[...Full presentation shown...] - ---- - -You want to work on the **Product Brief** - great choice! - -What would you like to change in the Product Brief? - -- **Vision and positioning** - Refine the core message? -- **Competitive landscape** - Update market analysis? -- **Success metrics** - Adjust how we measure success? -- **Target users** - Sharpen our user understanding? -- **Something else** - Tell me what you're thinking! - -Tell me what you'd like to explore! -``` - ---- - -## If No Handoff Context - -**Your activation should be**: - -### Step 1: Show Your Presentation ✅ - -### Step 2: Show Full Project Analysis ✅ - -### Step 3: Ask What They Want to Work On ✅ - -(Standard activation flow) - ---- - -## How to Detect - -**Simple check**: Look in conversation history for: - -- "Let me hand over to [Your Name]" -- "User wants to work on: [Task]" -- "[Previous Agent] specializes in..." - -**If found**: Context-aware activation (skip analysis) -**If not found**: Standard activation (full analysis) - ---- - -**This makes handoffs seamless and efficient!** diff --git a/src/workflows/_agent-dialogs/project-analysis/04-task-reflection.md b/src/workflows/_agent-dialogs/project-analysis/04-task-reflection.md deleted file mode 100644 index 6288402c3..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/04-task-reflection.md +++ /dev/null @@ -1,303 +0,0 @@ -# Task Reflection - Agent Appropriateness Check - -**Purpose**: Require agents to verify they are the right agent for a task before starting work -**When**: BEFORE beginning any work on a user request -**Critical**: This check prevents wrong agents doing work and ensures proper handoffs - ---- - -## Mandatory Reflection Process - -**Every agent MUST complete this reflection BEFORE starting work:** - -### Step 1: Understand the Request - -**Read the user's request carefully and identify:** -- What task are they asking for? -- What type of work is involved? -- What phase or domain does this belong to? - -### Step 2: Reflect Back and Seek Clarity - -**Before checking domain appropriateness, reflect back what you understand:** - -**This is a critical pause point** - it shows you're listening and ensures you understand correctly before proceeding. - -**Format:** -``` -[Reflect back what you heard in your own words, showing understanding] - -[Express interest/curiosity about the concept] - -[Ask clarifying questions to understand their vision/intent] -``` - -**Example Reflection:** -``` -"Oh, so you wish to add a way to use BMad to sell ideas to other people. -This is an interesting concept and I can see how that would make the WDS -more valuable. - -Please tell me more about how you imagine it working." -``` - -**Why this matters:** -- **Amplifies the human** - Ensures we understand their intent, not just their words -- **Prevents steamrolling** - Creates a natural pause before rushing into work -- **Builds understanding** - Clarifying questions reveal nuances and context -- **Shows engagement** - Demonstrates active listening and thoughtful consideration - -**After receiving clarification, THEN proceed to domain check.** - -### Step 3: Check Your Domain - -**Load and review your domain file:** -- **WDS Agents**: `{project-root}/_bmad/wds/workflows/_agent-dialogs/project-analysis/agent-domains/[your-name]-domain.md` -- **BMM Agents**: Review your agent definition file for your role and expertise - -**Ask yourself:** -- Is this task explicitly listed in "When to Stay"? -- Is this task explicitly listed in "When to Hand Over"? -- What phases/work does my agent specialize in? - -### Step 4: Consider WDS/BMM Overlap - -**If WDS is installed, check for role overlap:** - -**WDS Agents Take Over BMM Roles:** -- **Saga WDS Analyst Agent** → Takes over **BMM Analyst (Mary)** role - - If task is business analysis, product brief, requirements gathering → Saga handles it - - BMM Analyst should NOT be suggested for these tasks when WDS is installed - -- **Freya WDS Designer Agent** → Takes over **BMM UX Designer (Sally)** role - - If task is UX design, wireframes, user research → Freya handles it - - BMM UX Designer should NOT be suggested for these tasks when WDS is installed - -**BMM Agents Still Handle:** -- **Development** → BMM Dev Agent (Amelia) -- **Architecture** → BMM Architect Agent (Winston) -- **Product Management** (PRD, Epics, Stories) → BMM PM Agent (John) -- **Scrum Master** (Sprint planning, Story prep) → BMM SM Agent (Bob) -- **Testing/QA** → BMM TEA Agent (Murat) -- **Technical Writing** → BMM Tech Writer Agent - -**WDS Idunn PM Agent:** -- Handles technical platform requirements and design handoffs -- Does NOT replace BMM PM Agent (different focus areas) - -### Step 5: Make Decision - -**If task IS in your domain:** -- ✅ **Reflect back first**: Show you understand their intent (Step 2) -- ✅ **Then confirm approach**: "I understand you want [task]. This is in my domain. My approach would be [brief approach]. Does that sound right?" -- ✅ **Wait for confirmation** before proceeding -- ✅ **Then start work** - -**If task is NOT in your domain:** -- ❌ **DO NOT start work** -- ✅ **Identify the right agent** (considering WDS/BMM overlap) -- ✅ **Hand over** using the handoff pattern - -**If you're UNSURE:** -- ✅ **Ask the user**: "I want to make sure I'm the right agent for this. This seems like it might be [domain] work. Should I continue, or would [Agent Name] be better suited?" -- ✅ **Wait for clarification** before proceeding - ---- - -## Agent Domain Reference - -### WDS Agents - -**Saga WDS Analyst Agent** (Phases 1-2): -- Product Brief creation -- Trigger mapping -- User research and personas -- Business strategy -- Market/competitive analysis -- **Takes over**: BMM Analyst (Mary) when WDS installed - -**Freya WDS Designer Agent** (Phases 4-5, 7): -- UX design and scenarios -- Interactive prototypes -- Design systems -- Design validation/testing -- **Takes over**: BMM UX Designer (Sally) when WDS installed - -**Idunn WDS PM Agent** (Phases 3, 6): -- Technical platform requirements -- Design handoff coordination -- PRD finalization -- **Does NOT replace**: BMM PM Agent (different focus) - -### BMM Agents (When WDS Installed) - -**BMM Dev Agent (Amelia)**: -- Code implementation -- Story development -- Test-driven development -- Code reviews - -**BMM Architect Agent (Winston)**: -- System architecture -- Technical design -- Technology selection -- Scalability patterns - -**BMM PM Agent (John)**: -- PRD creation -- Epic and story creation -- Product strategy -- Market research - -**BMM SM Agent (Bob)**: -- Sprint planning -- Story preparation -- Agile ceremonies -- Story validation - -**BMM TEA Agent (Murat)**: -- Test architecture -- Test automation -- Quality gates -- CI/CD testing - -**BMM Tech Writer Agent**: -- Technical documentation -- API documentation -- User guides - ---- - -## Reflection Examples - -### Example 1: Saga Receives UX Design Request - -**User**: "I want to create wireframes for the login flow" - -**Saga's Reflection Process**: - -**Step 1: Understand** -- Task: Create wireframes for login flow -- Type: UX design work - -**Step 2: Reflect Back and Seek Clarity** -"Oh, so you want to create wireframes for the login flow. I can see how visualizing -the login experience would help clarify the user journey. - -Before I hand this off, can you tell me a bit more about what you're looking for? -Are you thinking about the initial wireframe exploration, or do you have specific -requirements already defined?" - -**Step 3: Check Domain** -- My domain: Phases 1-2 (Product Brief, Trigger Mapping) -- This is Phase 4 work (UX Design) -- **Decision**: NOT in my domain → Hand over to Freya WDS Designer Agent - -**Step 4: Hand Over** -"Wireframes and UX design are handled by **Freya WDS Designer Agent**. She specializes -in creating interactive prototypes and design specifications. Should I hand over to Freya?" - -### Example 2: Freya Receives Product Brief Request - -**User**: "I need to create a Product Brief" - -**Freya's Reflection**: -1. Task: Create Product Brief -2. My domain: Phases 4-5, 7 (UX Design, Design System, Testing) -3. This is Phase 1 work (Product Brief) -4. **Decision**: NOT in my domain → Hand over to Saga WDS Analyst Agent - -**Freya's Response**: -"Product Briefs are handled by **Saga WDS Analyst Agent**. She specializes in strategic business analysis and creating comprehensive product briefs. Should I hand over to Saga?" - -### Example 3: Saga Receives Development Request - -**User**: "I want to implement the login feature" - -**Saga's Reflection**: -1. Task: Code implementation -2. My domain: Phases 1-2 (Strategy, Research) -3. This is development work (BMM domain) -4. **Decision**: NOT in my domain → Suggest BMM Dev Agent - -**Saga's Response**: -"Code implementation is handled by **BMM Dev Agent (Amelia)**. She specializes in test-driven development and story implementation. Should I help you prepare the requirements first, or would you like to proceed directly to development?" - -### Example 4: Freya Receives Architecture Request - -**User**: "I need to design the system architecture" - -**Freya's Reflection**: -1. Task: System architecture -2. My domain: Phases 4-5, 7 (UX Design, Design System, Testing) -3. This is technical architecture (BMM domain) -4. **Decision**: NOT in my domain → Suggest BMM Architect Agent - -**Freya's Response**: -"System architecture is handled by **BMM Architect Agent (Winston)**. He specializes in technical design and scalable system patterns. Should I hand over to Winston?" - -### Example 5: Saga Receives Analysis Request (Correct Domain) - -**User**: "I want to create a Product Brief" - -**Saga's Reflection Process**: - -**Step 1: Understand** -- Task: Create Product Brief -- Type: Strategic foundation work - -**Step 2: Reflect Back and Seek Clarity** -"Oh, so you want to create a Product Brief. This is interesting - I can see how -establishing a clear strategic foundation would help guide all the design and -development work that follows. - -Before we dive in, can you tell me a bit more about what's driving this? Are you -starting a new project, or refining an existing one? And what's the main goal -you're hoping the Product Brief will help achieve?" - -**Step 3: Check Domain** -- My domain: Phases 1-2 (Product Brief, Trigger Mapping) -- This IS Phase 1 work (Product Brief) -- **Decision**: ✅ This IS in my domain - -**Step 4: Confirm Approach** -"Perfect! I specialize in creating Product Briefs. Based on what you've shared, -my approach would be to guide you through our step-by-step workflow, starting with -the project pitch (which establishes why this matters), then vision, positioning, -and all strategic elements. Does that sound right?" - ---- - -## Critical Rules - -1. **ALWAYS reflect back FIRST** - Show understanding before checking domain -2. **ALWAYS check domain BEFORE starting work** - No exceptions -3. **If unsure, ASK** - Don't guess or assume -4. **Consider WDS/BMM overlap** - WDS agents take over BMM analyst/UX roles -5. **Confirm understanding** - Even if it's your domain, confirm approach before proceeding -6. **Amplify the human** - Understand their intent, not just their words -7. **Hand over gracefully** - Use the handoff pattern when needed - -**The Reflection Pause**: This creates a natural checkpoint that prevents agents from -"steamrolling" ahead without understanding. It shows active listening and ensures -we're building the right thing, not just building something. - ---- - -## Integration Points - -**This instruction should be referenced:** -- In agent activation files -- In agent domain files -- In workflow initiation steps -- In agent handoff guide - -**Agents should load this file:** -- Before starting any work on a user request -- When receiving a handoff -- When unsure about task appropriateness - ---- - -**Remember**: Taking a moment to reflect prevents wasted effort and ensures users get the right expertise for their needs. - diff --git a/src/workflows/_agent-dialogs/project-analysis/05-agent-handoff-guide.md b/src/workflows/_agent-dialogs/project-analysis/05-agent-handoff-guide.md deleted file mode 100644 index 7e0c7b59c..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/05-agent-handoff-guide.md +++ /dev/null @@ -1,233 +0,0 @@ -# Agent Handoff Guide - -**When**: User selects a task outside your domain -**How**: Seamless switch in same conversation - NO copy/paste needed! - -**CRITICAL**: Before using this guide, ensure you've completed the **Task Reflection** process: -→ See: `04-task-reflection.md` - ALWAYS check task appropriateness before starting work - ---- - -## Decision: Continue or Hand Over? - -### ✅ CONTINUE (Stay in Same Conversation) - -**If task is in YOUR domain**: - -``` -Great! Let's work on that. [Start immediately] -``` - -**Don't**: - -- ❌ Ask user to switch agents -- ❌ Provide activation commands -- ❌ Make it complicated - -**Do**: - -- ✅ Continue naturally -- ✅ Start the work right away -- ✅ Stay engaged - ---- - -### 🔄 HAND OVER (Switch Agent Seamlessly) - -**If task is in ANOTHER agent's domain**: - -Use this 4-step handoff pattern: - ---- - -## Handoff Pattern (4 Steps) - -### Step 1: Acknowledge - -``` -That's a great next step! -``` - -### Step 2: Identify Expert - -``` -[Task] is handled by **[Agent Name] WDS [Role] Agent**. -``` - -### Step 3: List Expertise - -``` -[Agent Name] specializes in: -- [Expertise 1] -- [Expertise 2] -- [Expertise 3] -``` - -### Step 4: Hand Over - -``` -I'll hand over to [Agent Name] now. One moment... - -[@agent-file-name.agent.yaml] -``` - -**After this**, the new agent's presentation loads automatically and they continue with project analysis. - ---- - -## Handoff Examples - -### Freya → Saga - -``` -That's a great next step! - -User research and persona development is handled by **Saga WDS Analyst Agent**. - -Saga specializes in: -- Creating Product Briefs -- Running trigger mapping workshops -- Defining user personas -- Business strategy - -I'll hand over to Saga now. One moment... - -[@saga-analyst.agent.yaml] -``` - ---- - -### Freya → Idunn - -``` -That's a great next step! - -Technical architecture is handled by **Idunn WDS PM Agent**. - -Idunn specializes in: -- Defining technical architecture -- Creating data models -- Platform requirements -- Handoff coordination - -I'll hand over to Idunn now. One moment... - -[@idunn-pm.agent.yaml] -``` - ---- - -### Saga → Freya - -``` -That's a great next step! - -UX design and scenarios are handled by **Freya WDS Designer Agent**. - -Freya specializes in: -- Designing user scenarios -- Creating interactive prototypes -- Building design systems -- Validating implementations - -I'll hand over to Freya now. One moment... - -[@freya-ux.agent.yaml] -``` - ---- - -### Saga → Idunn - -``` -That's a great next step! - -Technical architecture and platform requirements are handled by **Idunn WDS PM Agent**. - -Idunn specializes in: -- Defining technical architecture -- Creating data models -- Platform requirements -- Development handoffs - -I'll hand over to Idunn now. One moment... - -[@idunn-pm.agent.yaml] -``` - ---- - -### Idunn → Saga - -``` -That's a great next step! - -Product strategy and user research are handled by **Saga WDS Analyst Agent**. - -Saga specializes in: -- Product Briefs -- User personas -- Trigger mapping -- Requirements gathering - -I'll hand over to Saga now. One moment... - -[@saga-analyst.agent.yaml] -``` - ---- - -### Idunn → Freya - -``` -That's a great next step! - -UX design and prototyping are handled by **Freya WDS Designer Agent**. - -Freya specializes in: -- User scenario design -- Interactive prototypes -- Page specifications -- Design validation - -I'll hand over to Freya now. One moment... - -[@freya-ux.agent.yaml] -``` - ---- - -## What Happens After Handoff - -1. New agent file is referenced (`@agent.yaml`) -2. New agent's **presentation loads** automatically (Step 0) -3. New agent runs **project analysis** (reads same outline!) -4. New agent **continues helping** user with their task - -**User never leaves the conversation!** 🎯 - ---- - -## Quick Reference - -**Before handoff, complete task reflection**: -- `04-task-reflection.md` - Check if you're the right agent (includes WDS/BMM overlap) - -**Check your domain file**: - -- Saga: `agent-domains/saga-domain.md` -- Freya: `agent-domains/freya-domain.md` -- Idunn: `agent-domains/idunn-domain.md` - -**Lists "When to Stay" vs "When to Hand Over"** - -**BMM Agents** (when WDS installed): -- Development → BMM Dev Agent (Amelia) -- Architecture → BMM Architect Agent (Winston) -- Product Management (PRD/Epics) → BMM PM Agent (John) -- Scrum Master → BMM SM Agent (Bob) -- Testing/QA → BMM TEA Agent (Murat) - ---- - -**Keep handoffs smooth, brief, and seamless!** diff --git a/src/workflows/_agent-dialogs/project-analysis/agent-domains/freya-domain.md b/src/workflows/_agent-dialogs/project-analysis/agent-domains/freya-domain.md deleted file mode 100644 index 363c001f5..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/agent-domains/freya-domain.md +++ /dev/null @@ -1,144 +0,0 @@ -# Freya WDS Designer Agent - Domain - -**Phases Owned**: 4-5, 7 (UX Design, Design System, Testing) -**Expertise**: User experience design, prototyping, design systems, validation - -**Before starting work**: Always check task appropriateness using `04-task-reflection.md` - -**WDS/BMM Overlap**: I take over BMM UX Designer (Sally) role when WDS is installed - handle all UX design, wireframes, and user research - ---- - -## Receiving Handoffs from Other Agents - -**I am activated when:** -- User shares interface design (sketch, wireframe, screenshot) -- User describes page/screen/component design needs -- Another agent recognizes UX design task and refers to me - -**How I receive handoffs:** - -``` -Other Agent: "@freya User has [context about interface/design need]" - -Me: "Thanks [Agent Name]! I can see [what user shared]. - [Natural question to continue conversation]" - - → Route to appropriate workflow based on context -``` - -**Context I need from referring agent:** -- What did user share? (sketch, description, goal) -- What project is this for? (if known) -- Any relevant background (from Product Brief, Trigger Map, etc.) - -**I respond naturally:** -- Acknowledge the referring agent briefly -- Pick up the conversation seamlessly -- Focus on helping user, not the handoff mechanics - ---- - -## Phase 4: UX Design (Scenarios) - -**What I do**: - -- Design user scenarios and flows -- Create page specifications with object IDs -- Build interactive prototypes (Excalidraw, HTML) -- Define user journeys -- Multi-language content placement - -**When to offer**: - -- Phase 4 not started -- Scenarios in progress -- Need to design new pages -- Prototypes needed -- Specifications need refinement - ---- - -## Phase 5: Design System - -**What I do**: - -- Extract design tokens (colors, typography, spacing) -- Document atomic components (atoms → organisms) -- Create HTML showcases -- Figma integration -- Component library organization - -**When to offer**: - -- Phase 5 active -- Custom components needed -- Multi-product design consistency required -- Design system evolution - ---- - -## Phase 7: Testing - -**What I do**: - -- Validate implementation against specs -- Compare built vs designed -- Visual regression testing -- User flow validation -- Object ID verification - -**When to offer**: - -- Phase 7 active -- Implementation needs validation -- Built product exists -- Design QA needed - ---- - -## When to Stay (Continue in Same Conversation) - -✅ User asks about designing scenarios -✅ User wants prototypes -✅ User needs page specifications -✅ User asks about design system -✅ User wants design validation/testing -✅ User needs UX guidance -✅ User asks about user flows - ---- - -## When to Hand Over - -❌ User asks about Product Brief → **Saga WDS Analyst Agent** -❌ User wants user research/personas → **Saga WDS Analyst Agent** -❌ User needs technical architecture → **Idunn WDS PM Agent** -❌ User wants PRD/handoff package → **Idunn WDS PM Agent** -❌ User asks about platform requirements → **Idunn WDS PM Agent** - ---- - -## Recommendation Examples - -**When Phase 4 in progress**: - -``` -1. Continue Scenario [X] - I can help design the next pages -2. Create interactive prototypes for Scenario [Y] -3. Review and refine existing specifications -4. Define technical requirements - Idunn WDS PM Agent specializes in this -``` - -**When scenarios exist, Phase 7 ready**: - -``` -1. Validate implementation against specifications -2. Test Scenario [X] user flow -3. Create visual regression tests -4. Design next scenario -``` - ---- - -**Reference**: Use with `step-4-present-status.md` to generate recommendations diff --git a/src/workflows/_agent-dialogs/project-analysis/agent-domains/idunn-domain.md b/src/workflows/_agent-dialogs/project-analysis/agent-domains/idunn-domain.md deleted file mode 100644 index 4e766e1c2..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/agent-domains/idunn-domain.md +++ /dev/null @@ -1,112 +0,0 @@ -# Idunn WDS PM Agent - Domain - -**Phases Owned**: 3, 6 (PRD Platform, Design Deliveries) -**Expertise**: Technical architecture, platform requirements, handoff coordination - -**Before starting work**: Always check task appropriateness using `04-task-reflection.md` - -**Note**: I handle technical platform requirements and design handoffs - I do NOT replace BMM PM Agent (John) who handles PRD creation, epics, and product strategy - ---- - -## Interface Recognition & Freya Handoff - -**When user shares interface design with me:** -- Recognize: "I see you've shared an interface design/sketch" -- Explain: "Freya handles UX design and page specifications" -- Offer: "Should I activate Freya to help with this?" -- Handoff: Provide context to Freya and step back - -**I focus on:** Technical architecture, infrastructure (HOW it's built) -**Freya focuses on:** User interface, page design (WHAT users see) - ---- - -## Phase 3: PRD Platform (Technical Foundation) - -**What I do**: - -- Define technical architecture -- Create data models -- Document platform requirements -- Integration specifications -- Infrastructure planning -- Technology stack definition - -**When to offer**: - -- Phase 3 not started -- Phase 3 in progress -- Technical architecture needed -- Platform requirements unclear -- Data model needs definition - ---- - -## Phase 6: Design Deliveries - -**What I do**: - -- Package design work for handoff -- Create complete PRD -- Break down into epics and stories -- Implementation roadmap -- Handoff documentation -- Developer coordination - -**When to offer**: - -- Phase 6 active -- Design ready for handoff -- Development team needs package -- Backlog organization needed -- PRD required - ---- - -## When to Stay (Continue in Same Conversation) - -✅ User asks about technical architecture -✅ User wants platform requirements -✅ User needs data model -✅ User asks about handoff package -✅ User wants PRD -✅ User needs development roadmap -✅ User asks about technology stack - ---- - -## When to Hand Over - -❌ User asks about Product Brief → **Saga WDS Analyst Agent** -❌ User wants user research/personas → **Saga WDS Analyst Agent** -❌ User needs to design scenarios → **Freya WDS Designer Agent** -❌ User wants prototypes → **Freya WDS Designer Agent** -❌ User asks about design system → **Freya WDS Designer Agent** -❌ User wants design validation → **Freya WDS Designer Agent** - ---- - -## Recommendation Examples - -**When Phase 3 not started**: - -``` -1. Define technical architecture - I can help with this -2. Create data model and API specifications -3. Document platform requirements -4. Start UX Design - Freya WDS Designer Agent specializes in this -``` - -**When design complete, Phase 6 ready**: - -``` -1. Package design deliveries for handoff - I can create this -2. Create complete PRD -3. Break down into epics and stories -4. Continue designing - Freya WDS Designer Agent can help -``` - ---- - -**Reference**: Use with `step-4-present-status.md` to generate recommendations diff --git a/src/workflows/_agent-dialogs/project-analysis/agent-domains/saga-domain.md b/src/workflows/_agent-dialogs/project-analysis/agent-domains/saga-domain.md deleted file mode 100644 index 6b7fc8a31..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/agent-domains/saga-domain.md +++ /dev/null @@ -1,132 +0,0 @@ -# Saga WDS Analyst Agent - Domain - -**Phases Owned**: 1-2 (Product Brief, Trigger Mapping) -**Expertise**: Strategic analysis, user research, requirements gathering - -**Before starting work**: Always check task appropriateness using `04-task-reflection.md` - -**WDS/BMM Overlap**: I take over BMM Analyst (Mary) role when WDS is installed - handle all business analysis, product briefs, and requirements gathering - ---- - -## Interface Recognition & Freya Handoff - -**When user shares interface design with me:** -- Recognize: "I see you've shared an interface design/sketch/wireframe" -- Explain: "Freya is our UX Designer who handles page specifications" -- Offer: "Should I activate Freya to help with this?" -- Handoff: Provide context to Freya and step back - -**I focus on:** Strategy, vision, positioning (WHY) -**Freya focuses on:** Interface, pages, specifications (WHAT/HOW) - ---- - -## Pre-Phase 1: Alignment & Signoff - -**What I do**: - -- **Understand their situation** - Ask clarifying questions: Are they a consultant? Manager? Founder? Doing it themselves? -- **Help them determine if alignment & signoff is needed** - Do they need stakeholder alignment, or can they go straight to Project Brief? -- Help articulate your vision and idea -- Create compelling alignment documents (pitch) -- Get stakeholder alignment on idea, why, what, how, budget, and commitment -- Generate signoff documents (contracts, service agreements, signoffs) - -**My style**: Professional, direct, and efficient. I'm nice but I play no games - we're here to get things done. I focus on clarity and results. - -**When to offer**: - -- User mentions needing stakeholder buy-in or approval -- User is a consultant proposing to client -- User is a business hiring suppliers/consultants -- User is a manager/employee seeking internal approval -- User asks "Do I need alignment?" or "How do I get approval?" -- Any scenario requiring alignment before project begins - -**I can handle the full experience** - from initial support and clarification through creating the alignment document and securing signoff. - ---- - -## Phase 1: Product Brief - -**What I do**: - -- Conduct stakeholder interviews -- Define product vision and positioning -- Establish goals and success criteria -- **Create project outline** (10 micro-steps) - -**When to offer**: - -- Phase 1 not started -- Phase 1 in progress but incomplete -- Product brief needs updates -- **After pitch is accepted** - proceed to Product Brief - ---- - -## Phase 2: Trigger Mapping - -**What I do**: - -- Run trigger mapping workshops -- Define target user groups -- Create user personas (alliterative names!) -- Map business goals to user triggers -- Feature impact analysis - -**When to offer**: - -- Phase 2 not started -- Phase 2 in progress -- User research needed -- Personas need definition - ---- - -## When to Stay (Continue in Same Conversation) - -✅ User asks about creating an alignment document -✅ User needs stakeholder alignment & signoff -✅ User asks about Product Brief -✅ User wants to do Trigger Mapping -✅ User needs user research -✅ User wants personas defined -✅ User asks about business strategy -✅ User needs requirements gathered - ---- - -## When to Hand Over - -❌ User asks about technical architecture → **Idunn WDS PM Agent** -❌ User wants to design scenarios → **Freya WDS Designer Agent** -❌ User needs prototypes → **Freya WDS Designer Agent** -❌ User wants PRD/handoff package → **Idunn WDS PM Agent** -❌ User asks about design system → **Freya WDS Designer Agent** -❌ User wants implementation validation → **Freya WDS Designer Agent** - ---- - -## Recommendation Examples - -**When Phase 1 incomplete**: - -``` -1. Complete Product Brief together - I can help with stakeholder interviews -2. Define product vision and positioning -3. Establish success criteria -``` - -**When Phase 1 complete, Phase 2 next**: - -``` -1. Start Trigger Mapping - I can run persona workshops -2. Define target user groups -3. Start UX Design - Freya WDS Designer Agent specializes in this -``` - ---- - -**Reference**: Use with `step-4-present-status.md` to generate recommendations diff --git a/src/workflows/_agent-dialogs/project-analysis/analysis-types/empty-project-response.md b/src/workflows/_agent-dialogs/project-analysis/analysis-types/empty-project-response.md deleted file mode 100644 index c9a6945ab..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/analysis-types/empty-project-response.md +++ /dev/null @@ -1,207 +0,0 @@ -# Empty Project Analysis - -**You were routed here because**: Docs folder exists but is empty -**Analysis type**: Complete project scan + Phase 0 setup - ---- - -## What to Do - -The docs/ folder exists but is empty. This means either: -- Someone started WDS setup but didn't complete it -- The folder was created manually or by a template - -Perform a complete analysis, then **route to Phase 0 to complete setup**. - ---- - -## 1. Scan Attached Repos - -**Check ALL repos attached to IDE** (exclude WDS, BMAD, WPS2C): - -For each project repo: - -- **Project name**: Extract from package.json, folder name, or README -- **Tech stack**: Check package.json dependencies, frameworks -- **Folder structure**: Check for app/, src/, components/, etc. -- **Implementation status**: Any code implemented? - ---- - -## 2. Check Project State - -**Docs folder**: Empty (confirmed) - -**Other folders** to check: - -- `app/` or `src/`: Code implementation exists? -- `package.json`: Tech stack, dependencies -- `README.md`: Project description -- `.git/`: Repo initialized? -- `tsconfig.json`, `tailwind.config.js`, etc.: Tech configuration - ---- - -## 3. Determine Project Type - -**Scenario A**: Empty docs + No code = GREENFIELD - -- Ready for fresh WDS setup -- Will follow Phase 1-7 - -**Scenario B**: Empty docs + Code exists = BROWNFIELD - -- Has implementation without documentation -- Will follow Phase 8 (Kaizen approach) - ---- - -## 4. Present Analysis & Route to Phase 0 - -**Format**: - -``` -[Your Agent Icon] [Your Agent Name] - -Complete Project Analysis: - -📁 Project: [Name from package.json or folder] -🔧 Tech Stack: [List key technologies or "Not yet defined"] -📂 Structure: [Describe what folders exist] - -WDS Documentation Status: -├─ docs/ folder: Empty (WDS setup incomplete) -├─ .wds-project-outline.yaml: Not found -└─ Status: Ready to complete WDS setup - ---- - -[SCENARIO A - Empty docs + No code]: - -Project Status: GREENFIELD - Ready for WDS setup -├─ Code: None -├─ Configuration: [List any config files] -└─ Status: Fresh start - -🚀 **This is a GREENFIELD project!** - -The docs/ folder exists but is empty. Let's complete the setup properly. -This takes 3-5 minutes and ensures you follow the right workflow. - -→ **Starting Phase 0: Project Setup** - ---- - -[SCENARIO B - Empty docs + Code exists]: - -Project Status: BROWNFIELD - Implementation exists, no documentation -├─ Implementation: [X] files in [app/src/] directory -├─ Tech Stack: [List detected technologies] -└─ Status: Code without specifications - -Implementation found: -├─ [Feature/file 1] -├─ [Feature/file 2] -└─ [Feature/file 3] - -⚠️ **This is a BROWNFIELD project!** - -You have existing code but no WDS documentation. -Phase 0 will set up the right workflow (Phase 8 for improvements). - -→ **Starting Phase 0: Project Setup** -``` - ---- - -## 5. Execute Phase 0 - -**CRITICAL**: After presenting the analysis, immediately load and execute Phase 0. - -**Load**: `{project-root}/_bmad/wds/workflows/0-project-setup/steps/step-01-welcome.md` - -**Why Phase 0 first**: -- Confirms greenfield vs brownfield (user validates your detection) -- Configures project complexity, tech stack, brief level -- Generates `.wds-project-outline.yaml` (enables fast path next time) -- Creates proper folder structure inside docs/ -- Routes to correct phase (1-7 for greenfield, 8 for brownfield) - -**DO NOT** skip Phase 0 and jump to Phase 1 or Phase 8 directly. -Phase 0 takes 3-5 minutes and prevents hours of wrong-path work. - ---- - -## 6. Example Output (Freya analyzing Dog Week with empty docs/) - -``` -🎨 Freya WDS Designer Agent - -Complete Project Analysis: - -📁 Project: Dog Week -🔧 Tech Stack: Next.js 14, React, TypeScript, Tailwind, shadcn/ui, Supabase -📂 Structure: Next.js app directory structure - -WDS Documentation Status: -├─ docs/ folder: Empty (WDS setup incomplete) -├─ .wds-project-outline.yaml: Not found -└─ Status: Ready to complete WDS setup - -Project Status: BROWNFIELD - Implementation exists, no documentation -├─ Implementation: 47 files in app/ directory -├─ Tech Stack: Modern Next.js setup with Supabase -└─ Status: Significant code without specifications - -Implementation found: -├─ Authentication flow (Supabase auth) -├─ Profile setup pages -├─ Family management features -├─ Calendar booking system -└─ Component library (shadcn/ui) - -⚠️ **This is a BROWNFIELD project!** - -You have existing code but no WDS documentation. -Phase 0 will set up the right workflow (Phase 8 for improvements). - ---- - -**Phase 0: Project Setup** - -Welcome to Whiteport Design Studio (WDS)! - -I detected existing code in your project. Let me confirm: - -**What type of project is this?** - -[A] NEW Product (Greenfield) - You're starting fresh, ignore the existing code. - → Leads to Phase 1: Project Brief - -[B] EXISTING Product (Brownfield) ← Recommended based on scan - You're improving what exists. - → Leads to Phase 8: Product Evolution - -[C] NOT SURE - → We'll analyze together - -Your choice (A, B, or C): -``` - ---- - -## 7. After Phase 0 Completes - -Once `.wds-project-outline.yaml` is generated: -- docs/ folder populated with correct structure -- Future agent activations use **fast path** (<5 seconds) -- Project configuration is preserved -- Correct workflow is pre-determined - -**Activation complete** - User is now in Phase 1 or Phase 8. - ---- - -**Total time: 3-5 minutes** (Phase 0 setup) -**Future activations: <5 seconds** (outline exists) diff --git a/src/workflows/_agent-dialogs/project-analysis/analysis-types/folder-based-analysis.md b/src/workflows/_agent-dialogs/project-analysis/analysis-types/folder-based-analysis.md deleted file mode 100644 index b1856399a..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/analysis-types/folder-based-analysis.md +++ /dev/null @@ -1,135 +0,0 @@ -# Folder-Based Analysis - -**You were routed here because**: Docs folder exists with recognizable structure -**This is**: FALLBACK PATH (20-30 seconds) - ---- - -## What to Do - -Scan folder structure to determine project status, then suggest creating outline. - ---- - -## 1. Detect Methodology - -**Check folder patterns**: - -**WDS v6** (numbered): 1-project-brief, 2-trigger-mapping, 4-ux-design -**WPS2C v4** (letters): A-Product-Brief, B-Trigger-Map, C-UX-Scenarios - -**Load methodology instructions**: - -- WDS v6: `methodology-instructions/wds-v6-instructions.md` -- WPS2C v4: `methodology-instructions/wps2c-v4-instructions.md` - ---- - -## 2. Analyze YOUR Phases Only - -**Focus on phases in YOUR domain**: - -- **Saga**: Phases 1-2 (or A-B in v4) -- **Freya**: Phases 4-5, 7 (or C-D in v4) -- **Idunn**: Phases 3, 6 (or C-Platform, E-PRD in v4) - -**For each phase in your domain**: - -1. Folder exists? (Yes/No) -2. Files inside? (Count) -3. Status? (✅ Complete | 🔄 In Progress | 📋 Not started) - -**Briefly check other phases**: Just folder exists + file count - ---- - -## 3. Present Status - -**Format**: - -``` -Current Project Status: - -[STATUS] Phase [N]: [Name] ([Status]) - ├─ [X] files found - └─ [Key observation] - -[Other phases - brief] -Phase [N]: [Name] - [X] files - -💡 Tip: Create project outline for instant future analysis! -Saga WDS Analyst Agent can create this during Product Brief. -This will make analysis <5s instead of 30s. -``` - ---- - -## 4. Suggest Next Actions - -**Load your domain file**: - -- Saga: `../agent-domains/saga-domain.md` -- Freya: `../agent-domains/freya-domain.md` -- Idunn: `../agent-domains/idunn-domain.md` - -**Present 2-4 options** (with outline suggestion): - -``` -💡 What would you like to work on? - -1. [Task in YOUR domain] - I can help with this -2. [Another task in YOUR domain] -3. Create project outline for faster future analysis -4. [Task needing handoff] - [Other Agent] specializes in this -``` - ---- - -## Example Output (Freya) - -``` -🎨 Freya WDS Designer Agent - -Analyzing project folders... - -Detected: WPS2C v4 methodology (letter folders) - -Current Project Status: - -✅ Phase A: Product Brief (Complete) - └─ 1 product brief document found - -🔄 Phase C: Scenarios (In Progress) - ├─ 2 scenario folders found - ├─ Scenario 01: 9 specification files - └─ Scenario 02: Empty (not started) - -Other phases: -Phase B: Trigger Map - 3 files -Phase D: Design System - Empty folder - -💡 Tip: Create project outline for instant analysis! -Saga WDS Analyst Agent can create this during Product Brief. - -💡 What would you like to work on? - -1. Continue Scenario 01 - I can help design more pages -2. Start Scenario 02 -3. Create project outline for faster future analysis -4. Define technical requirements - Idunn WDS PM Agent specializes in this - -Which would you like to focus on? -``` - ---- - -## After User Responds - -**If task in YOUR domain**: Continue in same conversation -**If task in ANOTHER domain**: Use `../05-agent-handoff-guide.md` -**If "create outline"**: Hand over to Saga WDS Analyst Agent - ---- - -**Total time: 20-30 seconds** -**Suggest**: Creating outline to make this <5s next time diff --git a/src/workflows/_agent-dialogs/project-analysis/analysis-types/new-project-response.md b/src/workflows/_agent-dialogs/project-analysis/analysis-types/new-project-response.md deleted file mode 100644 index f3be072e2..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/analysis-types/new-project-response.md +++ /dev/null @@ -1,235 +0,0 @@ -# New Project Analysis - -**You were routed here because**: No docs folder exists at all -**Analysis type**: Complete project scan - ---- - -## What to Do - -No docs/ folder means either brand new project or non-WDS project. Perform complete analysis of what exists, then **route to Phase 0 for proper project setup**. - ---- - -## 1. Scan Attached Repos - -**Check ALL repos attached to IDE** (exclude WDS, BMAD, WPS2C): - -For each project repo: - -- **Project name**: Extract from package.json, folder name, or README -- **Tech stack**: Check package.json dependencies, frameworks -- **Folder structure**: Check for app/, src/, components/, etc. -- **Implementation status**: Any code implemented? -- **Other docs**: Non-WDS documentation? (README, Wiki, etc.) - ---- - -## 2. Determine Project Type - -**Scenario A**: Completely empty repo (GREENFIELD) - -- Just .git/ and maybe README -- Brand new project -- No existing code - -**Scenario B**: Code exists, no WDS docs (BROWNFIELD) - -- Has app/, src/, components/ -- Active development without WDS methodology - -**Scenario C**: Non-WDS documentation exists - -- Has docs/ but different structure -- Using different methodology - ---- - -## 3. Present Analysis & Route to Phase 0 - -**Format**: - -``` -[Your Agent Icon] [Your Agent Name] - -Complete Project Analysis: - -📁 Project: [Name] -🔧 Tech Stack: [List or "Not yet defined"] -📂 Structure: [Describe what exists] - -WDS Documentation Status: -└─ No docs/ folder found -└─ No .wds-project-outline.yaml found - ---- - -[SCENARIO A - Empty Project / Greenfield]: - -Project Status: Brand new repository -├─ Configuration: [package.json, tsconfig, etc. exist?] -├─ README: [Exists? Contains what?] -└─ Status: Ready for WDS setup - -🚀 **This is a GREENFIELD project!** - -Before we dive into design work, let's set up your project properly. -This takes 3-5 minutes and ensures you follow the right workflow. - -→ **Starting Phase 0: Project Setup** - ---- - -[SCENARIO B - Code Without Docs / Brownfield]: - -Project Status: BROWNFIELD - Existing product, no WDS documentation -├─ Implementation: [X] files in [app/src/] directory -├─ Tech Stack: [List detected technologies] -└─ Status: Active codebase detected - -Implementation found: -├─ [Feature/file 1] -├─ [Feature/file 2] -└─ [Feature/file 3] - -⚠️ **This is a BROWNFIELD project!** - -You have existing code. Phase 0 will confirm the right approach -(Phase 8 for improvements, not Phase 1-7 for new builds). - -→ **Starting Phase 0: Project Setup** - ---- - -[SCENARIO C - Different Methodology]: - -Project Status: Uses non-WDS documentation structure -├─ Documentation: [Describe what exists] -├─ Methodology: [Try to identify: Agile, Scrum, custom] -└─ Status: Migration or custom setup needed - -Existing Documentation: -├─ [File/folder 1] -├─ [File/folder 2] -└─ [File/folder 3] - -💡 You have existing methodology. Phase 0 will help you decide: -- Migrate to WDS v6 -- Continue current approach (I'll adapt) -- Set up custom WDS hybrid - -→ **Starting Phase 0: Project Setup** -``` - ---- - -## 4. Execute Phase 0 - -**CRITICAL**: After presenting the analysis, immediately load and execute Phase 0. - -**Load**: `{project-root}/_bmad/wds/workflows/0-project-setup/steps/step-01-welcome.md` - -**Why Phase 0 first**: -- Confirms greenfield vs brownfield (user validates your detection) -- Configures project complexity, tech stack, brief level -- Generates `.wds-project-outline.yaml` (enables fast path next time) -- Routes to correct phase (1-7 for greenfield, 8 for brownfield) - -**DO NOT** skip Phase 0 and jump to Phase 1 or Phase 8 directly. -Phase 0 takes 3-5 minutes and prevents hours of wrong-path work. - ---- - -## 5. Phase 0 Flow Summary - -``` -Phase 0: Project Setup - │ - ├─→ Step 0.1: Welcome & Orientation - │ ├─→ Introduce WDS briefly - │ └─→ Confirm: "Greenfield or Brownfield?" - │ ├─→ [A] Greenfield (your Scenario A detection) - │ ├─→ [B] Brownfield (your Scenario B detection) - │ └─→ [C] Not sure (let user override) - │ - └─→ Step 0.2: Configuration & Structure - ├─→ Project name - ├─→ Product complexity (landing/website/app) - ├─→ Tech stack (optional) - ├─→ Component library (optional) - ├─→ Brief level (complete/simplified) - ├─→ Strategic analysis (full/simplified/skip) - ├─→ Create folder structure - └─→ Generate .wds-project-outline.yaml - │ - ├─→ Greenfield → Phase 1: Project Brief - └─→ Brownfield → Phase 8: Product Evolution -``` - ---- - -## 6. Example: Saga Detecting New Project - -``` -📚 Saga - WDS Analyst - -Complete Project Analysis: - -📁 Project: kalla-fordonservice (from folder name) -🔧 Tech Stack: Not yet defined -📂 Structure: Empty repository - -WDS Documentation Status: -└─ No docs/ folder found -└─ No .wds-project-outline.yaml found - -Project Status: Brand new repository -├─ Configuration: None -├─ README: None -└─ Status: Ready for WDS setup - -🚀 **This is a GREENFIELD project!** - -Before we dive into design work, let's set up your project properly. -This takes 3-5 minutes and ensures you follow the right workflow. - ---- - -**Phase 0: Project Setup** - -Welcome to Whiteport Design Studio (WDS)! - -WDS is a design methodology that helps you create great digital products -through structured workflows. - -**What type of project is this?** - -[A] NEW Product (Greenfield) - You're building something from scratch. - → Leads to Phase 1: Project Brief - -[B] EXISTING Product (Brownfield) - You're improving something that exists. - → Leads to Phase 8: Product Evolution - -[C] NOT SURE - → We'll analyze together - -Your choice (A, B, or C): -``` - ---- - -## After Phase 0 Completes - -Once `.wds-project-outline.yaml` is generated: -- Future agent activations use **fast path** (<5 seconds) -- Project configuration is preserved -- Correct workflow is pre-determined - -**Activation complete** - User is now in Phase 1 or Phase 8. - ---- - -**Total time: 3-5 minutes** (Phase 0 setup) -**Future activations: <5 seconds** (outline exists) diff --git a/src/workflows/_agent-dialogs/project-analysis/analysis-types/outline-based-analysis.md b/src/workflows/_agent-dialogs/project-analysis/analysis-types/outline-based-analysis.md deleted file mode 100644 index fbffe036d..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/analysis-types/outline-based-analysis.md +++ /dev/null @@ -1,238 +0,0 @@ -# Outline-Based Analysis - -**You were routed here because**: Project outline exists -**This is**: FAST PATH (<5 seconds) - ---- - -## What to Do - -Read `.wds-project-outline.yaml` and present status based on its contents. - ---- - -## 1. Read the Outline - -Location: `docs/.wds-project-outline.yaml` OR `.wds-project-outline.yaml` - -**Extract**: - -```yaml -methodology: - type: "wds-v6" | "wps2c-v4" | "custom" - -phases: - phase_1_project_brief: - active: true/false - status: "not_started" | "in_progress" | "complete" - intent: "[User's goals]" - - phase_4_ux_design: - active: true - status: "in_progress" - scenarios: - - id: "01-scenario" - status: "complete" - pages_specified: 9 - pages_implemented: 5 -``` - ---- - -## 2. Check for Agent Dialog Files (Context Loading) - -**Look for conversation history:** - -1. **Find dialog folder:** - - From outline, get `root_folder` (e.g., "docs", "design-process") - - Check: `{{root_folder}}/progress/dialog/progress-tracker.md` - -2. **If dialog files exist:** - - **Read `dialog/progress-tracker.md`**: Shows which PB steps are complete, current status - - **Read `dialog/00-context.md`**: Working relationship context (stakes, involvement level, recommendation style) - - **Read `dialog/decisions.md`**: Key decisions made during discovery - - **Read relevant step dialogs** (02-vision.md, 07-positioning.md, etc.) if needed for deeper context - -3. **What you learn from dialogs:** - - **Progress:** Which steps completed, which in progress - - **Context:** User's role, stakes, how directive to be - - **Decisions:** Why choices were made, what was explored - - **Tone:** How user prefers to work (collaborative, autonomous, etc.) - - **Conversation history:** Actual exchanges, what user said vs what agent synthesized - -4. **If no dialog files:** - - Fresh start, no prior conversation context - - You'll learn about the project from outline and artifacts only - -**Why this matters:** Dialog files let you continue seamlessly rather than asking questions that were already answered. If user discussed positioning rationale in detail 3 weeks ago, you don't re-ask - you already know. - -**Time**: Add 3-5 seconds if dialogs exist (read 3-4 files) - ---- - -## 3. Fast Validation (Tier 1) - -**Purpose**: Quick reality check to catch obvious outline drift - -**Why keep it silent**: Users care about their project progress, not technical file validation. Only surface validation if there's a problem worth discussing. - -**What to check** (internally): - -1. **Phase folders exist** - Does the outlined structure match reality? -2. **Artifacts roughly match** - Are the claimed files actually there? -3. **Major discrepancies** - Anything significantly wrong? - -**When to mention validation**: - -- ✅ Major issue found: "I noticed the outline mentions X, but I can't find it. Shall we update the outline or recreate the missing work?" -- ✅ Everything matches: Don't mention validation at all, just present status - -**Time**: Add 2-3 seconds (total: 10-13 seconds with dialogs) - ---- - -## 4. Present Status - -**Purpose**: Show the project work - all active phases, what's been done, what needs doing. - -**Show ALL active phases** from the outline (not filtered by agent): - -**Suggested presentation format**: - -``` -Current Project Status: - -[STATUS] Phase [N]: [Name] ([Status]) - ├─ Intent: "[User's exact words from outline]" - ├─ [What's been created - describe the work] - └─ [What's the progress] - -[For skipped phases:] -⏭️ Phase [N]: [Name] (Skipped) - └─ Reason: [skip_reason from outline] -``` - -**Status Icons** (suggested): - -- ✅ Complete -- 🔄 In Progress -- 📋 Ready to start -- ⏭️ Skipped - -**Talk about the work**: Focus on what's been designed/created, creative progress, user experiences - not files or folders. - ---- - -## 5. Show Work Details - -**If Phase 4 (UX Design) has scenarios**, show scenario progress: - -``` -Scenario Progress: -├─ Scenario 01: [Name] ([Status]) -│ └─ [Brief description of what's been designed] -├─ Scenario 02: [Name] ([Status]) -│ └─ [Brief description] -└─ Scenario 03: [Name] ([Status]) - └─ [Brief description] -``` - -**For other phases**, show relevant work details from the outline. - ---- - -## 6. Ask What User Wants to Work On - -**Present all possible work** (not filtered by agent domain): - -``` -💡 What would you like to work on? - -[List all active work across all phases:] -1. [Task from any phase] -2. [Another task from any phase] -3. [Task from different phase] -4. [Alternative task] - -Tell me what you would like to work on! -``` - -**After user selects**, route to appropriate work-type file based on selection. - ---- - -## 7. Route Based on User Selection - -**Determine work type** from user's selection: - -**Strategy & Research work** → `../work-types/strategy-work.md` -**Design & UX work** → `../work-types/design-work.md` -**Technical & Platform work** → `../work-types/technical-work.md` -**Testing & Validation work** → `../work-types/testing-work.md` - -The work-type file will recommend the appropriate agent if needed. - ---- - -## Example Output (Suggested - Agent Agnostic) - -**This is a suggested way to present ALL project work, not filtered by agent**: - -``` -Current Project Status: - -✅ Phase 1: Product Brief (Complete) - └─ Vision and strategy established - -✅ Phase 2: Trigger Map (Complete) - └─ Users and journeys mapped - -✅ Phase 3: Platform Requirements (Complete) - └─ Tech stack and architecture defined - -🔄 Phase 4: UX Design (In Progress) - ├─ Intent: "Create 2-3 landing pages for developer handoff" - ├─ Scenario 01 (Customer Onboarding): Complete - │ └─ Welcoming flow for first-time users designed - ├─ Scenario 02 (Family Invitation): Ready to start - │ └─ Invitation experience needs design - └─ Scenario 03 (Calendar Booking): Specified with prototype - └─ Swedish week-based calendar ready for implementation - -⏭️ Phase 5: Design System (Skipped) - └─ Reason: Using shadcn/ui component library - -📋 Phase 7: Testing (Ready to start) - └─ Validation of Swedish week calendar and mobile UX - -💡 What would you like to work on? - -1. Design the family invitation experience (Scenario 02) -2. Refine the onboarding flow (Scenario 01) -3. Build interactive prototype for calendar -4. Validate implementation against design specs -5. Test Swedish week calendar logic -6. Review Product Brief or Trigger Map - -Tell me what you would like to work on! -``` - -**Note**: This presents ALL work, letting the user choose. The work-type routing will then determine which agent is best suited. - ---- - -## After User Selects - -**Route to work-type file** based on what they chose: - -- Strategy/research work → `../work-types/strategy-work.md` -- Design/UX work → `../work-types/design-work.md` -- Technical/platform work → `../work-types/technical-work.md` -- Testing/validation work → `../work-types/testing-work.md` - -**Before starting work**, perform Tier 2 validation: -→ See: `../validation/deep-validation-before-work.md` - ---- - -**Total time: 7-8 seconds** (with Tier 1 validation) diff --git a/src/workflows/_agent-dialogs/project-analysis/analysis-types/unknown-structure-response.md b/src/workflows/_agent-dialogs/project-analysis/analysis-types/unknown-structure-response.md deleted file mode 100644 index 4d03c192a..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/analysis-types/unknown-structure-response.md +++ /dev/null @@ -1,216 +0,0 @@ -# Unknown Structure Analysis - -**You were routed here because**: Docs folder exists but doesn't match WDS v6 or WPS2C v4 patterns -**Analysis type**: Complete project scan with structure analysis - ---- - -## What to Do - -Analyze the custom documentation structure and provide complete project assessment. - ---- - -## 1. Scan Attached Repos - -**Check ALL repos attached to IDE** (exclude WDS, BMAD, WPS2C): - -For each project repo: - -- **Project name**: Extract from package.json, folder name, or README -- **Tech stack**: Check package.json dependencies, frameworks -- **Documentation structure**: Analyze docs/ folder pattern -- **Implementation status**: Check code directories - ---- - -## 2. Analyze Custom Docs Structure - -**Examine docs/ folder**: - -- **Pattern**: Numbered? Lettered? Date-based? Topic-based? -- **Content**: What types of files? (specs, designs, planning) -- **Completeness**: How much documentation exists? -- **Methodology hints**: Can you identify what system they're using? - -**Common patterns**: - -- Agile/Scrum: sprints/, backlog/, retrospectives/ -- Feature-based: features/, requirements/, designs/ -- Date-based: 2024-01-project-plan/ -- Custom: Unique naming convention - ---- - -## 3. Map to WDS Phases (If Possible) - -**Try to map existing docs to WDS phases**: - -| Custom Folder | Possible WDS Phase | -| -------------- | -------------------------------------- | -| requirements/ | Phase 1: Project Brief or Phase 3: PRD | -| user-research/ | Phase 2: Trigger Mapping | -| wireframes/ | Phase 4: UX Design | -| design-system/ | Phase 5: Design System | -| handoff/ | Phase 6: Design Deliveries | - ---- - -## 4. Assess Your Domain - -**Filter by YOUR agent's domain**: - -- **Saga**: Look for business strategy, user research, requirements -- **Freya**: Look for design files, prototypes, UI specs, wireframes -- **Idunn**: Look for technical specs, architecture, API docs - ---- - -## 5. Present Complete Status Report - -**Format**: - -``` -🎨 [Your Agent Name] - -Complete Project Analysis: - -📁 Project: [Name] -🔧 Tech Stack: [List] -📂 Structure: Custom documentation methodology - -Documentation Structure Detected: -├─ docs/ -│ ├─ [folder 1]/ - [X] files -│ ├─ [folder 2]/ - [Y] files -│ └─ [folder 3]/ - [Z] files -└─ Pattern: [Describe: topic-based, feature-based, etc.] - -Mapping to WDS Phases: -├─ Phase 1 (Project Brief): [Folder name or "Not found"] -├─ Phase 2 (Trigger Map): [Folder name or "Not found"] -├─ Phase 4 (UX Design): [Folder name or "Not found"] -└─ [Other relevant phases] - -Content Analysis (Your Domain): -[Focus on content relevant to YOUR agent] -├─ [What exists in your domain] -├─ [Quality/completeness assessment] -└─ [What's missing] - -Implementation Status: -├─ Code: [X] files in [directory] -├─ Features: [List implemented features] -└─ Alignment: [Does code match docs?] - -💡 Observation: -This project uses a [custom/agile/feature-based] methodology instead of -standard WDS structure. [Your assessment of effectiveness] - -Recommended Options: - -1. **Continue with current structure** - - I'll adapt to your methodology - - You keep your current organization - - Tell me more about your approach - -2. **Migrate to WDS v6 structure** - - Modern numbered phases (1-8) - - Better agent integration - - Systematic workflow - - Saga WDS Analyst Agent can help migrate - -3. **Hybrid approach** - - Keep your structure - - Add WDS project outline for agent tracking - - Best of both worlds - -Which approach would you prefer? - -[If they choose "continue", ask]: -Please describe your documentation structure so I can adapt: -- What do your folders represent? -- What's your workflow? -- What are you trying to achieve? -``` - ---- - -## 6. Example Output (Freya analyzing Agile project) - -``` -🎨 Freya WDS Designer Agent - -Complete Project Analysis: - -📁 Project: E-commerce Platform -🔧 Tech Stack: Vue 3, Nuxt, TypeScript, Vuetify -📂 Structure: Agile sprint-based methodology - -Documentation Structure Detected: -├─ docs/ -│ ├─ sprint-01/ - 8 user stories -│ ├─ sprint-02/ - 12 user stories -│ ├─ backlog/ - 24 items -│ ├─ design-assets/ - 15 Figma links -│ └─ api-specs/ - 6 OpenAPI files -└─ Pattern: Sprint-based Agile workflow - -Mapping to WDS Phases: -├─ Phase 1 (Project Brief): Found in /backlog/project-vision.md -├─ Phase 2 (Trigger Map): Not found (user personas scattered in stories) -├─ Phase 4 (UX Design): Found in /design-assets/ and story attachments -├─ Phase 5 (Design System): Found in /design-assets/component-library.fig -└─ Phase 3 (PRD): Found in /api-specs/ - -Content Analysis (Design Domain): -├─ Wireframes: 12 Figma files linked in design-assets/ -├─ User flows: Embedded in individual user stories -├─ Design system: Figma component library exists -└─ Consistency: Good, but scattered across sprints - -Implementation Status: -├─ Code: 89 Vue component files -├─ Features: E-commerce core (cart, checkout, product catalog) -└─ Alignment: Design files match sprint implementation well - -💡 Observation: -You're running a healthy Agile process with good design documentation, -but design specs are scattered across multiple sprints, making it hard -to get an overview. - -Recommended Options: - -1. **Continue with Agile structure** - - I'll work within your sprint model - - Help create design specs per user story - - Maintain your current process - -2. **Migrate to WDS v6 structure** - - Consolidate design docs into Phase 4/5 - - Keep sprint planning separate - - Better design overview - - **Saga WDS Analyst Agent** can help migrate - -3. **Hybrid approach** (Recommended) - - Keep sprint planning - - Add docs/4-ux-design/ for consolidated specs - - Add project outline for agent tracking - - Best of both: Agile + systematic design docs - -Which approach would you prefer? -``` - ---- - -## After User Responds - -**If "continue with current"**: Ask for explanation of their structure -**If "migrate to WDS"**: Hand over to Saga WDS Analyst Agent -**If "hybrid"**: Offer to help set up hybrid structure -**If task in YOUR domain**: Continue helping -**If task in ANOTHER domain**: Use `../05-agent-handoff-guide.md` - ---- - -**Total time: 20-35 seconds** (depends on docs complexity) diff --git a/src/workflows/_agent-dialogs/project-analysis/validation/deep-validation-before-work.md b/src/workflows/_agent-dialogs/project-analysis/validation/deep-validation-before-work.md deleted file mode 100644 index 5b19cbd57..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/validation/deep-validation-before-work.md +++ /dev/null @@ -1,235 +0,0 @@ -# Deep Validation Before Work (Tier 2) - -**Purpose**: Thoroughly validate selected section before starting work -**When**: User has selected a task, before agent begins working -**Time**: 5-10 seconds -**Scope**: ONLY the selected phase/scenario - ---- - -## Why Deep Validation? - -**Problem**: User selects "Continue Scenario 03" but: - -- Outline says 8 pages, reality has 6 -- 2 pages deleted since outline update -- Files modified recently, outline outdated -- Dependencies changed - -**Solution**: Deep check ensures agent has accurate context before work starts. - ---- - -## What to Check - -### 1. File Existence & Completeness - -**Check ALL files** claimed by outline for this section: - -``` -Outline claims for Scenario 03: - - 00-Scenario-Overview.md - - 3.1-Landing-Page.md - - 3.2-Feature-List.md - - 3.3-Pricing.md - - 3.4-FAQ.md - - Prototypes/sketch-landing.html - -Reality check: -✅ 00-Scenario-Overview.md exists (2.3 KB) -✅ 3.1-Landing-Page.md exists (15 KB) -⚠️ 3.2-Feature-List.md MISSING -✅ 3.3-Pricing.md exists (8 KB) -❌ 3.4-FAQ.md exists but EMPTY (0 KB) -✅ Prototypes/ folder exists -❌ sketch-landing.html MISSING from Prototypes/ -``` - -### 2. File Count & Unexpected Files - -**Check for NEW files** not in outline: - -``` -Scanning docs/4-ux-design/03-pricing-page/... - -Found 7 files, outline claims 6: -✅ Expected: 6 files -⚠️ Found: 7 files -📄 NEW: 3.5-Contact-Form.md (not in outline) -``` - -### 3. Modification Dates - -**Compare outline update vs file changes**: - -``` -Outline last updated: 2024-11-15 -Files modified: - - 3.1-Landing-Page.md: 2024-12-01 (AFTER outline) - - 3.3-Pricing.md: 2024-12-08 (AFTER outline) - -⚠️ Files changed since outline updated -``` - -### 4. Dependencies - -**For scenarios, check**: - -- Related scenarios referenced -- Shared components mentioned -- Design system dependencies - -``` -Scenario 03 references: - - Component: PricingCard (from Design System) - - Dependency: Scenario 01 (User auth flow) - -Checking dependencies: -✅ docs/7-design-system/components/PricingCard.md exists -⚠️ Scenario 01 shows "in_progress" but outline claims "complete" -``` - ---- - -## Report Format - -``` -🎨 Freya WDS Designer Agent - -You selected: "Continue Scenario 03" - -Deep validation of Scenario 03... ⚠️ Issues found - -Validation Results: - -📁 Folder: docs/4-ux-design/03-pricing-page/ -✅ Folder exists and accessible - -📄 Files (Outline claims 6, found 7): -✅ 00-Scenario-Overview.md (complete, 2.3 KB) -✅ 3.1-Landing-Page.md (complete, 15 KB) -❌ 3.2-Feature-List.md MISSING -✅ 3.3-Pricing.md (complete, 8 KB, modified after outline) -⚠️ 3.4-FAQ.md exists but EMPTY (0 KB) -📄 3.5-Contact-Form.md NEW (not in outline) - -🔗 Dependencies: -✅ PricingCard component (Design System) -⚠️ Scenario 01 dependency shows mismatch - -🕒 Timeline: -Outline updated: 2024-11-15 -Files modified: 2024-12-01, 2024-12-08 (2 files changed after) - -💡 Before we continue, would you like to: - -1. **Update outline first** (recommended) - - Add 3.5-Contact-Form.md to outline - - Mark 3.2-Feature-List.md as missing/deleted - - Update page count (6 → 5 existing + 1 new) - - Refresh last_updated date - -2. **Fix missing/empty files** - - Recreate 3.2-Feature-List.md - - Complete 3.4-FAQ.md content - - Then continue work - -3. **Proceed anyway** - - I'll work with current state - - Update outline after work complete - -Which approach would you prefer? -``` - ---- - -## Decision Tree - -``` -After deep validation: - -All valid? ✅ - ↓ -Start work immediately - -Minor issues? ⚠️ - ↓ -Ask user: - - Update outline? - - Proceed anyway? - ↓ -User chooses → Continue - -Major issues? ❌ - ↓ -Strongly recommend: - - Fix missing files - - Update outline - - Review dependencies - ↓ -Don't start work until resolved -``` - ---- - -## After Validation - -**If user chooses "Update outline first"**: - -1. Agent updates `.wds-project-outline.yaml` -2. Reflects current reality -3. Then starts work - -**If user chooses "Fix missing files"**: - -1. Agent helps recreate/complete files -2. Updates outline -3. Then continues with original task - -**If user chooses "Proceed anyway"**: - -1. Agent works with current state -2. Updates outline AFTER work complete -3. Documents what was found vs expected - ---- - -## Example: Freya Deep Validation - -``` -User: "Continue Scenario 03" - -Freya: "Let me validate Scenario 03 before we start..." - -[5 seconds of checking] - -Freya: "I found the scenario folder with 5 pages: -- Landing page (complete) -- Pricing tiers (complete) -- FAQ (in progress) -- Contact form (not in outline - did you add this recently?) -- Missing: Feature comparison page - -The outline expected 6 pages but I found 5 (one missing, one new). - -Before designing more pages, shall I: -1. Update the outline to reflect these 5 pages? -2. Recreate the missing feature comparison page? -3. Continue with existing pages as-is? - -What would work best for you?" -``` - ---- - -## Benefits - -✅ **Prevents wasted work** - Agent knows true state -✅ **Catches drift early** - Before it compounds -✅ **Keeps outline accurate** - Forces sync with reality -✅ **User stays informed** - Knows what's actually there -✅ **Reduces confusion** - No surprises mid-work - ---- - -**This is the second safety net after Tier 1 fast check!** 🛡️ diff --git a/src/workflows/_agent-dialogs/project-analysis/work-types/strategy-work.md b/src/workflows/_agent-dialogs/project-analysis/work-types/strategy-work.md deleted file mode 100644 index f42725ed9..000000000 --- a/src/workflows/_agent-dialogs/project-analysis/work-types/strategy-work.md +++ /dev/null @@ -1,88 +0,0 @@ -# Strategy & Research Work - -**You were routed here because**: User selected strategy/research work (Product Brief or Trigger Map) - ---- - -## What This Work Involves - -**Strategy and research work** includes: - -- Product vision and positioning -- Market and competitive analysis -- User research and personas -- Business goals and success metrics -- Trigger mapping and user journeys - ---- - -## Recommended Agent - -**Saga WDS Analyst Agent** specializes in this type of work (Phases 1-2). - -**If you're NOT Saga**, here's how to hand over: - ---- - -## Seamless Handoff to Saga - -"I can see you want to work on **[Product Brief/Trigger Map]** - strategic foundation work. - -**Saga WDS Analyst Agent** specializes in strategy and research. She's brilliant at: - -- Defining product vision and positioning -- Market intelligence and competitive analysis -- User research and persona development -- Business strategy and success metrics - -Let me hand over to Saga who can help you best with this..." - -**Then activate Saga** but skip project analysis: - -→ 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 - -**Task context to pass**: "User wants to work on: [Product Brief/Trigger Map]" - ---- - -## If You ARE Saga - -**Context aware handoff**: The user already selected a specific task, so you don't need to re-analyze the project. - -Continue directly with the work: - -"Great! Let's work on the **[specific task user selected]** together. - -[Ask clarifying questions specific to their selection] -[Engage directly with the work] -[Offer specific next steps]" - -**For Product Brief review**: -"Let's review the Product Brief together. - -What aspect would you like to focus on? - -- Vision and positioning - Is it still aligned with where you're heading? -- Competitive landscape - Has anything changed in the market? -- Success metrics - Are we measuring the right things? -- Target users - Do we need to refine our understanding? - -Tell me what you'd like to explore!" - -**For Trigger Map work**: -"Let's dive into the Trigger Map! - -What would you like to work on? - -- Refining user personas - Add depth or new segments? -- Updating journey maps - Has user behavior changed? -- Feature prioritization - What should we focus on? - -Tell me what you'd like to explore!" - ---- - -**The goal**: Get the right agent working on the right work, seamlessly. diff --git a/src/workflows/_agent-dialogs/step-completion-protocol.md b/src/workflows/_agent-dialogs/step-completion-protocol.md deleted file mode 100644 index ce5042c1a..000000000 --- a/src/workflows/_agent-dialogs/step-completion-protocol.md +++ /dev/null @@ -1,175 +0,0 @@ -# Step Completion Protocol - -**Purpose:** Standard protocol for completing workflow steps and communicating progress to users. - ---- - -## When to Use - -Apply this protocol whenever you: -- Complete a Product Brief step -- Finish a major task or milestone -- Update agent dialog files -- Make significant changes to project files - ---- - -## Protocol Steps - -### 1. Complete the Work - -- Finish all tasks required for the step -- Ensure all artifacts are generated and validated -- Verify step requirements are met - -### 2. Update Agent Dialog Files - -**If project has agent dialog structure:** - -1. Update the relevant dialog file (e.g., `dialog/02-vision.md`, `dialog/decisions.md`) -2. Document reflection checkpoint (synthesis + confirmation/correction) -3. Record final outputs and key insights -4. Mark step complete in `dialog/README.md` progress tracker - -**If this is a meta-level agent dialog** (like ongoing session work): - -1. Move completed task from CURRENT WORK to top of COMPLETED WORK -2. Update CURRENT PLAN checkboxes (⏳ → ✅) -3. Move next task from UPCOMING WORK to CURRENT WORK -4. Update CURRENT WORK section with new task details - -### 3. Show Git Diff (MANDATORY) - -**ALWAYS show git diff of changes made.** - -**For single file changes:** -```bash -git diff path/to/file.md -``` - -**For multiple files:** -```bash -git diff --stat path/to/directory/ -``` - -**For all changes in session:** -```bash -git diff --stat -``` - -**Why this matters:** -- Transparency: User sees exactly what changed -- Validation: User can review changes before committing -- Context: Clear record of progress made -- Accountability: Agent and user stay aligned - -**When NOT to show diff:** -- Files too large (>50KB) - show `--stat` only -- Binary files (images, PDFs) - mention they were created/modified -- Sensitive information - describe changes verbally instead - -### 4. Present Summary - -**Tell the user what was accomplished:** - -```markdown -✅ **[Task/Step Name] Complete** - -[Brief summary of what was done - 1-3 sentences] - -**Changes made:** -- [Key change 1] -- [Key change 2] -- [Key change 3] - -**Files modified:** [count] files, [+insertions]/-[deletions] lines - -[If applicable: What's next or what to review] -``` - -### 5. Update State - -**Update project state files if needed:** -- Update `.wds-project-outline.yaml` if phase/step status changed -- Update frontmatter in step files if using state tracking -- Update any progress trackers - ---- - -## Example Execution - -**Scenario:** Just completed Step 3 (Positioning) in Product Brief - -**Agent actions:** - -1. ✅ **Completed work:** Generated positioning statement with components -2. ✅ **Updated dialog:** Added to `dialog/07-positioning.md` and `dialog/README.md` -3. ✅ **Show diff:** - -```bash -git diff --stat src/workflows/.../dialog/ -``` - -Output: -``` -dialog/07-positioning.md | 45 ++++++++++++++++++++ -dialog/README.md | 2 +- -2 files changed, 46 insertions(+), 1 deletion(-) -``` - -4. ✅ **Present to user:** - -```markdown -✅ **Step 3: Positioning Complete** - -Created positioning statement synthesized from conversation about target customers, alternatives, and differentiation. - -**Key outputs:** -- Positioning statement for vehicle owners in northern Öland -- Component breakdown (target, need, category, benefit, alternatives, differentiator) -- Strategic rationale documenting why this positioning makes sense - -**Files modified:** 2 files, 46 insertions(+), 1 deletion(-) - -**Next:** Step 4 - Business Model (B2B/B2C/Both) -``` - -5. ✅ **Updated state:** Marked Step 3 complete in progress tracking - ---- - -## Common Mistakes to Avoid - -❌ **DON'T:** -- Skip showing git diff (transparency matters!) -- Batch multiple steps without showing individual diffs -- Present diff without explaining what changed -- Show diff of unrelated files from previous work -- Forget to update agent dialog files - -✅ **DO:** -- Show diff immediately after making changes -- Explain what the diff represents -- Update dialog files before showing diff -- Keep diffs focused on current work -- Use `--stat` for high-level overview when many files changed - ---- - -## Integration with Workflows - -**This protocol is referenced by:** -- All Product Brief step files (steps-c/*.md) -- Agent dialog templates (workflows/1-project-brief/templates/project-brief-dialog/USAGE.md) -- Workflow orchestration files (workflow.md) - -**Agents should:** -- Internalize this protocol -- Apply it consistently -- Adapt language to user's working relationship context -- Use git diff tools fluently - ---- - -**Status:** Active protocol for all WDS workflow steps -**Last Updated:** 2026-02-12 diff --git a/src/workflows/_agent-dialogs/steps/step-01-initialize-dialog.md b/src/workflows/_agent-dialogs/steps/step-01-initialize-dialog.md deleted file mode 100644 index 66849676f..000000000 --- a/src/workflows/_agent-dialogs/steps/step-01-initialize-dialog.md +++ /dev/null @@ -1,244 +0,0 @@ -# Step 1: Initialize Dialog - -## CONTEXT - -This is the first step of the Agent Dialog Workflow. Before creating a new dialog, we first check for any existing pending dialogs. - ---- - -## CHECK FOR EXISTING DIALOGS - -⚠️ **IMPORTANT: Always check for pending dialogs before creating a new one.** - - -**Scan for existing dialogs:** - -1. Check if `{output_folder}/_progress/agent-dialogs/` exists -2. If it exists, scan all subdirectories for dialog files (*-dialog.md) -3. Read the Meta section of each dialog file -4. Identify dialogs where: - - Status = "Not Started" OR "In Progress" - - Agent matches the current agent (if known) - - - -**If pending dialogs found:** - -Present them to the user: - -``` -📋 **Found {N} pending dialog(s):** - -| # | Date | Agent | Feature | Status | -|---|------|-------|---------|--------| -| 1 | {date} | {agent} | {feature} | {status} | - -**Options:** -[A] Continue existing dialog #{N} -[B] Create a new dialog (existing ones remain pending) - -Choice: -``` - -If user chooses an existing dialog: -- Load that dialog file -- Check the Steps Overview table for next incomplete step -- Continue from there - -If user chooses to create new: -- Continue to SELECT DIALOG TYPE below - - - -**If no pending dialogs found OR {output_folder}/_progress/agent-dialogs/ doesn't exist:** - -Continue to SELECT DIALOG TYPE below. - - ---- - -## SELECT DIALOG TYPE - -**What type of work is this?** - -| Type | Icon | Use When | -|------|------|----------| -| **[A] Prototype Implementation** | 🔧 | Building UI from specifications | -| **[B] Bug Fix** | 🐛 | Fixing issues and defects | -| **[C] Design Exploration** | 🎨 | Exploring visual/UX directions | -| **[D] Capture** | 💾 | Saving ideas for later | -| **[E] Generic** | 📋 | Anything else | - -Type: - - -Store dialog_type and select appropriate template: -- A → templates/dialog-types/prototype-implementation.template.md -- B → templates/dialog-types/bug-fix.template.md -- C → templates/dialog-types/design-exploration.template.md -- D → templates/dialog-capture.template.md -- E → templates/dialog.template.md - - ---- - -## GATHER INFORMATION - -**What feature or implementation are we working on?** - -Examples: -- "Booking details drawer" -- "User authentication refactor" -- "Calendar scroll fix" - -Feature name: - -Store feature_name and generate feature_slug (lowercase, hyphenated) - -**Which specification(s) are relevant?** - -Provide the path to the specification file(s) this implementation is based on. - -Specification path: - -Store spec_path - -**What agent persona should execute this work?** - -Examples: -- "Freya (UX Designer)" — For UI implementation -- "Dev Agent" — For backend work -- "Full Stack" — For end-to-end features - -Agent: - -Store agent_name - ---- - -## CREATE FOLDER STRUCTURE - - -**Create dialog folder:** - -Path: `{output_folder}/_progress/agent-dialogs/{date}-{agent_slug}-{feature_slug}/` - -Where: -- `{date}` = Today's date in YYYY-MM-DD format -- `{agent_slug}` = Agent name, lowercase (e.g., "freya", "saga", "dev") -- `{feature_slug}` = Feature name, lowercase, hyphenated - -**Examples:** -- `2026-01-23-freya-booking-details-overlay/` -- `2026-01-23-saga-course-workflow-integration/` -- `2026-01-23-dev-calendar-scroll-fix/` - -**Create subfolders:** -- `steps/` — For step instruction files - - ---- - -## CREATE DIALOG FILE - - -**Create main dialog file:** - -File: `{output_folder}/_progress/agent-dialogs/{date}-{agent_slug}-{feature_slug}/{date}-{agent_slug}-{feature_slug}-dialog.md` - -**Use template from:** Selected dialog type template (see SELECT DIALOG TYPE step above) - -**Fill in:** -- Date: Today's date -- Agent: {agent_name} -- Feature: {feature_name} -- Specification: Link to {spec_path} -- Status: "In Progress" - - ---- - -## GATHER SETUP CONTEXT - - -**Read the specification file(s)** to understand: -- What needs to be implemented -- What already exists -- Technical requirements - - -**What's the tech stack for this project?** - -Example: "React 19, Next.js 15, TypeScript, Tailwind CSS, Supabase" - -Tech stack: - -Store tech_stack - -**What files are relevant to this implementation?** - -List the key files that will be modified or referenced. - -Relevant files: - -Store relevant_files - -**Are there any existing patterns to follow?** - -Describe component structure, styling approach, state management, etc. - -Patterns: - -Store patterns - ---- - -## UPDATE DIALOG FILE - - -**Fill in Setup Context section:** - -- Project Context (tech stack) -- Relevant Files (table) -- Existing Patterns -- Current State (what exists) - -**Fill in Purpose:** -- 1-3 sentences describing what this dialog accomplishes - - ---- - -## COMPLETION - - -✅ **Dialog initialized!** - -**Created:** -- Folder: `{output_folder}/_progress/agent-dialogs/{date}-{agent_slug}-{feature_slug}/` -- Dialog file: `{date}-{agent_slug}-{feature_slug}-dialog.md` -- Steps folder: `steps/` - -**Next:** Proceed to Step 2 to analyze scope and create step breakdown. - -[A] Continue to Step 2: Analyze Scope -[B] Review the dialog file first -[C] Add more setup context - -Choice: - - ---- - -## ROUTING - - -Based on user choice: -- [A] → Load and execute step-02-analyze-scope.md -- [B] → Show the dialog file contents -- [C] → Ask for additional context to add - - ---- - -_Agent Dialog Workflow — Step 1: Initialize Dialog_ diff --git a/src/workflows/_agent-dialogs/steps/step-02-analyze-scope.md b/src/workflows/_agent-dialogs/steps/step-02-analyze-scope.md deleted file mode 100644 index 73680edb4..000000000 --- a/src/workflows/_agent-dialogs/steps/step-02-analyze-scope.md +++ /dev/null @@ -1,195 +0,0 @@ -# Step 2: Analyze Scope - -## CONTEXT - -Dialog folder is created. Now we analyze the specification to determine exactly what needs to be implemented. - ---- - -## READ SPECIFICATION - - -**Read the specification file(s)** referenced in the dialog file. - -Extract: -- All features/sections to implement -- Object IDs and their specifications -- States and transitions -- Translations required -- Any open questions in the spec - - ---- - -## IDENTIFY SCOPE - -**What should be IN SCOPE for this implementation?** - -Based on the specification, list the features/sections to implement. - -In scope: - -Store in_scope items - -**What should be OUT OF SCOPE?** - -Explicitly list what we're NOT implementing (yet). - -Out of scope: - -Store out_of_scope items - -**Are there any dependencies?** - -What must exist before we can implement this? (Other features, data, APIs, etc.) - -Dependencies: - -Store dependencies - ---- - -## CHECK FOR ISSUES - - -**Review the specification for:** - -1. **Missing information** — Anything unclear or undefined? -2. **Open questions** — Any unresolved decisions? -3. **Inconsistencies** — Anything that doesn't match? - -Document any issues found. - - - - **Issues found in specification:** - - {{#each issue in issues}} - - {{issue}} - {{/each}} - - How should we proceed? - - [A] Continue anyway — address issues as we go - [B] Pause — clarify issues before proceeding - [C] Document issues — continue but note them - - Choice: - - ---- - -## UPDATE DIALOG FILE - - -**Update the Scope section in the dialog file:** - -### In Scope -{{#each item in in_scope}} -- {{item}} -{{/each}} - -### Out of Scope -{{#each item in out_of_scope}} -- {{item}} -{{/each}} - -### Dependencies -{{#each item in dependencies}} -- {{item}} -{{/each}} - - ---- - -## DETERMINE STEP BREAKDOWN - - -**Analyze the scope to identify discrete steps.** - -Guidelines: -- Each step should accomplish ONE clear thing -- Steps should be ~15-45 minutes of work -- Order by dependencies (what must come first) -- Group related changes together -- Consider testability (each step should be verifiable) - -**Common patterns:** - -For UI features: -1. Shell/container component -2. Static content sections -3. Dynamic data integration -4. Interactive elements -5. State transitions -6. Edge cases / error states - -For refactoring: -1. Create new structure -2. Migrate piece 1 -3. Migrate piece 2 -4. Remove old structure -5. Update imports/references - -For bug fixes: -1. Reproduce issue -2. Implement fix -3. Add tests -4. Verify fix - - -**What steps do we need?** - -Based on the scope, list the implementation steps in order. - -Example: -1. Drawer shell component -2. Header section -3. Date display section -4. Dog info section -5. Action buttons -6. State transitions - -Steps: - -Store steps list - ---- - -## COMPLETION - - -✅ **Scope analyzed!** - -**In Scope:** {{in_scope.length}} items -**Out of Scope:** {{out_of_scope.length}} items -**Dependencies:** {{dependencies.length}} items - -**Proposed Steps:** -{{#each step in steps}} -{{@index + 1}}. {{step}} -{{/each}} - -**Next:** Create step files for each implementation step. - -[A] Continue to Step 3: Create Step Files -[B] Adjust the step breakdown -[C] Review scope again - -Choice: - - ---- - -## ROUTING - - -Based on user choice: -- [A] → Load and execute step-03-create-steps.md -- [B] → Allow user to modify steps list -- [C] → Return to scope review - - ---- - -_Agent Dialog Workflow — Step 2: Analyze Scope_ diff --git a/src/workflows/_agent-dialogs/steps/step-03-create-steps.md b/src/workflows/_agent-dialogs/steps/step-03-create-steps.md deleted file mode 100644 index e92885455..000000000 --- a/src/workflows/_agent-dialogs/steps/step-03-create-steps.md +++ /dev/null @@ -1,186 +0,0 @@ -# Step 3: Create Step Files - -## CONTEXT - -Scope is analyzed and steps are identified. Now we create the step files that will guide implementation. - ---- - -## CREATE STEP FILES - - -**For each step identified in Step 2:** - -1. Create file: `steps/{##}-{step-slug}.md` -2. Use template from: `templates/step.template.md` -3. Fill in all sections - -**File naming:** -- `##` = Two-digit step number (01, 02, 03, etc.) -- `{step-slug}` = Step name, lowercase, hyphenated - -**Example:** `steps/01-drawer-shell.md` - - ---- - -## STEP FILE CONTENT - -For each step file, fill in: - -### Context Section - - -Write a brief paragraph explaining: -- What exists at this point -- What this step adds -- Why this step is needed - - -### Specification Reference - - -Extract the relevant section from the specification: -- Object IDs -- Properties and values -- Translation keys -- Behaviors - - -### Task Section - - -Write clear objectives: -- What specifically to implement -- Numbered list of 2-5 objectives -- Concrete and actionable - - -### Files to Modify - - -Create a table listing: -- Each file to create or modify -- Action (Create / Modify) -- Purpose of the change - - -### Implementation Details - - -Provide specific guidance: -- Approach to take -- Code patterns to follow -- Important considerations -- Example code if helpful - - -### Acceptance Criteria - - -Write verifiable criteria: -- Specific outcomes to check -- Each criterion is pass/fail -- Include "No TypeScript errors" -- Include "UI matches specification" - - -### Test Instructions - - -Write testing steps: -1. How to trigger the feature -2. What to check -3. Expected result -4. Edge cases to verify - - ---- - -## SELF-CONTAINED PRINCIPLE - - -**Each step file must be self-contained.** - -An agent with NO prior context should be able to: -1. Read the step file -2. Understand what to do -3. Execute the implementation -4. Verify it works - -If a step requires context from previous steps, include it explicitly. - - ---- - -## UPDATE DIALOG FILE - - -**Update the Steps Overview table:** - -| # | Step | Status | Notes | -|---|------|--------|-------| -{{#each step in steps}} -| {{@index + 1}} | [{{step.name}}](steps/{{step.file}}) | 🔲 | | -{{/each}} - - ---- - -## REVIEW STEP FILES - - -**Quality check each step file:** - -- [ ] Context is clear -- [ ] Specification reference is accurate -- [ ] Task objectives are specific -- [ ] Files to modify are listed -- [ ] Implementation details are helpful -- [ ] Acceptance criteria are verifiable -- [ ] Test instructions are complete - - ---- - -## COMPLETION - - -✅ **Step files created!** - -**Created {{steps.length}} step files:** -{{#each step in steps}} -- `steps/{{step.file}}` — {{step.name}} -{{/each}} - -**Dialog file updated** with Steps Overview table. - -**Ready for implementation!** - ---- - -**Options:** - -[A] Start implementing — Execute Step 1 -[B] Review a specific step file -[C] Modify a step file -[D] Exit — Continue later - -Choice: - - ---- - -## ROUTING - - -Based on user choice: -- [A] → Load and execute step-04-execute-steps.md (with step 1) -- [B] → Show requested step file -- [C] → Edit requested step file -- [D] → End workflow, user will continue later - - ---- - -_Agent Dialog Workflow — Step 3: Create Step Files_ diff --git a/src/workflows/_agent-dialogs/steps/step-04-execute-steps.md b/src/workflows/_agent-dialogs/steps/step-04-execute-steps.md deleted file mode 100644 index 5df5aaf7b..000000000 --- a/src/workflows/_agent-dialogs/steps/step-04-execute-steps.md +++ /dev/null @@ -1,250 +0,0 @@ -# Step 4: Execute Steps - -## CONTEXT - -Step files are created. Now we execute each step, either in this dialog or in fresh agent dialogs. - -**Note:** For implementation-specific execution details (feedback protocol, dynamic planning), see the **Agentic Development Workflow** in `workflows/4-ux-design/agentic-development/workflow.md`. - ---- - -## EXECUTION MODES - -### Mode A: Continuous Execution -Execute all steps in the current session. -- ✅ Good for: Small implementations, full context available -- ❌ Risk: Context window limits, fatigue - -### Mode B: Fresh Dialog Per Step -Start a new agent dialog for each step. -- ✅ Good for: Large implementations, complex steps -- ✅ Benefit: Fresh context, isolated focus -- ❌ Requires: Well-written self-contained step files - -**Which execution mode?** - -[A] Continuous — Execute steps in this session -[B] Fresh dialogs — I'll execute each step in a new dialog - -Mode: - ---- - -## MODE A: CONTINUOUS EXECUTION - -### Execute Current Step - - -1. **Read the step file** completely -2. **Document any decisions or issues** in the dialog before implementing -3. **Execute the implementation** following the instructions -4. **Add sub-steps** if needed for things discovered during implementation -5. **Verify against acceptance criteria** -6. **Test using the test instructions** - - -### Step Completion Checklist - -- [ ] All objectives achieved -- [ ] Acceptance criteria pass -- [ ] Tests pass -- [ ] No TypeScript errors -- [ ] Code follows existing patterns - -### Update Dialog File - - -**After completing each step:** - -1. Update step status: 🔲 → ✅ -2. Add notes if relevant -3. Add entry to Progress Log: - ``` - ### {today's date} - - Completed Step {N}: {step name} - - {any notes or discoveries} - ``` - - -### Continue or Pause - -**Step complete! What's next?** - -[A] Continue to next step -[B] Pause — save progress and continue later -[C] Review what was done - -Choice: - - - - 1. Review and update remaining steps in dialog file - 2. Load and execute next step file - - - - - - Update dialog file: - - Status: "In Progress" - - Progress Log: Note where we stopped - - Ensure all decisions documented - - Output: "Progress saved. The dialog is ready to resume." - - - ---- - -## MODE B: FRESH DIALOG INSTRUCTIONS - -### Handoff Always References Dialog - - -**Any handoff — to a new session, new agent, or human — MUST reference the dialog document.** - -The dialog document is the single source of truth for: -- What has been done -- What decisions were made -- What remains to be done -- Any issues or blockers - -Never hand off by describing the task verbally. Always point to the dialog. - - -### For Each Step - - -**Generate handoff instructions:** - -``` -## Execute Step {N}: {Step Name} - -### Dialog Document (READ FIRST) -`{output_folder}/_progress/agent-dialogs/{date}-{feature-name}/{date}-{feature-name}-dialog.md` - -Read the dialog file first to understand: -- Overall context and scope -- What steps are complete -- Current status and any blockers - -### Step File -`{output_folder}/_progress/agent-dialogs/{date}-{feature-name}/steps/{N}-{step-name}.md` - -### Instructions -1. Read the dialog file completely -2. Read the step file -3. Execute the implementation -4. Document decisions in the dialog BEFORE implementing -5. Verify against acceptance criteria -6. Update dialog file: step status → ✅, add Progress Log entry -``` - - -### Track Progress - -**Step {N} — What's the status?** - -[A] ✅ Complete — Move to next step -[B] 🔄 In Progress — Still working -[C] ⏸️ Blocked — Cannot proceed -[D] ❌ Skip — Will not implement - -Status: - -Update dialog file with reported status - ---- - -## HANDLING ISSUES - -### If Implementation Differs from Spec - - -Document in the dialog file's "Spec Changes Discovered" section: - -| Issue | Resolution | Spec Updated? | -|-------|------------|---------------| -| {issue} | {how resolved} | 🔲 | - - -### If Step is Too Complex - - -Options: -1. Break into sub-steps (create additional step files) -2. Simplify scope (update dialog file) -3. Seek clarification (document blocker) - - -### If Blocked on Dependencies - - -1. Update step status: ⏸️ Blocked -2. Document the blocker in Notes -3. Move to next step if possible -4. Return to blocked step later - - ---- - -## PROGRESS TRACKING - -### After Each Step - - -Update the Steps Overview table: - -| # | Step | Status | Notes | -|---|------|--------|-------| -| 1 | Step name | ✅ | Completed | -| 2 | Step name | ✅ | Completed with minor changes | -| 3 | Step name | 🔄 | In progress | -| 4 | Step name | 🔲 | Not started | - - -### Progress Log Entry - - -Add to Progress Log: - -```markdown -### {YYYY-MM-DD} -- Completed Step 1: {description} -- Completed Step 2: {description} -- Started Step 3 -- Discovered: {any issues or learnings} -``` - - ---- - -## ALL STEPS COMPLETE - - - - **All steps complete!** - - Proceed to Step 5 to finalize the dialog. - - [A] Continue to Step 5: Complete Dialog - [B] Review the implementation first - - Choice: - - - ---- - -## ROUTING - - -Based on completion: -- All steps done → Load step-05-complete-dialog.md -- Steps remaining → Continue execution loop -- User pauses → Save state and exit - - ---- - -_Agent Dialog Workflow — Step 4: Execute Steps_ diff --git a/src/workflows/_agent-dialogs/steps/step-05-complete-dialog.md b/src/workflows/_agent-dialogs/steps/step-05-complete-dialog.md deleted file mode 100644 index fd2dbb4d3..000000000 --- a/src/workflows/_agent-dialogs/steps/step-05-complete-dialog.md +++ /dev/null @@ -1,177 +0,0 @@ -# Step 5: Complete Dialog - -## CONTEXT - -All implementation steps are complete. Now we finalize the dialog, capture learnings, and close it out. - ---- - -## VERIFY COMPLETION - - -**Review the Steps Overview table:** - -Confirm all steps have status: -- ✅ Complete -- ❌ Skipped (with documented reason) - -No steps should be: -- 🔲 Not Started -- 🔄 In Progress -- ⏸️ Blocked - - - - **Some steps are not complete:** - - {{#each step in incomplete_steps}} - - Step {{step.number}}: {{step.name}} — {{step.status}} - {{/each}} - - How should we proceed? - - [A] Complete remaining steps first - [B] Mark as skipped and continue - [C] Leave dialog "In Progress" - - Choice: - - ---- - -## UPDATE SPEC CHANGES - - -**Review "Spec Changes Discovered" section:** - -For each discovered issue: -1. Determine if spec should be updated -2. If yes, create a note or task to update the spec -3. Mark the spec update status - - -**Were any specification changes discovered?** - -[A] Yes — Review and document updates needed -[B] No — No spec changes needed - -Choice: - - - - Update the dialog file: - - | Issue | Resolution | Spec Updated? | - |-------|------------|---------------| - {{#each change in spec_changes}} - | {{change.issue}} | {{change.resolution}} | {{change.updated}} | - {{/each}} - - If specs need updating, either: - 1. Update them now - 2. Create a task/dialog to update them later - - - ---- - -## CAPTURE LEARNINGS - -**What did we learn from this implementation?** - -Consider: -- What worked well? -- What was harder than expected? -- What patterns emerged? -- What would you do differently? - -Learnings: - - -Add to the Learnings section: - -{{#each learning in learnings}} -- {{learning}} -{{/each}} - - ---- - -## FINAL PROGRESS LOG ENTRY - - -Add final entry to Progress Log: - -```markdown -### {YYYY-MM-DD} — COMPLETED -- All steps complete -- Spec changes: {summary} -- Learnings captured -- Dialog closed -``` - - ---- - -## UPDATE FINAL STATUS - - -Update the Meta section: - -| Field | Value | -|-------|-------| -| **Status** | **Complete** | - - ---- - -## SUMMARY - - -✅ **Dialog Complete!** - -**Feature:** {feature_name} -**Date Started:** {start_date} -**Date Completed:** {today} - -**Steps Completed:** {completed_count} / {total_count} -**Spec Changes:** {spec_changes_count} -**Learnings:** {learnings_count} - ---- - -**The dialog is now closed.** - -The folder remains at: -`{output_folder}/_progress/agent-dialogs/{date}-{feature_slug}/` - -This serves as documentation of: -- What was implemented -- How it was done -- What was learned - ---- - -**What's next?** - -[A] Start a new dialog for related work -[B] Return to main menu -[C] Review the completed dialog - -Choice: - - ---- - -## ROUTING - - -Based on user choice: -- [A] → Return to step-01-initialize-dialog.md -- [B] → End workflow -- [C] → Display dialog file contents - - ---- - -_Agent Dialog Workflow — Step 5: Complete Dialog_ diff --git a/src/workflows/_agent-dialogs/templates/agent-dialog.template.md b/src/workflows/_agent-dialogs/templates/agent-dialog.template.md deleted file mode 100644 index d10b65608..000000000 --- a/src/workflows/_agent-dialogs/templates/agent-dialog.template.md +++ /dev/null @@ -1,115 +0,0 @@ -# {{workflow_name}}: {{project_name}} - -**Workflow:** {{workflow_phase}} -**Project:** {{project_name}} -**Date:** {{date}} -**Status:** in_progress -**Agent:** {{agent_name}} -**Session:** 1 - ---- - -## Context - -{{context_description}} - -**Preceded by:** {{previous_phase_or_none}} -**Objectives:** {{workflow_objectives}} - ---- - -## Plan - -**Real-time progress tracking with visual status indicators** - -1. ⏳ **{{step_1}}** — {{description}} -2. ⏸ **{{step_2}}** — {{description}} -3. ⏸ **{{step_3}}** — {{description}} -4. ⏸ **{{step_4}}** — {{description}} -5. ⏸ **Wrap Up & Retrospective** — Assess success, document learnings, prepare handoff - -**Status Indicators:** -- ⏳ **In Progress** — Currently working on this -- ✅ **Complete** — Finished successfully -- ⚠️ **Partial/Issues** — Done but with caveats or blockers -- ⏸ **Pending** — Not started yet - -**CRITICAL:** Only ONE task should be "In Progress" (⏳) at a time. Update status immediately upon completion. - ---- - -## Session Transcript - -### {{topic_1}} -**Q:** {{question}} -**A:** {{answer}} -**Documented in:** {{files_updated}} -**Timestamp:** {{time}} - -### {{topic_2}} -**Q:** {{question}} -**A:** {{answer}} -**Documented in:** {{files_updated}} -**Decision:** {{key_decision_if_applicable}} -**Timestamp:** {{time}} - ---- - -## Key Decisions - -- **{{decision_1}}:** {{what_decided}} — {{rationale}} -- **{{decision_2}}:** {{what_decided}} — {{rationale}} - ---- - -## Generated Artifacts - -- [x] [{{file_1}}](../{{relative_path}}) — {{description}} -- [ ] [{{file_2}}](../{{relative_path}}) — {{description}} - ---- - -## Blockers / Issues - -{{blockers_or_none}} - ---- - -## Wrap Up & Retrospective - -**COMPLETE BEFORE MARKING WORKFLOW AS "COMPLETE"** - -### Success Criteria Assessment -{{evaluate_against_original_objectives}} - -### What Worked Well -1. {{thing_that_worked_1}} -2. {{thing_that_worked_2}} -3. {{thing_that_worked_3}} - -### What Didn't Work / Issues Encountered -1. **{{issue_1}}:** {{description}} — {{fix_or_workaround}} -2. **{{issue_2}}:** {{description}} — {{fix_or_workaround}} - -### Process Improvements Needed -1. **{{gap_1}}:** {{description}} — {{recommendation}} -2. **{{gap_2}}:** {{description}} — {{recommendation}} - -### User Feedback -**[User: Please add your feedback here]** - -**Quality:** {{how_was_output_quality}} - -**Process:** {{how_did_collaboration_feel}} - -**Gaps:** {{what_was_missing}} - -**Suggestions:** {{what_should_improve}} - -### Handoff Notes -{{critical_information_for_next_phase}} - ---- - -**Status:** in_progress -**Last Updated:** {{date}} {{time}} diff --git a/src/workflows/_agent-dialogs/templates/dialog-capture.template.md b/src/workflows/_agent-dialogs/templates/dialog-capture.template.md deleted file mode 100644 index fc985be28..000000000 --- a/src/workflows/_agent-dialogs/templates/dialog-capture.template.md +++ /dev/null @@ -1,75 +0,0 @@ -# {DATE} {Feature Name} — Capture - -## Meta - -| Field | Value | -|-------|-------| -| **Date** | {YYYY-MM-DD} | -| **Type** | 💾 Capture | -| **Agent** | {Agent name} | -| **Feature** | {Feature name} | -| **Specification** | [{Spec name}]({path-to-spec}) | -| **Status** | Not Started | - ---- - -## Purpose - -{1-3 sentences describing what this dialog will accomplish} - ---- - -## Captured Thoughts - -{Capture your thinking while it's fresh:} - -### The Idea - -{What do you want to build/change/fix?} - -### Why - -{Why is this needed? What problem does it solve?} - -### Rough Approach - -{Any initial thoughts on how to approach this?} - -### Notes - -{Anything else to remember} - ---- - -## Context for Next Agent - -{Help the agent that continues this work:} - -### Current Thinking - -{What's your current understanding or hypothesis?} - -### Open Questions - -{What questions should be explored or clarified?} - -### Concerns - -{Any potential issues, risks, or things to watch out for?} - -### Suggestions - -{Any specific approaches or patterns you'd recommend?} - ---- - -## When I Return - -1. Read the specification: {spec_path} -2. Complete Setup Context section -3. Analyze scope and create steps -4. Start implementing - ---- - -_Capture Agent Dialog — to be expanded later_ diff --git a/src/workflows/_agent-dialogs/templates/dialog-types/INDEX.md b/src/workflows/_agent-dialogs/templates/dialog-types/INDEX.md deleted file mode 100644 index 74c81a37f..000000000 --- a/src/workflows/_agent-dialogs/templates/dialog-types/INDEX.md +++ /dev/null @@ -1,142 +0,0 @@ -# Dialog Type Templates - -Choose the template that matches your work type. - ---- - -## Naming Convention - -``` -{output_folder}/_progress/agent-dialogs/ -└── {YYYY-MM-DD}-{agent}-{feature-name}/ - └── {YYYY-MM-DD}-{agent}-{feature-name}-dialog.md -``` - -**Example:** `2026-01-23-freya-booking-details-overlay-dialog.md` - ---- - -## Available Types - -| Type | Icon | Template | Use When | -|------|------|----------|----------| -| **Prototype Implementation** | 🔧 | [prototype-implementation.template.md](prototype-implementation.template.md) | Building UI from specifications | -| **Stitch UI Generation** | 🪡 | [stitch-generation.template.md](stitch-generation.template.md) | AI-assisted UI design with Google Stitch | -| **Bug Fix** | 🐛 | [bug-fix.template.md](bug-fix.template.md) | Fixing issues and defects | -| **Design Exploration** | 🎨 | [design-exploration.template.md](design-exploration.template.md) | Exploring visual/UX directions | -| **Capture** | 💾 | [../dialog-capture.template.md](../dialog-capture.template.md) | Saving ideas for later | -| **Generic** | 📋 | [../dialog.template.md](../dialog.template.md) | Anything else | - ---- - -## Type Details - -### 🔧 Prototype Implementation - -**Best for:** -- Implementing features from WDS specifications -- Building UI components section-by-section -- Following design system patterns - -**Key sections:** -- Specification summary with Object IDs -- Section-by-section approval flow -- Design system component mapping - ---- - -### 🪡 Stitch UI Generation - -**Best for:** -- Generating UI designs from specifications using Google Stitch AI -- Rapid visual design iteration -- Creating production-quality screens from sketches - -**Key sections:** -- Input formula: Visual Reference + Sketch + Specification -- Screen-by-screen generation tracking -- Export and integration workflow - -**Input Formula:** -``` -Visual Reference + Sketch + Specification (as prompt) = Stitch Generation -``` - ---- - -### 🐛 Bug Fix - -**Best for:** -- Fixing reported issues -- Investigating unexpected behavior -- Quick targeted fixes - -**Key sections:** -- Symptoms and reproduction steps -- Investigation hypotheses -- Root cause and solution documentation - ---- - -### 🎨 Design Exploration - -**Best for:** -- Exploring visual directions -- Comparing design approaches -- Making design decisions - -**Key sections:** -- Multiple exploration directions -- Pros/cons analysis -- Artifact outputs (moodboards, sketches) - ---- - -### 💾 Capture - -**Best for:** -- Saving ideas when you don't have time -- Capturing context for later -- Minimal documentation - -**Key sections:** -- Just purpose and initial thoughts -- "When I Return" checklist - ---- - -### 📋 Generic - -**Best for:** -- Work that doesn't fit other types -- Custom workflows -- Flexible structure - -**Key sections:** -- Full setup context -- Custom step breakdown -- Standard progress tracking - ---- - -## Choosing a Template - -``` -Start here: - │ - ├── Building code from spec? → 🔧 Prototype Implementation - │ - ├── Generating UI designs with AI? → 🪡 Stitch UI Generation - │ - ├── Fixing something broken? → 🐛 Bug Fix - │ - ├── Exploring design options? → 🎨 Design Exploration - │ - ├── No time now, save for later? → 💾 Capture - │ - └── Something else? → 📋 Generic -``` - ---- - -_Dialog Type Templates — WDS Agent Dialog Workflow_ diff --git a/src/workflows/_agent-dialogs/templates/dialog-types/bug-fix.template.md b/src/workflows/_agent-dialogs/templates/dialog-types/bug-fix.template.md deleted file mode 100644 index 042af1039..000000000 --- a/src/workflows/_agent-dialogs/templates/dialog-types/bug-fix.template.md +++ /dev/null @@ -1,164 +0,0 @@ -# {DATE} {Bug Name} — Bug Fix - -## Meta - -| Field | Value | -|-------|-------| -| **Date** | {YYYY-MM-DD} | -| **Type** | 🐛 Bug Fix | -| **Agent** | {Agent name} | -| **Issue** | {Brief description} | -| **Reported By** | {Who reported} | -| **Priority** | {Critical / High / Medium / Low} | -| **Status** | Not Started | - ---- - -## Purpose - -Fix: {One sentence description of the bug} - ---- - -## Bug Details - -### Symptoms - -{What the user sees / what's happening wrong} - -### Expected Behavior - -{What should happen instead} - -### Steps to Reproduce - -1. {Step 1} -2. {Step 2} -3. {Step 3} -4. **Result:** {What happens} -5. **Expected:** {What should happen} - -### Environment - -- **Browser/Device:** {e.g., Chrome 120, iPhone 14} -- **OS:** {e.g., macOS, iOS 17} -- **User Type:** {e.g., Authenticated, Admin} - -### Evidence - -- Screenshot: {path or description} -- Console errors: {if any} -- Network issues: {if any} - ---- - -## Setup Context - -### Relevant Files - -| File | Purpose | Likely Cause? | -|------|---------|---------------| -| `{path/to/file}` | {What it does} | {Yes/No/Maybe} | - -### Related Code - -```typescript -// Suspected problematic code -{code snippet if known} -``` - ---- - -## Investigation - -### Hypotheses - -1. **{Hypothesis 1}** — {Why you think this might be the cause} -2. **{Hypothesis 2}** — {Alternative explanation} - -### Investigation Steps - -- [ ] Reproduce the issue locally -- [ ] Check console for errors -- [ ] Review recent changes to related files -- [ ] Add debugging/logging -- [ ] Identify root cause - ---- - -## Steps Overview - -| # | Step | Status | Notes | -|---|------|--------|-------| -| 1 | [Reproduce Issue](steps/01-reproduce.md) | 🔲 | | -| 2 | [Identify Root Cause](steps/02-investigate.md) | 🔲 | | -| 3 | [Implement Fix](steps/03-fix.md) | 🔲 | | -| 4 | [Test Fix](steps/04-test.md) | 🔲 | | -| 5 | [Verify No Regression](steps/05-verify.md) | 🔲 | | - ---- - -## The Fix - -### Root Cause - -{Discovered root cause — fill in after investigation} - -### Solution - -{Description of the fix — fill in after implementing} - -### Files Changed - -| File | Change | -|------|--------| -| `{path}` | {What was changed} | - ---- - -## Testing - -### Verification Steps - -1. {How to verify the fix works} -2. {Step 2} -3. {Expected result} - -### Regression Testing - -- [ ] Original bug is fixed -- [ ] Related functionality still works -- [ ] No new console errors -- [ ] Other states/flows unaffected - ---- - -## Progress Log - -### {YYYY-MM-DD} - -- Created bug fix dialog -- Initial investigation - - - ---- - -## Learnings - - - -- {Pattern that caused this} -- {How to prevent in future} - ---- - -_Bug Fix Dialog — WDS Agent Dialog Workflow_ diff --git a/src/workflows/_agent-dialogs/templates/dialog-types/design-exploration.template.md b/src/workflows/_agent-dialogs/templates/dialog-types/design-exploration.template.md deleted file mode 100644 index 2ebeba19e..000000000 --- a/src/workflows/_agent-dialogs/templates/dialog-types/design-exploration.template.md +++ /dev/null @@ -1,180 +0,0 @@ -# {DATE} {Exploration Name} — Design Exploration - -## Meta - -| Field | Value | -|-------|-------| -| **Date** | {YYYY-MM-DD} | -| **Type** | 🎨 Design Exploration | -| **Agent** | Eira (Visual Designer) / Freya (UX Designer) | -| **Topic** | {What we're exploring} | -| **Tool** | {Magic Patterns / Figma / Excalidraw / Code} | -| **Status** | Not Started | - ---- - -## Purpose - -Explore {design direction / visual approach / interaction pattern} for {feature/page}. - ---- - -## Exploration Context - -### What We're Exploring - -{Describe the design challenge or opportunity} - -### Why - -{What prompted this exploration? What decision needs to be made?} - -### Constraints - -- {Constraint 1 — e.g., must match brand} -- {Constraint 2 — e.g., mobile-first} -- {Constraint 3 — e.g., accessibility} - -### Success Criteria - -{How will we know if we've found a good solution?} - -- {Criterion 1} -- {Criterion 2} - ---- - -## Setup Context - -### Brand Guidelines - -- **Colors:** {Primary, secondary, accent} -- **Typography:** {Font family, sizes} -- **Tone:** {Warm, professional, playful, etc.} - -### Existing Patterns - -| Pattern | Where Used | Notes | -|---------|------------|-------| -| {Pattern} | {Location} | {How it works} | - -### Inspiration - -| Reference | What to Take | Link | -|-----------|--------------|------| -| {Source} | {What's inspiring} | {URL} | - ---- - -## Exploration Directions - -### Direction A: {Name} - -**Concept:** {Brief description} - -**Pros:** -- {Pro 1} -- {Pro 2} - -**Cons:** -- {Con 1} -- {Con 2} - -**Status:** 🔲 Not Explored | 🔄 In Progress | ✅ Complete - ---- - -### Direction B: {Name} - -**Concept:** {Brief description} - -**Pros:** -- {Pro 1} -- {Pro 2} - -**Cons:** -- {Con 1} -- {Con 2} - -**Status:** 🔲 Not Explored | 🔄 In Progress | ✅ Complete - ---- - -### Direction C: {Name} - -**Concept:** {Brief description} - -**Pros:** -- {Pro 1} -- {Pro 2} - -**Cons:** -- {Con 1} -- {Con 2} - -**Status:** 🔲 Not Explored | 🔄 In Progress | ✅ Complete - ---- - -## Steps Overview - -| # | Step | Status | Output | -|---|------|--------|--------| -| 1 | [Gather Inspiration](steps/01-inspiration.md) | 🔲 | Moodboard | -| 2 | [Explore Direction A](steps/02-direction-a.md) | 🔲 | Sketches | -| 3 | [Explore Direction B](steps/03-direction-b.md) | 🔲 | Sketches | -| 4 | [Compare & Evaluate](steps/04-evaluate.md) | 🔲 | Analysis | -| 5 | [Refine Winner](steps/05-refine.md) | 🔲 | Final design | -| 6 | [Document Decision](steps/06-document.md) | 🔲 | Specification | - ---- - -## Outputs - -### Artifacts Created - -| Artifact | Location | Status | -|----------|----------|--------| -| Moodboard | `{path}` | 🔲 | -| Sketches | `{path}` | 🔲 | -| Final Design | `{path}` | 🔲 | - -### Decision - -**Chosen Direction:** {To be determined} - -**Rationale:** {Why this direction was chosen} - ---- - -## Progress Log - -### {YYYY-MM-DD} - -- Started design exploration -- Gathered initial constraints - - - ---- - -## Learnings - - - -_None yet._ - ---- - -_Design Exploration Dialog — WDS Agent Dialog Workflow_ diff --git a/src/workflows/_agent-dialogs/templates/dialog-types/prototype-implementation.template.md b/src/workflows/_agent-dialogs/templates/dialog-types/prototype-implementation.template.md deleted file mode 100644 index f5d34c4f6..000000000 --- a/src/workflows/_agent-dialogs/templates/dialog-types/prototype-implementation.template.md +++ /dev/null @@ -1,292 +0,0 @@ -# {YYYY-MM-DD} {Feature Name} — Prototype Implementation - - - -## Meta - -| Field | Value | -|-------|-------| -| **Date** | {YYYY-MM-DD} | -| **Type** | 🔧 Prototype Implementation | -| **Agent** | {Agent name} ({Role}) | -| **Feature** | {Feature name} | -| **Specification** | [{Spec name}]({path-to-spec}) | -| **Target** | {Where to implement: app path or prototype folder} | -| **Status** | Not Started | - ---- - -## Purpose - -Implement {feature name} from specification into working code, following the section-by-section approach with approval gates. - ---- - -## About This Dialog - -This dialog **bridges the gap** between the page specification and the development work. - -``` -┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ -│ SPECIFICATION │ │ THIS DIALOG │ │ DEVELOPMENT │ -│ │ │ │ │ │ -│ • What to build │────────▶│ • What's in scope │────────▶│ • How to build │ -│ • Object IDs │ │ • Step breakdown │ │ • Code files │ -│ • Requirements │ │ • Traceability │ │ • Components │ -│ • Translations │ │ • Progress tracking │ │ • Tests │ -└─────────────────────┘ └─────────────────────┘ └─────────────────────┘ - Single Source Navigation Implementation - of Truth Layer -``` - -**The specification is the single source of truth.** This dialog does not duplicate spec content — it maps implementation tasks to spec sections. - ---- - -## Where to Find What - -| I need... | Go to... | -|-----------|----------| -| Complete requirements for an Object ID | [{Spec name}]({path-to-spec}) | -| Translation keys and strings | Specification → each Object ID section | -| What's in scope for this implementation | This file → [Scope](#scope) section | -| Step-by-step implementation instructions | [steps/](steps/) folder | -| Which Object IDs belong to which step | Each step file → Object ID Implementation Map | -| Design system component patterns | {path-to-design-system} | -| Existing code to modify | This file → [Existing Code](#existing-code) table | - ---- - -## Setup Context - -### Project Context - -- **Project:** {Project name} -- **Tech Stack:** {e.g., React 19, Next.js 15, TypeScript, Tailwind CSS} -- **Repository:** {path} - -### Specification Summary - -**Page/Feature:** {Name from spec} - -**States/Variants:** -- {State 1} -- {State 2} -- {etc.} - -**Key Sections:** -| Section | Object IDs | Priority | -|---------|------------|----------| -| {Section 1} | `{object-id-1}`, `{object-id-2}` | High | -| {Section 2} | `{object-id-3}` | Medium | - -### Existing Code - -| File | Purpose | Status | -|------|---------|--------| -| `{path/to/file}` | {What it does} | {Exists / To Create} | - -### Design System Components - -| Component | Path | Notes | -|-----------|------|-------| -| [{Component}]({path}) | `{import path}` | {Usage notes} | - ---- - -## Scope - -### In Scope - -- {Section/feature 1} -- {Section/feature 2} -- Translations (SE/EN) -- Accessibility (WCAG AA) - -### Out of Scope - -- {Explicitly excluded} -- Backend/API changes (unless specified) - -### Dependencies - -- [ ] {Dependency 1} — {status} -- [ ] {Dependency 2} — {status} - ---- - -## Implementation Approach - -### Section-by-Section - -Each section is implemented and approved before moving to the next: - -1. **Build section** — Implement the code -2. **Test section** — Verify against spec -3. **User approval** — Confirm it's correct -4. **Next section** — Move forward - -### Approval Criteria - -- [ ] **Matches sketches precisely** — Text sizes, proportions, spacing, layout -- [ ] All Object IDs present as `data-object-id` attributes -- [ ] Translations work (SE/EN toggle) -- [ ] Accessibility requirements met -- [ ] No TypeScript errors - -> **Sketch Fidelity:** Sketches are intentional design decisions. Text sizes, proportions, and spacing are chosen deliberately. Implement as close to the sketch as possible. If constraints prevent exact matching, document the deviation. - ---- - -## Feedback Protocol - -How designer feedback is handled during implementation: - -| Type | What It Is | When to Address | Documentation | -|------|------------|-----------------|---------------| -| **Bug/Issue** | Something broken or not working | Now — iterate until fixed | Part of current step | -| **Quick Adjustment** | Small tweak to current work | Now — implement immediately | Note in progress log | -| **Addition** | New requirement in scope | Later step — add to plan | Note in step file | -| **Change Request** | Outside current scope | Future session — document | Add to Change Requests | - -### The 2-Minute Rule (GTD) - -**If a fix takes less than 2 minutes, do it immediately.** - -Planning overhead should not exceed task complexity. See [GTD Model](../../../../docs/models/gtd-getting-things-done.md). - -**Pattern:** Do the fix → Log as sub-step (e.g., 20a-1) → Continue main task - -### Agent Response Pattern - -**When user reports something:** -1. **CLASSIFY** — What type of feedback is this? -2. **TIMING** — When should it be addressed? -3. **CONFIRM** — For additions and change requests, confirm before proceeding -4. **EXECUTE** — Implement or document as appropriate - -### Change Request Flow - -``` -Designer: "The profile button should go to /family" -Agent: "This is outside the current dialog scope. - It doesn't block {current feature}. - I'll add it to Change Requests for a future session. Confirm?" -Designer: "Yes" → Agent adds to Change Requests - OR "Do it now" → Agent treats as quick adjustment, implements -``` - ---- - -## Change Requests - -Structural changes identified during implementation. Assessed for timing. - -| # | Request | Raised | Assessment | Timing | Status | -|---|---------|--------|------------|--------|--------| -| _None yet_ | | | | | | - - - ---- - -## Steps Overview - -### Done - -| # | Section | Notes | -|---|---------|-------| -| _None yet_ | | | - -### In Progress - -| # | Section | Status | Description | -|---|---------|--------|-------------| -| 1 | [{Section name}](steps/01-{section}.md) | 🔄 | {Brief description} | -| 1a | — {Sub-task} | 🔄 | {Sub-step added during execution} | - -### To Do - -| # | Section | Description | -|---|---------|-------------| -| 2 | [{Section name}](steps/02-{section}.md) | {Brief description} | -| 3 | [{Section name}](steps/03-{section}.md) | {Brief description} | - -**Status:** 🔲 Not Started | 🔄 In Progress | ✅ Complete | ⏸️ Blocked - -**Sub-Step Numbering:** -- Main steps: `1`, `2`, `3`... -- Sub-steps during execution: `1a`, `1b`... -- Bug fixes (2-min rule): `1a-1`, `1a-2`... - ---- - -## Progress Log - -### {YYYY-MM-DD} - -- Created dialog from specification -- Identified {N} sections to implement - - - ---- - -## Spec Changes Discovered - - - -| Issue | Resolution | Spec Updated? | -|-------|------------|---------------| -| _None yet_ | | | - ---- - -## Testing Checklist - -### Per-Section Testing - -- [ ] Visual match to specification -- [ ] Object IDs present and correct -- [ ] Translations toggle correctly -- [ ] Touch targets ≥ 44px -- [ ] Keyboard navigation works - -### Final Integration Testing - -- [ ] All sections work together -- [ ] State transitions correct -- [ ] No console errors -- [ ] Responsive (if applicable) - ---- - -## Learnings - - - -_None yet._ - ---- - -_Prototype Implementation Dialog — WDS Agent Dialog Workflow_ diff --git a/src/workflows/_agent-dialogs/templates/dialog-types/stitch-generation.template.md b/src/workflows/_agent-dialogs/templates/dialog-types/stitch-generation.template.md deleted file mode 100644 index b1ba4f4fd..000000000 --- a/src/workflows/_agent-dialogs/templates/dialog-types/stitch-generation.template.md +++ /dev/null @@ -1,311 +0,0 @@ -# {YYYY-MM-DD} {Feature Name} — Stitch UI Generation - - - -## Meta - -| Field | Value | -|-------|-------| -| **Date** | {YYYY-MM-DD} | -| **Type** | 🪡 Stitch UI Generation | -| **Agent** | Freya (WDS Designer) | -| **Feature** | {Feature/flow name} | -| **Specifications** | [{Spec 1}]({path}), [{Spec 2}]({path}) | -| **Design Reference** | [{Reference design}]({path}) — visual style source | -| **Status** | Not Started | - ---- - -## Purpose - -Generate production-quality UI designs for {feature name} using Google Stitch AI, based on existing specifications and sketches. - ---- - -## About This Dialog - -This dialog guides the **AI-assisted UI generation workflow** using Google Stitch. - -``` -┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ -│ INPUTS │ │ STITCH PROCESS │ │ OUTPUTS │ -│ │ │ │ │ │ -│ • Specifications │────────▶│ • Prompt crafting │────────▶│ • UI designs │ -│ • Sketches │ │ • Generation │ │ • Figma exports │ -│ • Reference designs │ │ • Iteration │ │ • HTML/CSS code │ -│ • Strategic context │ │ • Refinement │ │ • Design decisions │ -└─────────────────────┘ └─────────────────────┘ └─────────────────────┘ - Source Materials AI Generation Project Assets -``` - -**Specifications remain the single source of truth.** Stitch generates visual interpretations that must align with spec requirements. - ---- - -## When to Use Stitch - -| Scenario | Use Stitch? | Why | -|----------|-------------|-----| -| New page with detailed spec | ✅ Yes | Accelerates visual design from requirements | -| Exploring visual directions | ✅ Yes | Quick iteration on look & feel | -| Complex multi-state UI | ⚠️ Partially | Generate base, refine states manually | -| Design system components | ❌ No | Build from tokens, not generated | -| Minor spec updates | ❌ No | Edit existing designs directly | - ---- - -## Stitch Capabilities & Limits - -### What Stitch Does Well -- Single screen generation from prompts -- Style matching from reference images -- Responsive layouts (mobile/desktop) -- Clean HTML/CSS export -- Figma-compatible output - -### Current Limitations -- Best with 2-3 screens at a time -- Layouts can be generic (need refinement) -- Doesn't capture deep UX nuance -- No built-in design system awareness -- Requires iteration for production quality - ---- - -## Setup Context - -### Project Context - -- **Project:** {Project name} -- **Brand:** {Brand characteristics — tone, colors, typography} -- **Tech Stack:** {e.g., React, Next.js, Tailwind CSS} -- **Design System:** [{Design System}]({path}) - -### Strategic Context - -| Document | Path | Key Elements | -|----------|------|--------------| -| Trigger Map | [{path}]({path}) | {Key triggers for this feature} | -| User Personas | [{path}]({path}) | {Target personas} | -| Product Brief | [{path}]({path}) | {Relevant product goals} | - -### Reference Materials - -| Type | File | Purpose | -|------|------|---------| -| **Style Reference** | [{design}]({path}) | Visual language source for Stitch | -| **Sketch** | [{sketch}]({path}) | Layout and structure guide | -| **Specification** | [{spec}]({path}) | Requirements and content | - ---- - -## Pre-Generation Questions - -Before generating, decide for each screen: - -### Question 1: Which screens need Stitch generation? - -| Screen | Has Code? | Has Sketch? | Generate in Stitch? | Why | -|--------|-----------|-------------|---------------------|-----| -| {Screen 1} | ✅/❌ | ✅/❌ | ✅/❌ | {reason} | -| {Screen 2} | ✅/❌ | ✅/❌ | ✅/❌ | {reason} | - -### Question 2: What visual reference for each screen? - -| Option | When to Use | -|--------|-------------| -| **Screenshot of existing code** | Code exists and represents the correct visual direction | -| **Original sketch** | Starting fresh, or code doesn't match desired direction | -| **Both** | Use code as style reference + sketch for layout guidance | - -| Screen | Reference Choice | Source | -|--------|------------------|--------| -| {Screen 1} | Code screenshot / Sketch / Both | {path or "take screenshot"} | -| {Screen 2} | Code screenshot / Sketch / Both | {path or "take screenshot"} | - ---- - -## Screens to Generate - -| # | Screen | Specification | Visual Reference | Layout Guide | Priority | Status | -|---|--------|---------------|------------------|--------------|----------|--------| -| 1 | {Screen name} | [{spec}]({path}) | {screenshot/sketch} | {sketch if different} | High | 🔲 | -| 2 | {Screen name} | [{spec}]({path}) | {screenshot/sketch} | {sketch if different} | High | 🔲 | - -**Status:** 🔲 Not Started | 🔄 In Progress | ✅ Generated | 🔁 Needs Refinement | ✅✅ Approved - ---- - -## Stitch Input Formula - -``` -┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ -│ VISUAL REFERENCE│ + │ SKETCH │ + │ SPECIFICATION │ = Stitch Generation -│ (style source) │ │ (layout/structure)│ │ (paste as prompt)│ -└─────────────────┘ └─────────────────┘ └─────────────────┘ -``` - -**That's it.** Upload the reference + sketch images, paste the spec as prompt text. - ---- - -## Stitch Workflow Steps - -### Step 1: Gather Inputs - -| Input | Source | Format | -|-------|--------|--------| -| **Visual Reference** | Screenshot of existing design (e.g., start page) | Image (PNG/JPG) | -| **Sketch** | Wireframe sketch from spec folder | Image (PNG/JPG) | -| **Specification** | Full spec markdown or key sections | Text (paste into prompt) | - -**Checklist:** -- [ ] Visual reference captured (shows brand style) -- [ ] Sketch image ready -- [ ] Spec content copied (full doc or key sections) - ---- - -### Step 2: Generate in Stitch - -1. Go to [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Upload **visual reference** image -3. Upload **sketch** image -4. Paste **specification** as prompt text (or key sections) -5. Add brief instruction: *"Generate this screen matching the visual style of the reference and layout of the sketch."* -6. Generate 2-3 variants -7. Select best result - -**Settings:** -- Mode: Standard (fast) or Pro (higher fidelity) -- Viewport: {Mobile 390px | Desktop 1440px} - -**Results:** -| Screen | Variants | Selected | Notes | -|--------|----------|----------|-------| -| {name} | {#} | v{#} | {observations} | - ---- - -### Step 3: Review Against Spec - -Quick check - does the output match spec requirements? - -| Check | ✅/❌ | Fix Needed | -|-------|-------|------------| -| Content/copy matches spec | | | -| Layout follows sketch | | | -| Visual style matches reference | | | -| All key elements present | | | - -**If refinement needed:** Re-prompt with specific corrections or edit in Stitch. - ---- - -### Step 4: Export & Store - -| Format | Destination | -|--------|-------------| -| **Figma** | Copy to Figma for team/design system work | -| **HTML/CSS** | `{spec-folder}/Visual-Design/` | -| **Screenshot** | `{spec-folder}/Visual-Design/` | - -**Naming:** `{screen-name}-stitch-v{#}.{ext}` - ---- - -### Step 5: Link in Spec - -Add reference to the specification file: - -```markdown -## Visual Design - -**Stitch Generated:** [{screen-name}-stitch-v1.png](Visual-Design/{screen-name}-stitch-v1.png) -``` - ---- - -## Prompts - -Store each screen's prompt in a separate file in the dialog folder. - -**Naming:** Match the scenario numbering: `{scenario#}-{screen-name}-stitch-prompt.md` - -| # | Screen | Prompt File | Status | -|---|--------|-------------|--------| -| 1 | {Screen 1} | [{scenario#}-{screen-name}-stitch-prompt.md]({scenario#}-{screen-name}-stitch-prompt.md) | 🔲 | -| 2 | {Screen 2} | [{scenario#}-{screen-name}-stitch-prompt.md]({scenario#}-{screen-name}-stitch-prompt.md) | 🔲 | - -**Examples:** `1.2-sign-in-stitch-prompt.md`, `1.3-profile-setup-stitch-prompt.md` - -Use the [stitch-prompt.template.md](../../../6-asset-generation/templates/stitch-prompt.template.md) to create each prompt file. - ---- - -## Outputs Log - -| Screen | Version | Format | Path | Approved? | -|--------|---------|--------|------|-----------| -| {name} | v1 | Figma | {link} | 🔲 | -| {name} | v2 | HTML | {path} | ✅ | - ---- - -## Design Decisions - -| Decision | Context | Rationale | -|----------|---------|-----------| -| {what was decided} | {why it came up} | {reasoning} | - ---- - -## Spec Deviations - -Issues where Stitch output differs from specification: - -| Screen | Spec Requirement | Stitch Output | Resolution | -|--------|------------------|---------------|------------| -| {screen} | {requirement} | {what Stitch did} | {how resolved} | - ---- - -## Progress Log - -### {YYYY-MM-DD} - -- Created dialog for {feature} -- Identified {#} screens to generate -- Prepared reference materials - - - ---- - -## Learnings - - - -| What Worked | Why | Reuse For | -|-------------|-----|-----------| -| {technique} | {reason} | {future use} | - ---- - -_Stitch UI Generation Dialog — Freya WDS Designer — WDS Agent Dialog Workflow_ diff --git a/src/workflows/_agent-dialogs/templates/dialog.template.md b/src/workflows/_agent-dialogs/templates/dialog.template.md deleted file mode 100644 index 14861bc1d..000000000 --- a/src/workflows/_agent-dialogs/templates/dialog.template.md +++ /dev/null @@ -1,200 +0,0 @@ -# {DATE} {Feature Name} - -## Meta - -| Field | Value | -|-------|-------| -| **Date** | {YYYY-MM-DD} | -| **Agent** | {Agent name, e.g., Freya (UX Designer)} | -| **Feature** | {Feature name} | -| **Specification** | [{Spec name}]({path-to-spec}) | -| **Status** | {Not Started / In Progress / Blocked / Complete} | - ---- - -## Purpose - -{1-3 sentences describing what this dialog accomplishes} - ---- - -## About This Dialog - -This dialog **bridges the gap** between the page specification and the development work. - -``` -┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ -│ SPECIFICATION │ │ THIS DIALOG │ │ DEVELOPMENT │ -│ │ │ │ │ │ -│ • What to build │────────▶│ • What's in scope │────────▶│ • How to build │ -│ • Object IDs │ │ • Step breakdown │ │ • Code files │ -│ • Requirements │ │ • Traceability │ │ • Components │ -│ • Translations │ │ • Progress tracking │ │ • Tests │ -└─────────────────────┘ └─────────────────────┘ └─────────────────────┘ - Single Source Navigation Implementation - of Truth Layer -``` - -**The specification is the single source of truth.** This dialog does not duplicate spec content — it maps implementation tasks to spec sections. - ---- - -## Where to Find What - -| I need... | Go to... | -|-----------|----------| -| Complete requirements for an Object ID | [{Spec name}]({path-to-spec}) | -| Translation keys and strings | Specification → each Object ID section | -| What's in scope for this implementation | This file → [Scope](#scope) section | -| Step-by-step implementation instructions | [steps/](steps/) folder | -| Which Object IDs belong to which step | Each step file → Object ID Implementation Map | -| Design system component patterns | {path-to-design-system} | -| Existing code to modify | This file → [Relevant Files](#relevant-files) table | - ---- - -## Setup Context - -{Everything an agent needs to understand the project and start working. Include:} - -### Project Context - -- **Project:** {Project name} -- **Tech Stack:** {e.g., React 19, Next.js 15, TypeScript, Tailwind CSS} -- **Repository:** {path or URL} - -### Relevant Files - -| File | Purpose | -|------|---------| -| `{path/to/file}` | {What this file does} | -| `{path/to/file}` | {What this file does} | - -### Existing Patterns - -{Describe any patterns the agent should follow, e.g.:} - -- Component structure: {describe} -- Styling approach: {describe} -- State management: {describe} - -### Current State - -{What exists already that this work builds on} - ---- - -## Scope - -### In Scope - -- {Feature/change 1} -- {Feature/change 2} -- {Feature/change 3} - -### Out of Scope - -- {Explicitly excluded item 1} -- {Explicitly excluded item 2} - -### Dependencies - -- {Dependency 1 — describe what must exist first} -- {Dependency 2} - ---- - -## Implementation Workflow - -### Step-by-Step Process - -1. **Build step** — Implement the code -2. **Test step** — Verify against spec -3. **User approval** — Confirm it's correct -4. **CW status check** — Verify context window has room for next step -5. **Next step** — Move forward - -### Context Window (CW) Status Check - -At the end of each completed step, perform a CW status check to ensure the AI session can handle the next step without losing important context. - -| Check | Action | -|-------|--------| -| **Session length** | If conversation is very long, consider starting fresh for next step | -| **Context clarity** | Can the agent still reference earlier decisions accurately? | -| **Handoff summary** | If starting new session, document: completed steps, key decisions, current file states | - -**Recommendation thresholds:** -- **Continue** — Session is manageable, context is clear -- **Consider fresh start** — Session is long but context is still intact -- **Fresh start recommended** — Context overflow risk, or major architectural shift in next step - ---- - -## Steps Overview - -| # | Step | Status | Notes | -|---|------|--------|-------| -| 1 | [{Step name}](steps/01-{step-name}.md) | 🔲 | | -| 2 | [{Step name}](steps/02-{step-name}.md) | 🔲 | | -| 3 | [{Step name}](steps/03-{step-name}.md) | 🔲 | | - -**Status Legend:** 🔲 Not Started | 🔄 In Progress | ✅ Complete | ⏸️ Blocked | ❌ Skipped - ---- - -## Progress Log - -### {YYYY-MM-DD} - -- Created dialog structure -- {Other activities} - - - ---- - -## Spec Changes Discovered - - - -_None yet._ - - - ---- - -## Learnings - - - -_None yet._ - - - ---- - -_Created using WDS Agent Dialog Workflow_ diff --git a/src/workflows/_agent-dialogs/templates/dream-up-agent-dialog.template.md b/src/workflows/_agent-dialogs/templates/dream-up-agent-dialog.template.md deleted file mode 100644 index 33246f134..000000000 --- a/src/workflows/_agent-dialogs/templates/dream-up-agent-dialog.template.md +++ /dev/null @@ -1,271 +0,0 @@ -# Agent Dialog: Dream Up - {{task_name}} - -**Created:** {{date}} {{time}} -**Mode:** {{mode}} -**Phase:** {{phase}} -**Task:** {{task_description}} -**Project:** {{project_name}} -**Status:** {{status}} - ---- - -## User Request - -{{user_initial_request}} - ---- - -## Mode Selection - -**User chose:** {{mode}} - -**Rationale:** {{why_this_mode}} - ---- - -## Layer 1: WDS Form Learned - -### WDS Guides Loaded - -- `{{guide_1_path}}` - {{guide_1_purpose}} -- `{{guide_2_path}}` - {{guide_2_purpose}} -- `{{guide_3_path}}` - {{guide_3_purpose}} -- `{{rubric_path}}` - Quality standards - -### Key Learnings - -#### Structure -{{how_to_organize_artifact}} - -#### Quality Criteria -{{what_makes_quality_output}} - -#### Common Mistakes -{{what_to_avoid}} - -#### Best Practices -{{what_to_aspire_to}} - -### Quality Threshold - -**Minimum to present to user:** -{{minimum_threshold}} - -**Excellence criteria:** -{{excellence_criteria}} - ---- - -## Layer 2: Project Context (Cumulative) - -### Initial Load - From Product Brief - -**Business Context:** -{{business_what_who_why}} - -**Users:** -{{user_archetypes_mentioned}} - -**Constraints:** -- Technical: {{technical_constraints}} -- Business: {{business_constraints}} -- Timeline: {{timeline_constraints}} - -**Strategic Direction:** -{{goals_positioning_priorities}} - -### Cumulative Growth - -_Layer 2 grows as each artifact is completed:_ - -``` -Initial: Product Brief - ↓ (after Business Goals generated) -+ Business Goals - ↓ (after Target Groups generated) -+ Target Groups - ↓ (after Driving Forces generated) -+ Driving Forces - ↓ (after Prioritization generated) -+ Prioritization -``` - -**Current Layer 2 Contents:** -{{list_all_completed_artifacts_in_layer_2}} - ---- - -## Layer 3: Domain Research - -### Research Per Step - -_Agent researches domain insights as needed for each step_ - -#### Research for {{step_name}} - -**Research Questions:** -- {{research_question_1}} -- {{research_question_2}} - -**Findings:** -- {{finding_1_with_source}} -- {{finding_2_with_source}} - -**Implications:** -{{how_research_informs_generation}} - ---- - -## Layer 4 & 5: Generation & Self-Review Log - -### Iteration 1 - -**Timestamp:** {{iteration_1_timestamp}} - -**Generated:** -{{iteration_1_content_summary}} - -**Self-Review:** -```markdown -## Completeness Check -{{iteration_1_completeness}} - -## Quality Criteria -{{iteration_1_quality_check}} - -## Common Mistakes -{{iteration_1_mistakes_check}} - -## Best Practices -{{iteration_1_practices_check}} - -## Overall Score -- Completeness: {{score}}/10 -- Quality: {{score}}/{{max}} -- Mistakes Avoided: {{score}}/{{max}} -- Best Practices: {{score}}/{{max}} - -**Assessment:** {{meets_threshold_yes_no}} -``` - -**Gaps Identified:** -{{iteration_1_gaps}} - -**Outcome:** {{refine_or_complete}} - -{{user_checkpoint_if_suggest_mode}} - ---- - -### Iteration 2 (if needed) - -**Timestamp:** {{iteration_2_timestamp}} - -**Refinement Plan:** -{{what_will_be_changed_and_why}} - -**Refined:** -{{iteration_2_content_summary}} - -**Self-Review:** -```markdown -[Same structure as Iteration 1] -``` - -**Outcome:** {{refine_or_complete}} - -{{user_checkpoint_if_suggest_mode}} - ---- - -### Iteration 3 (if needed) - -[Same structure...] - ---- - -### Iteration N - COMPLETE - -**Timestamp:** {{iteration_n_timestamp}} - -**Final Self-Review:** -```markdown -## All Criteria Met ✅ - -### Completeness: {{score}}/10 -[All required sections present] - -### Quality Standards: {{score}}/{{max}} -[All criteria met] - -### Common Mistakes: 0 -[All mistakes avoided] - -### Best Practices: {{score}}/{{max}} -[Practices followed] - -## Overall Quality: {{excellent_or_good}} - -**Confidence:** {{high_or_medium}} -**Recommendation:** Present to user for approval -``` - ---- - -## Final Output - -**Artifact Location:** {{path_to_generated_file}} - -**Summary:** -{{brief_description_of_output}} - -**Key Decisions:** -{{key_decisions_made}} - -**What's Next:** -{{next_phase_or_step}} - ---- - -## User Feedback - -**Approved:** {{yes_no_pending}} - -**User Notes:** -{{user_feedback_on_output}} - -**Changes Requested:** -{{changes_if_any}} - ---- - -## Completion Summary - -**Total Iterations:** {{count}} -**Time Spent:** {{duration}} -**Quality Score:** {{final_score}}/10 - -**Success Metrics:** -- Met quality threshold: {{yes_no}} -- User approved: {{yes_no}} -- Within iteration limit (5): {{yes_no}} - -**Lessons Learned:** -{{what_worked_what_didnt}} - ---- - -## Handoff Context - -**For Next Phase:** -{{context_for_next_agent_or_phase}} - -**Open Questions:** -{{unresolved_questions_if_any}} - -**Recommendations:** -{{suggestions_for_next_steps}} - ---- - -*Dream Up session complete. Generated artifact follows WDS standards and methodology.* diff --git a/src/workflows/_agent-dialogs/templates/step.template.md b/src/workflows/_agent-dialogs/templates/step.template.md deleted file mode 100644 index 385e61ac3..000000000 --- a/src/workflows/_agent-dialogs/templates/step.template.md +++ /dev/null @@ -1,138 +0,0 @@ -# Step {##}: {Step Name} - -## Meta - -| Field | Value | -|-------|-------| -| **Agent** | {Agent name — e.g., Freya (UX Designer)} | -| **Step** | {#} of {total} | -| **Focus** | {Brief description of step focus} | - ---- - -## Single Source of Truth - -⚠️ **READ THE SPECIFICATION BEFORE IMPLEMENTING.** - -📄 **Specification:** [{Spec name}]({path-to-spec}) - -The specification contains the complete requirements. This step file maps Object IDs to their spec locations — do not implement without reading the full spec sections. - ---- - -## Object ID Implementation Map - -| Object ID | Spec Section | Lines | -|-----------|--------------|-------| -| `{object-id-1}` | {Section name} | L{start}-L{end} | -| `{object-id-2}` | {Section name} | L{start}-L{end} | -| `{object-id-3}` | {Section name} | L{start}-L{end} | - -### Design System References - -| Component | Location | -|-----------|----------| -| {Component name} | `{path-to-design-system-component}` | - ---- - -## Task - -{Clear description of what to implement in this step} - ---- - -## Files to Modify - -| File | Action | -|------|--------| -| `{path/to/file}` | {Create / Modify} | - ---- - -## Implementation Checklist - -For **each Object ID**, read the spec section and implement: - -| Object ID | Read Spec | Implement | Verify | -|-----------|-----------|-----------|--------| -| `{object-id-1}` | [ ] | [ ] | [ ] | -| `{object-id-2}` | [ ] | [ ] | [ ] | -| `{object-id-3}` | [ ] | [ ] | [ ] | - ---- - -## Verification Process - -After implementation, self-verify using Puppeteer before presenting to the user. - -See: [Inline Testing Guide](../../4-ux-design/agentic-development/guides/INLINE-TESTING-GUIDE.md) for full methodology. - -``` -For each Object ID: - 1. Open page in browser (Puppeteer) - 2. Find element: document.querySelector('[data-object-id="{id}"]') - 3. Verify measurable properties against spec: - - Text content matches translation keys - - Computed styles match spec values (colors, sizes, spacing) - - Dimensions meet requirements (touch targets >= 44px) - - Visibility conditions work correctly - - State transitions behave as specified - - Accessibility attributes present - 4. Narrate each finding with ✓/✗ (actual vs expected) - 5. Fix any failures before presenting to user -``` - -**If modifying existing features:** Capture baseline state with Puppeteer before implementation. Compare after to confirm only intended changes. - ---- - -## Acceptance Criteria - -### Agent-Verifiable (Puppeteer) - -- [ ] All Object IDs present as `data-object-id` attributes -- [ ] Each element's text content matches specification -- [ ] Each element's styling matches specification values -- [ ] Touch targets meet minimum 44px requirement -- [ ] State-specific visibility/behavior works correctly -- [ ] Translations work (SE/EN) using Translation Keys from spec -- [ ] No TypeScript errors -- [ ] No console errors - -### User-Evaluable (Qualitative) - -- [ ] Interaction flow feels natural -- [ ] Visual hierarchy is clear -- [ ] Section is consistent with overall design - ---- - -## Notes - -{Any additional notes, discoveries, or issues found during implementation} - ---- - -## CW Status Check - -At step completion, assess context window status: - -| Indicator | Status | -|-----------|--------| -| Session length | {Short / Medium / Long} | -| Context clarity | {Clear / Degraded} | -| Recommendation | {Continue / Consider fresh start / Fresh start recommended} | - -**If starting fresh session for next step, include handoff summary:** - -``` -Completed: Step {#} - {Step Name} -Key decisions: {list any important decisions made} -File states: {list modified files and their current state} -Next: Step {#+1} - {Next Step Name} -``` - ---- - -_Step {#} of {total} — {Feature Name} Implementation_ diff --git a/src/workflows/_agent-dialogs/workflow.md b/src/workflows/_agent-dialogs/workflow.md deleted file mode 100644 index 0875b7abd..000000000 --- a/src/workflows/_agent-dialogs/workflow.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -name: agent-dialogs -description: Create structured agent dialog folders for implementation tasks with isolated context and reproducible instructions -web_bundle: true ---- - -# Agent Dialog Workflow - -> **DEPRECATED:** This workflow has been replaced by the Design Log system (`_progress/00-design-log.md`). Project state is now tracked in the design log's Backlog/Current/Design Loop Status/Log sections. Session insights are saved to `_progress/agent-experiences/`. This folder is preserved as reference for the structured step-file approach — do not use for new projects. - -**Goal:** Create structured, documented agent dialog folders that enable isolated, reproducible implementation tasks. Plan first, then execute in order. - -**Your Role:** Guide the user through creating an agent dialog structure that captures scope, context, and step-by-step instructions. - ---- - -## WORKFLOW ARCHITECTURE - -Cross-cutting utility — available to all agents across all phases. - -### Steps - -| # | Name | Purpose | -|---|------|---------| -| 1 | [Initialize Dialog](steps/step-01-initialize-dialog.md) | Check pending dialogs, create folder and dialog file | -| 2 | [Analyze Scope](steps/step-02-analyze-scope.md) | Read specs, determine in/out scope | -| 3 | [Create Steps](steps/step-03-create-steps.md) | Break work into discrete, self-contained step files | -| 4 | [Execute Steps](steps/step-04-execute-steps.md) | Execute each step, verify, update progress | -| 5 | [Complete Dialog](steps/step-05-complete-dialog.md) | Verify all steps, capture learnings, close | - ---- - -## INITIALIZATION SEQUENCE - -### 1. Configuration Loading - -Load and read full config from `{project-root}/_bmad/wds/config.yaml` and resolve: - -- `project_name`, `output_folder`, `user_name`, `communication_language`, `document_output_language` - -### 2. First Step - -Load and execute `./steps/step-01-initialize-dialog.md` to begin the dialog workflow. - -### Output - -- `{output_folder}/_progress/agent-dialogs/{date}-{agent}-{feature}/` — Dialog folder -- `{output_folder}/_progress/agent-dialogs/{date}-{agent}-{feature}/{date}-{agent}-{feature}-dialog.md` — Main dialog file -- `{output_folder}/_progress/agent-dialogs/{date}-{agent}-{feature}/steps/` — Self-contained step files - ---- - -## OVERVIEW - -Agent Dialogs bridge specifications → implementation by providing isolation, traceability, and handoff capability. - -| Problem | Solution | -|---------|----------| -| Context window limits | Each step is a fresh agent dialog | -| Lost planning work | Everything documented in files | -| Handoff to others | Complete instructions, anyone can execute | -| Resumability | Pick up where you left off | - -**The specification is the single source of truth.** Dialogs map implementation tasks to spec sections via Object IDs — they never duplicate spec content. - ---- - -## WHEN TO USE - -- Implementing features from specifications -- Changes across multiple files -- Work that might need resuming or handoff -- Saving ideas for later (Capture Dialogs) - -**Skip when:** Simple one-file changes, quick fixes, or pure exploration. - ---- - -## AGENT STARTUP PROTOCOL - -When awakened, check for pending dialogs: - -1. Check `{output_folder}/_progress/agent-dialogs/` -2. Find dialogs with status "Not Started" or "In Progress" -3. Present pending dialogs to user - -| Status | Meaning | -|--------|---------| -| **Not Started** | Created but no steps executed | -| **In Progress** | Some steps complete | -| **Blocked** | Waiting on dependency | -| **On Hold** | Deliberately paused | -| **Complete** | All steps finished | - ---- - -## DIALOG TYPES - -Choose the right template. See [templates/dialog-types/INDEX.md](templates/dialog-types/INDEX.md). - -| Type | Icon | Use When | -|------|------|----------| -| **Prototype Implementation** | 🔧 | Building UI from specifications | -| **Bug Fix** | 🐛 | Fixing issues and defects | -| **Design Exploration** | 🎨 | Exploring visual/UX directions | -| **Capture** | 💾 | Saving ideas for later | -| **Generic** | 📋 | Anything else | - ---- - -## FOLDER STRUCTURE - -``` -{output_folder}/_progress/agent-dialogs/ -└── {DATE}-{agent}-{feature-name}/ - ├── {DATE}-{agent}-{feature-name}-dialog.md ← Main file - └── steps/ - ├── 01-{step-name}.md ← Self-contained step - ├── 02-{step-name}.md - └── ... -``` - -**Naming:** Date `YYYY-MM-DD`, agent lowercase, feature hyphenated. - -**Capture Dialogs** (save for later): Just create the main dialog file, expand later. - ---- - -## THE DIALOG FILE - -Template: [templates/dialog.template.md](templates/dialog.template.md) - -**Required Sections:** -1. **Meta** — Date, agent, feature, spec reference, status -2. **Purpose** — What this dialog accomplishes -3. **Where to Find What** — Navigation table for agents/humans -4. **Setup Context** — All context an agent needs to start fresh -5. **Scope** — In/out, dependencies -6. **Steps Overview** — Progress table -7. **Progress Log** — Chronological work record -8. **Spec Changes Discovered** — Track spec updates during implementation - ---- - -## STEP FILES - -Each step is **self-contained** — an agent with no context can execute it. - -**Core principle: Link, don't duplicate.** Steps reference spec sections via Object IDs: - -```markdown -## Object ID Implementation Map -| Object ID | Spec Section | Lines | -|-----------|--------------|-------| -| `booking-detail-header` | Drawer Header | L149-L158 | -``` - -Template: [templates/step.template.md](templates/step.template.md) - -**Required Sections:** -1. Meta — Agent, step number, focus area -2. Single Source of Truth — Link to spec -3. Object ID Implementation Map — IDs → spec line numbers -4. Task — What to implement -5. Files to Modify — Explicit file list -6. Implementation Checklist — Per Object ID: Read → Implement → Verify -7. Acceptance Criteria — All Object IDs present and match spec - ---- - -## BEST PRACTICES - -- **Never duplicate spec content** — Link with Object IDs and line numbers -- **Setup Context must be thorough** — Assume agent has zero prior knowledge -- **One clear task per step** — Each step accomplishes one thing -- **Read spec before implementing** — For every Object ID -- **Update progress as you go** — Don't batch updates -- **Track spec changes discovered** — Note any changes found during implementation - ---- - -## EXAMPLES - -``` -2026-01-23-freya-booking-details-drawer/ ← Feature implementation -├── dialog.md -└── steps/ (01-drawer-shell, 02-date-display, 03-dog-info, ...) - -2026-01-23-dev-calendar-scroll-fix/ ← Bug fix -├── dialog.md -└── steps/ (01-reproduce, 02-fix, 03-verify) - -2026-01-23-saga-user-settings-page/ ← Capture (expand later) -└── dialog.md -```