whiteport-design-studio 0.1.0

package/src/workflows/workflow-init/project-type-selection.md

@@ -0,0 +1,318 @@
+# Project Type Selection
+
+**Choose your WDS entry point during project initialization**
+
+---
+
+## The Question
+
+```
+Which type of project are you working on?
+
+1. New Product (Greenfield)
+2. Existing Product (Brownfield)
+```
+
+---
+
+## Software Development Terminology
+
+### Greenfield Development
+
+**Definition:** Building a new project from scratch with no constraints from existing systems.
+
+**Origin:** Agricultural term - plowing a green field that has never been cultivated.
+
+**In software:**
+
+- No legacy code to maintain
+- Full creative freedom
+- Define architecture from scratch
+- Choose tech stack freely
+- Design without constraints
+
+---
+
+### Brownfield Development
+
+**Definition:** Developing within an existing system with established constraints.
+
+**Origin:** Industrial term - redeveloping land previously used for industrial purposes.
+
+**In software:**
+
+- Existing codebase to work with
+- Legacy systems to integrate
+- Established patterns to follow
+- Tech stack already decided
+- Work within constraints
+
+---
+
+## Option 1: New Product (Greenfield)
+
+**Choose this if:**
+
+- ✅ Starting from scratch
+- ✅ No existing product or codebase
+- ✅ Designing complete user flows
+- ✅ Full creative freedom
+- ✅ Defining tech stack
+- ✅ **Greenfield development**
+
+**You'll start with:**
+
+- Phase 1: Project Brief (full)
+- Phase 2: Trigger Map (complete)
+- Phase 3: Platform Requirements (define tech stack)
+- Phases 4-7: Iterative development
+
+**Example scenarios:**
+
+- "We're building a new dog care app from scratch"
+- "Startup launching first product"
+- "New feature that's completely separate from existing product"
+
+---
+
+## Option 2: Existing Product (Brownfield)
+
+**Choose this if:**
+
+- ✅ Product already exists and is live
+- ✅ Brought in as "linchpin designer" to solve specific problems
+- ✅ Making strategic improvements, not complete redesign
+- ✅ Working within existing constraints
+- ✅ Tech stack already decided
+- ✅ **Brownfield development**
+
+**You'll start with:**
+
+- Phase 8.1: Limited Project Brief (strategic challenge)
+- Phase 8.2: Existing Context (upload materials, print trigger map)
+- Phase 8.3: Critical Updates (targeted changes)
+- Phase 8.4-8.5: Delivery and validation
+
+**Example scenarios:**
+
+- "Onboarding has 60% drop-off, need to redesign it"
+- "Users don't understand key feature, need UX improvements"
+- "Adding new feature to existing product"
+- "Improving conversion rate on checkout flow"
+
+---
+
+## Comparison
+
+| Aspect                    | New Product                        | Existing Product                |
+| ------------------------- | ---------------------------------- | ------------------------------- |
+| **Entry Point**           | Phase 1                            | Phase 8                         |
+| **Project Brief**         | Full (vision, goals, stakeholders) | Limited (strategic challenge)   |
+| **Trigger Map**           | Complete (all user needs)          | Focused (specific problem)      |
+| **Platform Requirements** | Define from scratch                | Already decided                 |
+| **Design Scope**          | Complete user flows                | Targeted updates                |
+| **Creative Freedom**      | High                               | Constrained                     |
+| **Timeline**              | Months                             | Weeks                           |
+| **Deliverables**          | Multiple Design Deliveries         | Design Deliveries (small scope) |
+
+---
+
+## Agent Prompts
+
+### For New Product
+
+```
+Great! You're starting a new product from scratch.
+
+Let's begin with Phase 1: Project Brief.
+
+I'll help you define:
+- Project vision and goals
+- Target users and their needs
+- Success criteria
+- Stakeholders and team
+
+Ready to start?
+```
+
+### For Existing Product
+
+```
+Great! You're improving an existing product.
+
+Let's begin with Phase 8.1: Limited Project Brief.
+
+I'll help you define:
+- The strategic challenge you're solving
+- Why you're bringing in a WDS designer
+- Scope of changes
+- Success criteria
+- Constraints
+
+First, what's the strategic challenge you're trying to solve?
+```
+
+---
+
+## Configuration
+
+**Project config file will include:**
+
+```yaml
+project:
+  type: 'new_product' # or "existing_product"
+  entry_point: 'phase_1' # or "phase_8"
+
+# If existing_product:
+existing_product:
+  strategic_challenge: 'Onboarding has 60% drop-off rate'
+  scope: 'Redesign onboarding flow (4 screens)'
+  constraints:
+    - 'Tech stack: React Native + Supabase (fixed)'
+    - 'Brand: Colors and logo are fixed'
+    - 'Timeline: 2 weeks'
+
+  existing_materials:
+    business_goals: 'path/to/business-goals.pdf'
+    user_research: 'path/to/user-research.pdf'
+    current_design_system: 'path/to/design-system/'
+```
+
+---
+
+## Workflow Differences
+
+### New Product Workflow
+
+```
+Phase 1: Project Brief
+    ↓
+Phase 2: Trigger Map
+    ↓
+Phase 3: Platform Requirements → [Touch Point 1]
+    ↓
+┌─────────────────────────────────────┐
+│ ITERATIVE CYCLE                     │
+├─────────────────────────────────────┤
+│ Phase 4-5: Design Complete Flow     │
+│ Phase 6: Design Delivery            │
+│ Phase 7: Testing                    │
+└─────────────────────────────────────┘
+    ↓
+✅ Launch
+    ↓
+Phase 8: Ongoing Development
+```
+
+### Existing Product Workflow
+
+```
+Phase 8.1: Limited Project Brief
+    ↓
+Phase 8.2: Existing Context
+    ↓
+Phase 8.3: Critical Updates
+    ↓
+Phase 8.4: Design Delivery (DD-XXX) → [Touch Point 2]
+    ↓
+Phase 8.5: Validation ← [Touch Point 3]
+    ↓
+✅ Deploy Changes
+    ↓
+(Repeat for next strategic challenge)
+```
+
+---
+
+## Tips for Choosing
+
+### Choose New Product if:
+
+- You have time to design properly
+- You want to establish best practices
+- You're defining the product vision
+- You have creative freedom
+
+### Choose Existing Product if:
+
+- You're solving a specific problem
+- Timeline is tight (weeks, not months)
+- Product is already live
+- You're working within constraints
+
+### Not Sure?
+
+**Ask yourself:**
+
+1. Is there already a live product? → Existing Product
+2. Are you starting from scratch? → New Product
+3. Are you redesigning one specific area? → Existing Product
+4. Are you defining the entire product? → New Product
+
+---
+
+## Examples
+
+### New Product Examples
+
+**Dog Week App:**
+
+- Type: New Product
+- Entry: Phase 1
+- Scope: Complete app from scratch
+- Timeline: 3-6 months
+- Deliveries: 10-15 Design Deliveries
+
+**SaaS Dashboard:**
+
+- Type: New Product
+- Entry: Phase 1
+- Scope: Complete dashboard experience
+- Timeline: 4-8 months
+- Deliveries: 15-20 Design Deliveries
+
+---
+
+### Existing Product Examples
+
+**Onboarding Flow Improvement:**
+
+- Type: Existing Product
+- Challenge: 60% drop-off rate
+- Scope: 4 screens
+- Timeline: 2 weeks
+- Delivery: 1 Design Delivery (DD-XXX, small scope)
+
+**Checkout Flow Improvement:**
+
+- Type: Existing Product
+- Challenge: Low conversion rate
+- Scope: 3 screens + payment flow
+- Timeline: 3 weeks
+- Delivery: 1 Design Delivery (DD-XXX, small scope)
+
+**New Feature Addition:**
+
+- Type: Existing Product
+- Challenge: Users requesting calendar view
+- Scope: New calendar feature
+- Timeline: 4 weeks
+- Delivery: 1 Design Delivery (DD-XXX, small scope)
+
+---
+
+## Migration Path
+
+**Can you switch between modes?**
+
+**Yes!**
+
+**New Product → Existing Product:**
+After launching, you naturally transition to Phase 8 for ongoing development.
+
+**Existing Product → New Product:**
+If you're adding a major new section that's essentially a separate product, you might start a new Phase 1 cycle for that section.
+
+---
+
+**Choose wisely! Your entry point determines your entire workflow.** 🚀

package/src/workflows/workflow-init/steps/step-02-project-structure.md

@@ -0,0 +1,54 @@
+# Step 2: Project Structure
+
+**Goal:** Determine the project structure to set up the correct folder organization.
+
+---
+
+## YOUR TASK
+
+Ask the user about their project structure.
+
+---
+
+## EXECUTION
+
+<output>**Let's determine your project structure.**
+
+This defines how we'll organize your scenarios and pages.</output>
+
+<ask>**What are you designing?**
+
+1. **Separate pages** - Individual pages, landing pages, or page variants
+2. **Single user flow** - Multiple pages in one continuous journey (website, wizard, single app flow)
+3. **Multiple user flows** - Application with different user journeys (web app, mobile app, admin system)
+
+Choice [1/2/3]:</ask>
+
+<action>Map choice to structure:
+- 1 → structure_type: "separate_pages", scenarios: "single", pages: "single"
+- 2 → structure_type: "single_flow", scenarios: "single", pages: "multiple"
+- 3 → structure_type: "multiple_flows", scenarios: "multiple", pages: "multiple"
+</action>
+
+<output>✅ **Project Structure Set**
+
+{{#if choice == 1}}
+**Separate pages** - We'll create individual page folders (with optional variants).
+{{else if choice == 2}}
+**Single user flow** - We'll create numbered pages in one flow (1.1, 1.2, 1.3...).
+{{else if choice == 3}}
+**Multiple user flows** - We'll create scenario folders with pages inside each (1-scenario/1.1, 1.2...).
+{{/if}}
+
+This structure will be used when you start designing in Phase 4 (UX Design).</output>
+
+<template-output>structure_type</template-output>
+<template-output>structure_scenarios</template-output>
+<template-output>structure_pages</template-output>
+
+---
+
+## NEXT STEP
+
+<action>Load and execute: `workflow-init/steps/step-03-delivery-config.md`</action>
+

package/src/workflows/workflow-init/steps/step-03-delivery-config.md

@@ -0,0 +1,76 @@
+# Step 3: Delivery Configuration
+
+**Goal:** Define what format you'll be delivering at the end of the design process.
+
+---
+
+## YOUR TASK
+
+Determine the delivery format and whether PRD phases are needed.
+
+---
+
+## EXECUTION
+
+<output>**What will you deliver at the end of the design process?**</output>
+
+<ask>**Delivery format:**
+
+1. **WordPress Markup** - Ready-to-paste WordPress editor code
+2. **Complete PRD** - Product Requirements Document for development team
+3. **Interactive Prototype** - HTML/Figma prototype for testing
+4. **Direct to Code** - Specifications ready for AI code generation
+5. **Figma Designs** - Visual designs in Figma with handoff
+6. **Custom/Other** - I'll specify
+
+Choice [1-6]:</ask>
+
+<action>Map choice to delivery configuration:
+- 1 → format: "wordpress", target_platform: "wordpress", requires_prd: false
+- 2 → format: "prd", target_platform: "custom", requires_prd: true
+- 3 → format: "prototype", target_platform: "html", requires_prd: false
+- 4 → format: "direct-code", target_platform: "custom", requires_prd: false
+- 5 → format: "figma", target_platform: "figma", requires_prd: false
+- 6 → format: "other", ask for details
+</action>
+
+<check if="choice == 6">
+  <ask>Please describe your delivery format and target platform:</ask>
+  <action>Store custom delivery_description</action>
+  <ask>Will this project need PRD phases (Platform Requirements + PRD Finalization)? (y/n)</ask>
+  <action>Set requires_prd based on answer</action>
+</check>
+
+<output>✅ **Delivery Configuration Set**
+
+{{#if delivery_format == wordpress}}
+**WordPress Markup** - Design specifications will be WordPress-ready.
+PRD phases will be skipped (direct implementation).
+{{else if delivery_format == prd}}
+**Complete PRD** - You'll create a full Product Requirements Document.
+PRD phases are required (Phase 3 + Phase 6).
+{{else if delivery_format == prototype}}
+**Interactive Prototype** - Focus on testable prototypes.
+PRD phases are optional.
+{{else if delivery_format == direct-code}}
+**Direct to Code** - Specifications for AI code generation.
+PRD phases are optional.
+{{else if delivery_format == figma}}
+**Figma Designs** - Visual designs with developer handoff.
+PRD phases are optional.
+{{else}}
+**Custom Format** - {{delivery_description}}
+PRD phases: {{#if requires_prd}}Required{{else}}Not needed{{/if}}
+{{/if}}</output>
+
+<template-output>delivery_format</template-output>
+<template-output>target_platform</template-output>
+<template-output>requires_prd</template-output>
+<template-output>delivery_description</template-output>
+
+---
+
+## NEXT STEP
+
+<action>Load and execute: `workflow-init/steps/step-04-phases-selection.md`</action>
+

package/src/workflows/workflow-init/steps/step-04-phases-selection.md

@@ -0,0 +1,180 @@
+# Step 4: Project Phases Selection
+
+**Goal:** Select which WDS phases you need for this project.
+
+---
+
+## YOUR TASK
+
+Guide the user through selecting appropriate project phases.
+
+---
+
+## EXECUTION
+
+<output>**Which WDS phases do you need?**
+
+WDS offers 6 design phases. Let's figure out which ones serve your project.</output>
+
+<ask>**Project phase approach:**
+
+1. **Guided Selection** - I'll recommend phases based on your answers
+2. **Express Selection** - I know exactly which phases I need
+3. **Show All Phases** - Let me see what's available
+
+Choice [1/2/3]:</ask>
+
+<check if="choice == 3">
+  <output>**WDS Phases Overview:**
+
+**Phase 1: Product Brief** 📋
+- Define vision, positioning, target users
+- SMART success criteria
+- When: New projects, strategic clarity needed
+
+**Phase 2: Trigger Mapping** 🎯
+- Connect business goals to user psychology
+- Prioritize features
+- Define personas
+- When: Understanding user needs deeply
+
+**Phase 3: Platform Requirements** 🏗️
+- Technical architecture
+- Data models
+- Platform decisions
+- When: Building applications (requires_prd: true)
+
+**Phase 4: UX Design** 🎨
+- Scenario-driven page design
+- Conceptual specifications
+- Interactive prototypes
+- When: Always (core design phase)
+
+**Phase 5: Design System** 🧩
+- Component library
+- Design tokens
+- Reusable patterns
+- When: Multiple pages, consistency needed
+
+**Phase 6: PRD Finalization** 📦
+- Complete PRD compilation
+- Development roadmap
+- Implementation handoff
+- When: Formal development handoff (requires_prd: true)</output>
+
+  <ask>Now, which approach?
+1. Guided Selection
+2. Express Selection
+
+Choice [1/2]:</ask>
+</check>
+
+<check if="choice == 1">
+  <output>**Guided Phase Selection**
+
+Based on your project, I'll recommend the right phases.</output>
+
+  <ask>**What's your starting point?**
+
+1. **Brand new idea** - Starting from scratch
+2. **Clear vision** - I know what I want to build
+3. **Existing product** - Adding features or redesigning
+
+Choice [1/2/3]:</ask>
+
+  <check if="starting_point == 1">
+    <output>**Recommendation: Full Discovery**
+
+For brand new ideas:
+- Phase 1: Product Brief (define the vision)
+- Phase 2: Trigger Mapping (understand users)
+- Phase 4: UX Design (design the experience)
+- Phase 5: Design System (optional, if multiple pages)
+{{#if requires_prd}}
+- Phase 3: Platform Requirements
+- Phase 6: PRD Finalization
+{{/if}}</output>
+    <action>Set recommended_phases: [1, 2, 4] + (requires_prd ? [3, 6] : [])</action>
+  </check>
+
+  <check if="starting_point == 2">
+    <output>**Recommendation: Design-Focused**
+
+For clear visions:
+- Phase 2: Trigger Mapping (optional, validate assumptions)
+- Phase 4: UX Design (design the experience)
+- Phase 5: Design System (optional, if multiple pages)
+{{#if requires_prd}}
+- Phase 3: Platform Requirements
+- Phase 6: PRD Finalization
+{{/if}}</output>
+    <action>Set recommended_phases: [4] + (requires_prd ? [3, 6] : [])</action>
+  </check>
+
+  <check if="starting_point == 3">
+    <output>**Recommendation: Enhancement Flow**
+
+For existing products:
+- Phase 2: Trigger Mapping (optional, understand impact)
+- Phase 4: UX Design (design the changes)
+{{#if requires_prd}}
+- Phase 6: PRD Finalization (document changes)
+{{/if}}</output>
+    <action>Set recommended_phases: [4] + (requires_prd ? [6] : [])</action>
+  </check>
+
+  <ask>Include these phases? {{recommended_phases_list}}
+
+1. Yes, these are perfect
+2. Let me customize
+
+Choice [1/2]:</ask>
+
+  <check if="customize == 2">
+    <action>Continue to express selection</action>
+  </check>
+</check>
+
+<check if="choice == 2 OR customize == 2">
+  <output>**Express Phase Selection**</output>
+
+  <ask>Select the phases you need (comma-separated):
+
+1. Product Brief
+2. Trigger Mapping
+3. Platform Requirements
+4. UX Design
+5. Design System
+6. PRD Finalization
+
+Example: "1,2,4,5" or "4" or "2,4,6"
+
+Your phases:</ask>
+
+  <action>Parse selected phases</action>
+  <action>Store selected_phases array</action>
+</check>
+
+<output>✅ **Project Phases Configured**
+
+**Phases Included:**
+{{#each selected_phase}}
+- Phase {{this.number}}: {{this.name}}
+{{/each}}
+
+{{#if not_selected_phases}}
+**Phases Skipped:**
+{{#each not_selected_phase}}
+- Phase {{this.number}}: {{this.name}}
+{{/each}}
+{{/if}}</output>
+
+<template-output>selected_phases</template-output>
+<template-output>workflow_path</template-output>
+
+---
+
+## NEXT STEP
+
+<action>Load and execute: `workflow-init/steps/step-05-languages.md`</action>
+

package/src/workflows/workflow-init/workflow.yaml

@@ -0,0 +1,32 @@
+---
+name: wds-workflow-init
+description: Initialize a WDS design project by selecting phases based on project needs
+author: "Whiteport Design Studio"
+web_bundle: true
+standalone: true
+primary_agent: "mimir-orchestrator"
+
+# Critical variables from config
+config_source: "{project-root}/{bmad_folder}/wds/config.yaml"
+output_folder: "{config_source}:output_folder"
+user_name: "{config_source}:user_name"
+project_name: "{config_source}:project_name"
+communication_language: "{config_source}:communication_language"
+document_output_language: "{config_source}:document_output_language"
+date: system-generated
+
+# Folder naming configuration (set during init)
+folder_prefix: "letters" # letters or numbers
+folder_case: "title" # title or lowercase
+
+# Workflow components
+installed_path: "{project-root}/{bmad_folder}/wds/workflows/workflow-init"
+instructions: "{installed_path}/instructions.md"
+template: "{project-root}/{bmad_folder}/wds/workflows/wds-workflow-status-template.yaml"
+
+# Path data files for different project types
+path_files: "{project-root}/{bmad_folder}/wds/workflows/paths/"
+
+# Output configuration
+default_output_file: "{output_folder}/wds-workflow-status.yaml"
+---