diff --git a/src/modules/wds/README.md b/src/modules/wds/README.md new file mode 100644 index 000000000..9b257d390 --- /dev/null +++ b/src/modules/wds/README.md @@ -0,0 +1,212 @@ +# Whiteport Design Studio (WDS) 🎨 + +**Strategic design methodology for creating products users love** + +--- + +## ⚠️ Installation Notice + +**The automated installer is currently not working.** You'll need to manually sideload the WDS agents. + +### Quick Sideload Instructions: + +1. **Copy agent files** from `src/modules/wds/agents/` to your IDE's agent configuration folder +2. **Configure agent paths** in your IDE settings +3. **Verify agents** appear in your IDE's agent list + +πŸ“– **Detailed installation guide:** [docs/how-to/installation/install-bmad.md](../../docs/how-to/installation/install-bmad.md) + +--- + +## What You Can Accomplish with WDS + +As a designer using WDS, you'll be able to: + +🎯 **Create strategic designs** - Connect every design decision to business goals and user psychology +πŸ“‹ **Produce complete specifications** - Generate developer-ready page specs with all details defined +✨ **Explore with AI image generation** - Use NanoBanana/Eira to generate design concepts and establish visual identity +🎨 **Design with Figma** - Open your prototype in Figma, refine the design, export it back to update the design system and generate new code +πŸ€– **Leverage AI agents** - Work with Saga, Idunn, and Freya to accelerate your workflow +πŸ“¦ **Deliver with confidence** - Hand off complete, tested prototypes with clear documentation + +### What You Need to Learn + +To get the most out of WDS, you'll need to understand: + +1. **The WDS workflow** - How phases connect and when to use each one +2. **Agent collaboration** - Working with Saga, Idunn, and Freya to accomplish tasks +3. **Tool integration** - Using Figma MCP, NanoBanana, and other design tools + +οΏ½ **Start learning:** [docs/learn-wds/](docs/learn-wds/) - Interactive courses and tutorials + +--- + +## Module Structure + +``` +wds/ +β”œβ”€β”€ _module-installer/ # Installation configuration +β”œβ”€β”€ agents/ # WDS specialized agents (Norse Pantheon) +β”‚ β”œβ”€β”€ saga-analyst.agent.yaml # Saga-Analyst - Business & Product Analyst +β”‚ β”œβ”€β”€ idunn-pm.agent.yaml # Idunn-WDS-PM - Product Manager +β”‚ └── freya-ux.agent.yaml # Freya-WDS-Designer - UX/UI Designer +β”œβ”€β”€ workflows/ # Phase-selectable design workflows +β”œβ”€β”€ data/ # Standards, frameworks, presentations +β”‚ └── presentations/ # Agent introduction presentations +β”œβ”€β”€ docs/ # Module documentation +β”‚ β”œβ”€β”€ method/ # Methodology deep-dives +β”‚ └── images/ # Diagrams and visuals +β”œβ”€β”€ examples/ # Real-world usage examples +β”‚ └── dog-week-patterns/ # Patterns from Dog Week project +β”œβ”€β”€ reference/ # Templates and checklists +β”‚ β”œβ”€β”€ templates/ # Document templates +β”‚ └── checklists/ # Phase completion checklists +β”œβ”€β”€ teams/ # Team configurations +└── README.md # This file (only README in module) +``` + +## πŸ“ Output Structure + +WDS creates a clean, alphabetized folder structure in your project's `docs/` folder: + +| Folder | Phase | Purpose | Timing | +| ------------------ | ----- | -------------------------------------------- | ------------------- | +| `A-Product-Brief/` | 1 | Strategic foundation & vision | Start here | +| `B-Trigger-Map/` | 2 | User psychology & business goals | After Phase 1 | +| `C-Scenarios/` | 4 | UX specifications (HOW it works) | After Phase 2 | +| `D-Design-System/` | 5 | Visual identity & components (HOW it looks) | **Anytime** 🎨 | +| `D-PRD/` | 3 | Technical requirements (optional) | Before development | +| `E-UI-Roadmap/` | 6 | Development handoff | After Phase 4 | + +## 🎯 Design Phases + +### Core Workflow + +**Phase 1: Product Exploration** β†’ `A-Product-Brief/` +Define vision, positioning, and success criteria + +**Phase 2: User Research** β†’ `B-Trigger-Map/` +Connect business goals to user psychology and triggers + +**Phase 4: UX Design** β†’ `C-Scenarios/` +**HOW it works** - Functionality, interactions, content structure + +**Phase 5: Visual Design** β†’ `D-Design-System/` +**HOW it looks** - Tie UX to brand, create visual system +⚑ **Can start anytime** - Brand identity is independent of product! + +### Optional Phases + +**Phase 3: Requirements** β†’ `D-PRD/` (for technical products) +**Phase 6: Dev Integration** β†’ `E-UI-Roadmap/` (handoff to development) + +--- + +## πŸ’‘ Key Concepts + +### UX vs Visual Design + +``` +Phase 4 (UX Design) +β”œβ”€ Defines HOW it works +β”œβ”€ Functionality & interactions +β”œβ”€ Content structure & hierarchy +└─ Question: "What does this do?" + +Phase 5 (Visual Design) +β”œβ”€ Defines HOW it looks and feels +β”œβ”€ Brand expression & visual language +β”œβ”€ Design tokens & system +└─ Question: "How does this feel like our brand?" +``` + +### Brand Independence + +**Visual design is NOT tied to product timing!** + +- βœ… Before product work (brand-first approach) +- βœ… Parallel to strategy (simultaneous development) +- βœ… After strategy (informed by insights) + +**Output location:** `D-Design-System/01-Visual-Design/` + +## Agents - The Norse Pantheon πŸ”οΈ + +| Agent | File | Role | Norse Meaning | +| ----------------------- | ------------------------- | -------------------------- | ----------------------------------- | +| **Saga the Analyst** | `saga-analyst.agent.yaml` | Business & Product Analyst | Goddess of stories & wisdom | +| **Idunn the PM** | `idunn-pm.agent.yaml` | Product Manager | Goddess of renewal & youth | +| **Freya the Designer** | `freya-ux.agent.yaml` | UX/UI Designer | Goddess of beauty, magic & strategy | + +## πŸ› οΈ Tools & Integration + +### Visual Design Tools + +- **Figma MCP** - Automated bidirectional sync with Object IDs +- **NanoBanana/Eira** - AI-powered image generation for brand exploration +- **html.to.design** - Import HTML prototypes into Figma + +### Workflow Tools + +- **Excalidraw** - Sketch analysis and wireframing +- **Git** - Version control and collaboration +- **Cursor/Windsurf** - AI-powered IDE integration + +πŸ“– **Full tools guide:** [docs/tools/wds-tools-guide.md](docs/tools/wds-tools-guide.md) + +--- + +## πŸ“‹ Conventions + +- **One README rule** - Only this README.md; all other docs use `xxx-guide.md` naming +- **Alphabetized output** - A-B-C-D-E folder prefix for clean organization +- **Design focus** - No development artifacts (handled by BMM) +- **Phase-selectable** - Choose phases based on project needs +- **Tool-agnostic** - Works with any design/development tools + +## πŸš€ Getting Started + +### 1. Sideload Agents (Manual Installation) + +Since the installer isn't working, manually copy agents: + +```bash +# Copy agent files to your IDE's agent folder +cp src/modules/wds/agents/*.yaml / +``` + +### 2. Activate an Agent + +In your IDE, activate one of the WDS agents: +- **Saga** - Business & Product Analyst +- **Idunn** - Product Manager +- **Freya** - UX/UI Designer + +### 3. Initialize Workflow + +``` +*workflow-init +``` + +The agent will guide you through project setup and phase selection. + +πŸ“– **Detailed setup guide:** [docs/how-to/installation/install-bmad.md](../../docs/how-to/installation/install-bmad.md) + +## πŸ”— Integration with BMM + +WDS design artifacts feed directly into BMad Method (BMM) development workflows: + +``` +WDS Design System β†’ E-UI-Roadmap/ β†’ BMM Architecture & Stories β†’ Development +``` + +**Handoff includes:** +- Component specifications with Object IDs +- Design tokens (colors, typography, spacing) +- Interactive HTML prototypes +- User flow documentation +- Acceptance criteria + +--- + +Part of the BMad ecosystem β€’ Contributed by Whiteport Collective diff --git a/src/modules/wds/_module-installer/install-config.yaml b/src/modules/wds/_module-installer/install-config.yaml index f9dde8552..f86255e9e 100644 --- a/src/modules/wds/_module-installer/install-config.yaml +++ b/src/modules/wds/_module-installer/install-config.yaml @@ -108,4 +108,3 @@ design_experience: label: "Intermediate - Familiar with design concepts, balanced approach" - value: "expert" label: "Expert - Experienced designer, be direct and efficient" - diff --git a/src/modules/wds/_module-installer/installer.js b/src/modules/wds/_module-installer/installer.js index 4eea5d7f3..86e63e339 100644 --- a/src/modules/wds/_module-installer/installer.js +++ b/src/modules/wds/_module-installer/installer.js @@ -13,9 +13,7 @@ const chalk = require('chalk'); * @param {Object} options.logger - Logger instance for output * @returns {Promise} - Success status */ -async function install(options) { - const { projectRoot, config, installedIDEs, logger } = options; - +async function install({ projectRoot, installedIDEs, logger }) { try { logger.log(chalk.blue('🎨 Installing WDS Module...')); @@ -42,11 +40,11 @@ async function install(options) { for (const folder of wdsFolders) { const folderPath = path.join(docsPath, folder); - if (!(await fs.pathExists(folderPath))) { + if (await fs.pathExists(folderPath)) { + logger.log(chalk.dim(` β†’ ${folder}/ (already exists)`)); + } else { await fs.ensureDir(folderPath); logger.log(chalk.dim(` βœ“ ${folder}/`)); - } else { - logger.log(chalk.dim(` β†’ ${folder}/ (already exists)`)); } } diff --git a/src/modules/wds/agents/eira-visual-designer.md b/src/modules/wds/agents/eira-visual-designer.md index 70b6a8930..43885e21c 100644 --- a/src/modules/wds/agents/eira-visual-designer.md +++ b/src/modules/wds/agents/eira-visual-designer.md @@ -67,10 +67,28 @@ Every visual you create should answer: "Why does this design choice trigger the ```markdown # PROJECT CONTEXT FOR EIRA -## Project Name: -[Project name] +**Phase:** 5 - Design System (Visual Design Exploration) +**Location:** D-Design-System/01-Visual-Design/ +**Prerequisites:** NONE - Brand identity is independent of product! -## Strategic Foundation: +## 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 to Customer (VTC): [What value does this product deliver? Why should users care?] diff --git a/src/modules/wds/agents/freya-ux.agent.yaml b/src/modules/wds/agents/freya-ux.agent.yaml index 7f0be05ff..339cbb8ed 100644 --- a/src/modules/wds/agents/freya-ux.agent.yaml +++ b/src/modules/wds/agents/freya-ux.agent.yaml @@ -8,10 +8,11 @@ agent: title: WDS Designer icon: 🎨 module: wds + hasSidecar: false persona: role: Strategic UX Designer + Your Design Thinking Partner - + identity: | I'm Freya, named after the Norse goddess of beauty, magic, and strategy. @@ -40,52 +41,37 @@ agent: **Agent References**: When mentioning other WDS agents, always use the format: "[Name] WDS [Role] Agent" (e.g., "Saga WDS Analyst Agent", "Idunn WDS PM Agent") - micro_guides: | - **When I need detailed guidance, I load these micro-guides:** - - **Strategic Design** β†’ data/agent-guides/freya/strategic-design.md - - Before designing anything (connect to VTC, Trigger Map, Customer Awareness) - - VTC connection, driving forces, Golden Circle hierarchy - - **Specification Quality** β†’ data/agent-guides/freya/specification-quality.md - - Before creating specs (logical explanations, purpose-based naming) - - Section-first workflow, multi-language, developer trust - - **Interactive Prototyping** β†’ data/agent-guides/freya/interactive-prototyping.md - - When creating HTML prototypes (prototypes as thinking tools) - - Validation process, fidelity levels, Design System integration - - **Content Creation** β†’ data/agent-guides/freya/content-creation.md - - Before creating strategic content (headlines, features, sections) - - 6-model framework, workshop vs quick mode, content purpose - - **Design System** β†’ data/agent-guides/freya/design-system.md - - When Phase 5 enabled (organic growth, opportunity/risk assessment) - - Three modes, component operations, foundation first + principles: | + **Micro-Guides (load when needed):** + - Strategic Design β†’ data/agent-guides/freya/strategic-design.md (before designing, VTC/Trigger Map connection) + - Specification Quality β†’ data/agent-guides/freya/specification-quality.md (creating specs, logical explanations) + - Interactive Prototyping β†’ data/agent-guides/freya/interactive-prototyping.md (HTML prototypes, validation) + - Content Creation β†’ data/agent-guides/freya/content-creation.md (strategic content, 6-model framework) + - Design System β†’ data/agent-guides/freya/design-system.md (Phase 5, organic growth, Figma integration) - principles: - workflow_management: | - - On activation: Check conversations (conversation-persistence/check-conversations.md) - - Before work: Check task appropriateness (task-reflection.md) - - On close: Save conversation (conversation-persistence/save-conversation.md) - - Show presentation (freya-presentation.md), then project analysis (project-analysis-router.md) - - collaboration: | - - My domain: Phases 4 (UX Design), 5 (Design System - optional), 7 (Testing) - - Other domains: Hand over seamlessly to specialized agent - - BMM overlap: I replace Sally (UX Designer) when WDS is installed - - core_approach: | - - Load strategic context BEFORE designing (micro-guide: strategic-design.md) - - Specifications must be logical and complete (micro-guide: specification-quality.md) - - Prototypes validate before production (micro-guide: interactive-prototyping.md) - - Content is strategic, not decorative (micro-guide: content-creation.md) - - Design systems grow organically (micro-guide: design-system.md if Phase 5) - - project_tracking: | - - Update project outline when completing work - - Use specific file names: [TOPIC]-GUIDE.md, never generic README.md - - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md + **Workflow Management:** + - On activation: Check conversations (conversation-persistence/check-conversations.md) + - Before work: Check task appropriateness (task-reflection.md) + - On close: Save conversation (conversation-persistence/save-conversation.md) + - Show presentation (freya-presentation.md), then project analysis (project-analysis-router.md) + + **Collaboration:** + - My domain: Phases 4 (UX Design), 5 (Design System - optional), 7 (Testing) + - Other domains: Hand over seamlessly to specialized agent + - BMM overlap: I replace Sally (UX Designer) when WDS is installed + + **Core Approach:** + - Load strategic context BEFORE designing (micro-guide: strategic-design.md) + - Specifications must be logical and complete (micro-guide: specification-quality.md) + - Prototypes validate before production (micro-guide: interactive-prototyping.md) + - Content is strategic, not decorative (micro-guide: content-creation.md) + - Design systems grow organically (micro-guide: design-system.md if Phase 5) + - Visual refinement via Figma when design system incomplete (automated MCP integration) + + **Project Tracking:** + - Update project outline when completing work + - Use specific file names: [TOPIC]-GUIDE.md, never generic README.md + - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md menu: - trigger: workflow-status diff --git a/src/modules/wds/agents/idunn-pm.agent.yaml b/src/modules/wds/agents/idunn-pm.agent.yaml index 25f9fe2cb..a38ce1c8e 100644 --- a/src/modules/wds/agents/idunn-pm.agent.yaml +++ b/src/modules/wds/agents/idunn-pm.agent.yaml @@ -8,10 +8,11 @@ agent: title: WDS Product Manager icon: πŸ“‹ module: wds + hasSidecar: false persona: role: Strategic Product Manager + Technical Coordinator + Handoff Specialist - + identity: | I'm Idunn, named after the Norse goddess of renewal and youth. @@ -32,40 +33,33 @@ agent: **Agent References**: When mentioning other WDS agents, use: "[Name] WDS [Role] Agent" - micro_guides: | - **When I need detailed guidance, I load these micro-guides:** - - **Platform Requirements** β†’ data/agent-guides/idunn/platform-requirements.md - - During Phase 3 or technical foundation work - - Architecture, data model, integrations, security, performance, constraints - - **Design Handoffs** β†’ data/agent-guides/idunn/design-handoffs.md - - During Phase 6 or preparing BMM handoff - - DD-XXX files, complete PRD, acceptance criteria, continuous handoff pattern + principles: | + **Micro-Guides (load when needed):** + - Platform Requirements β†’ data/agent-guides/idunn/platform-requirements.md (Phase 3, technical foundation) + - Design Handoffs β†’ data/agent-guides/idunn/design-handoffs.md (Phase 6, BMM handoff preparation) - principles: - workflow_management: | - - On activation: Check conversations (conversation-persistence/check-conversations.md) - - Before work: Check task appropriateness (task-reflection.md) - - On close: Save conversation (conversation-persistence/save-conversation.md) - - Show presentation (idunn-presentation.md), then project analysis (project-analysis/instructions.md) - - collaboration: | - - My domain: Phases 3 (Platform Requirements), 6 (Design Deliveries) - - Other domains: Hand over seamlessly to specialized agent - - Note: I do NOT replace BMM PM Agent (different focus: technical foundation + handoffs) - - core_approach: | - - Technical foundation in parallel with design (micro-guide: platform-requirements.md) - - Package complete flows for BMM handoff (micro-guide: design-handoffs.md) - - Reference, don't duplicate (link to requirements, don't copy) - - Organize by value (epic-based, testable units) - - Continuous handoff pattern (don't wait for everything) - - project_tracking: | - - Update project outline when completing work - - File naming: [TOPIC]-GUIDE.md, DD-XXX-[epic-name].yaml - - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md + **Workflow Management:** + - On activation: Check conversations (conversation-persistence/check-conversations.md) + - Before work: Check task appropriateness (task-reflection.md) + - On close: Save conversation (conversation-persistence/save-conversation.md) + - Show presentation (idunn-presentation.md), then project analysis (project-analysis/instructions.md) + + **Collaboration:** + - My domain: Phases 3 (Platform Requirements), 6 (Design Deliveries) + - Other domains: Hand over seamlessly to specialized agent + - Note: I do NOT replace BMM PM Agent (different focus: technical foundation + handoffs) + + **Core Approach:** + - Technical foundation in parallel with design (micro-guide: platform-requirements.md) + - Package complete flows for BMM handoff (micro-guide: design-handoffs.md) + - Reference, don't duplicate (link to requirements, don't copy) + - Organize by value (epic-based, testable units) + - Continuous handoff pattern (don't wait for everything) + + **Project Tracking:** + - Update project outline when completing work + - File naming: [TOPIC]-GUIDE.md, DD-XXX-[epic-name].yaml + - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md menu: - trigger: workflow-status diff --git a/src/modules/wds/agents/saga-analyst.agent.yaml b/src/modules/wds/agents/saga-analyst.agent.yaml index 89c269ca4..bdfd9bb41 100644 --- a/src/modules/wds/agents/saga-analyst.agent.yaml +++ b/src/modules/wds/agents/saga-analyst.agent.yaml @@ -8,7 +8,7 @@ agent: title: WDS Analyst icon: πŸ“š module: wds - version: "1.0.0" + hasSidecar: false persona: role: Strategic Business Analyst + Product Discovery Partner @@ -38,54 +38,44 @@ agent: **Agent References**: When mentioning other WDS agents, use: "[Name] WDS [Role] Agent" - micro_guides: | - **When I need detailed guidance, I load these micro-guides:** - - **Discovery Conversation** β†’ data/agent-guides/saga/discovery-conversation.md - - During Product Brief, Alignment & Signoff, or any discovery work - - Natural listening pattern, reflection techniques, handling different user types - - **Trigger Mapping** β†’ data/agent-guides/saga/trigger-mapping.md - - During Phase 2 or psychology analysis - - Business goals β†’ users β†’ driving forces, Feature Impact Analysis - - **Strategic Documentation** β†’ data/agent-guides/saga/strategic-documentation.md - - When creating Product Brief, Project Outline, or documentation - - File naming, absolute paths, precision standards, maintenance + principles: | + **Micro-Guides (load when needed):** + - Discovery Conversation β†’ data/agent-guides/saga/discovery-conversation.md (Product Brief, Alignment & Signoff) + - Trigger Mapping β†’ data/agent-guides/saga/trigger-mapping.md (Phase 2, psychology analysis) + - Strategic Documentation β†’ data/agent-guides/saga/strategic-documentation.md (documentation creation) - principles: - workflow_management: | - - On activation: Check conversations (conversation-persistence/check-conversations.md) - - Before work: Check task appropriateness (task-reflection.md) - - On close: Save conversation (conversation-persistence/save-conversation.md) - - Show presentation (saga-presentation.md), then project analysis (project-analysis/instructions.md) - - collaboration: | - - My domain: Phases 1 (Product Brief), 2 (Trigger Mapping) - - Other domains: Hand over seamlessly to specialized agent - - BMM overlap: I replace Mary (Analyst) when WDS is installed - - core_approach: | - - Discovery through conversation (micro-guide: discovery-conversation.md) - - Connect business to psychology (micro-guide: trigger-mapping.md) - - Create coordinating documentation (micro-guide: strategic-documentation.md) - - One question at a time, listen deeply - - Find and treat as bible: **/project-context.md - - project_tracking: | - - Create project outline during Product Brief (10 micro-steps) - - Use absolute paths: docs/A-Product-Brief/, docs/B-Trigger-Map/ - - Alliterative persona names: Harriet the Hairdresser, Marcus Manager - - File naming: [TOPIC]-GUIDE.md, never generic README.md - - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md - - working_rhythm: | + **Working Rhythm:** 1. You share an idea or question 2. I listen and reflect back naturally (in my own words) 3. I confirm understanding, then wait for your confirmation 4. Once confirmed, we explore solutions together 5. I structure insights into clear documentation + **Workflow Management:** + - On activation: Check conversations (conversation-persistence/check-conversations.md) + - Before work: Check task appropriateness (task-reflection.md) + - On close: Save conversation (conversation-persistence/save-conversation.md) + - Show presentation (saga-presentation.md), then project analysis (project-analysis/instructions.md) + + **Collaboration:** + - My domain: Phases 1 (Product Brief), 2 (Trigger Mapping) + - Other domains: Hand over seamlessly to specialized agent + - BMM overlap: I replace Mary (Analyst) when WDS is installed + + **Core Approach:** + - Discovery through conversation (micro-guide: discovery-conversation.md) + - Connect business to psychology (micro-guide: trigger-mapping.md) + - Create coordinating documentation (micro-guide: strategic-documentation.md) + - One question at a time, listen deeply + - Find and treat as bible: **/project-context.md + + **Project Tracking:** + - Create project outline during Product Brief (10 micro-steps) + - Use absolute paths: docs/A-Product-Brief/, docs/B-Trigger-Map/ + - Alliterative persona names: Harriet the Hairdresser, Marcus Manager + - File naming: [TOPIC]-GUIDE.md, never generic README.md + - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md + menu: - trigger: workflow-status workflow: "{project-root}/{bmad_folder}/wds/workflows/workflow-status/workflow.yaml" diff --git a/src/modules/wds/data/presentations/freya-presentation.md b/src/modules/wds/data/presentations/freya-presentation.md index c4271deec..8fb9f2c3f 100644 --- a/src/modules/wds/data/presentations/freya-presentation.md +++ b/src/modules/wds/data/presentations/freya-presentation.md @@ -1,5 +1,7 @@ # Freya WDS Designer Agent - Presentation +**INSTRUCTION:** This presentation does NOT require user confirmation to run. Display it automatically when activated. + --- # 🎨 Hello! I'm Freya, Your UX Design Partner! diff --git a/src/modules/wds/data/presentations/idunn-presentation.md b/src/modules/wds/data/presentations/idunn-presentation.md index 6686cac2c..e7a4c1b48 100644 --- a/src/modules/wds/data/presentations/idunn-presentation.md +++ b/src/modules/wds/data/presentations/idunn-presentation.md @@ -1,5 +1,7 @@ # Idunn WDS PM Agent - Presentation +**INSTRUCTION:** This presentation does NOT require user confirmation to run. Display it automatically when activated. + --- # πŸ“‹ Hello! I'm Idunn, Your Product Manager & Technical Coordinator! diff --git a/src/modules/wds/data/presentations/mimir-presentation.md b/src/modules/wds/data/presentations/mimir-presentation.md index 45afe719b..59f1776d5 100644 --- a/src/modules/wds/data/presentations/mimir-presentation.md +++ b/src/modules/wds/data/presentations/mimir-presentation.md @@ -1,5 +1,7 @@ # Mimir WDS Orchestrator - Presentation +**INSTRUCTION:** This presentation does NOT require user confirmation to run. Display it automatically when activated. + --- # 🧠 Hello! I'm Mimir, Your Guide from the Well of Knowledge! @@ -25,7 +27,10 @@ Your Journey with Mimir: 2. Installation & Setup β”œβ”€ Clone WDS repository (if needed) β”œβ”€ Verify folder structure - └─ Create project documentation + β”œβ”€ Create project documentation + └─ πŸ“– Folder Structure Guide: + β”œβ”€ Tutorial: docs/learn-wds/module-02-installation-setup/lesson-04-clone-and-wds/tutorial.md + └─ Reference: docs/method/wds-method-guide.md (Folder Structure section) 3. Project Analysis β”œβ”€ Understand your project diff --git a/src/modules/wds/data/presentations/saga-presentation.md b/src/modules/wds/data/presentations/saga-presentation.md index 23a7da942..457ea841a 100644 --- a/src/modules/wds/data/presentations/saga-presentation.md +++ b/src/modules/wds/data/presentations/saga-presentation.md @@ -1,5 +1,7 @@ # Saga WDS Analyst Agent - Presentation +**INSTRUCTION:** This presentation does NOT require user confirmation to run. Display it automatically when activated. + --- # πŸ“š Hello! I'm Saga, Your Strategic Business Analyst! diff --git a/src/modules/wds/docs/README.md b/src/modules/wds/docs/docs-guide.md similarity index 100% rename from src/modules/wds/docs/README.md rename to src/modules/wds/docs/docs-guide.md diff --git a/src/modules/wds/docs/examples/WDS-Presentation/wds-workflow-status.yaml b/src/modules/wds/docs/examples/WDS-Presentation/wds-workflow-status.yaml index 6460c574b..5870c5cb5 100644 --- a/src/modules/wds/docs/examples/WDS-Presentation/wds-workflow-status.yaml +++ b/src/modules/wds/docs/examples/WDS-Presentation/wds-workflow-status.yaml @@ -51,7 +51,7 @@ workflow_status: - "01-product-brief.md" - "02-content-strategy.md" completed_date: "2025-12-24" - + phase_2_trigger_mapping: status: "complete" agent: "cascade-analyst" @@ -65,11 +65,11 @@ workflow_status: - "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" @@ -79,11 +79,11 @@ workflow_status: - "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" @@ -108,4 +108,3 @@ current_scenario: - "Testimonials Section" - "CTA Section" - "Footer Section" - diff --git a/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/2026-01-04-eira-visual-design-integration.md b/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/2026-01-04-eira-visual-design-integration.md index 0cd641720..b19ecb4cf 100644 --- a/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/2026-01-04-eira-visual-design-integration.md +++ b/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/2026-01-04-eira-visual-design-integration.md @@ -11,9 +11,11 @@ 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 2.5 "Visual Design Brief" - a creative exploration phase between strategy (Phase 2) and detailed scenarios (Phase 4) where wild visual concepts are generated before locking into detailed specs. +**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. -**Core Principle:** Strategy β†’ Creative Exploration β†’ Detailed Execution +**Location:** `D-Design-System/01-Visual-Design/` + +**Core Principle:** Strategy (Phase 1 & 2) β†’ Visual Exploration (Phase 5) β†’ Detailed Execution (Phase 4) --- @@ -48,37 +50,64 @@ Phase 2: Trigger Mapping β”œβ”€ Psychological triggers └─ User context (informs device priorities) -Phase 2.5: Visual Design Brief ← NEW! +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 +Phase 3: PRD/Platform (Optional) β”œβ”€ Technical foundation -└─ Device priorities (informed by Phase 2.5) +└─ Device priorities (informed by Phase 5 visual direction) Phase 4: UX Design (Scenarios) β”œβ”€ Detailed conceptual specs -β”œβ”€ High-fidelity mockups (using approved direction) +β”œβ”€ 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 2.5: Visual Design Brief (Detailed) +## 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 @@ -109,6 +138,12 @@ For each key page (homepage, features, pricing, etc.): ## 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 diff --git a/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/agent-log-2026-01-08-html-to-design.md b/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/agent-log-2026-01-08-html-to-design.md new file mode 100644 index 000000000..518bdc5a0 --- /dev/null +++ b/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/agent-log-2026-01-08-html-to-design.md @@ -0,0 +1,124 @@ +# 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/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/html-to-design-tools-summary.md b/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/html-to-design-tools-summary.md new file mode 100644 index 000000000..2663115a7 --- /dev/null +++ b/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/html-to-design-tools-summary.md @@ -0,0 +1,148 @@ +# 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/interactive-prototypes/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/interactive-prototypes/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/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/html-to-design-work-summary.md b/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/html-to-design-work-summary.md new file mode 100644 index 000000000..d63d4a142 --- /dev/null +++ b/src/modules/wds/docs/examples/wds-v6-conversion/session-logs/html-to-design-work-summary.md @@ -0,0 +1,143 @@ +# 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/interactive-prototypes/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/interactive-prototypes/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/src/modules/wds/docs/learn-wds/00-course-overview.md b/src/modules/wds/docs/learn-wds/00-course-overview.md index ef0a0e049..5b5d7f4b9 100644 --- a/src/modules/wds/docs/learn-wds/00-course-overview.md +++ b/src/modules/wds/docs/learn-wds/00-course-overview.md @@ -2,7 +2,7 @@ **Master the complete WDS methodology and become indispensable as a designer in the AI era** -https://www.youtube.com/watch?v=CQ5Aai_r-uo +[Watch the Course Introduction Video](https://www.youtube.com/watch?v=CQ5Aai_r-uo) --- diff --git a/src/modules/wds/docs/learn-wds/course-explainers/00-getting-started-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/docs/learn-wds/course-explainers/00-getting-started-YOUTUBE-SHOW-NOTES.md deleted file mode 100644 index e0570de15..000000000 --- a/src/modules/wds/docs/learn-wds/course-explainers/00-getting-started-YOUTUBE-SHOW-NOTES.md +++ /dev/null @@ -1,151 +0,0 @@ -# YouTube Show Notes: Module 00 - Getting Started with WDS - -**Video Link:** -https://youtu.be/qYPYx01YLUc - -**Video Title:** -Getting Started with Whiteport Design Studio - Your Path to Becoming a Linchpin Designer - ---- - -## πŸ“Ί Video Description - -Standing at a crossroads? Feeling the pressure of AI changing everything about design? You're not alone. - -This 15-minute conversation explores the most important choice you'll make as a designer in the AI era: Will you be a factory worker doing predictable outputs, or a linchpin designer who creates strategic value? - -**In this module you'll discover:** -βœ… The paradigm shift: Design becomes specification -βœ… The four core deliverables that transform your work -βœ… Why specifications preserve your creative brilliance for eternity -βœ… The simple path to get started (about 10 hours to learn) -βœ… How AI becomes your creative partner, not your replacement - -This isn't about learning new tools. This is about choosing your future as a designer. - -**Time:** ~15 minutes -**Prerequisites:** None - perfect starting point -**Created by:** MΓ₯rten Angner, UX designer and founder of Whiteport (Sweden) -**Framework:** Open-source module for BMad Method -**Cost:** Free and open-source - ---- - -## ⏱️ Timestamps - -_To be added after video production based on transcript_ - ---- - -## 🎯 Key Concepts - -πŸ”Ή **The Paradigm Shift** - Design becomes specification, code is just the printout - -πŸ”Ή **Factory Designer Path** - Predictable outputs, competing with AI, replaceable - -πŸ”Ή **Linchpin Designer Path** - Strategic thinking, walking into chaos and creating order, indispensable - -πŸ”Ή **Four Core Deliverables:** -- Product Brief (strategic foundation) -- Trigger Map (user psychology + business impact) -- Scenario Specifications (your thinking captured for eternity) -- Design System Foundation (scaling your decisions) - -πŸ”Ή **Conceptual Specifications** - Where your creative brilliance becomes immortal - -πŸ”Ή **AI as Creative Partner** - Not replacement, but collaborator who preserves your genius - ---- - -## πŸ“š Course Resources - -### **This Module** -πŸ“– **Module 00 Overview:** Getting Started Guide -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview/00-getting-started-overview.md - -### **Get Started with WDS** -🌊 **WDS Presentation Page:** Learn about the methodology -https://whiteport.com/whiteport-design-studio/ - -πŸ› οΈ **Installation Guide:** Download IDE, Install WDS -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md - -πŸ“– **Quick Start:** Get up and running fast -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/quick-start.md - -πŸ“– **About WDS:** Philosophy and approach -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/about-wds.md - -### **Community & Support** -πŸ’¬ **BMad Discord:** Real designers helping each other -[Discord invite link] - -πŸ“– **GitHub Discussions:** Ask questions, share your journey -https://github.com/whiteport-collective/whiteport-design-studio/discussions - ---- - -## πŸŽ“ Course Navigation - -**◀️ Previous Module:** _This is the first module_ - -**▢️ Next Module:** Module 01 - Why WDS Matters -πŸ“Ί Video: https://www.youtube.com/watch?v=Xhw5JB7mpxw -πŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-01-why-wds-matters/module-01-overview.md - -**πŸ“š Full Course Overview:** -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md - ---- - -## βœ… Next Steps - -1. βœ… Watch Module 01: Why WDS Matters -2. βœ… Download an IDE (Cursor, VS Code, Windsurf) -3. βœ… Review the prerequisites and choose your learning path -4. βœ… Install WDS following the installation guide -5. βœ… Join the BMad Discord community -6. βœ… Start creating your four deliverables - -**Time Investment:** About 10 hours to learn the methodology -**Payoff:** A lifetime of being indispensable - ---- - -## 🎨 About Whiteport Design Studio (WDS) - -WDS is an AI-augmented design methodology created by MΓ₯rten Angner, UX designer and founder of Whiteport, a design and development agency from Sweden. WDS is a module for the BMad Method - an open-source AI-augmented development framework. - -**The Mission:** Give designers everywhere free access to AI agents specifically tailored for design work, while preserving and amplifying their creative thinking through specifications. - -**The Reality:** Traditional design handoffs are breaking down. Designers need a methodology where their thinking can be preserved and amplified through AI implementation, not lost in translation. - -**The Transformation:** Designers become 5x more productive while maintaining creative control and strategic leadership. - ---- - -## 🏷️ Tags - -#UXDesign #AIDesign #LinchpinDesigner #WhiteportDesignStudio #WDS #BMadMethod #DesignThinking #GettingStarted #DesignSpecification #AIEra #DesignTransformation #CreativeIntegrity #ConceptualSpecifications #DesignCourse #LearnDesign - ---- - -## πŸ’‘ The Choice - -You're standing at the most important moment in design history. - -**Factory work** - comfortable, familiar, but AI is getting better every day -**Linchpin work** - strategic, irreplaceable, where your brilliance becomes immortal - -The question isn't whether AI will change design - it already has. - -The question is: **Which side of the line are you on?** - ---- - -**Remember:** -- The design becomes the specification -- The specification becomes the product -- The code is just the printout - -**Ready to begin your transformation? Start with Module 01! πŸš€** diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module 00-transcript.srt b/src/modules/wds/docs/learn-wds/course-explainers/Module 00-transcript.srt new file mode 100644 index 000000000..30c62006f --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module 00-transcript.srt @@ -0,0 +1,635 @@ +1 +00:00:00,220 --> 00:00:02,723 +All right, let's get right into it. We're + +2 +00:00:02,723 --> 00:00:04,600 +talking about something that is sitting + +3 +00:00:04,600 --> 00:00:07,103 +at the absolute heart of being a designer + +4 +00:00:07,103 --> 00:00:08,980 +today. It's a choice, a really + +5 +00:00:08,980 --> 00:00:10,544 +fundamental choice that frankly, every + +6 +00:00:10,544 --> 00:00:13,360 +single one of us has to make now that + +7 +00:00:13,360 --> 00:00:16,176 +AI is in the picture. And really, it all + +8 +00:00:16,176 --> 00:00:18,053 +comes down to this one question. + +9 +00:00:18,053 --> 00:00:20,873 +Seriously, in the age of AI. Are you + +10 +00:00:20,873 --> 00:00:23,407 +going to be replaceable or are you going + +11 +00:00:23,407 --> 00:00:25,624 +to be indispensable? This isn't about the + +12 +00:00:25,624 --> 00:00:28,158 +software you use or how fast you can + +13 +00:00:28,158 --> 00:00:30,692 +work, it's about who you decide to be. + +14 +00:00:30,692 --> 00:00:33,225 +See, to really get this, you have to + +15 +00:00:33,225 --> 00:00:35,759 +understand that we are at a major turning + +16 +00:00:35,759 --> 00:00:38,293 +point. This isn't just some new trend or + +17 +00:00:38,293 --> 00:00:40,827 +another tool to learn now. This is a + +18 +00:00:40,827 --> 00:00:43,254 +genuine crossroads. And the path you take + +19 +00:00:43,254 --> 00:00:45,709 +from here is going to define your entire + +20 +00:00:45,709 --> 00:00:48,164 +career. OK, so look at these two paths. + +21 +00:00:48,164 --> 00:00:50,312 +On one side, you've got the factory + +22 +00:00:50,312 --> 00:00:51,847 +designer. This is probably pretty + +23 +00:00:51,847 --> 00:00:53,995 +familiar, right? You get a ticket, you + +24 +00:00:53,995 --> 00:00:56,143 +execute on it. You deliver some mockups. + +25 +00:00:56,143 --> 00:00:57,984 +It's predictable work. But here's the + +26 +00:00:57,984 --> 00:00:59,826 +catch. That's the work you're now + +27 +00:00:59,826 --> 00:01:02,557 +competing with AI to do. But then + +28 +00:01:02,557 --> 00:01:04,709 +there's the other path, the linchpin + +29 +00:01:04,709 --> 00:01:06,501 +designer. This person doesn't just + +30 +00:01:06,501 --> 00:01:09,011 +execute, they create order out of total + +31 +00:01:09,011 --> 00:01:11,880 +chaos. They find the human truth in a + +32 +00:01:11,880 --> 00:01:14,031 +project and deliver strategy. One is + +33 +00:01:14,031 --> 00:01:15,824 +replaceable, the other is indispensable. + +34 +00:01:15,824 --> 00:01:18,693 +So you might be asking, why is that + +35 +00:01:18,693 --> 00:01:21,203 +factory designer path so dangerous all of + +36 +00:01:21,203 --> 00:01:24,065 +a sudden?Well, it boils down to + +37 +00:01:24,065 --> 00:01:26,729 +this new threat that is just taking over + +38 +00:01:26,729 --> 00:01:28,727 +the Internet. And that threat is + +39 +00:01:28,727 --> 00:01:31,058 +something called AI slop. We are all + +40 +00:01:31,058 --> 00:01:33,389 +seeing it. The Internet is just getting + +41 +00:01:33,389 --> 00:01:35,054 +flooded with these generic soulless + +42 +00:01:35,054 --> 00:01:37,718 +interfaces. I mean, they look OK on the + +43 +00:01:37,718 --> 00:01:39,716 +surface. They've got all the right + +44 +00:01:39,716 --> 00:01:42,047 +buttons, but they feel empty. There's no + +45 +00:01:42,047 --> 00:01:43,890 +spark. No soul, nothing that actually + +46 +00:01:43,890 --> 00:01:45,864 +connects with a real human being. And + +47 +00:01:45,864 --> 00:01:48,119 +here's the part that's kind of tough to + +48 +00:01:48,119 --> 00:01:50,657 +hear, but we have to face it. AI is + +49 +00:01:50,657 --> 00:01:52,913 +amazing at that factory work. If your job + +50 +00:01:52,913 --> 00:01:55,451 +is just to churn out mockups and follow a + +51 +00:01:55,451 --> 00:01:56,861 +system, well, you're competing against + +52 +00:01:56,861 --> 00:01:58,552 +something that can do it instantly, + +53 +00:01:58,552 --> 00:02:00,244 +perfectly, and can try 100 different + +54 +00:02:00,244 --> 00:02:02,500 +versions in a minute. And you know what? + +55 +00:02:02,670 --> 00:02:05,477 +It never gets tired and it never needs a + +56 +00:02:05,477 --> 00:02:07,348 +coffee break. This creates a really + +57 +00:02:07,348 --> 00:02:09,842 +brutal new reality in the market. It used + +58 +00:02:09,842 --> 00:02:12,025 +to be that a mediocre, soulless product + +59 +00:02:12,025 --> 00:02:14,832 +would at least gets a launch and then it + +60 +00:02:14,832 --> 00:02:17,015 +would fail. But today, users can spot + +61 +00:02:17,015 --> 00:02:19,198 +that generic nobody cared about this vibe + +62 +00:02:19,198 --> 00:02:21,381 +a mile away. These products don't even + +63 +00:02:21,381 --> 00:02:23,642 +get the chance to fail. Anymore, they're + +64 +00:02:23,642 --> 00:02:25,856 +just ignored from the very beginning. OK, + +65 +00:02:25,856 --> 00:02:28,069 +so if competing with AI on production + +66 +00:02:28,069 --> 00:02:30,915 +work is a dead end, how in the world + +67 +00:02:30,915 --> 00:02:32,812 +do you become that indispensable lynchpin + +68 +00:02:32,812 --> 00:02:34,709 +designer? Well, it's not about working + +69 +00:02:34,709 --> 00:02:36,922 +harder. It's about a complete shift in + +70 +00:02:36,922 --> 00:02:39,768 +how you see your job. And that shift is + +71 +00:02:39,768 --> 00:02:41,665 +really the core of this methodology + +72 +00:02:41,665 --> 00:02:44,071 +called white port design. Audio, or WDS + +73 +00:02:44,071 --> 00:02:46,501 +for short, and it totally reframes what + +74 +00:02:46,501 --> 00:02:49,278 +you do with WTF. You're not just making + +75 +00:02:49,278 --> 00:02:51,708 +pictures of a product, you are literally + +76 +00:02:51,708 --> 00:02:53,444 +architecting the product itself. Think + +77 +00:02:53,444 --> 00:02:56,221 +about it this way, Your design is the + +78 +00:02:56,221 --> 00:02:58,303 +blueprint, it is the specification, the + +79 +00:02:58,303 --> 00:03:01,080 +code at the very end. That's just the + +80 +00:03:01,080 --> 00:03:03,163 +final print out of your brilliant + +81 +00:03:03,163 --> 00:03:05,762 +thinking. Now, this is so important + +82 +00:03:05,762 --> 00:03:07,976 +because a lot of people think that + +83 +00:03:07,976 --> 00:03:10,191 +working with AI is all about getting + +84 +00:03:10,191 --> 00:03:12,089 +better at writing prompts, right? Like + +85 +00:03:12,089 --> 00:03:14,304 +you're just a factory worker telling the + +86 +00:03:14,304 --> 00:03:16,835 +machine what to do. But with WDS, you + +87 +00:03:16,835 --> 00:03:18,416 +flip that entirely. Your strategic + +88 +00:03:18,416 --> 00:03:19,998 +thinking, your design decisions, that + +89 +00:03:19,998 --> 00:03:21,896 +becomes the input. You're not prompting, + +90 +00:03:21,896 --> 00:03:24,111 +you're leading. And this quote just nails + +91 +00:03:24,111 --> 00:03:26,551 +the mindset shift. We all think of + +92 +00:03:26,551 --> 00:03:28,914 +writing specs as the boring, tedious part + +93 +00:03:28,914 --> 00:03:31,616 +of the job, don't we? But in this + +94 +00:03:31,616 --> 00:03:33,642 +world, it's the exact opposite. Creating + +95 +00:03:33,642 --> 00:03:35,668 +the specification is the most important + +96 +00:03:35,668 --> 00:03:38,369 +thing you do. It's the moment you capture + +97 +00:03:38,369 --> 00:03:40,733 +your unique creative genius and make it + +98 +00:03:40,733 --> 00:03:43,096 +permanent. Make it immortal. So how does + +99 +00:03:43,096 --> 00:03:45,460 +this big idea of immortal genius actually? + +100 +00:03:45,540 --> 00:03:48,078 +Work in practice. This isn't just some + +101 +00:03:48,078 --> 00:03:50,253 +vague philosophy, it's a really concrete + +102 +00:03:50,253 --> 00:03:52,428 +process that's built around 4 specific + +103 +00:03:52,428 --> 00:03:54,604 +deliverables. These are the things a + +104 +00:03:54,604 --> 00:03:56,416 +linchpin designer actually produces. So + +105 +00:03:56,416 --> 00:03:59,317 +here they are, the artifacts of a true + +106 +00:03:59,317 --> 00:04:01,492 +linchpin. You start with the project + +107 +00:04:01,492 --> 00:04:04,030 +brief, getting everyone on the same page + +108 +00:04:04,030 --> 00:04:06,546 +about why we're even. Doing this, then + +109 +00:04:06,546 --> 00:04:09,201 +you create a trigger map to make sure + +110 +00:04:09,201 --> 00:04:10,861 +you're building things that users + +111 +00:04:10,861 --> 00:04:12,852 +actually need. After that, your brilliant + +112 +00:04:12,852 --> 00:04:14,844 +ideas get captured in crystal clear + +113 +00:04:14,844 --> 00:04:16,836 +scenario specs. And finally, the design + +114 +00:04:16,836 --> 00:04:19,159 +system makes sure that brilliance can be + +115 +00:04:19,159 --> 00:04:21,483 +scaled and repeated. See how each step + +116 +00:04:21,483 --> 00:04:24,138 +builds on the last. It's a system for + +117 +00:04:24,138 --> 00:04:26,926 +impact. So where does AI fit + +118 +00:04:26,926 --> 00:04:29,591 +in all of this? This is the beautiful + +119 +00:04:29,591 --> 00:04:32,256 +part. In the WDS world, AI agents are + +120 +00:04:32,256 --> 00:04:34,255 +your creative partners. They're like an + +121 +00:04:34,255 --> 00:04:35,921 +assistant you can brainstorm with, + +122 +00:04:35,921 --> 00:04:37,587 +explore different paths with debate + +123 +00:04:37,587 --> 00:04:39,919 +tradeoffs. And then once you've made the + +124 +00:04:39,919 --> 00:04:41,918 +smart decision, they become obsessed with + +125 +00:04:41,918 --> 00:04:43,251 +perfectly documenting your brilliance, + +126 +00:04:43,251 --> 00:04:46,062 +not trying to replace it. OK. O you're + +127 +00:04:46,062 --> 00:04:47,819 +probably thinking, this all sounds + +128 +00:04:47,819 --> 00:04:49,926 +amazing, but is it actually practical? + +129 +00:04:49,926 --> 00:04:52,736 +Can I really do this? Well, let's look + +130 +00:04:52,736 --> 00:04:55,546 +at how you can start making this change + +131 +00:04:55,546 --> 00:04:57,653 +literally today. To learn this entire + +132 +00:04:57,653 --> 00:04:59,760 +methodology from start to finish, it + +133 +00:04:59,760 --> 00:05:02,219 +takes about 10 hours. That's it. We're + +134 +00:05:02,219 --> 00:05:04,678 +talking about a 10 hour investment of + +135 +00:05:04,678 --> 00:05:06,683 +your time. To completely change the + +136 +00:05:06,683 --> 00:05:08,457 +direction of your career and getting + +137 +00:05:08,457 --> 00:05:10,230 +started couldn't be easier. The entire + +138 +00:05:10,230 --> 00:05:12,300 +course is free, it's open source, right + +139 +00:05:12,300 --> 00:05:14,370 +on GitHub. There are no subscriptions, no + +140 +00:05:14,370 --> 00:05:16,439 +secret fees. The only thing you'd ever + +141 +00:05:16,439 --> 00:05:18,804 +pay for are the AI credits you actually + +142 +00:05:18,804 --> 00:05:21,465 +use, which ends up being maybe 15 or 20 + +143 +00:05:21,465 --> 00:05:23,535 +bucks a month, and there's a whole + +144 +00:05:23,535 --> 00:05:25,604 +community on Discord ready to help you + +145 +00:05:25,604 --> 00:05:28,115 +out. So we're right back where we + +146 +00:05:28,115 --> 00:05:30,589 +started. The choice is right in front of + +147 +00:05:30,589 --> 00:05:33,372 +you. One path has you competing in a race + +148 +00:05:33,372 --> 00:05:35,846 +against AI that you just can't win. The + +149 +00:05:35,846 --> 00:05:38,010 +other path leads to you becoming that + +150 +00:05:38,010 --> 00:05:39,247 +strategic, indispensable designer whose + +151 +00:05:39,247 --> 00:05:41,412 +vision is so valuable it's treated like + +152 +00:05:41,412 --> 00:05:43,267 +gold. Ultimately, the tools and the + +153 +00:05:43,267 --> 00:05:45,122 +specific techniques don't matter as much + +154 +00:05:45,122 --> 00:05:47,329 +as the mindset. The real change happens + +155 +00:05:47,329 --> 00:05:49,199 +inside. It's about you deciding who you + +156 +00:05:49,199 --> 00:05:51,604 +want to be in this new world of design. + +157 +00:05:51,604 --> 00:05:53,742 +O, I'll leave you with that one last + +158 +00:05:53,742 --> 00:05:55,613 +question. Which designer do you choose to + +159 +00:05:55,613 --> 00:05:55,880 +become? diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module 02-transcript.srt b/src/modules/wds/docs/learn-wds/course-explainers/Module 02-transcript.srt new file mode 100644 index 000000000..0b550ed9c --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module 02-transcript.srt @@ -0,0 +1,807 @@ +1 +00:00:00,080 --> 00:00:01,915 +All right, let's dive into something + +2 +00:00:01,915 --> 00:00:04,363 +that, let's be honest, can feel a little + +3 +00:00:04,363 --> 00:00:06,504 +intimidating for a lot of designers. The + +4 +00:00:06,504 --> 00:00:08,340 +whole technical setup for the Whiteboard + +5 +00:00:08,340 --> 00:00:10,481 +Design Studio course, we're going to go + +6 +00:00:10,481 --> 00:00:13,234 +on a little journey here and the goal is + +7 +00:00:13,234 --> 00:00:15,681 +to take that feeling of, uh, this is + +8 +00:00:15,681 --> 00:00:18,129 +complicated and turn it into, OK, I got + +9 +00:00:18,129 --> 00:00:20,647 +this. Does this sound at all familiar?I + +10 +00:00:20,647 --> 00:00:22,861 +bet it does. This is probably the number + +11 +00:00:22,861 --> 00:00:24,798 +one thing we hear from amazing designers + +12 +00:00:24,798 --> 00:00:27,012 +who are totally ready to grow, but they + +13 +00:00:27,012 --> 00:00:29,226 +feel like the tools are this giant wall + +14 +00:00:29,226 --> 00:00:31,717 +in front of them. If that's you, I just + +15 +00:00:31,717 --> 00:00:34,485 +want you to know you are so not alone. In + +16 +00:00:34,485 --> 00:00:36,975 +fact, this is the perfect place for us to + +17 +00:00:36,975 --> 00:00:38,913 +start. And here's the absolute truth. The + +18 +00:00:38,913 --> 00:00:41,559 +thing you have to keep in mind?Every + +19 +00:00:41,559 --> 00:00:43,656 +single expert you admire, every designer + +20 +00:00:43,656 --> 00:00:46,452 +who seems to have it all figured out. + +21 +00:00:46,452 --> 00:00:48,549 +They all started right here, uncertain, + +22 +00:00:48,549 --> 00:00:50,995 +maybe a little nervous, wondering if they + +23 +00:00:50,995 --> 00:00:53,791 +could really get the hang of it. Well, + +24 +00:00:53,791 --> 00:00:56,587 +they did, and you will too. So let's + +25 +00:00:56,587 --> 00:00:59,033 +just face that technical hurdle head on. + +26 +00:00:59,033 --> 00:01:01,615 +Our first mission is super simple. We're + +27 +00:01:01,615 --> 00:01:03,819 +going to demystify all these tools. We're + +28 +00:01:03,819 --> 00:01:06,024 +going to take that scary sounding jargon + +29 +00:01:06,024 --> 00:01:08,228 +and justice, turn it into ideas that + +30 +00:01:08,228 --> 00:01:10,433 +actually make sense. First U Git and + +31 +00:01:10,433 --> 00:01:12,952 +GitHub, people get these mixed U all the + +32 +00:01:12,952 --> 00:01:15,157 +time. Are they the same thing? Not + +33 +00:01:15,157 --> 00:01:17,991 +really. And the best way to get it is + +34 +00:01:17,991 --> 00:01:20,510 +with this analogy. Think of Git as the + +35 +00:01:20,510 --> 00:01:22,566 +engine. It's the powerful. Thing working + +36 +00:01:22,566 --> 00:01:25,071 +behind the scenes, keeping track of every + +37 +00:01:25,071 --> 00:01:27,576 +single change you make. And GitHub, well, + +38 +00:01:27,576 --> 00:01:30,081 +GitHub is the car. It's the sleek, + +39 +00:01:30,081 --> 00:01:31,870 +user-friendly website where you actually + +40 +00:01:31,870 --> 00:01:34,733 +store and share your project. O what is + +41 +00:01:34,733 --> 00:01:36,880 +GitHub really? Let's just forget the + +42 +00:01:36,880 --> 00:01:39,027 +whole intimidating tech reputation for a + +43 +00:01:39,027 --> 00:01:41,532 +second. At its heart, it's basically just + +44 +00:01:41,532 --> 00:01:43,758 +cloud. Storage, but with a superpower and + +45 +00:01:43,758 --> 00:01:45,856 +that superpower is a time machine Every + +46 +00:01:45,856 --> 00:01:48,254 +time you save your work, it doesn't just + +47 +00:01:48,254 --> 00:01:50,651 +back it U, it creates a specific version + +48 +00:01:50,651 --> 00:01:53,349 +you can go back to at anytime It's like + +49 +00:01:53,349 --> 00:01:55,447 +the ultimate safety net for your entire + +50 +00:01:55,447 --> 00:01:57,844 +design process. OK, so now we know what + +51 +00:01:57,844 --> 00:02:00,542 +it is let's take that first big step we + +52 +00:02:00,542 --> 00:02:02,340 +are going to create your professional. + +53 +00:02:02,420 --> 00:02:04,604 +Home on the Internet your very first + +54 +00:02:04,604 --> 00:02:07,100 +GitHub repository and you are going to be + +55 +00:02:07,100 --> 00:02:09,284 +amazed at how simple this is. Seriously, + +56 +00:02:09,284 --> 00:02:12,092 +you just go to github.com & up. You know, + +57 +00:02:12,092 --> 00:02:14,276 +just like you would for any other + +58 +00:02:14,276 --> 00:02:17,084 +website. A little pro tip, try to pick a + +59 +00:02:17,084 --> 00:02:18,332 +professional sounding username because + +60 +00:02:18,332 --> 00:02:20,516 +you might end up sharing this with + +61 +00:02:20,516 --> 00:02:22,700 +clients one day. You verify your e-mail. + +62 +00:02:22,920 --> 00:02:24,768 +And, well, that's literally it. And + +63 +00:02:24,768 --> 00:02:26,924 +justice like that, you've done it. No, + +64 +00:02:26,924 --> 00:02:29,388 +really, take a second and let that sink + +65 +00:02:29,388 --> 00:02:31,544 +in. That thing that might have seemed + +66 +00:02:31,544 --> 00:02:33,700 +kind of complicated a few minutes ago, + +67 +00:02:33,700 --> 00:02:36,164 +you just did it. That feeling of progress + +68 +00:02:36,164 --> 00:02:38,320 +right there. We're going to keep building + +69 +00:02:38,320 --> 00:02:40,784 +on that. Now, when you create your first + +70 +00:02:40,784 --> 00:02:42,632 +project folder, they call it a + +71 +00:02:42,632 --> 00:02:44,772 +repository. You have a little choice to + +72 +00:02:44,772 --> 00:02:47,002 +make. You can have a single repo where + +73 +00:02:47,002 --> 00:02:48,953 +all your design specs and maybe some + +74 +00:02:48,953 --> 00:02:50,905 +future code live together, which by the + +75 +00:02:50,905 --> 00:02:52,856 +way, is perfect for beginners. Or you + +76 +00:02:52,856 --> 00:02:54,528 +could have separate repos for everything, + +77 +00:02:54,528 --> 00:02:56,758 +which is more of a big corporate thing + +78 +00:02:56,758 --> 00:02:58,709 +for this course. Trust me, we're going + +79 +00:02:58,709 --> 00:03:00,660 +with the single repo. It keeps everything + +80 +00:03:00,660 --> 00:03:02,890 +simple and all in one place. So once + +81 +00:03:02,890 --> 00:03:04,563 +you've named your repository and you + +82 +00:03:04,563 --> 00:03:06,867 +click that. The right button boom, that's + +83 +00:03:06,867 --> 00:03:09,551 +it. You are now officially a GitHub user. + +84 +00:03:09,551 --> 00:03:11,900 +You have a professional space to house + +85 +00:03:11,900 --> 00:03:14,248 +your work. Feels pretty good, right? OK, + +86 +00:03:14,248 --> 00:03:16,597 +now let's build the workshop where you'll + +87 +00:03:16,597 --> 00:03:18,945 +actually do the designing All right, we + +88 +00:03:18,945 --> 00:03:21,629 +have our cloud storage all set U Now + +89 +00:03:21,629 --> 00:03:23,978 +it's time to build your local workshop + +90 +00:03:23,978 --> 00:03:26,050 +we're going to install. Something called + +91 +00:03:26,050 --> 00:03:29,020 +an IDE, and I promise you it is not + +92 +00:03:29,020 --> 00:03:30,1000 +nearly as complicated as that acronym + +93 +00:03:30,1000 --> 00:03:33,970 +sounds. O what on earth is an IDE? It's + +94 +00:03:33,970 --> 00:03:36,280 +just a fancy acronym for your digital + +95 +00:03:36,280 --> 00:03:38,590 +workspace. And here's the best way to + +96 +00:03:38,590 --> 00:03:40,900 +think about it. If Microsoft Word is + +97 +00:03:40,900 --> 00:03:43,540 +where you write documents and IDE is your + +98 +00:03:43,540 --> 00:03:44,860 +workspace for crafting design + +99 +00:03:44,860 --> 00:03:46,904 +specifications for WDS. We highly, highly + +100 +00:03:46,904 --> 00:03:48,771 +recommend an app called Cursor because + +101 +00:03:48,771 --> 00:03:51,261 +it's built for the kind of AI assisted + +102 +00:03:51,261 --> 00:03:53,750 +work we'll be doing, and installing it is + +103 +00:03:53,750 --> 00:03:55,618 +something you've done 1000 times before. + +104 +00:03:55,618 --> 00:03:57,796 +You just download it, click through the + +105 +00:03:57,796 --> 00:03:59,352 +installer like any other application, + +106 +00:03:59,352 --> 00:04:01,842 +pick a light or dark theme, the important + +107 +00:04:01,842 --> 00:04:04,332 +choice, and then you sign in with that + +108 +00:04:04,332 --> 00:04:06,199 +brand new GitHub account you just + +109 +00:04:06,199 --> 00:04:08,039 +created. And that seamlessly connects + +110 +00:04:08,039 --> 00:04:09,912 +your local computer to your cloud + +111 +00:04:09,912 --> 00:04:12,097 +storage. OK, so inside your new IDE, + +112 +00:04:12,097 --> 00:04:14,282 +you're going to find something called a + +113 +00:04:14,282 --> 00:04:16,468 +terminal. And yet, for a lot of + +114 +00:04:16,468 --> 00:04:18,653 +designers, that little black box with the + +115 +00:04:18,653 --> 00:04:20,526 +blinking cursor looks pretty scary. It + +116 +00:04:20,526 --> 00:04:23,336 +feels like you need to be some kind of + +117 +00:04:23,336 --> 00:04:25,521 +coding genius just to touch it. But + +118 +00:04:25,521 --> 00:04:28,061 +here's the secret you. Do not need to + +119 +00:04:28,061 --> 00:04:30,197 +learn some new complex language for this + +120 +00:04:30,197 --> 00:04:32,333 +entire course. You are almost always just + +121 +00:04:32,333 --> 00:04:34,774 +going to be copying commands that we give + +122 +00:04:34,774 --> 00:04:36,910 +you and pasting them into the terminal. + +123 +00:04:36,910 --> 00:04:39,351 +That's it. It's just another way to talk + +124 +00:04:39,351 --> 00:04:41,182 +to your computer typing instead of + +125 +00:04:41,182 --> 00:04:43,318 +clicking. And now for the magic trick. + +126 +00:04:43,318 --> 00:04:45,759 +We've got our home in the cloud on + +127 +00:04:45,759 --> 00:04:47,971 +GitHub, and we've got our workshop. On + +128 +00:04:47,971 --> 00:04:50,219 +our computer, the next step is to connect + +129 +00:04:50,219 --> 00:04:52,748 +them. We're going to bring a copy of your + +130 +00:04:52,748 --> 00:04:54,996 +roject home. We do this with a process + +131 +00:04:54,996 --> 00:04:56,963 +called cloning, and all that really means + +132 +00:04:56,963 --> 00:04:59,491 +is making a local copy of your project on + +133 +00:04:59,491 --> 00:05:01,177 +your computer that stays perfectly In + +134 +00:05:01,177 --> 00:05:03,425 +Sync with what's on GitHub. You can think + +135 +00:05:03,425 --> 00:05:05,673 +of it exactly like Dropbox sync, but with + +136 +00:05:05,673 --> 00:05:07,359 +that super powerful version history that + +137 +00:05:07,359 --> 00:05:09,471 +time. Machine built right in and the + +138 +00:05:09,471 --> 00:05:11,819 +process is just so simple. You copy the + +139 +00:05:11,819 --> 00:05:14,168 +URL from your GitHub page, you open U + +140 +00:05:14,168 --> 00:05:16,516 +that terminal in your IDE and you just + +141 +00:05:16,516 --> 00:05:18,864 +type git clone and then paste the link. + +142 +00:05:18,864 --> 00:05:21,506 +But now check out Step 4. This is the + +143 +00:05:21,506 --> 00:05:23,854 +really cool part. If you don't happen to + +144 +00:05:23,854 --> 00:05:26,202 +have git installed yet, your IDE is smart + +145 +00:05:26,202 --> 00:05:28,904 +enough to see that it'll. Pop up and ask + +146 +00:05:28,904 --> 00:05:31,501 +if you want to install it, you click 1 + +147 +00:05:31,501 --> 00:05:33,521 +button and it does everything for you. + +148 +00:05:33,521 --> 00:05:36,407 +And just like that get us set U OK? With + +149 +00:05:36,407 --> 00:05:38,427 +all the tools locked and loaded, we've + +150 +00:05:38,427 --> 00:05:40,736 +made it to the final and honestly the + +151 +00:05:40,736 --> 00:05:42,756 +most exciting part of this whole setup. + +152 +00:05:42,756 --> 00:05:45,064 +It's time to bring in the White Port + +153 +00:05:45,064 --> 00:05:46,796 +Design Studio methodology and meet your + +154 +00:05:46,796 --> 00:05:49,268 +personal AI guide, Mimir. First, you'll + +155 +00:05:49,268 --> 00:05:51,571 +create a special folder called Docs, and + +156 +00:05:51,571 --> 00:05:54,533 +what's so cool about this is it lays out + +157 +00:05:54,533 --> 00:05:56,836 +the entire WDC process for you. These + +158 +00:05:56,836 --> 00:05:58,810 +eight folders aren't just random names, + +159 +00:05:58,810 --> 00:06:00,785 +they are the complete battle tested + +160 +00:06:00,785 --> 00:06:02,759 +design methodology that's going to guide + +161 +00:06:02,759 --> 00:06:05,720 +you all the way from the first idea to + +162 +00:06:05,720 --> 00:06:07,695 +the final delivery. This folder becomes + +163 +00:06:07,695 --> 00:06:10,110 +the single source of truth. For your + +164 +00:06:10,110 --> 00:06:12,558 +entire project and now you meet your + +165 +00:06:12,558 --> 00:06:15,007 +guide. Mimir is the AI orchestrator for + +166 +00:06:15,007 --> 00:06:17,806 +WDS. And what this means is that from + +167 +00:06:17,806 --> 00:06:20,255 +this moment forward, you are never alone. + +168 +00:06:20,255 --> 00:06:22,703 +Anytime you feel stuck, anytime you have + +169 +00:06:22,703 --> 00:06:25,502 +a question or you just need a little + +170 +00:06:25,502 --> 00:06:27,951 +direction, you just type at WD Schmear + +171 +00:06:27,951 --> 00:06:30,715 +right there in your IDE. And your guide + +172 +00:06:30,715 --> 00:06:33,039 +will be there to help you out. And with + +173 +00:06:33,039 --> 00:06:34,846 +that, you're done. The set is complete. + +174 +00:06:34,846 --> 00:06:37,170 +You are ready to go. But hey, before we + +175 +00:06:37,170 --> 00:06:39,236 +move on, let's just hit pause for a + +176 +00:06:39,236 --> 00:06:41,044 +second and look back at everything you + +177 +00:06:41,044 --> 00:06:43,110 +just did. No, seriously, take a moment. A + +178 +00:06:43,110 --> 00:06:45,175 +lot of designers get stuck at this stage + +179 +00:06:45,175 --> 00:06:47,241 +for a long time, but you just pushed + +180 +00:06:47,241 --> 00:06:49,307 +right through it. Do you realize what a + +181 +00:06:49,307 --> 00:06:52,118 +big deal that is?I mean, look + +182 +00:06:52,118 --> 00:06:54,611 +at this list. You created a GitHub + +183 +00:06:54,611 --> 00:06:56,392 +account and a professional repository, + +184 +00:06:56,392 --> 00:06:58,529 +you installed a professional grade IDE, + +185 +00:06:58,529 --> 00:07:01,022 +you actually used the command line to + +186 +00:07:01,022 --> 00:07:03,159 +clone your first project, you integrated + +187 +00:07:03,159 --> 00:07:05,296 +the entire WDS framework, and you + +188 +00:07:05,296 --> 00:07:07,432 +activated your personal AI guide. This + +189 +00:07:07,432 --> 00:07:09,925 +wasn't just about clicking a few buttons, + +190 +00:07:09,925 --> 00:07:12,712 +this was a transformation. You may have + +191 +00:07:12,712 --> 00:07:14,837 +started out feeling like a nervous + +192 +00:07:14,837 --> 00:07:17,316 +beginner, but right now you are a + +193 +00:07:17,316 --> 00:07:19,795 +designer who is equipped with a fully + +194 +00:07:19,795 --> 00:07:21,566 +professional industry standard set. O. + +195 +00:07:21,566 --> 00:07:23,691 +Let's end with this thought. After + +196 +00:07:23,691 --> 00:07:25,461 +everything you just accomplished, there + +197 +00:07:25,461 --> 00:07:28,294 +is no more. I might be able to + +198 +00:07:28,294 --> 00:07:31,128 +do this. You just proved to yourself that + +199 +00:07:31,128 --> 00:07:33,836 +you are able. The setup is done, + +200 +00:07:33,836 --> 00:07:36,174 +your environment is ready, and your guide + +201 +00:07:36,174 --> 00:07:38,846 +me mayor is waiting for you. Welcome to + +202 +00:07:38,846 --> 00:07:39,180 +WDS. diff --git a/src/modules/wds/docs/learn-wds/course-explainers/00-getting-started-NOTEBOOKLM-PROMPT.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-00-notebook-lm-prompt.md similarity index 100% rename from src/modules/wds/docs/learn-wds/course-explainers/00-getting-started-NOTEBOOKLM-PROMPT.md rename to src/modules/wds/docs/learn-wds/course-explainers/Module-00-notebook-lm-prompt.md diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module-00-thumbnail-prompt.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-00-thumbnail-prompt.md new file mode 100644 index 000000000..da7a9e379 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-00-thumbnail-prompt.md @@ -0,0 +1,33 @@ +**IMPORTANT: Use the reference image as your exact style guide. Match all visual elements, colors, layout, and character design.** + +Create a 1920x1080px YouTube thumbnail matching the reference image style. + +**What to Change from Reference:** + +**Headlines (Left side):** +- Line 1: "DESIGNERS DILEMMA" (Rubrik Light, 91pt, white) +- Line 2: "DELIVER FROM SPECS OR" (Rubrik Bold, 91pt, white) +- Line 3: "BECOME INDISPENSABLE!" (Rubrik Bold, 91pt, white) +- Line spacing: 79pt + +**Module Badge (Bottom-left):** +- "00 Getting started" (Rubrik Regular, 108pt, white on red #ff1744) + +**Character Activity:** +- Woman looking at wireframe sketches on the table +- Skip the tablet +- Keep the character stylized as it is +- Expression: Thoughtful, considering options + +**Background Pattern:** +- Add subtle tech/design elements (wireframes, UI shapes) +- Keep as in reference image + +**Workspace Props:** +- Add: wireframe sketches, design notes + +**Keep Everything Else from Reference:** +- Top-right branding text +- Character design and style +- Color scheme and layout + diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module-00-youtube-show-notes.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-00-youtube-show-notes.md new file mode 100644 index 000000000..8e0badcac --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-00-youtube-show-notes.md @@ -0,0 +1,78 @@ +Module 00 - Your Path to Becoming a Linchpin Designer - WDS Course + + +Standing at a crossroads? This 15-minute video explores the most important choice you'll make as a designer in the AI era: Will you be replaceable or indispensable? + +*You'll discover:* +βœ… The paradigm shift: Design becomes specification +βœ… Four core deliverables that transform your work +βœ… Why specifications preserve your creative brilliance +βœ… How to get started (10 hours to learn) +βœ… AI as your creative partner, not replacement + +*Free & open-source* | Created by MΓ₯rten Angner, Whiteport (Sweden) + +⏱️ Timestamps + +00:00 The Fundamental Choice +00:30 Two Paths: Factory vs Linchpin Designer +01:22 The Threat of AI Slop +02:25 How to Become Indispensable +02:38 The WDS Paradigm Shift +03:25 Specifications as Creative Genius +03:46 The Four Core Deliverables +04:25 AI as Your Creative Partner +04:45 Getting Started: 10 Hours to Transform +05:26 Your Choice, Your Future + +🎯 Two Paths + +*Factory Designer* - Predictable outputs, competing with AI, replaceable +*Linchpin Designer* - Strategic thinking, creating order from chaos, indispensable + +*Four Core Deliverables:* +β€’ Product Brief β€’ Trigger Map β€’ Scenario Specifications β€’ Design System Foundation + +πŸ“š Course Resources + +🌊 *WDS Presentation:* + + +πŸ› οΈ *Installation Guide:* + + +πŸ“– *Quick Start:* + + +πŸ’¬ *Discord Community:* +[Discord invite link] + +πŸ“– *GitHub Discussions:* + + +▢️ *Next Module:* Module 01 - Why WDS Matters + + +πŸ“š *Full Course:* + + +βœ… *Next Steps:* +1. Watch Module 01 +2. Download an IDE (Cursor, VS Code, Windsurf) +3. Install WDS +4. Join Discord community +5. Start creating your four deliverables + +*Time Investment:* 10 hours | *Payoff:* A lifetime of being indispensable + +🎨 *About WDS* +AI-augmented design methodology by MΓ₯rten Angner (Whiteport, Sweden). Free access to AI agents for designers while preserving creative thinking through specifications. Become 5x more productive with creative control. + +#UXDesign #AIDesign #LinchpinDesigner #WDS #BMadMethod #DesignSpecification + +πŸ’‘ *The Choice:* Factory work (replaceable) or Linchpin work (indispensable)? + +The design becomes the specification. The specification becomes the product. The code is just the printout. + +*Ready to transform? Start Module 01! πŸš€* + \ No newline at end of file diff --git a/src/modules/wds/docs/learn-wds/course-explainers/module-01-NOTEBOOKLM-PROMPT.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-01-notebook-lm-prompt.md similarity index 99% rename from src/modules/wds/docs/learn-wds/course-explainers/module-01-NOTEBOOKLM-PROMPT.md rename to src/modules/wds/docs/learn-wds/course-explainers/Module-01-notebook-lm-prompt.md index 844a7a8d4..3beede460 100644 --- a/src/modules/wds/docs/learn-wds/course-explainers/module-01-NOTEBOOKLM-PROMPT.md +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-01-notebook-lm-prompt.md @@ -293,7 +293,7 @@ At the end of the podcast, The Advocate should mention these resources: --- -## Instructions for NotebookLM +## NotebookLM Audio Generation Guidelines **Tone:** diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module-01-thumbnail-prompt.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-01-thumbnail-prompt.md new file mode 100644 index 000000000..5f9b85e03 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-01-thumbnail-prompt.md @@ -0,0 +1,33 @@ +**IMPORTANT: Use the reference image as your exact style guide. Match all visual elements, colors, layout, and character design.** + +Create a 1920x1080px YouTube thumbnail matching the reference image style. + +**What to Change from Reference:** + +**Headlines (Left side):** +- Line 1: "LET'S GET TO WORK:" (Rubrik Light, 91pt, white) +- Line 2: "HOW TO ACTUALLY BECOME" (Rubrik Bold, 91pt, white) +- Line 3: "IRREPLACEABLE AS A DESIGNER!" (Rubrik Bold, 91pt, white) +- Line spacing: 79pt + +**Module Badge (Bottom-left):** +- "01 Foundation" (Rubrik Regular, 108pt, white on red #ff1744) + +**Character Activity:** +- Woman piecing folders, files and puzzle pieces together in an intricate pattern on the table +- skip the tablet +- keep the carracter stylized as it is + + +**Background Pattern:** +- Add subtle architectural elements (pillars, building blocks) +- Keep as in reference image + +**Workspace Props:** +- Add: building blocks, structural diagrams + +**Keep Everything Else from Reference:** +- Top-right branding text +- Character design and style +- Color scheme and layout + diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module-01-transcript.srt b/src/modules/wds/docs/learn-wds/course-explainers/Module-01-transcript.srt new file mode 100644 index 000000000..1a5487ca5 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-01-transcript.srt @@ -0,0 +1,731 @@ +1 +00:00:00,240 --> 00:00:01,903 +If you're a designer, you've probably + +2 +00:00:01,903 --> 00:00:03,843 +felt that little knot in your stomach + +3 +00:00:03,843 --> 00:00:06,614 +every time you see a new AI tool that can + +4 +00:00:06,614 --> 00:00:08,277 +do something you thought was uniquely + +5 +00:00:08,277 --> 00:00:10,216 +yours. But what if that anxiety is + +6 +00:00:10,216 --> 00:00:11,879 +actually a signal not that you're + +7 +00:00:11,879 --> 00:00:13,819 +becoming obsolete, but that your role is + +8 +00:00:13,819 --> 00:00:15,759 +about to become more important than ever + +9 +00:00:15,759 --> 00:00:17,699 +before? In this explainer, we're going to + +10 +00:00:17,699 --> 00:00:19,916 +break down how to make that shift from + +11 +00:00:19,916 --> 00:00:21,314 +feeling threatened. To becoming + +12 +00:00:21,314 --> 00:00:23,073 +absolutely indispensable. This is the + +13 +00:00:23,073 --> 00:00:25,185 +question, right? It's on every designer's + +14 +00:00:25,185 --> 00:00:27,1000 +mind, and it's a totally valid fear. I + +15 +00:00:27,1000 --> 00:00:30,111 +mean, we see AI generating entire + +16 +00:00:30,111 --> 00:00:31,871 +interfaces, creating stunning images from + +17 +00:00:31,871 --> 00:00:34,686 +a text prompt, and it's so easy to + +18 +00:00:34,686 --> 00:00:37,501 +just wonder, OK, so where do I fit + +19 +00:00:37,501 --> 00:00:40,316 +in now? But what if we're asking the + +20 +00:00:40,316 --> 00:00:42,237 +wrong question?Entirely. The marketing + +21 +00:00:42,237 --> 00:00:44,492 +genius Seth Godin dropped this incredible + +22 +00:00:44,492 --> 00:00:47,123 +idea in his book Linchpin. He said + +23 +00:00:47,123 --> 00:00:49,753 +that the real value isn't just in + +24 +00:00:49,753 --> 00:00:52,384 +doing tasks, it's in walking into total + +25 +00:00:52,384 --> 00:00:55,014 +chaos and creating order. And man, that + +26 +00:00:55,014 --> 00:00:57,269 +one idea just flips the whole + +27 +00:00:57,269 --> 00:00:59,899 +conversation about AI on its head. So + +28 +00:00:59,899 --> 00:01:02,530 +this brings us to a fundamental choice. + +29 +00:01:02,750 --> 00:01:05,129 +AI is already here, it's already changing + +30 +00:01:05,129 --> 00:01:07,508 +the game. The real question isn't if + +31 +00:01:07,508 --> 00:01:09,886 +things will change, it's how are you + +32 +00:01:09,886 --> 00:01:12,605 +going to change with them? What kind of + +33 +00:01:12,605 --> 00:01:15,324 +designer are you going to choose to be? + +34 +00:01:15,324 --> 00:01:17,363 +Golden lays out 2 completely different + +35 +00:01:17,363 --> 00:01:19,742 +paths. On one side you've got the + +36 +00:01:19,742 --> 00:01:21,781 +replaceable worker. This is someone who + +37 +00:01:21,781 --> 00:01:23,225 +follows instructions creates. Predictable + +38 +00:01:23,225 --> 00:01:25,982 +stuff, and let's be real, AI is getting + +39 +00:01:25,982 --> 00:01:28,739 +scary good at that. But then there's the + +40 +00:01:28,739 --> 00:01:30,462 +other path, the indispensable linchpin. + +41 +00:01:30,462 --> 00:01:32,875 +This is the person who doesn't just + +42 +00:01:32,875 --> 00:01:35,632 +follow the map. They draw the map, they + +43 +00:01:35,632 --> 00:01:37,700 +invent solutions, they thrive in chaos, + +44 +00:01:37,700 --> 00:01:39,423 +and maybe most importantly, they + +45 +00:01:39,423 --> 00:01:41,836 +genuinely care. OK, so this whole factory + +46 +00:01:41,836 --> 00:01:44,275 +versus lynchpin idea. Sounds great in a + +47 +00:01:44,275 --> 00:01:46,866 +book, but what does it actually mean in + +48 +00:01:46,866 --> 00:01:49,456 +the real world of design? What does this + +49 +00:01:49,456 --> 00:01:51,399 +look like in your day-to-day projects? + +50 +00:01:51,399 --> 00:01:53,990 +Let's dig in. The heart of lynchpin work, + +51 +00:01:53,990 --> 00:01:56,256 +according to Godin, is something he calls + +52 +00:01:56,256 --> 00:01:58,199 +emotional labor. Now, this isn't about + +53 +00:01:58,199 --> 00:02:00,790 +being weepy at your desk. It's the hard, + +54 +00:02:00,790 --> 00:02:02,732 +often invisible work of empathy. It's + +55 +00:02:02,732 --> 00:02:04,903 +about, really. Connecting with people and + +56 +00:02:04,903 --> 00:02:07,083 +truly, deeply caring about the final + +57 +00:02:07,083 --> 00:02:09,989 +outcome. So what is emotional labor for a + +58 +00:02:09,989 --> 00:02:11,805 +designer? It's user centric creativity. + +59 +00:02:11,805 --> 00:02:14,348 +That's it. It's taking that genuine care + +60 +00:02:14,348 --> 00:02:16,891 +and putting it into action. It's that + +61 +00:02:16,891 --> 00:02:19,434 +uniquely human spark that lets you bridge + +62 +00:02:19,434 --> 00:02:22,340 +what a business needs with what our real + +63 +00:02:22,340 --> 00:02:24,326 +person actually wants. Creating an + +64 +00:02:24,326 --> 00:02:26,263 +experience that just feels right. You + +65 +00:02:26,263 --> 00:02:28,845 +know an AI can generate 1000 layouts but + +66 +00:02:28,845 --> 00:02:31,105 +it cannot genuinely care. Not for real. + +67 +00:02:31,105 --> 00:02:34,010 +And this, this is where we get to the + +68 +00:02:34,010 --> 00:02:36,270 +good stuff. Your true value isn't your + +69 +00:02:36,270 --> 00:02:38,852 +mastery of figma or your ability to push + +70 +00:02:38,852 --> 00:02:41,435 +pixels around a screen. It's in the gifts + +71 +00:02:41,435 --> 00:02:44,017 +you bring to the table that are uniquely + +72 +00:02:44,017 --> 00:02:46,858 +human. The things that I, by its + +73 +00:02:46,858 --> 00:02:49,076 +very design, just can't copy. Let's + +74 +00:02:49,076 --> 00:02:51,293 +breakdown exactly what those are. It + +75 +00:02:51,293 --> 00:02:54,250 +really boils down to three key gifts that + +76 +00:02:54,250 --> 00:02:56,099 +make you irreplaceable. First, that + +77 +00:02:56,099 --> 00:02:58,686 +emotional labor we just talked about that + +78 +00:02:58,686 --> 00:03:00,904 +genuine sense of caring. Second, user + +79 +00:03:00,904 --> 00:03:03,121 +centric creativity. Your ability to be + +80 +00:03:03,121 --> 00:03:04,988 +the ultimate connector between. Business + +81 +00:03:04,988 --> 00:03:07,533 +goals and human needs. And 3rd, and this + +82 +00:03:07,533 --> 00:03:10,078 +is a big one, you have the gatekeeper + +83 +00:03:10,078 --> 00:03:12,304 +role. You're the one who protects the + +84 +00:03:12,304 --> 00:03:14,213 +user. You're the quality control. You're + +85 +00:03:14,213 --> 00:03:16,758 +the one who asks, does this actually make + +86 +00:03:16,758 --> 00:03:19,302 +sense? This chart does a fantastic job of + +87 +00:03:19,302 --> 00:03:20,893 +showing the incredible complexity. You're + +88 +00:03:20,893 --> 00:03:22,801 +managing all the time. You're constantly + +89 +00:03:22,801 --> 00:03:25,172 +thinking in five dimensions at once. Why + +90 +00:03:25,172 --> 00:03:27,215 +does this company even exist? What does + +91 +00:03:27,215 --> 00:03:29,258 +success look like? How is this product + +92 +00:03:29,258 --> 00:03:31,885 +going to get us there? Who are we even + +93 +00:03:31,885 --> 00:03:33,928 +building this for? And is it even + +94 +00:03:33,928 --> 00:03:35,680 +technically possible? An AI can analyze + +95 +00:03:35,680 --> 00:03:38,307 +these pieces 1 by 1, sure, but it can't + +96 +00:03:38,307 --> 00:03:40,350 +hold them all in this delicate balance + +97 +00:03:40,350 --> 00:03:42,393 +while also bringing that human element of + +98 +00:03:42,393 --> 00:03:44,728 +caring to the table. That right there is + +99 +00:03:44,728 --> 00:03:46,674 +your. Superpower OK, this slide gets + +100 +00:03:46,674 --> 00:03:49,526 +right to the heart of the shift you have + +101 +00:03:49,526 --> 00:03:51,743 +to make. We're moving away from just + +102 +00:03:51,743 --> 00:03:53,644 +making pretty pictures and hoping the + +103 +00:03:53,644 --> 00:03:55,545 +developers can read our minds. For + +104 +00:03:55,545 --> 00:03:57,763 +instance, instead of just handing over a + +105 +00:03:57,763 --> 00:03:59,347 +static mockup, you deliver a + +106 +00:03:59,347 --> 00:04:00,614 +specification that actually preserves + +107 +00:04:00,614 --> 00:04:02,832 +your intent. You say this password field + +108 +00:04:02,832 --> 00:04:05,050 +must have real time strength feedback to. + +109 +00:04:05,130 --> 00:04:06,722 +Encourage strong passwords because our + +110 +00:04:06,722 --> 00:04:08,951 +research showed security as a top user + +111 +00:04:08,951 --> 00:04:11,180 +concern. You see the difference? You go + +112 +00:04:11,180 --> 00:04:13,727 +from just hoping it works to knowing it + +113 +00:04:13,727 --> 00:04:16,274 +will work. Alright, so we've talked a lot + +114 +00:04:16,274 --> 00:04:19,140 +about the what and the why, but I'm sure + +115 +00:04:19,140 --> 00:04:21,687 +you're thinking OK great, but how? How do + +116 +00:04:21,687 --> 00:04:23,916 +I actually do this? That's where the + +117 +00:04:23,916 --> 00:04:26,041 +Whiteboard Design Studio or. D Framework + +118 +00:04:26,041 --> 00:04:28,806 +comes in. Think of it as your concrete + +119 +00:04:28,806 --> 00:04:31,571 +path, your how to guide for making this + +120 +00:04:31,571 --> 00:04:33,299 +transformation happen. It's really a + +121 +00:04:33,299 --> 00:04:35,372 +three-part journey. First you go deeper, + +122 +00:04:35,372 --> 00:04:37,791 +you truly understand the core purpose of + +123 +00:04:37,791 --> 00:04:40,211 +the business and the user's goals. Then + +124 +00:04:40,211 --> 00:04:42,630 +you build the practical skills to capture + +125 +00:04:42,630 --> 00:04:44,703 +your thinking as a clear specification, + +126 +00:04:44,703 --> 00:04:46,672 +maybe even working. Right inside the + +127 +00:04:46,672 --> 00:04:48,108 +development environment. And finally, you + +128 +00:04:48,108 --> 00:04:50,119 +step into a leadership role. And that's + +129 +00:04:50,119 --> 00:04:52,417 +not about being a boss. It's about being + +130 +00:04:52,417 --> 00:04:54,427 +a guide. A servant leader who gives + +131 +00:04:54,427 --> 00:04:56,438 +everyone the clarity they need to do + +132 +00:04:56,438 --> 00:04:58,736 +their best work. And hey, if that word + +133 +00:04:58,736 --> 00:05:00,172 +leadership sounds a little intimidating, + +134 +00:05:00,172 --> 00:05:01,609 +just remember this confidence isn't + +135 +00:05:01,609 --> 00:05:03,619 +something you need to start. It's what + +136 +00:05:03,619 --> 00:05:06,354 +you get as a result of starting. All + +137 +00:05:06,354 --> 00:05:09,265 +you need on day one is the courage to + +138 +00:05:09,265 --> 00:05:11,530 +try something new and the curiosity to + +139 +00:05:11,530 --> 00:05:13,472 +see what happens. The confidence will + +140 +00:05:13,472 --> 00:05:16,060 +come, I promise. O here we are. The + +141 +00:05:16,060 --> 00:05:18,648 +theory is clear, the path is laid out. + +142 +00:05:18,648 --> 00:05:21,237 +Now it really all comes down to one + +143 +00:05:21,237 --> 00:05:23,502 +thing, a choice, your choice. You know + +144 +00:05:23,502 --> 00:05:26,090 +the temptation to just wait and see it's. + +145 +00:05:26,160 --> 00:05:28,940 +Wrong to kind of hope this whole AI + +146 +00:05:28,940 --> 00:05:31,719 +thing just blows over. But the AI era + +147 +00:05:31,719 --> 00:05:34,499 +is here. That ship has sailed. Hiding is + +148 +00:05:34,499 --> 00:05:37,279 +not a strategy. The only winning move is + +149 +00:05:37,279 --> 00:05:40,058 +to engage. This is the kind of mindset + +150 +00:05:40,058 --> 00:05:42,838 +that's going to carry you through. It's a + +151 +00:05:42,838 --> 00:05:44,923 +personal commitment to action. It's a + +152 +00:05:44,923 --> 00:05:47,513 +belief in your own power. Define your + +153 +00:05:47,513 --> 00:05:50,182 +value in this brand new world. It's + +154 +00:05:50,182 --> 00:05:52,470 +about consciously deciding right now to + +155 +00:05:52,470 --> 00:05:54,758 +become indispensable. When you boil it + +156 +00:05:54,758 --> 00:05:57,428 +all down, it comes to this so + +157 +00:05:57,428 --> 00:05:59,716 +simple. You can't wait for permission. + +158 +00:05:59,716 --> 00:06:02,385 +You can't wait for the perfect moment. + +159 +00:06:02,385 --> 00:06:05,055 +The only way forward is to start + +160 +00:06:05,055 --> 00:06:07,087 +building. Building your skills. Building + +161 +00:06:07,087 --> 00:06:09,107 +your projects, Building your future O + +162 +00:06:09,107 --> 00:06:11,465 +What does that actually look like today? + +163 +00:06:11,465 --> 00:06:14,159 +Here are a few simple first steps. Get + +164 +00:06:14,159 --> 00:06:16,180 +comfortable. In a developer's world, that + +165 +00:06:16,180 --> 00:06:18,201 +can mean downloading an IDE, an + +166 +00:06:18,201 --> 00:06:19,548 +integrated development environment. It's + +167 +00:06:19,548 --> 00:06:21,232 +basically just the workshop where + +168 +00:06:21,232 --> 00:06:22,915 +programmers build software. Then maybe + +169 +00:06:22,915 --> 00:06:25,273 +explore tools like Blind that help you + +170 +00:06:25,273 --> 00:06:27,466 +turn your design thinking. Directly into + +171 +00:06:27,466 --> 00:06:29,583 +code. But honestly, the most important + +172 +00:06:29,583 --> 00:06:32,406 +thing is just to start. Get moving, Build + +173 +00:06:32,406 --> 00:06:34,170 +something, anything, you'll learn by + +174 +00:06:34,170 --> 00:06:36,993 +doing. That is the whole key. The big + +175 +00:06:36,993 --> 00:06:39,110 +take away here is that your + +176 +00:06:39,110 --> 00:06:40,521 +transformation from threatened to + +177 +00:06:40,521 --> 00:06:42,639 +indispensable. It doesn't start when you + +178 +00:06:42,639 --> 00:06:45,109 +feel ready, it starts the exact moment + +179 +00:06:45,109 --> 00:06:47,694 +you decide to act. The tools, the + +180 +00:06:47,694 --> 00:06:49,542 +resources, they're all out there just + +181 +00:06:49,542 --> 00:06:51,698 +waiting for you. So the only question + +182 +00:06:51,698 --> 00:06:54,162 +left is, will you take that first step? + +183 +00:06:54,162 --> 00:06:56,010 +Will you let yourself be known? diff --git a/src/modules/wds/docs/learn-wds/course-explainers/module-02-NOTEBOOKLM-PROMPT.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-02-notebook-lm-prompt.md similarity index 100% rename from src/modules/wds/docs/learn-wds/course-explainers/module-02-NOTEBOOKLM-PROMPT.md rename to src/modules/wds/docs/learn-wds/course-explainers/Module-02-notebook-lm-prompt.md diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module-02-thumbnail-prompt.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-02-thumbnail-prompt.md new file mode 100644 index 000000000..8c92e9be7 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-02-thumbnail-prompt.md @@ -0,0 +1,34 @@ +**IMPORTANT: Use the reference image as your exact style guide. Match all visual elements, colors, layout, and character design.** + +Create a 1920x1080px YouTube thumbnail matching the reference image style. + +**What to Change from Reference:** + +**Headlines (Left side):** +- Line 1: "INSTALL WDS:" (Rubrik Light, 91pt, white) +- Line 2: "MASTER YOUR NEW" (Rubrik Bold, 91pt, white) +- Line 3: "DESIGN WORKSPACE!" (Rubrik Bold, 91pt, white) +- Line spacing: 79pt + +**Module Badge (Bottom-left):** +- "02 Installation" (Rubrik Regular, 108pt, white on red #ff1744) + +**Character Activity:** +- Woman assembling a some strange machine with cogs and pins laying flat upside down on the table +- She has paused, holding a cog in her hand, thinking about where to place it +- Skip the tablet +- Keep the character stylized as it is + +**Background Pattern:** +- Replace the objects in the background but keep the same style and add a giant circuit board layout that covers the whole background +- Keep the same color scheme and lighting + +**Workspace Props:** +- Add: open manual on the desk beside her, mechanical parts (cogs, pins) + +**Keep Everything Else from Reference:** +- do not put light objects behind her face since we need to keep her silhouette clear +- Top-right branding text +- Character design and style +- Color scheme and layout + diff --git a/src/modules/wds/docs/learn-wds/course-explainers/module-03-NOTEBOOKLM-PROMPT.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-03-notebook-lm-prompt.md similarity index 99% rename from src/modules/wds/docs/learn-wds/course-explainers/module-03-NOTEBOOKLM-PROMPT.md rename to src/modules/wds/docs/learn-wds/course-explainers/Module-03-notebook-lm-prompt.md index c429475d6..42f25d8e6 100644 --- a/src/modules/wds/docs/learn-wds/course-explainers/module-03-NOTEBOOKLM-PROMPT.md +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-03-notebook-lm-prompt.md @@ -572,7 +572,7 @@ At the end of the podcast, The Strategic Professional should mention these resou --- -## Instructions for NotebookLM +## NotebookLM Audio Generation Guidelines **Tone:** diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module-03-thumbnail-prompt.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-03-thumbnail-prompt.md new file mode 100644 index 000000000..7b65dd738 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-03-thumbnail-prompt.md @@ -0,0 +1,33 @@ +**IMPORTANT: Use the reference image as your exact style guide. Match all visual elements, colors, layout, and character design.** + +Create a 1920x1080px YouTube thumbnail matching the reference image style. + +**What to Change from Reference:** + +**Headlines (Left side):** +- Line 1: "IDEA TO PROJECT PITCH:" (Rubrik Light, 91pt, white) +- Line 2: "MAKE STAKE HOLDER" (Rubrik Bold, 91pt, white) +- Line 3: "PRESENTATIONS" (Rubrik Bold, 91pt, white) +- Line spacing: 79pt + +**Module Badge (Bottom-left):** +- "03 Alignment" (Rubrik Regular, 108pt, white on red #ff1744) + +**Character Activity:** +- Keep the womans angle and position similar as in the first reference image. Keep the character neutral and stylized as it is +- On the desk there is a large computer screen showing an ongoing online meeting. The woman is in front of the screen, and she has documents and postit notes in front of her allover her keyboard. She is holding up her hands with palms up in an inviting gesture while holding a pencil. +- Skip the tablet + +**Background Pattern:** +- CLear the background from precious objects exept the globe +- Add oversized an toned down business elements (checkmarks, approval stamps, handshake icons ect) +- Keep as in reference image + +**Workspace Props:** +- Add: stylized contract documents, project pitch printout, calculator, coffee cup stylised. To textshould be visible or be presented with just scribble or gray markers + +**Keep Everything Else from Reference:** +- Top-right branding text +- Character design and style +- Color scheme and layout + diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module-03-transcript.srt b/src/modules/wds/docs/learn-wds/course-explainers/Module-03-transcript.srt new file mode 100644 index 000000000..84d87711d --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-03-transcript.srt @@ -0,0 +1,595 @@ +1 +00:00:00,280 --> 00:00:02,151 +Welcome to The Explainer. Today we're + +2 +00:00:02,151 --> 00:00:04,333 +going to tackle something that makes a + +3 +00:00:04,333 --> 00:00:05,892 +lot of creative people really + +4 +00:00:05,892 --> 00:00:08,074 +uncomfortable, and we're going to turn it + +5 +00:00:08,074 --> 00:00:09,633 +into your single greatest professional + +6 +00:00:09,633 --> 00:00:11,504 +strength, mastering the business side of + +7 +00:00:11,504 --> 00:00:13,686 +design. I'm willing to bet this sounds + +8 +00:00:13,686 --> 00:00:15,869 +familiar, right? You know that pit in + +9 +00:00:15,869 --> 00:00:18,363 +your stomach when it's time to talk money + +10 +00:00:18,363 --> 00:00:21,009 +or contracts or negotiations?All you want + +11 +00:00:21,009 --> 00:00:23,914 +to do is just get to the fun part, + +12 +00:00:23,914 --> 00:00:26,174 +the creative work. But here's a thought. + +13 +00:00:26,174 --> 00:00:28,434 +What if all that business stuff isn't + +14 +00:00:28,434 --> 00:00:30,694 +just a necessary evil? What if it's + +15 +00:00:30,694 --> 00:00:32,631 +actually the secret ingredient to doing + +16 +00:00:32,631 --> 00:00:34,246 +better, more successful design work? + +17 +00:00:34,246 --> 00:00:36,829 +Let's dive in and reframe this using the + +18 +00:00:36,829 --> 00:00:38,766 +Whiteboard Design Studio method as our + +19 +00:00:38,766 --> 00:00:41,553 +guide. OK, First things first. We have to + +20 +00:00:41,553 --> 00:00:43,479 +talk about the core problem, the + +21 +00:00:43,479 --> 00:00:45,725 +fundamental dilemma that trips us so many + +22 +00:00:45,725 --> 00:00:47,972 +projects before a single idea is even + +23 +00:00:47,972 --> 00:00:50,219 +sketched out. And here's the deal. You + +24 +00:00:50,219 --> 00:00:51,824 +could create the most jaw-dropping, + +25 +00:00:51,824 --> 00:00:54,071 +brilliant design in the world, but if + +26 +00:00:54,071 --> 00:00:56,317 +it's built on a shaky foundation of + +27 +00:00:56,317 --> 00:00:58,243 +mismatched expectations, it is going to + +28 +00:00:58,243 --> 00:01:00,490 +fail. The groundwork you lay before you. + +29 +00:01:00,600 --> 00:01:03,216 +Ever open a design A often matters more + +30 +00:01:03,216 --> 00:01:06,160 +than the design itself. O how do we fix + +31 +00:01:06,160 --> 00:01:08,122 +this? Well, what's really fascinating is + +32 +00:01:08,122 --> 00:01:10,084 +that the solution isn't some complex + +33 +00:01:10,084 --> 00:01:12,047 +business secret. It's a simple, powerful + +34 +00:01:12,047 --> 00:01:14,663 +shift in your mindset. I mean, just think + +35 +00:01:14,663 --> 00:01:16,625 +about any other respected profession. A + +36 +00:01:16,625 --> 00:01:18,588 +good Carpenter always measures twice, so + +37 +00:01:18,588 --> 00:01:21,422 +they only have to cut once. It's all + +38 +00:01:21,422 --> 00:01:23,168 +about that upfront discipline to make + +39 +00:01:23,168 --> 00:01:25,787 +sure the work is right. Or think about a + +40 +00:01:25,787 --> 00:01:27,825 +doctor. They're not just going to guess + +41 +00:01:27,825 --> 00:01:29,571 +what's wrong and start handing out + +42 +00:01:29,571 --> 00:01:31,608 +prescriptions, right? No way. They ask a + +43 +00:01:31,608 --> 00:01:33,645 +ton of questions, they run tests, they + +44 +00:01:33,645 --> 00:01:35,391 +diagnose the root problem before they + +45 +00:01:35,391 --> 00:01:37,429 +ever propose a solution, and our process + +46 +00:01:37,429 --> 00:01:39,466 +should be exactly the same. So this + +47 +00:01:39,466 --> 00:01:42,181 +brings us to the. Absolute core of this + +48 +00:01:42,181 --> 00:01:43,858 +whole approach. Understand before you + +49 +00:01:43,858 --> 00:01:45,870 +solve. It's about having the discipline + +50 +00:01:45,870 --> 00:01:48,553 +to resist that urge we all have to + +51 +00:01:48,553 --> 00:01:51,235 +jump in and show off our ideas. Instead, + +52 +00:01:51,235 --> 00:01:53,918 +your only job in that first meeting is + +53 +00:01:53,918 --> 00:01:55,930 +to listen to deeply understand their + +54 +00:01:55,930 --> 00:01:57,607 +goals, their frustrations, and what + +55 +00:01:57,607 --> 00:01:59,954 +success actually looks like to them. And + +56 +00:01:59,954 --> 00:02:02,274 +this charge is. Lays it out perfectly, + +57 +00:02:02,274 --> 00:02:04,451 +doesn't it? The amateur rushes in, trying + +58 +00:02:04,451 --> 00:02:06,940 +to sell a solution to impress with speed. + +59 +00:02:06,940 --> 00:02:08,806 +The professional, on the other hand, + +60 +00:02:08,806 --> 00:02:10,983 +slows down. They help the client get + +61 +00:02:10,983 --> 00:02:12,850 +crystal clear on the problem. First, + +62 +00:02:12,850 --> 00:02:14,716 +they're not selling, they're helping. And + +63 +00:02:14,716 --> 00:02:16,582 +listen, this isn't just for freelancers. + +64 +00:02:16,582 --> 00:02:18,760 +It doesn't matter if you're a consultant + +65 +00:02:18,760 --> 00:02:20,937 +pitching a new client, a business owner + +66 +00:02:20,937 --> 00:02:23,311 +hiring a vendor. Or an employee trying to + +67 +00:02:23,311 --> 00:02:25,272 +get buy in from your boss. Anytime + +68 +00:02:25,272 --> 00:02:27,513 +there's a gap between you and a decision + +69 +00:02:27,513 --> 00:02:29,474 +maker who needs to commit resources, this + +70 +00:02:29,474 --> 00:02:31,995 +is the mindset you need. OK, so we've got + +71 +00:02:31,995 --> 00:02:33,956 +the mindset down. Now for the practical + +72 +00:02:33,956 --> 00:02:35,917 +part. Let's look at the actual toolkit + +73 +00:02:35,917 --> 00:02:38,438 +that helps you build a pitch so clear and + +74 +00:02:38,438 --> 00:02:40,679 +so aligned that it makes it really easy + +75 +00:02:40,679 --> 00:02:43,427 +for them to say yes. These six questions + +76 +00:02:43,427 --> 00:02:44,990 +are everything. Every single successful + +77 +00:02:44,990 --> 00:02:47,177 +proposal, whether it's for a client or + +78 +00:02:47,177 --> 00:02:49,677 +your boss, has to answer all of them. + +79 +00:02:49,677 --> 00:02:52,177 +What are we building? Why? What's in the + +80 +00:02:52,177 --> 00:02:54,677 +box? How will we do it? What's the + +81 +00:02:54,677 --> 00:02:56,865 +investment and what's the next step? Miss + +82 +00:02:56,865 --> 00:02:59,052 +even 1 and you're creating doubt, and + +83 +00:02:59,052 --> 00:03:01,552 +doubt is a deal killer. This is so + +84 +00:03:01,552 --> 00:03:03,876 +important to remember. You have to speak + +85 +00:03:03,876 --> 00:03:05,396 +their language. Decision makers don't + +86 +00:03:05,396 --> 00:03:07,220 +really care about how beautiful your + +87 +00:03:07,220 --> 00:03:09,348 +design is, they care about the outcome. + +88 +00:03:09,348 --> 00:03:12,084 +Is it worth the time and money you have + +89 +00:03:12,084 --> 00:03:13,908 +to connect every single thing you're + +90 +00:03:13,908 --> 00:03:16,036 +proposing back to the business value they + +91 +00:03:16,036 --> 00:03:18,772 +told you they needed. O don't just say a + +92 +00:03:18,772 --> 00:03:21,204 +new tool will save time. Quantify it. Put + +93 +00:03:21,204 --> 00:03:23,850 +a number on it. Saying this project + +94 +00:03:23,850 --> 00:03:25,800 +will create $150,000 in annual + +95 +00:03:25,800 --> 00:03:28,140 +productivity gains. Now that is a + +96 +00:03:28,140 --> 00:03:30,090 +language every single decision maker + +97 +00:03:30,090 --> 00:03:32,040 +understands. And here's the beautiful + +98 +00:03:32,040 --> 00:03:34,770 +part. Once you get that solid alignment + +99 +00:03:34,770 --> 00:03:37,500 +on the value and the plan, everything + +100 +00:03:37,500 --> 00:03:40,230 +that comes next just flows. It becomes + +101 +00:03:40,230 --> 00:03:42,180 +this totally natural, simple progression + +102 +00:03:42,180 --> 00:03:44,399 +from understanding. To agreement. You can + +103 +00:03:44,399 --> 00:03:47,096 +see it here. It's like a logical chain + +104 +00:03:47,096 --> 00:03:49,456 +reaction. You listen, you build a itch + +105 +00:03:49,456 --> 00:03:52,153 +based on what you heard, they accept it. + +106 +00:03:52,153 --> 00:03:54,514 +And then that very same document becomes + +107 +00:03:54,514 --> 00:03:56,874 +the foundation for the contract and the + +108 +00:03:56,874 --> 00:03:58,560 +project brief. No surprises, no + +109 +00:03:58,560 --> 00:04:00,583 +confusion. Each step builds directly on + +110 +00:04:00,583 --> 00:04:02,943 +the last. And let's talk about that + +111 +00:04:02,943 --> 00:04:04,718 +contract. Because it makes people + +112 +00:04:04,718 --> 00:04:06,710 +nervous. A contract isn't about mistrust. + +113 +00:04:06,710 --> 00:04:09,033 +It's an act of professional service. It's + +114 +00:04:09,033 --> 00:04:10,693 +just about clarity. You're simply + +115 +00:04:10,693 --> 00:04:12,685 +formalizing what you both already happily + +116 +00:04:12,685 --> 00:04:15,341 +agreed to. And you know what the most + +117 +00:04:15,341 --> 00:04:17,001 +important section is often defining + +118 +00:04:17,001 --> 00:04:19,324 +what's out of scope. That's your best + +119 +00:04:19,324 --> 00:04:21,316 +friend in preventing scope creep. So + +120 +00:04:21,316 --> 00:04:23,640 +you've put in all this upfront work. + +121 +00:04:23,780 --> 00:04:25,446 +You've listened, you've diagnosed, you've + +122 +00:04:25,446 --> 00:04:27,444 +aligned. What's the ultimate payoff? Why + +123 +00:04:27,444 --> 00:04:29,776 +go through all the trouble? Well, the + +124 +00:04:29,776 --> 00:04:31,775 +impact is huge. It completely transforms + +125 +00:04:31,775 --> 00:04:33,107 +the entire relationship. Client + +126 +00:04:33,107 --> 00:04:35,439 +confidence in you goes through the roof. + +127 +00:04:35,439 --> 00:04:37,438 +The chances of the project actually + +128 +00:04:37,438 --> 00:04:39,436 +succeeding skyrocket. And for you, it + +129 +00:04:39,436 --> 00:04:41,435 +leads to a healthier, more profitable + +130 +00:04:41,435 --> 00:04:44,100 +business. It really is a win, win, win. + +131 +00:04:44,650 --> 00:04:47,192 +And this might be the biggest shift of + +132 +00:04:47,192 --> 00:04:48,781 +all. You've fundamentally change your + +133 +00:04:48,781 --> 00:04:51,005 +role. You're no longer just an order + +134 +00:04:51,005 --> 00:04:53,229 +taker, someone who just executes a list + +135 +00:04:53,229 --> 00:04:55,453 +of tasks. You become a strategic partner, + +136 +00:04:55,453 --> 00:04:58,313 +someone they rely on to guide them to a + +137 +00:04:58,313 --> 00:05:00,219 +successful outcome. The whole thing, from + +138 +00:05:00,219 --> 00:05:02,126 +that first conversation to the final + +139 +00:05:02,126 --> 00:05:04,032 +signed contract, is really an active + +140 +00:05:04,032 --> 00:05:06,606 +service. You were giving your client and + +141 +00:05:06,606 --> 00:05:08,702 +yourself the gift of clarity. It makes + +142 +00:05:08,702 --> 00:05:11,097 +everyone feel safe and secure so you can + +143 +00:05:11,097 --> 00:05:13,193 +all focus on what really matters, doing + +144 +00:05:13,193 --> 00:05:14,989 +incredible work together. And that leaves + +145 +00:05:14,989 --> 00:05:17,384 +us with one final thought to take into + +146 +00:05:17,384 --> 00:05:19,480 +your next meeting. Ask yourself this, are + +147 +00:05:19,480 --> 00:05:21,875 +you there just to sell them something or + +148 +00:05:21,875 --> 00:05:23,971 +are you there to genuinely help them + +149 +00:05:23,971 --> 00:05:24,270 +succeed? diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module-04-notebook-lm-prompt.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-04-notebook-lm-prompt.md new file mode 100644 index 000000000..552be1eb5 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-04-notebook-lm-prompt.md @@ -0,0 +1,173 @@ +# NotebookLM Prompt: Module 04 - Product Brief + +**Use this prompt to generate audio/video content for Module 04: Product Brief** + +--- + +## Instructions for NotebookLM + +**This is a single, self-contained prompt file.** + +Simply upload THIS FILE to NotebookLM and use the prompt below to generate engaging audio/video content. No other files needed. + +--- + +## Prompt + +Create an engaging 25-30 minute podcast conversation between two hosts discussing Module 04 of the Whiteport Design Studio (WDS) course: Product Brief. + +**IMPORTANT: WDS stands for Whiteport Design Studio - always refer to it by its full name "Whiteport Design Studio" or "WDS" throughout the conversation.** + +**Host 1 (The Curious Designer):** A designer ready to start a project and wants to understand the practical process. + +**Host 2 (The Practical Guide):** A designer who uses the Product Brief as a living reference throughout every project phase. + +**Conversation structure:** + +### 1. Opening (2 min) - What Is This? + +The Curious Designer: "I'm starting a new project and I keep hearing about this Product Brief. What exactly is it?" + +The Practical Guide: "It's a 2-3 page document that answers 5 critical questions: What are we building and why? Who is it for? How will we know it's successful? What else exists? What are our constraints? That's it. Simple, but it changes everything." + +The Curious Designer: "Okay, but why do I need it?" + +The Practical Guide: "Because every time you activate an agent in WDS - whether you're analyzing requirements, sketching interfaces, or writing content - that agent reads your Product Brief first. It's how they understand your project. It's your project's foundation, living right in your repo alongside your code." + +--- + +### 2. How It's Actually Used (5 min) + +The Curious Designer: "So when do I actually use this document?" + +The Practical Guide: "Every single time you work on the project. Let me show you: + +When you activate Saga to analyze user needs - she reads the Product Brief to understand your vision and target users. + +When you activate Sketch to create wireframes - he reads the Product Brief to understand constraints and success criteria. + +When you activate Lyra to write content - she reads the Product Brief to match your tone and positioning. + +Every agent starts by reading your Product Brief. It's how they stay aligned with your project's foundation." + +The Curious Designer: "Wait, so it's not just a planning document I create and forget about?" + +The Practical Guide: "Exactly! It's a living reference. And here's the key: it lives in your IDE, right in your project repo. Not on some server somewhere. Not in a Google Doc. Right there in `/docs/A-Product-Brief/product-brief.md` - one click away from your developers, your designers, your entire team." + +--- + +### 3. Creating It - The Actual Process (8 min) + +The Curious Designer: "Okay, I'm sold. How do I create this thing?" + +The Practical Guide: "After you create your repo in Module 02, you activate Saga the Analyst. She'll see the Product Brief is missing and just start the conversation. It's that simple." + +The Curious Designer: "What does that conversation actually sound like?" + +The Practical Guide: "Let me give you real examples. Saga asks questions like: + +'What problem are you solving with this product?' + +You might say: 'Families struggle to coordinate schedules and responsibilities. Everyone's confused about who's doing what.' + +Saga reflects back: 'So you're seeing families deal with coordination chaos - unclear responsibilities and missed commitments. Is that right?' + +You confirm, and she captures it in the vision section. + +Then she asks: 'Who specifically is this for?' + +You say: 'Parents managing households - they're the ones coordinating everything.' + +Saga digs deeper: 'What about their situation makes this hard for them specifically?' + +You think out loud: 'They're juggling work, kids' activities, household tasks. Everything's in different apps or just in their heads.' + +Saga captures that, then asks: 'How will you know this is working for them?' + +You might start vague: 'They'll be less stressed.' + +Saga prompts: 'Let's make that measurable. What would less stress look like in numbers?' + +You refine: 'Reduce missed commitments by 50% in the first month. Achieve a satisfaction score of 8/10 or higher.' + +Saga writes it down as a SMART goal. + +See the pattern? She asks, you think out loud, she reflects back to confirm, then captures it. You're thinking together." + +The Curious Designer: "And this is all happening in my IDE?" + +The Practical Guide: "Yes! You're watching the document build in real-time in your code editor. Not in some separate tool. Right there in your project. When Saga asks about constraints, you mention you need to launch in 3 months with a small team. She captures that in the constraints section. When you talk about competitors, she structures it in the competitive landscape section. You're just having a conversation, and the document is writing itself." + +--- + +### 4. The 5 Questions (Quick Overview) (3 min) + +The Curious Designer: "You mentioned 5 questions. What are they?" + +The Practical Guide: "Here they are: + +1. **What & Why** - Your vision and positioning. What problem are you solving and why does it matter? + +2. **Who** - Your target users. Primary users, secondary users, stakeholders. Be specific. + +3. **How We'll Know** - Success criteria. Measurable outcomes. Not 'make it better' but 'reduce missed commitments by 50% in month one.' + +4. **Context** - Competitive landscape. What else exists? How are you different? + +5. **Boundaries** - Constraints. Technical, business, design. What are your limits? + +That's it. Saga walks you through each one. You just answer honestly, she helps you refine it, and captures it in the document." + +--- + +### 5. The Human-in-the-Loop Approach (4 min) + +The Curious Designer: "This sounds different from other AI tools. What makes it different?" + +The Practical Guide: "It's the human-in-the-loop thinking partnership - inherited from the BMad methodology. Most AI tools either replace you or just take orders. WDS works differently. + +You bring: Your vision, domain expertise, understanding of your users. +Saga brings: Structure, methodology, the right questions at the right time. + +You're not prompting an AI. You're not filling out a form. You're having a conversation with a thinking partner who helps you clarify what's in your head and ensures nothing important gets missed. + +This is where you first experience what 'writing together' actually means. You stay in strategic thinking mode. Saga captures and structures your insights. You see the document building in real-time. You refine together. + +The result is truly yours - just better articulated." + +--- + +### 6. How to Actually Do This (3 min) + +The Curious Designer: "Okay, I'm ready. What's the actual process?" + +The Practical Guide: "After you create your repo in Module 02: + +1. Open your IDE +2. Activate Saga: `@wds-saga project-brief` +3. She sees the Product Brief is missing +4. She starts the conversation +5. You answer her questions +6. She writes the document in real-time +7. You review and refine together +8. Done + +It's that simple. The document lives in `/docs/A-Product-Brief/product-brief.md` in your repo. Not on a server. Not in a separate tool. Right there with your code. + +And from that point forward, every agent you activate reads it first. When you work on user research, wireframes, content, technical architecture - they all start by understanding your Product Brief. It's your project's foundation." + +--- + +### 7. Closing (2 min) + +The Curious Designer: "This makes so much sense. Why haven't I been doing this?" + +The Practical Guide: "Because it used to be hard. Now it's just a conversation. Create your repo, activate Saga, talk it out. You'll have your strategic foundation, living in your IDE, referenced by every agent, guiding every decision. + +That's Module 04. Go create your Product Brief. Your future self will thank you." + +--- + +## End of Prompt + +Generate the podcast conversation following this structure, maintaining natural dialogue flow while covering all key concepts. Make it engaging, practical, and action-oriented. diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module-04-thumbnail-prompt.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-04-thumbnail-prompt.md new file mode 100644 index 000000000..a3f0d6ab0 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-04-thumbnail-prompt.md @@ -0,0 +1,36 @@ +**IMPORTANT: Use the reference image as your exact style guide. Match all visual elements, colors, layout, and character design.** + +Create a 1920x1080px YouTube thumbnail matching the reference image style. + +**What to Change from Reference:** + +**Headlines (Left side):** +- Line 1: "BUILD YOUR STRATEGIC" (Rubrik Light, 91pt, white) +- Line 2: "FOUNDATION IN" (Rubrik Bold, 91pt, white) +- Line 3: "30-45 MINUTES!" (Rubrik Bold, 91pt, white) +- Line spacing: 79pt + +**Module Badge (Bottom-left):** +- "04 Product Brief" (Rubrik Regular, 108pt, white on red #ff1744) + +**Character Activity:** +- Keep the woman's angle and position similar as in the first reference image. Keep the character neutral and stylized as it is +- Woman is working at her desk with a large strategic document/blueprint spread out in front of her +- She's holding a pen/marker and has just finished writing, looking satisfied at the completed document +- On the desk: sticky notes, coffee cup, the strategic document with visible sections/structure +- Skip the tablet + +**Background Pattern:** +- Clear the background from previous objects except the globe +- Add oversized and toned down strategic elements (checkmarks, document icons, organizational charts, flowchart nodes) +- Keep as in reference image + +**Workspace Props:** +- Add: stylized strategic document (visible structure/sections), sticky notes, pen/marker, coffee cup, notebook. No text should be visible or be presented with just scribble or gray markers + +**Keep Everything Else from Reference:** +- do not put light objects behind her face since we need to keep her silhouette clear +- Top-right branding text +- Character design and style +- Color scheme and layout + diff --git a/src/modules/wds/docs/learn-wds/course-explainers/Module-04-youtube-show-notes.md b/src/modules/wds/docs/learn-wds/course-explainers/Module-04-youtube-show-notes.md new file mode 100644 index 000000000..713d1ca2a --- /dev/null +++ b/src/modules/wds/docs/learn-wds/course-explainers/Module-04-youtube-show-notes.md @@ -0,0 +1,89 @@ +Module 04 - Product Brief - Your Strategic Foundation Through Guided Conversation + +[YouTube link to be added] + +Teams waste weeks building the wrong thing beautifully. The Product Brief prevents this - a 2-3 page strategic document that answers the 5 questions every project needs before design starts. Create it through AI-guided conversation with Saga, your thinking partner. + +*You'll learn:* +βœ… Why projects fail without strategic foundation (and how to prevent it) +βœ… The 5 strategic questions every Product Brief must answer +βœ… What the document looks like and how teams use it +βœ… How WDS ensures excellence through thinking partnership +βœ… Additional strategic documents you can create as needed + +*Free & open-source* | 46-58 minutes | Foundation module + +⏱️ Timestamps + +_To be added after video production_ + +🎯 The 5 Strategic Questions + +*What & Why* - Vision and positioning (what you're building, why it matters) +*Who* - Target users and stakeholders (who uses it, who decides) +*How We'll Know* - Success criteria (measurable outcomes) +*Context* - Competitive landscape (alternatives, differentiation) +*Boundaries* - Constraints (technical, business, design limitations) + +πŸ“‹ What You'll Create + +*Core Document:* +Product Brief (2-3 pages) - Single source of truth for entire team + +*Optional Documents (as needed):* +Core Features - Feature prioritization (must/should/could/won't have) +Tone of Voice - Brand personality and communication guidelines +Visual Design Brief - Visual direction and inspiration +Technical Brief - Architecture and integration requirements +Content Strategy - Content types, goals, publishing +Localization Strategy - Multi-language/region planning +Accessibility Requirements - Compliance and user needs +Data & Privacy - Collection, storage, compliance + +πŸ“š Course Resources + +🌊 *WDS Presentation:* + + +πŸ“– *Tutorial 04:* + + +πŸ“– *Project Brief Template:* + + +πŸ’¬ *Discord Community:* +[Discord invite link] + +πŸ“– *GitHub Discussions:* + + +◀️ *Previous Module:* Module 03 - Alignment & Signoff + + +▢️ *Next Module:* Module 05 - Trigger Mapping (Coming Soon) + +πŸ“š *Full Course:* + + +⚑ *The WDS Advantage* + +*Thinking Partnership:* Human-in-the-loop collaboration from BMad methodology +*AI-Guided:* No blank page, no missed elements +*Conversational:* Talk it out, Saga writes it down +*Professional:* Built-in best practices (SMART goals, constraint checklists) +*Flexible:* Two levels (simplified or complete based on needs) +*Living:* Easy to update as you learn + +βœ… *Next Steps:* +1. Watch this module to understand the Product Brief approach +2. Complete Tutorial 04 to create your Product Brief with Saga +3. Add optional documents as your project needs them +4. Share with team for alignment +5. Start Module 05: Trigger Mapping + +🎨 *About WDS* +AI-augmented design methodology by MΓ₯rten Angner (Whiteport, Sweden). The Product Brief is your project's constitution - everything else is legislation. + +#ProductBrief #DesignStrategy #ProjectPlanning #WDS #StrategicFoundation #AIGuided + +*This one document is the difference between confident execution and constant confusion. 🎯* diff --git a/src/modules/wds/docs/learn-wds/course-explainers/module-01-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/docs/learn-wds/course-explainers/module-01-YOUTUBE-SHOW-NOTES.md index e4fb62891..8eb0b412c 100644 --- a/src/modules/wds/docs/learn-wds/course-explainers/module-01-YOUTUBE-SHOW-NOTES.md +++ b/src/modules/wds/docs/learn-wds/course-explainers/module-01-YOUTUBE-SHOW-NOTES.md @@ -1,151 +1,75 @@ -# YouTube Show Notes: Module 01 - Why WDS Matters +Module 01 - Why WDS Matters - Are You a Factory Worker or a Linchpin Designer? + -**Video Link:** -https://www.youtube.com/watch?v=Xhw5JB7mpxw +The AI era is here. The question is: are you a factory worker or a linchpin designer? Replaceable or indispensable? -**Video Title:** -Module 01: Why WDS Matters - Are You a Factory Worker or a Linchpin Designer? +This 30-minute deep dive explores why designers are irreplaceable in the AI era - not because of tools, but because of emotional labor, user-centric creativity, and the ability to walk into chaos and create order. ---- - -## πŸ“Ί Video Description - -The AI era is here. The question isn't whether AI will change design - it already has. The question is: **are you a factory worker or a linchpin designer? Replaceable or indispensable?** - -In this 30-minute deep dive, we explore why designers are irreplaceable in the AI era - not because of tools or aesthetic taste, but because of emotional labor, user-centric creativity, and the ability to walk into chaos and create order. - -**You'll learn:** -βœ… Seth Godin's Linchpin concept and why it matters for designers RIGHT NOW -βœ… The three irreplaceable gifts only human designers can provide -βœ… 5-dimensional thinking - the practical skill that makes you indispensable +*You'll learn:* +βœ… Seth Godin's Linchpin concept and why it matters RIGHT NOW +βœ… Three irreplaceable gifts only human designers provide +βœ… 5-dimensional thinking - the skill that makes you indispensable βœ… The three-part transformation WDS guides you through -βœ… How to stop hiding and start acting: I Can. I Do. I Will. +βœ… How to act: I Can. I Do. I Will. -This isn't about learning new tools. This is about choosing who you are as a designer. +*Free & open-source* | 30 minutes (3 lessons Γ— 10 min) -**Time:** ~30 minutes (3 lessons Γ— 10 min each) -**Prerequisites:** None - this is where you start! -**Format:** Video explainer + detailed written lessons +⏱️ Timestamps ---- +00:00 The Fundamental Choice +00:59 Two Paths: Factory vs Linchpin +02:25 Three Irreplaceable Gifts +04:14 The WDS Framework +05:42 The Mindset & First Steps -## ⏱️ Timestamps +🎯 Key Concepts -_To be added after video production based on transcript_ +*Linchpin Designer* - Walks into chaos and creates order (Seth Godin) +*Emotional Labor* - Genuinely caring about the outcome +*User-Centric Creativity* - Connecting business goals to user psychology +*5-Dimensional Thinking* - Business existence, goals, product strategy, target groups, technical viability ---- +πŸ“š Course Resources -## 🎯 Key Concepts +🌊 *WDS Presentation:* + -πŸ”Ή **Linchpin Designer** - The person who walks into chaos and creates order (Seth Godin, 2010) +πŸ› οΈ *Installation Guide:* + -πŸ”Ή **Emotional Labor** - The work of genuinely caring about the outcome +πŸ“š *Linchpin Book by Seth Godin:* + -πŸ”Ή **User-Centric Creativity** - The designer's gift of connecting business goals to user psychology - -πŸ”Ή **Designer as Gatekeeper** - Protecting quality, catching AI mistakes, ensuring logic - -πŸ”Ή **5-Dimensional Thinking** - Business existence, business goals, product strategy, target groups, technical viability - -πŸ”Ή **The Paradigm Shift** - Design thinking becomes specification, preserving creative intent - ---- - -## πŸ“š Course Resources - -### **This Module** -πŸ“– **Module 01 Overview:** Complete lesson structure -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-01-why-wds-matters/module-01-overview.md - -### **Get Started with WDS** -🌊 **WDS Presentation Page:** Learn about the methodology -https://whiteport.com/whiteport-design-studio/ - -πŸ› οΈ **Installation Guide:** Download IDE, Install WDS -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md - -πŸ“– **About WDS:** Philosophy and approach -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/about-wds.md - -### **Recommended Reading** -πŸ“š **Book:** "Linchpin: Are You Indispensable?" by Seth Godin (2010) -https://www.amazon.com/Linchpin-Are-You-Indispensable-ebook/dp/B00354Y9ZU - -### **Community & Support** -πŸ’¬ **BMad Discord:** Join other linchpin designers +πŸ’¬ *Discord Community:* [Discord invite link] -πŸ“– **GitHub Discussions:** Ask questions, share your journey -https://github.com/whiteport-collective/whiteport-design-studio/discussions +πŸ“– *GitHub Discussions:* + ---- +◀️ *Previous Module:* Module 00 - Getting Started + -## πŸŽ“ Course Navigation +▢️ *Next Module:* Module 02 - Installation & Setup + -**◀️ Previous Module:** Module 00 - Getting Started -πŸ“Ί Video: https://youtu.be/qYPYx01YLUc -πŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview/00-getting-started-overview.md +πŸ“š *Full Course:* + -**▢️ Next Module:** Module 02 - Installation & Setup -πŸ“Ί Video: https://www.youtube.com/watch?v=tYifpxFVVks -πŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-02-installation-setup/module-02-overview.md +βœ… *Next Steps:* +1. Complete the three written lessons (30 min) +2. Download an IDE (Cursor, VS Code, Windsurf) +3. Start Module 02: Installation & Setup +4. Join Discord community +5. Let yourself be known -**πŸ“š Full Course Overview:** -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md +πŸ’ͺ *The Mindset:* I Can. I Do. I Will. No matter what. No matter when. No matter how. ---- +🎨 *About WDS* +AI-augmented design methodology by MΓ₯rten Angner (Whiteport, Sweden). Free access to AI agents for designers. The transformation: From task-doer to strategic leader. From replaceable to indispensable. -## βœ… Next Steps +#UXDesign #AIDesign #LinchpinDesigner #WDS #BMadMethod #SethGodin #Linchpin -1. βœ… Complete the three written lessons (30 min total reading) -2. βœ… Download an IDE (Cursor, VS Code, Windsurf) -3. βœ… Start Module 02: Installation & Setup -4. βœ… Build something - it doesn't matter what -5. βœ… Join the BMad Discord community -6. βœ… Let yourself be known +πŸ”₯ This is not the time to hide. The AI era is here. Stand up. Act. Download. Install. Build. Move. ---- - -## πŸ’ͺ The Mindset - -**I Can. I Do. I Will.** -**No matter what. No matter when. No matter how.** - -Designers half as smart as you have already made this transition. -Now it's your turn. - -**Let yourself be known.** - ---- - -## 🎨 About Whiteport Design Studio (WDS) - -WDS is an AI-augmented design methodology created by MΓ₯rten Angner, UX designer and founder of Whiteport, a design and development agency from Sweden. WDS is a module for the BMad Method - an open-source AI-augmented development framework. - -**The Goal:** Give designers everywhere free access to AI agents specifically tailored for design work, while preserving and amplifying their creative thinking through specifications. - -**The Transformation:** From task-doer to strategic leader. From replaceable to indispensable. From factory worker to linchpin designer. - ---- - -## 🏷️ Tags - -#UXDesign #AIDesign #LinchpinDesigner #WhiteportDesignStudio #WDS #BMadMethod #DesignThinking #UserCentricDesign #EmotionalLabor #DesignSpecification #AIEra #DesignTransformation #SethGodin #Linchpin #DesignCourse #LearnDesign #DesignStrategy #ProfessionalDesign - ---- - -## πŸ”₯ IMPORTANT - -**This is not the time to hide or go into hibernation hoping it all goes away.** - -The AI era is here. The choice is made. - -**Stand up. Act. Download. Install. Build. Move.** - -The transformation continues, together. But it starts with you choosing to act. - -**Right now. Today.** - ---- - -**Ready to become indispensable? Watch the full module and then move to Module 02! πŸš€** +*Ready to become indispensable? Watch the full module and move to Module 02! πŸš€* + diff --git a/src/modules/wds/docs/learn-wds/course-explainers/module-02-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/docs/learn-wds/course-explainers/module-02-YOUTUBE-SHOW-NOTES.md index d526498d6..cf9f1a561 100644 --- a/src/modules/wds/docs/learn-wds/course-explainers/module-02-YOUTUBE-SHOW-NOTES.md +++ b/src/modules/wds/docs/learn-wds/course-explainers/module-02-YOUTUBE-SHOW-NOTES.md @@ -1,252 +1,86 @@ -# YouTube Show Notes: Module 02 - Installation & Setup - -**Video Link:** -https://www.youtube.com/watch?v=tYifpxFVVks - -**Video Title:** -Module 02: Installation & Setup - From Zero to WDS-Ready in Under an Hour - ---- - -## πŸ“Ί Video Description +Module 02 - WDS Installation & Setup - From Zero to Hero in one Hour! + "I've never used GitHub. I've never installed an IDE. I'm worried I'll mess something up." -Sound familiar? You're not alone. Every designer was once exactly where you are now. +Sound familiar? This 6-minute guided walkthrough takes you from complete beginner to fully set up with WDS - even if you've never touched GitHub, Git, or an IDE before. -In this 30-minute guided walkthrough, we take you from complete beginner to fully set up with Whiteport Design Studio - even if you've never touched GitHub, Git, or an IDE before. +*You'll learn:* +βœ… Create a GitHub account and repository +βœ… Install your IDE workspace (Cursor or VS Code) +βœ… Clone your project to your computer +βœ… Add WDS to your workspace +βœ… Meet Mimir - your personal WDS guide -**You'll learn:** -βœ… How to create a GitHub account and repository (it's easier than you think!) -βœ… Installing your IDE workspace (Cursor or VS Code) -βœ… Cloning your project to your computer -βœ… Adding WDS to your workspace -βœ… Meeting Mimir - your personal WDS guide +*Free & open-source* | 45-60 minutes setup | No technical experience required -This isn't about becoming technical. This is about getting your professional environment set up so you can focus on what matters: designing with confidence. +⏱️ Timestamps -**Total setup time:** 45-60 minutes -**Prerequisites:** Computer + Internet + Email -**Technical experience required:** None -**Format:** Video walkthrough + detailed written lessons with checklists +00:00 The Technical Setup Challenge +00:59 Creating Your GitHub Account +03:13 Installing Your IDE Workspace +04:43 Cloning Your Project +05:42 WDS Integration & Meeting Mimir ---- +🎯 Key Concepts -## ⏱️ Timestamps +*GitHub* - Professional cloud storage with version control +*Repository* - A tracked folder where your project lives +*IDE* - Your workspace for creating specifications +*Cloning* - Making a local copy of your GitHub repository +*Mimir* - Your WDS orchestrator (@wds-mimir anytime!) -_To be added after video production based on transcript_ +πŸ“š 4 Lessons ---- +1. *Git Setup* (15-20 min) - GitHub account, repository creation +2. *IDE Installation* (10 min) - Download Cursor or VS Code +3. *Repository Cloning* (10 min) - Clone project to your computer +4. *WDS Initialization* (15-20 min) - Add WDS, create 8-phase docs, activate Mimir -## 🎯 Key Concepts +πŸ“ *8-Phase Docs Structure:* +1-project-brief β€’ 2-trigger-mapping β€’ 3-prd-platform β€’ 4-ux-design β€’ 5-design-system β€’ 6-design-deliveries β€’ 7-testing β€’ 8-ongoing-development -πŸ”Ή **GitHub** - Professional cloud storage with time machine (version history) +πŸ“š Course Resources -πŸ”Ή **Repository (Repo)** - A tracked folder where your project lives +🌊 *WDS Presentation:* [WDS Presentation](https://whiteport.com/whiteport-design-studio/) -πŸ”Ή **IDE (Integrated Development Environment)** - Your workspace for creating specifications +πŸ’» *Download Cursor:* [Download Cursor](https://cursor.sh) -πŸ”Ή **Git** - The sync engine (auto-installed by your IDE) +πŸ“₯ *Download VS Code:* [Download VS Code](https://code.visualstudio.com) -πŸ”Ή **Cloning** - Making a local copy of your GitHub repository +πŸ“₯ *GitHub:* [GitHub](https://github.com) -πŸ”Ή **Workspace** - Having both your project AND WDS side-by-side - -πŸ”Ή **Docs Folder** - Your 8-phase design source of truth - -πŸ”Ή **Mimir** - Your WDS orchestrator and guide (@wds-mimir anytime!) - ---- - -## πŸ“š The 4 Lessons - -This module includes 4 hands-on lessons with both quick checklists and full explanations: - -### Lesson 01: Git Setup (15-20 min) -- Create GitHub account with professional username -- Understand repository structure -- Single repo vs separate specs repo decision -- Create your first repository - -### Lesson 02: IDE Installation (10 min) -- Choose Cursor (recommended) or VS Code -- Download and install -- First launch setup -- Sign in with GitHub - -### Lesson 03: Git Repository Cloning (10 min) -- Create organized Projects folder -- Get repository URL from GitHub -- Clone with simple terminal command -- Open project in workspace - -### Lesson 04: WDS Project Initialization (15-20 min) -- Clone WDS repository -- Add WDS to workspace (dual folder setup) -- Create 8-phase docs structure -- Find and activate Mimir - ---- - -## Repository Structure Decision - -**Single Repository** (`my-project`) -- Specs + code together -- Use when: Small team, building yourself, simple communication - -**Separate Specifications Repository** (`my-project-specs`) -- Specs only, separate code repo -- Use when: Corporate, many developers, clear handoff needed - -**Name your repository based on your choice!** - ---- - -## The Docs Structure - -Your 8-phase WDS methodology folders: - -πŸ“ **1-project-brief** - Vision and strategy -πŸ“ **2-trigger-mapping** - User psychology and decisions -πŸ“ **3-prd-platform** - Product requirements -πŸ“ **4-ux-design** - User experience design -πŸ“ **5-design-system** - Visual language and components -πŸ“ **6-design-deliveries** - Handoff specifications -πŸ“ **7-testing** - Validation and iteration -πŸ“ **8-ongoing-development** - Evolution and support - ---- - -## πŸ“š Course Resources - -### **This Module** -πŸ“– **Module 02 Overview:** Complete lesson structure -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-02-installation-setup/module-02-overview.md - -### **Get Started with WDS** -🌊 **WDS Presentation Page:** Learn about the methodology -https://whiteport.com/whiteport-design-studio/ - -πŸ› οΈ **Installation Guide:** Download IDE, Install WDS -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md - -πŸ“– **Quick Start:** Get up and running fast -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/quick-start.md - -### **Download Links** -πŸ“₯ **Download Cursor:** https://cursor.sh -πŸ“₯ **Download VS Code:** https://code.visualstudio.com -πŸ“₯ **GitHub:** https://github.com - -### **Community & Support** -πŸ’¬ **BMad Discord:** Real designers helping each other +πŸ’¬ *Discord Community:* [Discord invite link] -πŸ“– **GitHub Discussions:** Ask questions, share your setup -https://github.com/whiteport-collective/whiteport-design-studio/discussions +πŸ“– *GitHub Discussions:* + ---- +◀️ *Previous Module:* Module 01 - Why WDS Matters + -## πŸŽ“ Course Navigation +▢️ *Next Module:* Module 03 - Alignment & Signoff + -**◀️ Previous Module:** Module 01 - Why WDS Matters -πŸ“Ί Video: https://www.youtube.com/watch?v=Xhw5JB7mpxw -πŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-01-why-wds-matters/module-01-overview.md +πŸ“š *Full Course:* + -**▢️ Next Module:** Module 03 - Alignment & Signoff -πŸ“Ί Video: https://www.youtube.com/watch?v=TKjOLlU8UCE -πŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/module-03-overview.md +βœ… *Next Steps:* +1. Complete the 4-lesson setup (follow along!) +2. Activate Mimir and have your first conversation +3. Start Module 03: Alignment & Signoff +4. Join the WDS community -**πŸ“š Full Course Overview:** -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md +πŸ’ͺ *"You can do this. I believe in you."* - Mimir ---- +🎨 *About WDS* +AI-augmented design methodology by MΓ₯rten Angner (Whiteport, Sweden). Transforms designers into indispensable linchpins who connect business goals, user psychology, and technical constraints. -## Common Questions +πŸ‘€ *About Mimir* +Your WDS orchestrator - a wise advisor who assesses your skill level, guides setup, and provides support. Invoke anytime: @wds-mimir [your question] -**Q: Do I need to know how to code?** -A: No! You're setting up a workspace, not learning to code. +#GitHub #IDESetup #Cursor #VSCode #WDS #Mimir #DesignCourse #BeginnerFriendly -**Q: What if I make a mistake?** -A: GitHub is your time machine - you can always go back. And Mimir is always available to help. - -**Q: Do I need to manually install Git?** -A: Nope! Modern IDEs auto-install Git when you need it. - -**Q: Can I use VS Code instead of Cursor?** -A: Absolutely! Both work great. Cursor is optimized for AI work, but VS Code is excellent too. - -**Q: What if I get stuck?** -A: Type `@wds-mimir [your question]` in your AI chat. He's always there to help. - -**Q: Single repo or separate specs repo?** -A: Most beginners should use single repo. It's simpler and you can always split later. - ---- - -## βœ… Next Steps - -1. βœ… Complete the 4-lesson setup (follow along with this video!) -2. βœ… Activate Mimir and have your first conversation -3. βœ… Check your setup is complete -4. βœ… Start Module 03: Alignment & Signoff -5. βœ… Join the WDS community - -**What You'll Have After:** -- βœ… GitHub account and repository -- βœ… Professional IDE installed -- βœ… Project cloned locally -- βœ… WDS integrated in workspace -- βœ… 8-phase docs structure created -- βœ… Mimir activated and ready - ---- - -## πŸ’ͺ The Power of Belief - -**"You can do this. I believe in you."** - Mimir - -This isn't empty encouragement. It's based on truth: - -- You just proved you can learn technical tools -- You just set up a professional development environment -- You just organized a complete methodology workspace -- If you can do this, you can master WDS - -**You're not a beginner anymore. You're a designer with a professional setup.** - ---- - -## 🎨 About Whiteport Design Studio (WDS) - -Whiteport Design Studio is a comprehensive methodology that transforms designers from tool users into indispensable linchpins - the person who walks into chaos and creates order. - -WDS isn't about learning new design tools. It's about becoming the strategic mind that connects business goals, user psychology, and technical constraints into coherent, implementable specifications. - -**In the AI era, this is your superpower.** - ---- - -## πŸ‘€ About Mimir - -Mimir is your WDS orchestrator - a wise advisor who: -- Assesses your skill level and adapts to you -- Checks your environment and guides setup -- Answers questions with patience and wisdom -- Connects you with specialist agents when needed -- Provides encouragement and support - -**Invoke him anytime:** `@wds-mimir [your question]` - -He's named after the Norse god of wisdom and knowledge - the advisor who sees patterns others miss. That's exactly what he does for you. - ---- - -## 🏷️ Tags - -#WebDesign #DesignSystem #GitHub #GitSetup #IDESetup #Cursor #VSCode #DesignerTools #WDS #WhiteportDesignStudio #DesignMethodology #BeginnerFriendly #TutorialSeries #DesignWorkflow #ProfessionalSetup #Mimir #DesignCourse #LearnDesign #GitHubForDesigners #DesignSpecifications - ---- - -**Ready to start? Let's get you set up! Follow along with the video and you'll be WDS-ready in under an hour. πŸš€** +*Ready to start? Follow along and you'll be WDS-ready in under an hour! πŸš€* + diff --git a/src/modules/wds/docs/learn-wds/course-explainers/module-03-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/docs/learn-wds/course-explainers/module-03-YOUTUBE-SHOW-NOTES.md index c4e0decf7..ae5b50859 100644 --- a/src/modules/wds/docs/learn-wds/course-explainers/module-03-YOUTUBE-SHOW-NOTES.md +++ b/src/modules/wds/docs/learn-wds/course-explainers/module-03-YOUTUBE-SHOW-NOTES.md @@ -1,203 +1,81 @@ -# YouTube Show Notes: Module 03 - Alignment & Signoff +Module 03 - Alignment & Signoff - Get Stakeholder Buy-In for Your Design Projects + -**Video Link:** -https://www.youtube.com/watch?v=TKjOLlU8UCE +Struggling with the business side of design? Feel uncomfortable talking about money or negotiating contracts? This module teaches you how to get stakeholder buy-in and protect your projects with clear agreements. -**Video Title:** -Module 03: Alignment & Signoff - Get Stakeholder Buy-In for Your Design Projects - ---- - -## πŸ“Ί Video Description - -Struggling with the business side of design? Feel uncomfortable talking about money or negotiating contracts? Getting stuck in scope creep situations? This module is for you. - -Learn how to get stakeholder buy-in and protect your projects with clear agreements. Master the discovery discipline, create compelling pitches with quantified ROI, and formalize commitment with professional contracts and signoff documents. - -**You'll learn:** +*You'll learn:* βœ… The discovery discipline: Understanding before solving βœ… When you need stakeholder alignment (and when to skip it) -βœ… How to create compelling alignment documents that make it easy to say yes +βœ… Create compelling alignment documents with quantified ROI βœ… The 6 elements of alignment (Idea, Why, What, How, Budget, Commitment) -βœ… How to formalize commitment with professional contracts -βœ… How to protect scope and handle change orders professionally -βœ… Navigating internal approval processes +βœ… Formalize commitment with professional contracts +βœ… Protect scope and handle change orders professionally -This isn't about being pushy or defensive - it's about serving your clients and stakeholders with clarity. +*Free & open-source* | 55-75 minutes | Optional module -**Time:** 55-75 minutes -**Prerequisites:** Module 02 completed (WDS installed) -**When to use:** Optional - Use when you need stakeholder alignment -**When to skip:** If you're building something yourself with full autonomy +⏱️ Timestamps ---- +00:00 The Business Side Challenge +00:39 The Discovery Discipline +02:30 The 6-Element Toolkit +03:39 From Alignment to Contract +04:44 Becoming a Strategic Partner -## ⏱️ Timestamps +🎯 Key Concepts -_To be added after video production based on transcript_ +*Discovery Discipline* - Understand before you solve (measure twice, diagnose first) +*6 Elements of Alignment* - Idea, Why, What, How, Budget, Commitment +*Alignment Document* - Makes the case for why the project matters +*Signoff Documents* - External contracts or internal approval +*Scope Protection* - Clear boundaries, change order process ---- +πŸ“š Course Resources -## 🎯 Key Concepts +🌊 *WDS Presentation:* + -πŸ”Ή **The Discovery Discipline** - Understand before you solve (the carpenter measures twice, the doctor diagnoses first) +πŸ“– *Project Pitch Guide:* + -πŸ”Ή **The 6 Elements of Alignment** - Idea, Why, What, How, Budget, Commitment +πŸ“– *Service Agreement Templates:* + -πŸ”Ή **Alignment Document (Pitch)** - Makes the case for why the project matters, gets everyone on the same page - -πŸ”Ή **Professional Patience** - Separate discovery from solution, take notes and come back with a thoughtful proposal - -πŸ”Ή **Signoff Documents** - External contracts (consultant β†’ client) or internal signoff (employee β†’ stakeholders) - -πŸ”Ή **Scope Protection** - Clear boundaries, change order process, professional contracts that serve everyone - ---- - -## πŸ“š Course Resources - -### **This Module** -πŸ“– **Module 03 Overview:** Complete lesson structure -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/module-03-overview.md - -πŸ“– **Tutorial 03:** Step-by-step hands-on guide -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/tutorial-03.md - -### **Deliverable Documentation** -πŸ“– **Project Pitch:** What it is and how to create it -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/project-pitch.md - -πŸ“– **Service Agreement:** Contract templates and guidance -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/service-agreement.md - -### **WDS Workflows** -πŸ“– **Alignment & Signoff Workflow:** Complete process guide -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/workflows/1-project-brief/alignment-signoff/workflow.md - -### **Get Started with WDS** -🌊 **WDS Presentation Page:** Learn about the methodology -https://whiteport.com/whiteport-design-studio/ - -πŸ› οΈ **Installation Guide:** Download IDE, Install WDS -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md - -### **Community & Support** -πŸ’¬ **BMad Discord:** Share alignment documents, ask questions about contracts +οΏ½ *Discord Community:* [Discord invite link] -πŸ“– **GitHub Discussions:** Ask questions, share your journey -https://github.com/whiteport-collective/whiteport-design-studio/discussions +πŸ“– *GitHub Discussions:* + ---- +◀️ *Previous Module:* Module 02 - Installation & Setup + -## πŸŽ“ Course Navigation +▢️ *Next Module:* Module 04 - Product Brief (Coming Soon) -**◀️ Previous Module:** Module 02 - Installation & Setup -πŸ“Ί Video: https://www.youtube.com/watch?v=tYifpxFVVks -πŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-02-installation-setup/module-02-overview.md +πŸ“š *Full Course:* + -**▢️ Next Module:** Module 04 - Product Brief (Coming Soon) -πŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-04-product-brief/tutorial-04.md +🎯 *When to Use This Module:* +βœ… Consultant pitching to client +βœ… Employee seeking stakeholder approval +βœ… You struggle with business conversations +βœ… You've been stuck in scope creep -**πŸ“š Full Course Overview:** -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md +❌ *Skip if:* Building yourself with full autonomy ---- +οΏ½ *Discovery Discipline Flow:* +1. Discovery meeting β†’ 2. Reflect β†’ 3. Create pitch β†’ 4. Present β†’ 5. Iterate β†’ 6. Get acceptance β†’ 7. Generate contract β†’ 8. Sign β†’ 9. Proceed to Project Brief -## 🎯 Who This Module Is For +βœ… *Next Steps:* +1. Complete the 5 lessons +2. Follow Tutorial 03 to create alignment document +3. Practice with real or hypothetical project +4. Start Module 04 (or skip if you don't need alignment) -**Use this module when:** -βœ… Consultant β†’ Client (you're pitching a project) -βœ… Business β†’ Suppliers (you're hiring designers/developers) -βœ… Employee β†’ Stakeholders (you need approval and budget) -βœ… You struggle with business conversations -βœ… You feel uncomfortable talking about money -βœ… You've been stuck in scope creep situations +🎨 *About WDS* +AI-augmented design methodology by MΓ₯rten Angner (Whiteport, Sweden). Transforms designers into strategic leaders who confidently navigate business conversations and protect projects. -**Skip this module when:** -❌ You're building it yourself with full autonomy -❌ You don't need stakeholder approval -❌ You have complete decision-making power +#DesignBusiness #ClientContracts #ScopeCreep #WDS #DesignROI #ProjectPitch -**Go directly to:** Module 04 - Product Brief +πŸ’Ό *Remember:* Alignment isn't about being pushy. Contracts aren't about being defensive. They're about serving clients with clarity. ---- - -## πŸ“‹ What You'll Create - -After completing this module, you'll have: - -- βœ… **Alignment Document (Pitch)** - Compelling case for why the project matters -- βœ… **Signoff Document** - External contract or internal approval document -- βœ… **ROI Calculations** - Quantified value for stakeholders -- βœ… **Scope Boundaries** - Clear definition of what's included/excluded -- βœ… **Change Order Process** - Professional way to handle scope changes -- βœ… **Professional Confidence** - Ability to have business conversations with clarity - ---- - -## πŸ’‘ The Discovery Discipline - -**The Flow:** -1. **Discovery meeting** - Ask questions, understand their goals -2. **Stop & reflect** - "Let me come back with a thoughtful proposal" -3. **Create alignment document** - Build pitch based on what they told you -4. **Presentation meeting** - Share proposal showing you understood them -5. **Iterate** - Negotiate and refine together -6. **Get acceptance** - They say yes to the pitch -7. **Generate signoff** - Create contract based on accepted pitch -8. **Sign** - Both parties commit -9. **Proceed to Project Brief** - Use pitch and contract as the backbone - -**Key principle:** The carpenter measures twice, the doctor diagnoses first. - ---- - -## βœ… Next Steps - -1. βœ… Complete the 5 lessons (read through the written content) -2. βœ… Follow Tutorial 03 to create your alignment document -3. βœ… Review the deliverable documentation (Project Pitch & Service Agreement) -4. βœ… Practice with a real or hypothetical project -5. βœ… Start Module 04: Product Brief (or skip to it if you don't need alignment) -6. βœ… Join the community to share your alignment documents - -**Time Investment:** 55-75 minutes for lessons + tutorial -**Payoff:** Professional confidence and protected projects - ---- - -## 🎨 About Whiteport Design Studio (WDS) - -WDS is an AI-augmented design methodology created by MΓ₯rten Angner, UX designer and founder of Whiteport, a design and development agency from Sweden. WDS is a module for the BMad Method - an open-source AI-augmented development framework. - -**The Mission:** Transform designers from task-doers into strategic leaders who can confidently navigate business conversations, protect their projects, and deliver measurable value. - -**This Module:** Teaches the often-uncomfortable business side of design - not because you're defensive, but because clarity serves everyone. - ---- - -## 🏷️ Tags - -#DesignBusiness #ClientContracts #FreelanceDesign #DesignProposals #DesignPricing #ScopeCreep #ChangeOrders #DesignStrategy #ProfessionalDesign #WhiteportDesignStudio #WDS #BMadMethod #DesignWorkflow #ClientAlignment #StakeholderBuyIn #DesignROI #ProjectPitch #ServiceAgreement #DesignCareer #DesignConsultant - ---- - -## πŸ’Ό Professional Boundaries Serve Everyone - -**Remember:** - -Alignment isn't about being pushy. -Contracts aren't about being defensive. -Scope boundaries aren't about being rigid. - -**They're about serving your clients and stakeholders with clarity.** - -When you're clear about: -- Scope boundaries -- Investment required -- Change order process - -You're protecting the project so it can succeed. - -**Ready to master the business side of design? Watch the full module and complete the tutorial! πŸ’Ό** +*Ready to master the business side of design? Watch the full module! πŸ’Ό* diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/01-lesson.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/01-lesson.md index c76972dba..2e3882eac 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/01-lesson.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/01-lesson.md @@ -23,7 +23,7 @@ Professional cloud storage + time machine for your project files. Every change i ### Step 1: Sign Up -1. Go to **https://github.com** +1. Go to **** 2. Click **"Sign up"** 3. Enter email, password, username diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/01-quick-checklist.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/01-quick-checklist.md index c62a12f8f..cf2ce1672 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/01-quick-checklist.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/01-quick-checklist.md @@ -6,7 +6,7 @@ ## Part 1: Create GitHub Account -- [ ] Go to **https://github.com** +- [ ] Go to **** - [ ] Click **"Sign up"** - [ ] Enter email, password, username (professional: `yourname-designer`) - [ ] Verify email diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/02-full-lesson.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/02-full-lesson.md index c76972dba..2e3882eac 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/02-full-lesson.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-git-setup/02-full-lesson.md @@ -23,7 +23,7 @@ Professional cloud storage + time machine for your project files. Every change i ### Step 1: Sign Up -1. Go to **https://github.com** +1. Go to **** 2. Click **"Sign up"** 3. Enter email, password, username diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-github-and-ide-setup/checklist.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-github-and-ide-setup/checklist.md index 5c256ed04..504e24c36 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-github-and-ide-setup/checklist.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-github-and-ide-setup/checklist.md @@ -6,7 +6,7 @@ ## Part 1: GitHub Account -- [ ] Go to **https://github.com** +- [ ] Go to **** - [ ] Click **"Sign up"** - [ ] Enter email, password, username (professional: `yourname-designer`) - [ ] Verify email @@ -51,8 +51,8 @@ ### Choose & Download -- [ ] **Cursor** (recommended) β†’ https://cursor.sh -- [ ] **VS Code** (alternative) β†’ https://code.visualstudio.com +- [ ] **Cursor** (recommended) β†’ +- [ ] **VS Code** (alternative) β†’ - [ ] Download installer ### Install diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-github-and-ide-setup/lesson.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-github-and-ide-setup/lesson.md index 55422288a..ea6c86801 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-github-and-ide-setup/lesson.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-github-and-ide-setup/lesson.md @@ -23,7 +23,7 @@ Professional cloud storage + time machine for your project files. Every change i ### Step 1: Create GitHub Account -1. Go to **https://github.com** +1. Go to **** 2. Click **"Sign up"** (top right) 3. Enter email, password, username @@ -130,12 +130,12 @@ Your workspace for creating specifications. Like Microsoft Word, but for design **Cursor (Recommended)** - Built for AI assistance - Perfect for WDS -- Download: https://cursor.sh +- Download: **VS Code (Alternative)** - Industry standard - Works great too -- Download: https://code.visualstudio.com +- Download: **For beginners:** Choose Cursor diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-setting-up-github/checklist.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-setting-up-github/checklist.md index 32383bda0..a93f57f95 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-setting-up-github/checklist.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-01-setting-up-github/checklist.md @@ -6,7 +6,7 @@ ## Create GitHub Account -- [ ] Go to **https://github.com** +- [ ] Go to **** - [ ] Click **"Sign up"** - [ ] Enter email, password, username (professional: `yourname-designer`) - [ ] Verify email diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-git-configuration/checklist.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-git-configuration/checklist.md index a069c50dc..63d0f470c 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-git-configuration/checklist.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-git-configuration/checklist.md @@ -7,13 +7,13 @@ ## Choose Approach - [ ] **Option 1:** Let Cursor handle Git (do nothing - easiest!) -- [ ] **Option 2:** Use GitHub Desktop (visual) β†’ https://desktop.github.com +- [ ] **Option 2:** Use GitHub Desktop (visual) β†’ --- ## If Using GitHub Desktop -- [ ] Download from https://desktop.github.com +- [ ] Download from - [ ] Install - [ ] Sign in with GitHub account - [ ] βœ… Ready for visual cloning diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/01-quick-checklist.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/01-quick-checklist.md index d891504b9..ba7a243aa 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/01-quick-checklist.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/01-quick-checklist.md @@ -6,8 +6,8 @@ ## Choose IDE -- [ ] **Cursor** (recommended) β†’ https://cursor.sh -- [ ] **VS Code** (alternative) β†’ https://code.visualstudio.com +- [ ] **Cursor** (recommended) β†’ +- [ ] **VS Code** (alternative) β†’ --- diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-full-lesson.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-full-lesson.md index 594a11e4c..208385cf1 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-full-lesson.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-full-lesson.md @@ -20,13 +20,13 @@ - Built for AI assistance - Perfect for WDS -- Download: https://cursor.sh +- Download: ### VS Code (Alternative) - Industry standard - Works great too -- Download: https://code.visualstudio.com +- Download: **For beginners:** Choose Cursor diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-lesson.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-lesson.md index 594a11e4c..208385cf1 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-lesson.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-lesson.md @@ -20,13 +20,13 @@ - Built for AI assistance - Perfect for WDS -- Download: https://cursor.sh +- Download: ### VS Code (Alternative) - Industry standard - Works great too -- Download: https://code.visualstudio.com +- Download: **For beginners:** Choose Cursor diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-quick-checklist.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-quick-checklist.md index d891504b9..ba7a243aa 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-quick-checklist.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-ide-installation/02-quick-checklist.md @@ -6,8 +6,8 @@ ## Choose IDE -- [ ] **Cursor** (recommended) β†’ https://cursor.sh -- [ ] **VS Code** (alternative) β†’ https://code.visualstudio.com +- [ ] **Cursor** (recommended) β†’ +- [ ] **VS Code** (alternative) β†’ --- diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-install-ide/checklist.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-install-ide/checklist.md index ccf325258..85c1d2f7f 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-install-ide/checklist.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-install-ide/checklist.md @@ -6,8 +6,8 @@ ## Choose IDE -- [ ] **Cursor** (recommended for AI work) β†’ https://cursor.sh -- [ ] **VS Code** (alternative) β†’ https://code.visualstudio.com +- [ ] **Cursor** (recommended for AI work) β†’ +- [ ] **VS Code** (alternative) β†’ --- diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-install-ide/tutorial.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-install-ide/tutorial.md index 283a7038b..2797e6880 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-install-ide/tutorial.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-02-install-ide/tutorial.md @@ -31,7 +31,7 @@ Your workspace for creating specifications. Like Microsoft Word, but for design - Built for AI assistance - Modern interface - Perfect for WDS -- **Download:** https://cursor.sh +- **Download:** ### VS Code (Alternative) @@ -39,7 +39,7 @@ Your workspace for creating specifications. Like Microsoft Word, but for design - Industry standard - More extensions - Works great with WDS too -- **Download:** https://code.visualstudio.com +- **Download:** **For beginners:** Choose Cursor. It's designed for AI-augmented work. @@ -49,7 +49,7 @@ Your workspace for creating specifications. Like Microsoft Word, but for design ### 2.1 Download -1. Go to **https://cursor.sh** +1. Go to **** 2. Click download button for your platform 3. Wait for download @@ -95,7 +95,7 @@ If you chose VS Code instead: ### Download and Install -1. Go to **https://code.visualstudio.com** +1. Go to **** 2. Download for your platform 3. Follow same installation steps as Cursor above 4. Complete first-launch setup diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-cloning/02-full-lesson.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-cloning/02-full-lesson.md index ed79dcfda..e7632e3b7 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-cloning/02-full-lesson.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-cloning/02-full-lesson.md @@ -86,7 +86,7 @@ git clone https://github.com/john-designer/dog-walker-app.git - You click "Install" - Done! -**Alternative:** Use GitHub Desktop (https://desktop.github.com) for visual interface +**Alternative:** Use GitHub Desktop () for visual interface --- diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-cloning/03-lesson.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-cloning/03-lesson.md index ed79dcfda..e7632e3b7 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-cloning/03-lesson.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-cloning/03-lesson.md @@ -86,7 +86,7 @@ git clone https://github.com/john-designer/dog-walker-app.git - You click "Install" - Done! -**Alternative:** Use GitHub Desktop (https://desktop.github.com) for visual interface +**Alternative:** Use GitHub Desktop () for visual interface --- diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-setup/checklist.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-setup/checklist.md index 3ce97cd63..6e03430f9 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-setup/checklist.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-setup/checklist.md @@ -7,14 +7,14 @@ ## Choose Approach - [ ] **Option 1:** Let Cursor handle Git (easiest - do nothing now!) -- [ ] **Option 2:** Use GitHub Desktop (visual) β†’ https://desktop.github.com +- [ ] **Option 2:** Use GitHub Desktop (visual) β†’ - [ ] **Option 3:** Check terminal: `git --version` --- ## If Using GitHub Desktop -- [ ] Download from https://desktop.github.com +- [ ] Download from - [ ] Install - [ ] Sign in with GitHub account - [ ] βœ… Ready to clone visually diff --git a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-setup/tutorial.md b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-setup/tutorial.md index b1889a1c8..555674fe1 100644 --- a/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-setup/tutorial.md +++ b/src/modules/wds/docs/learn-wds/module-02-installation-setup/lesson-03-git-setup/tutorial.md @@ -77,7 +77,7 @@ When you try to clone a repository in Lesson 04, Cursor will: #### Install GitHub Desktop -1. Download from **https://desktop.github.com** +1. Download from **** 2. Install it (follow standard installer) 3. Open GitHub Desktop 4. Sign in with your GitHub account diff --git a/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-01-chaos-problem.md b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-01-chaos-problem.md new file mode 100644 index 000000000..9be5c5e6f --- /dev/null +++ b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-01-chaos-problem.md @@ -0,0 +1,193 @@ +# Module 04: Product Brief + +## Lesson 1: The Chaos Problem + +**Why projects fail before they start** + +--- + +## The Cost of No Foundation + +You've seen it happen. A team spends months designing something beautiful... that solves the wrong problem. Or builds for the wrong users. Or misses critical constraints. The Product Brief prevents this. + +Picture this: A designer creates gorgeous mockups for a mobile app. Developers start building. Three weeks in, someone asks: "Wait, does this need to work offline?" Nobody knows. The stakeholder says yes. The entire architecture needs to be rebuilt. Two months of work wasted. + +Or this: A team launches a feature they're proud of. Usage is terrible. Why? Because they built what they thought users needed, not what users actually needed. They never validated the problem. They never defined success criteria. They just... built. + +**The pattern is always the same:** + +- Designers create solutions that don't match business goals +- Developers build features nobody asked for +- Stakeholders keep changing direction mid-project +- Teams waste months on rework because nobody was aligned from the start + +This isn't a failure of skill. It's a failure of foundation. + +--- + +## What the Product Brief Does + +The Product Brief is your insurance policy against chaos. It's a 2-3 page strategic document that answers the questions before they become problems. + +**Think of it as your project's constitution:** + +- Everything else is legislation +- When there's confusion, you reference the brief +- When stakeholders disagree, you reference the brief +- When designers need to make a decision, they reference the brief +- When developers need to understand "why," they reference the brief + +**It creates alignment by answering 5 critical questions:** + +1. **What are we building and why does it matter?** (Vision & Positioning) +2. **Who is this for?** (Target Users & Stakeholders) +3. **How will we know it's successful?** (Success Criteria) +4. **What else exists and how are we different?** (Competitive Landscape) +5. **What are our boundaries?** (Constraints) + +When everyone on the team can answer these questions the same way, you have alignment. When they can't, you have chaos. + +--- + +## The Single Source of Truth + +Here's what makes the Product Brief powerful: it's not just documentation. It's the single source of truth that coordinates your entire team. + +**Without a Product Brief:** + +- Designer: "I think we should add social features" +- Developer: "But I thought this was about privacy?" +- Stakeholder: "Can we also make it work for enterprise?" +- Product Manager: "Wait, what's our timeline again?" + +Everyone is working from different assumptions. Every decision requires a meeting. Every meeting creates more confusion. + +**With a Product Brief:** + +- Designer: "Should we add social features?" β†’ Check the vision and constraints +- Developer: "Does this need enterprise features?" β†’ Check the target users +- Stakeholder: "Can we expand the scope?" β†’ Check the success criteria and constraints +- Product Manager: "What's our priority?" β†’ Check the vision and competitive landscape + +The brief answers the questions. Decisions become faster. Alignment stays intact. + +--- + +## Guiding Scope Decisions + +One of the most valuable aspects of a Product Brief is how it guides scope decisions. Not by restricting creativity, but by providing clear criteria for what fits and what doesn't. + +**Without clear criteria, every decision is a debate:** + +- "Should we add this feature?" β†’ "I don't know, what do you think?" +- "Should we support this platform?" β†’ "Let me ask the team..." +- "Should we expand to this market?" β†’ "We'll discuss it in the next meeting..." + +Every unclear decision creates delay. Every debate consumes time. Every "let's discuss" postpones progress. + +**Clear criteria enable fast decisions:** + +- "Should we add this feature?" β†’ "Does it serve our target users and contribute to success criteria? Yes β†’ Build it. No β†’ Phase 2" +- "Should we support this platform?" β†’ "Check the constraints and target users - does it align? Yes β†’ Prioritize. No β†’ Future consideration" +- "Should we expand to this market?" β†’ "Check positioning and constraints - is this our target? Yes β†’ Plan for it. No β†’ Out of scope" + +The brief gives you a framework for saying yes or no. More importantly, it gives you criteria that everyone already agreed to. + +--- + +## Time Investment vs Payoff + +Here's the math that matters: + +**Without a Product Brief:** +- Weeks of meetings trying to align +- Constant back-and-forth on decisions +- Major rework when assumptions don't match +- Scope creep eating into timeline +- Team frustration and confusion + +**With a Product Brief:** +- 30-45 minutes to create +- Clear answers to guide decisions +- Alignment from day one +- Protected scope boundaries +- Confident execution + +**The payoff is massive:** + +One hour of strategic thinking saves weeks of tactical rework. One document prevents months of misalignment. One conversation with Saga creates clarity that lasts the entire project. + +--- + +## Your Insurance Policy Against Chaos + +Think of the Product Brief as insurance. You invest a small amount of time upfront to protect against massive losses later. + +**What you're protecting against:** + +- ❌ Building the wrong thing beautifully +- ❌ Solving problems nobody has +- ❌ Missing critical constraints until it's too late +- ❌ Stakeholders changing direction mid-project +- ❌ Team members working from different assumptions +- ❌ Scope creep destroying your timeline +- ❌ Launching something that fails because success was never defined + +**What you're protecting:** + +- βœ… Your time (no wasted rework) +- βœ… Your team's morale (no constant confusion) +- βœ… Your stakeholders' investment (no misaligned expectations) +- βœ… Your project's success (clear definition of what success means) + +--- + +## The Foundation for Everything + +Here's what makes the Product Brief truly powerful: it's not just a document you create and file away. It's the foundation for everything that follows. + +**Every phase of WDS builds on the Product Brief:** + +- **Phase 2: Trigger Mapping** β†’ Uses target users and success criteria from the brief +- **Phase 3: PRD Platform** β†’ Uses constraints and technical requirements from the brief +- **Phase 4: UX Design** β†’ Uses vision, users, and success criteria from the brief +- **Phase 5: Design System** β†’ Uses constraints and positioning from the brief +- **Phase 6: Design Deliveries** β†’ Uses all elements from the brief + +Without the brief, every phase starts with confusion. With the brief, every phase starts with clarity. + +--- + +## The Emotional Truth + +Let's be honest about what it feels like to work without a Product Brief: + +- Constant uncertainty about whether you're building the right thing +- Anxiety when stakeholders ask "why did you design it this way?" +- Frustration when developers misunderstand your intent +- Exhaustion from endless meetings trying to get alignment +- Dread when you realize a critical constraint was missed + +Now imagine working with a Product Brief: + +- Confidence that you're solving the right problem +- Clear answers when stakeholders ask questions +- Developers who understand the "why" behind decisions +- Fast decisions because the brief answers the questions +- Peace of mind that nothing critical was missed + +**This one document is the difference between confident execution and constant confusion.** + +--- + +## What's Next + +In the next lesson, we'll explore the 5 strategic questions that every Product Brief must answer. These aren't just sections to fill out - they're the questions that guide every design decision throughout your project. + +--- + +**[Continue to Lesson 2: The 5 Strategic Questions β†’](lesson-02-five-questions.md)** + +--- + +[← Back to Module Overview](module-04-overview.md) diff --git a/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-02-five-questions.md b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-02-five-questions.md new file mode 100644 index 000000000..7ca1fd8c1 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-02-five-questions.md @@ -0,0 +1,364 @@ +# Module 04: Product Brief + +## Lesson 2: The 5 Strategic Questions + +**What every Product Brief must answer** + +--- + +## The Framework That Guides Everything + +Every successful Product Brief answers 5 critical questions. These aren't just sections to fill out - they're the questions that guide every design decision throughout your project. + +**The 5 Strategic Questions:** + +1. **What & Why** - What are we building and why does it matter? +2. **Who** - Who is this for? +3. **How We'll Know** - How will we know it's successful? +4. **Context** - What else exists and how are we different? +5. **Boundaries** - What are our constraints? + +When you can answer these questions clearly, everything else flows. When you can't, every decision becomes a debate. + +--- + +## Question 1: What & Why + +**What are we building and why does it matter?** + +This is your vision and positioning. It's the north star that guides every decision. + +### Vision: The Big Picture + +Your vision is a clear, compelling statement of what you're building and why it matters. It's aspirational but grounded. It inspires but also guides. + +**A good vision statement:** +- Describes what you're building +- Explains the problem you're solving +- Identifies who benefits +- Conveys why this matters + +**Example structure:** +"We're building [PRODUCT] for [TARGET USER] because [PROBLEM/OPPORTUNITY]. This matters because [IMPACT]." + +**What makes a vision powerful:** +- βœ… Clear enough to guide decisions +- βœ… Inspiring enough to motivate the team +- βœ… Specific enough to say no to things that don't fit +- βœ… Flexible enough to allow creative solutions + +**What makes a vision weak:** +- ❌ Too vague ("make the world better") +- ❌ Too tactical ("add a calendar feature") +- ❌ Too broad ("solve all problems") +- ❌ Too limiting ("exactly 3 buttons") + +### Positioning: Who & What Makes It Unique + +Positioning answers three critical questions: +- **Target:** Who is this for? +- **Value:** What problem does it solve? +- **Differentiation:** How is it different from alternatives? + +**Why positioning matters:** +- Guides design decisions (what feels right for this audience?) +- Informs feature prioritization (what solves their problem best?) +- Shapes communication (how do we talk to them?) +- Prevents scope creep (does this fit our positioning?) + +--- + +## Question 2: Who + +**Who is this for?** + +You can't design for "everyone." You need to know exactly who you're serving and who has a stake in the project's success. + +### Target Users + +**Primary Users:** +- Who uses the product directly? +- What are their goals and needs? +- What's their context and constraints? + +**Secondary Users:** +- Who benefits indirectly? +- How does the product affect them? +- What do they need from it? + +**Why this matters:** +Different users have different needs. You can't optimize for everyone. Knowing your primary users lets you make confident trade-offs. + +### Stakeholders + +**Business Stakeholders:** +- Who decides if this project continues? +- Who controls the budget? +- What do they need to see to consider it successful? + +**Technical Stakeholders:** +- Who builds and maintains this? +- What are their constraints and preferences? +- What technical decisions affect them? + +**Why this matters:** +Stakeholders aren't users, but they affect the project. Understanding their needs prevents surprises and ensures support. + +--- + +## Question 3: How We'll Know + +**How will we know it's successful?** + +Success criteria are measurable outcomes that indicate whether the project achieved its goals. Without them, "success" is just opinion. + +### The Four Dimensions of Success + +**User Success:** +- How do users benefit? +- What behaviors change? +- What satisfaction metrics improve? + +**Examples:** +- "80% of users report reduced stress" +- "Average task completion time < 2 minutes" +- "90% task completion rate" + +**Business Success:** +- What business outcomes improve? +- What revenue or growth metrics matter? +- What efficiency gains occur? + +**Examples:** +- "1,000 active users by month 6" +- "70% weekly active user rate" +- "$50K MRR by month 12" + +**Technical Success:** +- What performance standards must be met? +- What reliability metrics matter? +- What security requirements exist? + +**Examples:** +- "99.9% uptime" +- "Page load < 2 seconds" +- "Zero critical security issues" + +**Design Success:** +- What usability standards must be met? +- What satisfaction scores matter? +- What engagement metrics indicate good design? + +**Examples:** +- "SUS score > 75" +- "NPS score > 40" +- "80% feature discoverability" + +### Making Criteria SMART + +Every success criterion should be: +- **Specific** - Clear and unambiguous +- **Measurable** - Can track progress +- **Achievable** - Realistic given resources +- **Relevant** - Aligned with project goals +- **Time-bound** - Has a deadline + +**Weak criteria:** +- ❌ "Make it better" +- ❌ "Increase engagement" +- ❌ "Users will love it" + +**Strong criteria:** +- βœ… "Increase daily active users by 40% within 3 months" +- βœ… "Reduce support tickets by 50% within 6 months" +- βœ… "Achieve NPS score of 45+ by launch" + +--- + +## Question 4: Context + +**What else exists and how are we different?** + +Understanding the competitive landscape informs design decisions and positioning strategy. + +### Competitive Landscape + +**Direct Competitors:** +- Who offers the same solution? +- What do they do well? +- What do they do poorly? +- How are we different? + +**Indirect Alternatives:** +- What other ways do people solve this problem? +- Why might someone choose those instead? +- What can we learn from them? + +**Why this matters:** +- Informs design decisions (what's expected vs what's differentiated) +- Guides feature prioritization (what's table stakes vs competitive advantage) +- Shapes positioning (how we talk about what makes us different) +- Prevents "me too" design (copying without understanding why) + +### Your Unique Positioning + +**What makes you different:** +- Approach (how you solve the problem) +- Audience (who you serve) +- Experience (how it feels to use) +- Business model (how you make money) +- Technology (what enables your solution) + +**Why differentiation matters:** +If you're not different, you're competing on price. If you're different in ways that matter to your target users, you're competing on value. + +--- + +## Question 5: Boundaries + +**What are our constraints?** + +Constraints aren't limitations - they're clarity. They guide decisions and prevent wasted effort on impossible solutions. + +### Technical Constraints + +**Platform Requirements:** +- Web, mobile, desktop? +- Which browsers/devices? +- Online/offline capability? + +**Integration Requirements:** +- What systems must it connect to? +- What APIs are available? +- What data needs to sync? + +**Performance Requirements:** +- How fast must it load? +- How many users must it support? +- What's the acceptable downtime? + +**Security & Compliance:** +- What data protection is required? +- What regulations apply (GDPR, CCPA, HIPAA)? +- What security standards must be met? + +### Business Constraints + +**Budget:** +- What's the total budget? +- What can be spent on design vs development? +- What's the runway? + +**Timeline:** +- When must it launch? +- What are the key milestones? +- What's the MVP vs future phases? + +**Resources:** +- How many people? +- What skills are available? +- What can be outsourced? + +**Market Positioning:** +- What price point? +- What market segment? +- What brand perception? + +### Design Constraints + +**Brand Guidelines:** +- What visual standards exist? +- What voice and tone? +- What's on-brand vs off-brand? + +**Accessibility:** +- What compliance level (WCAG 2.1 AA, AAA)? +- What specific disabilities to design for? +- What testing is required? + +**Localization:** +- What languages? +- What cultural considerations? +- What regional variations? + +**Existing Systems:** +- What design systems exist? +- What components are available? +- What patterns are established? + +### Why Constraints Matter + +**Constraints guide decisions:** +- "Should we add this feature?" β†’ Check constraints +- "Can we support this platform?" β†’ Check constraints +- "Should we use this approach?" β†’ Check constraints + +**Constraints prevent waste:** +- No designing solutions that can't be built +- No building for platforms you don't support +- No planning for budgets you don't have + +**Constraints enable creativity:** +- Limitations force innovative solutions +- Boundaries create focus +- Clarity enables confident decisions + +--- + +## How the Questions Work Together + +These 5 questions aren't isolated - they work together to create a complete strategic picture. + +**Vision & Positioning** (What & Why) β†’ Guides everything else +↓ +**Target Users** (Who) β†’ Informs what success looks like +↓ +**Success Criteria** (How We'll Know) β†’ Defines measurable outcomes +↓ +**Competitive Landscape** (Context) β†’ Shapes differentiation strategy +↓ +**Constraints** (Boundaries) β†’ Grounds everything in reality + +**When making any design decision:** +1. Does it align with the vision? +2. Does it serve the target users? +3. Does it contribute to success criteria? +4. Does it differentiate us from competitors? +5. Is it possible within our constraints? + +If the answer to all 5 is yes, it's probably a good decision. If any answer is no, reconsider. + +--- + +## The Power of Clear Answers + +When everyone on your team can answer these 5 questions the same way, you have alignment. When they can't, you have chaos. + +**With clear answers:** +- Designers make confident decisions +- Developers understand the "why" +- Stakeholders trust the direction +- Product managers prioritize effectively +- The team moves fast + +**Without clear answers:** +- Every decision requires a meeting +- Every meeting creates more confusion +- Every confusion creates delay +- Every delay creates frustration + +**This is why the Product Brief matters. It answers the questions before they become problems.** + +--- + +## What's Next + +In the next lesson, we'll look at what a Product Brief actually looks like - the document structure, how to keep it concise, and how to make it useful for your entire team. + +--- + +**[Continue to Lesson 3: The Document Structure β†’](lesson-03-document-structure.md)** + +--- + +[← Back to Lesson 1](lesson-01-chaos-problem.md) | [Back to Module Overview](module-04-overview.md) diff --git a/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-03-document-structure.md b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-03-document-structure.md new file mode 100644 index 000000000..39d58f6b7 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-03-document-structure.md @@ -0,0 +1,388 @@ +# Module 04: Product Brief + +## Lesson 3: The Document Structure + +**What a Product Brief actually looks like** + +--- + +## Not a Novel, A Strategic Document + +A Product Brief is not a comprehensive specification. It's not a detailed requirements document. It's not a 50-page strategy deck. + +It's a 2-3 page strategic document that answers the 5 critical questions clearly and concisely. + +**Why 2-3 pages?** +- Short enough that people actually read it +- Long enough to provide real clarity +- Scannable enough to reference quickly +- Complete enough to guide decisions + +**The goal:** Anyone on the team can read it in 5 minutes and understand the strategic direction. + +--- + +## The Template Structure + +Here's what a Product Brief looks like: + +```markdown +# Project Brief: [Project Name] + +## Vision + +[1-2 paragraphs: What you're building and why it matters] + +## Positioning + +**Target:** [Who it's for] +**Value:** [What problem it solves] +**Differentiation:** [How it's unique] + +## Target Users + +**Primary Users:** +- [Direct users and their needs] + +**Secondary Users:** +- [Indirect beneficiaries] + +**Stakeholders:** +- Business: [Decision makers, budget holders] +- Technical: [Developers, infrastructure] + +## Success Criteria + +**User Success:** +- [Measurable user outcomes] + +**Business Success:** +- [Revenue, growth, efficiency metrics] + +**Technical Success:** +- [Performance, reliability, security] + +**Design Success:** +- [Usability, satisfaction, engagement] + +## Competitive Landscape + +**Direct Competitors:** +- [Who else does this] + +**Alternatives:** +- [Other ways to solve the problem] + +**Our Differentiation:** +- [Why choose us] + +## Constraints + +**Technical:** +- Platform: [Web, mobile, desktop] +- Performance: [Speed, scalability requirements] +- Integrations: [Required connections] +- Security: [Compliance, data protection] + +**Business:** +- Budget: [Total available] +- Timeline: [Launch date, milestones] +- Resources: [Team size, skills] + +**Design:** +- Brand: [Guidelines, voice, tone] +- Accessibility: [WCAG level, requirements] +- Localization: [Languages, regions] +``` + +--- + +## Section-by-Section Breakdown + +### Vision (1-2 paragraphs) + +**What goes here:** +- What you're building +- The problem you're solving +- Who benefits +- Why this matters + +**Keep it:** +- Clear and specific +- Inspiring but grounded +- Focused on outcomes +- Free of jargon + +**Example:** +"We're building a family coordination platform that helps parents manage their dog's care schedule. Every day, families struggle with missed feedings, forgotten walks, and unclear responsibilities. Our platform creates a single source of truth where every family member knows exactly what needs to be done, when, and by whom. This matters because reducing coordination stress strengthens family bonds and ensures consistent care for pets who depend on us." + +### Positioning (3 lines) + +**What goes here:** +- **Target:** One sentence describing who this is for +- **Value:** One sentence describing what problem it solves +- **Differentiation:** One sentence describing how it's different + +**Keep it:** +- Specific (not "everyone") +- Problem-focused (not feature-focused) +- Differentiated (not "better quality") + +**Example:** +- **Target:** Busy parents managing family dog care responsibilities +- **Value:** Eliminates coordination confusion and ensures consistent pet care +- **Differentiation:** Family-focused approach vs task management apps + +### Target Users (Bullet lists) + +**What goes here:** +- Primary users (who uses it directly) +- Secondary users (who benefits indirectly) +- Business stakeholders (who decides/pays) +- Technical stakeholders (who builds/maintains) + +**Keep it:** +- Specific about needs and context +- Clear about priorities (primary vs secondary) +- Realistic about who actually matters + +**Example:** +**Primary:** Parents (25-45) managing household responsibilities, tech-comfortable, value organization +**Secondary:** Children participating in care, the dog receiving consistent care +**Business:** Founders (bootstrap), future investors +**Technical:** Small dev team (2 developers, 1 designer) + +### Success Criteria (Organized by dimension) + +**What goes here:** +- User success (behavior, satisfaction) +- Business success (revenue, growth) +- Technical success (performance, reliability) +- Design success (usability, engagement) + +**Keep it:** +- Measurable (numbers, not feelings) +- Time-bound (by when) +- Achievable (realistic) +- Relevant (aligned with vision) + +**Example:** +**User Success:** +- 80% of users report reduced coordination stress (survey, 3 months) +- Average task completion time < 2 minutes +- 90% task completion rate + +**Business Success:** +- 1,000 active families by month 6 +- 70% weekly active users +- $50K MRR by month 12 + +### Competitive Landscape (Organized by type) + +**What goes here:** +- Direct competitors (same solution) +- Indirect alternatives (different approach) +- Your differentiation (why you're different) + +**Keep it:** +- Honest about competition +- Focused on learning (not dismissing) +- Clear about differentiation + +**Example:** +**Direct:** Cozi (family calendar), OurHome (chore management) +**Alternatives:** Shared calendars, paper lists, verbal coordination +**Differentiation:** Pet-care focused, family-centric design, offline capability + +### Constraints (Organized by category) + +**What goes here:** +- Technical (platform, performance, integrations) +- Business (budget, timeline, resources) +- Design (brand, accessibility, localization) + +**Keep it:** +- Specific (not vague) +- Justified (explain why) +- Realistic (acknowledge trade-offs) + +**Example:** +**Technical:** +- Platform: Mobile (iOS/Android) + web +- Performance: < 2s load time, offline core features +- Integrations: None for MVP +- Security: GDPR compliance required + +**Business:** +- Budget: Bootstrap (no external funding yet) +- Timeline: 6 months to MVP +- Resources: 2 developers, 1 designer + +**Design:** +- Brand: Family-friendly, organized, calm +- Accessibility: WCAG 2.1 AA minimum +- Localization: Swedish primary, English secondary + +--- + +## Making It Scannable + +The Product Brief should be easy to scan. Use formatting to help: + +**Headers:** +- Clear section headers (## for main sections) +- Subsection headers where needed (### for categories) + +**Lists:** +- Bullet points for multiple items +- Numbered lists for sequential items +- Bold labels for categories + +**White Space:** +- Blank lines between sections +- Short paragraphs (2-3 sentences max) +- Avoid walls of text + +**Emphasis:** +- Bold for key terms +- Italics for emphasis (sparingly) +- No ALL CAPS (except acronyms) + +--- + +## Keeping It Concise + +**How to stay under 3 pages:** + +**Do:** +- βœ… Use clear, direct language +- βœ… Focus on decisions, not descriptions +- βœ… Include only what guides work +- βœ… Use bullets instead of paragraphs +- βœ… Be specific, not comprehensive + +**Don't:** +- ❌ Include background research +- ❌ Explain every decision +- ❌ List every possible feature +- ❌ Write marketing copy +- ❌ Over-explain obvious points + +**The test:** +If removing something wouldn't affect a design decision, remove it. + +--- + +## Living Document Approach + +The Product Brief isn't carved in stone. It's a living document that evolves as you learn. + +**When to update:** +- βœ… New market research changes positioning +- βœ… User feedback reveals different needs +- βœ… Business constraints change (budget, timeline) +- βœ… Competitive landscape shifts +- βœ… Success criteria need adjustment + +**When NOT to update:** +- ❌ Every small design decision +- ❌ Every feature idea +- ❌ Every stakeholder opinion +- ❌ Every team discussion + +**How to update:** +1. Identify what changed and why +2. Update the relevant section +3. Notify the team of the change +4. Reference the updated brief going forward + +**Version control:** +- Keep the brief in version control (Git) +- Use meaningful commit messages +- Tag major versions (v1.0, v2.0) +- Link to brief in project documentation + +--- + +## Making It Useful + +A Product Brief is only valuable if people actually use it. Here's how to make it useful: + +**Make it accessible:** +- Store it where everyone can find it +- Link to it from project documentation +- Reference it in meetings +- Include the path in onboarding + +**Make it referenced:** +- Start design reviews by reading relevant sections +- Link to specific sections in decisions +- Quote it when explaining "why" +- Update it when assumptions change + +**Make it trusted:** +- Keep it accurate (update when things change) +- Keep it concise (remove what's not useful) +- Keep it clear (no jargon or ambiguity) +- Keep it current (don't let it go stale) + +--- + +## Common Mistakes to Avoid + +**Too Vague:** +❌ "Create a great user experience" +βœ… "Achieve SUS score > 75 and NPS > 40" + +**Too Detailed:** +❌ "The button should be 44px tall with 12px padding and..." +βœ… "Follow WCAG 2.1 AA accessibility standards" + +**Too Aspirational:** +❌ "Be the best product in the world" +βœ… "Achieve 1,000 active users by month 6" + +**Too Rigid:** +❌ "Must have exactly these 15 features" +βœ… "Must solve core coordination problem (see success criteria)" + +**Too Long:** +❌ 20-page document nobody reads +βœ… 2-3 page document everyone references + +--- + +## The Real-World Test + +**A good Product Brief passes these tests:** + +**The 5-Minute Test:** +Can someone read it in 5 minutes and understand the strategic direction? + +**The Decision Test:** +Can someone use it to make a design decision without asking for clarification? + +**The Onboarding Test:** +Can a new team member read it and understand what you're building and why? + +**The Stakeholder Test:** +Can a stakeholder read it and know if the project is on track? + +**The Update Test:** +Can you update it in 10 minutes when something changes? + +If the answer to all 5 is yes, you have a good Product Brief. + +--- + +## What's Next + +In the next lesson, we'll explore how WDS makes creating this document fast through AI-guided conversation - turning what used to take days into 30-45 minutes. + +--- + +**[Continue to Lesson 4: How WDS Makes This Fast β†’](lesson-04-wds-advantage.md)** + +--- + +[← Back to Lesson 2](lesson-02-five-questions.md) | [Back to Module Overview](module-04-overview.md) diff --git a/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-04-wds-advantage.md b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-04-wds-advantage.md new file mode 100644 index 000000000..e74cb1dea --- /dev/null +++ b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-04-wds-advantage.md @@ -0,0 +1,402 @@ +# Module 04: Product Brief + +## Lesson 4: How WDS Makes This Great + +**The unique features that ensure excellence** + +--- + +## The Human-in-the-Loop Thinking Partnership + +Before we dive into the features, let's talk about what makes WDS fundamentally different: the **human-in-the-loop thinking partnership** approach inherited from the BMad methodology. + +**This is where you first experience writing together with AI.** + +Most AI tools work in one of two ways: +- **AI replaces you:** The AI does everything, you just approve or reject +- **AI takes orders:** You tell the AI exactly what to do, it executes + +**WDS works differently:** You and Saga collaborate as thinking partners. + +**You bring:** +- Vision and creative insight +- Domain expertise and context +- Strategic goals and priorities +- Understanding of your users + +**Saga brings:** +- Structure and methodology +- The right questions at the right time +- Best practices and frameworks +- Documentation and formatting + +**Together you create something neither could create alone:** +- You stay in strategic thinking mode +- Saga captures and structures your insights +- You see the document building in real-time +- Saga reflects back to confirm understanding +- You refine and clarify together +- The result is truly yours, just better articulated + +**This isn't AI doing the work for you. This is AI helping you think more clearly and capture your thinking more effectively.** + +When you activate Saga for the Product Brief, you're not filling out a form or prompting an AI. You're having a conversation with a thinking partner who helps you clarify what's in your head and ensures nothing important gets missed. + +This is the BMad way. This is the WDS way. And this is where you first experience what "writing together" actually means. + +--- + +## The Old Way vs The WDS Way + +**The Old Way:** + +1. Research what should go in a product brief +2. Find templates and try to adapt them +3. Stare at blank page wondering where to start (paralysis) +4. Schedule meetings with stakeholders to gather information +5. Take notes during meetings (hope you captured everything) +6. Try to synthesize notes into coherent document +7. Format the document properly +8. Send for review, wait for feedback +9. Revise based on feedback +10. Finally have a document (that's probably already outdated) + +**The challenge:** You're doing everything alone - the thinking, the structure, the writing, the formatting. It's exhausting and you're never quite sure if you got it right. + +**The WDS Way:** + +1. Activate Saga: `@wds-saga project-brief` +2. Have a natural conversation answering questions +3. Saga writes the document as you talk +4. Review and refine together +5. Done - professional Product Brief ready to use + +**The difference:** You have a thinking partner who ensures you cover what matters, structures your thinking clearly, and captures it professionally. The result is better because you're collaborating with someone who knows the methodology. + +--- + +## Feature 1: AI-Guided Discovery + +**The Problem:** Blank page paralysis. You know you need a Product Brief, but where do you start? What questions should you answer? What might you be forgetting? + +**The WDS Solution:** Saga guides you through the process with the right questions in the right order. + +**How it works:** + +Saga asks questions that spark insight: +- "What's your vision for this product?" +- "Who are you building this for?" +- "How will you know it's successful?" +- "What else exists in this space?" +- "What constraints should we be aware of?" + +**Why this matters:** +- No blank page paralysis - Saga knows what to ask +- No missed elements - Saga has a checklist +- No research needed - Saga knows the methodology +- No formatting decisions - Saga structures it properly + +**What you gain:** Confidence that you're covering what matters, guided by proven methodology + +--- + +## Feature 2: Conversational, Not Forms + +**The Problem:** Traditional templates feel like filling out tax forms. You switch between thinking and documenting, losing flow and insight. + +**The WDS Solution:** Natural dialogue where you think out loud and Saga captures the insights. + +**How it works:** + +You talk naturally: +- "I'm building this because I see families struggling with..." +- "The main users are parents who..." +- "Success looks like reducing their stress and..." + +Saga listens, reflects, and confirms: +- "So you're seeing families struggle with coordination?" +- "The stress comes from unclear responsibilities?" +- "Let me capture that in the vision section..." + +**Why this matters:** +- No context switching between thinking and writing +- Natural flow of conversation reveals insights +- Saga reflects back to confirm understanding +- You stay in strategic thinking mode + +**What you gain:** Clear thinking captured accurately, with natural flow that reveals deeper insights + +--- + +## Feature 3: Structured Output + +**The Problem:** Even when you know what to say, formatting it properly takes time. Headers, bullets, sections, consistency - it all adds up. + +**The WDS Solution:** Saga writes the document as you talk, with proper structure and formatting automatically. + +**How it works:** + +As you answer questions, Saga: +- Writes content in the right sections +- Formats with proper headers and bullets +- Maintains consistent structure +- Ensures completeness + +You see the document building in real-time: +```markdown +## Vision + +[Saga writes your vision as you describe it] + +## Positioning + +**Target:** [Saga captures who it's for] +**Value:** [Saga captures the problem] +**Differentiation:** [Saga captures what's unique] +``` + +**Why this matters:** +- No formatting decisions to make +- No restructuring needed +- No consistency issues +- Professional output automatically + +**What you gain:** Professional structure that makes the brief useful and easy to reference + +--- + +## Feature 4: Built-in Best Practices + +**The Problem:** How do you know if your success criteria are good? Are your constraints specific enough? Did you miss anything important? + +**The WDS Solution:** Saga applies best practices automatically, prompting you when something needs refinement. + +**How it works:** + +**SMART Goal Validation:** +- You: "We want to increase engagement" +- Saga: "Let's make that measurable - by how much and by when?" +- You: "40% increase in daily active users within 3 months" +- Saga: "Perfect - that's specific, measurable, and time-bound" + +**Constraint Checklist:** +- Saga: "Let's check constraints you might have missed..." +- "Have you considered accessibility requirements?" +- "What about localization needs?" +- "Any regulatory compliance to consider?" + +**Completeness Check:** +- Saga reviews each section +- Prompts for missing elements +- Ensures nothing critical was forgotten +- Validates that answers are clear + +**Why this matters:** +- No need to learn methodology first +- No wondering if you missed something +- No weak criteria or vague statements +- Professional quality automatically + +**What you gain:** Built-in excellence through proven best practices and methodology + +--- + +## Feature 5: Two Levels of Depth + +**The Problem:** Different projects need different levels of depth. One size doesn't fit all. + +**The WDS Solution:** Choose your depth based on your needs. + +**Simplified Brief (15-20 minutes):** +- Core essentials only +- Vision, positioning, users, success, constraints +- Perfect for MVPs and getting started +- Can expand later if needed + +**Complete Brief (30-45 minutes):** +- Comprehensive strategic foundation +- Includes competitive landscape, detailed stakeholders +- Perfect for complex projects +- Full strategic clarity + +**How to choose:** + +**Use Simplified when:** +- βœ… Building an MVP +- βœ… Working solo or small team +- βœ… Want to start with essentials +- βœ… Can refine as you learn + +**Use Complete when:** +- βœ… Complex project with many stakeholders +- βœ… Significant investment at stake +- βœ… Need comprehensive alignment +- βœ… Want full strategic clarity upfront + +**Why this matters:** +- Flexibility to match your needs +- Not forced into one approach +- Can start simple, expand later +- Right depth for right situation + +**What you gain:** Right level of depth for your project's needs + +--- + +## Feature 6: Living Document Support + +**The Problem:** Projects evolve. Assumptions change. How do you keep the brief current without starting over? + +**The WDS Solution:** Easy updates through conversation with Saga. + +**How it works:** + +When something changes: +1. Tell Saga what changed and why +2. Saga updates the relevant sections +3. Saga maintains consistency across document +4. You review and confirm + +**Example:** +- You: "We've decided to add mobile support to MVP" +- Saga: "I'll update the technical constraints and timeline. This affects the success criteria too - should we adjust those?" +- You: "Yes, let's add mobile-specific metrics" +- Saga: "Updated. Here's what changed..." + +**Why this matters:** +- No starting over when things change +- Consistency maintained automatically +- Easy updates when needed +- Document stays current + +**What you gain:** Living document that stays current with your project + +--- + +## The Compound Effect + +Each feature ensures quality individually. Together, they transform the process: + +**Traditional Approach:** +- Research methodology alone +- Plan structure alone +- Write and format alone +- Hope you got it right +- **Result: Uncertain quality, exhausting process** + +**WDS Approach:** +- Collaborate with Saga (thinking partner) +- Guided by proven methodology +- Professional structure automatically +- Confidence you covered what matters +- **Result: Excellence through partnership** + +**What you gain:** +- βœ… Better quality (built-in best practices) +- βœ… More complete (nothing missed) +- βœ… More useful (structured for decisions) +- βœ… More current (easy to update) +- βœ… More aligned (created through dialogue) + +--- + +## The Real Advantage: You Actually Do It + +Here's the truth: Most teams don't create Product Briefs because they take too long and feel too hard. + +**Without WDS:** +- "We should create a brief..." β†’ Never happens +- "We'll do it next sprint..." β†’ Never happens +- "We'll figure it out as we go..." β†’ Chaos happens + +**With WDS:** +- "Let's create a brief" β†’ 45 minutes later, done +- No excuses about time +- No paralysis about how to start +- No confusion about what to include + +**The real advantage:** You actually create the foundation your project needs because you have a thinking partner who ensures you get it right. + +--- + +## Excellence Through Partnership + +Quality doesn't happen by accident. WDS ensures excellence through collaboration: + +**Smart about questions:** +- Asks the right questions in the right order +- Builds on previous answers +- Catches inconsistencies +- Prompts for missing elements + +**Smart about structure:** +- Knows the proven template +- Maintains consistency +- Formats professionally +- Organizes logically + +**Smart about best practices:** +- Validates SMART criteria +- Checks for completeness +- Ensures measurability +- Maintains quality + +**The result:** Professional quality through guided collaboration. + +--- + +## Comparison: WDS vs Alternatives + +**vs. Templates:** +- Templates: Blank page, no guidance, formatting work +- WDS: Guided conversation, structured automatically + +**vs. Consultants:** +- Consultants: Expensive, external perspective +- WDS: Affordable, your perspective captured with expert guidance + +**vs. DIY:** +- DIY: Research, trial and error, uncertain quality +- WDS: Proven methodology, built-in best practices + +**vs. AI Prompting:** +- AI Prompting: Generic output, no methodology, inconsistent +- WDS: Methodology-driven, consistent, complete + +**WDS combines the best of all approaches:** +- Intelligence of AI +- Quality of consultants +- Structure of templates +- Personalization of DIY + +--- + +## The Bottom Line + +Creating a Product Brief used to be: +- Difficult (where to start?) +- Uncertain (did I get it right?) +- Inconsistent (different every time) +- Often skipped (too overwhelming) + +With WDS, it's: +- Guided (thinking partner leads the way) +- Confident (built-in best practices) +- Consistent (proven methodology) +- Actually done (partnership makes it achievable) + +**This is the WDS advantage: Professional strategic foundation through collaborative excellence.** + +--- + +## What's Next + +In the next lesson, we'll explore how teams actually use the Product Brief throughout the project - from design decisions to development priorities to stakeholder alignment. + +--- + +**[Continue to Lesson 5: Using Your Product Brief β†’](lesson-05-using-brief.md)** + +--- + +[← Back to Lesson 3](lesson-03-document-structure.md) | [Back to Module Overview](module-04-overview.md) diff --git a/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-05-using-brief.md b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-05-using-brief.md new file mode 100644 index 000000000..7061fd274 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-05-using-brief.md @@ -0,0 +1,491 @@ +# Module 04: Product Brief + +## Lesson 5: Using Your Product Brief + +**How this document powers your entire project** + +--- + +## Not Filed Away, Actively Referenced + +The Product Brief isn't a document you create and forget. It's your active reference throughout the project - the single source of truth that guides every decision. + +**The difference:** + +**Filed Away (Useless):** +- Created once, never opened again +- Stored somewhere nobody remembers +- Outdated within weeks +- Ignored when making decisions + +**Actively Referenced (Powerful):** +- Opened multiple times per week +- Linked in all project documentation +- Updated when assumptions change +- Consulted before major decisions + +**The goal:** Make the brief so useful that people naturally reference it. + +--- + +## How Designers Use It + +Designers reference the Product Brief to make confident decisions without constant stakeholder approval. + +### Making Design Decisions + +**The Question:** "Should we add this feature?" + +**Without the Brief:** +- Designer guesses based on intuition +- Asks stakeholders (delays decision) +- Builds it and hopes it's right +- Discovers later it doesn't fit + +**With the Brief:** +1. Check the vision - does this align? +2. Check target users - do they need this? +3. Check success criteria - does this contribute? +4. Check constraints - is this feasible? +5. Make confident decision + +**Example:** + +Designer considering social sharing features: +- Vision: "Family coordination for dog care" β†’ Social sharing doesn't align +- Target users: "Parents managing household" β†’ They need coordination, not social +- Success criteria: "Reduce coordination stress" β†’ Social features add complexity +- Decision: No, doesn't fit the brief + +**Time saved:** No meeting needed, confident decision made in minutes. + +### Validating Design Solutions + +**The Question:** "Is this design on the right track?" + +**Without the Brief:** +- Designer relies on personal taste +- Unclear if it serves the right users +- Uncertain if it meets success criteria +- Validation happens late (expensive) + +**With the Brief:** +1. Does it serve primary users? +2. Does it solve the core problem? +3. Does it respect constraints? +4. Does it differentiate us? +5. Will it contribute to success criteria? + +**Example:** + +Designer reviewing interface complexity: +- Target users: "Tech-comfortable parents" β†’ Can handle moderate complexity +- Success criteria: "Task completion < 2 minutes" β†’ Must be fast +- Constraints: "Family-friendly, organized, calm" β†’ Can't be overwhelming +- Decision: Simplify, optimize for speed + +### Staying Aligned During Iteration + +**The Challenge:** Design evolves through iteration. How do you know if you're still on track? + +**The Brief as North Star:** +- Vision doesn't change (unless project pivots) +- Target users don't change (unless you discover new insights) +- Success criteria don't change (unless you learn they're wrong) +- Constraints don't change (unless business reality shifts) + +**When iterating:** +- Reference the brief at start of each sprint +- Check alignment after major design changes +- Validate that iterations serve the vision +- Update brief if fundamental assumptions change + +--- + +## How Developers Use It + +Developers reference the Product Brief to understand the "why" behind requirements and make technical decisions that serve the vision. + +### Understanding the "Why" + +**The Problem:** Developers get requirements without context. They build what's specified, not what's needed. + +**The Brief Provides Context:** + +**Without the Brief:** +- "Build a calendar feature" β†’ Builds generic calendar +- No understanding of user needs +- No context for technical decisions +- Builds to spec, not to purpose + +**With the Brief:** +- Reads vision: "Family coordination for dog care" +- Reads target users: "Parents managing household responsibilities" +- Reads success criteria: "Task completion < 2 minutes" +- Understands: This needs to be fast and family-focused, not feature-rich +- Builds accordingly + +### Making Technical Decisions + +**The Question:** "Which technical approach should we use?" + +**Without the Brief:** +- Developer chooses based on personal preference +- Might over-engineer or under-engineer +- Unclear what performance matters +- Uncertain about future requirements + +**With the Brief:** +1. Check constraints - what's required? +2. Check success criteria - what performance matters? +3. Check vision - what's the long-term direction? +4. Make informed technical decision + +**Example:** + +Developer choosing database approach: +- Constraints: "Offline core features required" β†’ Need local storage +- Success criteria: "< 2s load time" β†’ Need fast queries +- Vision: "Family coordination" β†’ Need sync across devices +- Decision: Local-first architecture with sync + +### Prioritizing Technical Work + +**The Question:** "What should we build first?" + +**Without the Brief:** +- Build in order received +- Unclear what's critical vs nice-to-have +- Risk building wrong things first +- Discover priorities late + +**With the Brief:** +1. What serves primary users? +2. What contributes to success criteria? +3. What's required by constraints? +4. What enables the vision? + +**Example:** + +Developer prioritizing features: +- Success criteria: "90% task completion rate" β†’ Core task flow is critical +- Constraints: "6-month timeline to MVP" β†’ Must focus on essentials +- Target users: "Parents managing household" β†’ Notifications are important +- Priority: Task flow, then notifications, then nice-to-haves + +--- + +## How Stakeholders Use It + +Stakeholders reference the Product Brief to track progress, make informed decisions, and prevent scope creep. + +### Tracking Progress + +**The Question:** "Is the project on track?" + +**Without the Brief:** +- Subjective assessment +- Unclear what "on track" means +- Debates about what matters +- Anxiety about progress + +**With the Brief:** +1. Check success criteria - are we hitting metrics? +2. Check timeline constraints - are we on schedule? +3. Check vision - are we building what we said? +4. Make objective assessment + +**Example:** + +Stakeholder reviewing progress: +- Success criteria: "1,000 active users by month 6" β†’ Currently at 800 (month 5) +- Timeline: "6-month MVP" β†’ On schedule for launch +- Vision: "Family coordination" β†’ Features align +- Assessment: On track, slight user acquisition concern + +### Making Informed Decisions + +**The Question:** "Should we approve this change?" + +**Without the Brief:** +- Decision based on opinion +- Unclear if change aligns with vision +- Risk of scope creep +- Inconsistent decision-making + +**With the Brief:** +1. Does it align with vision? +2. Does it serve target users? +3. Does it contribute to success criteria? +4. Is it feasible within constraints? + +**Example:** + +Stakeholder evaluating feature request: +- Request: "Add social features" +- Vision: "Family coordination" β†’ Social doesn't align +- Success criteria: "Reduce coordination stress" β†’ Social adds complexity +- Constraints: "6-month timeline" β†’ No time for scope expansion +- Decision: No, doesn't fit the brief + +### Preventing Scope Creep + +**The Challenge:** Everyone has ideas. How do you say no without seeming negative? + +**The Brief as Shield:** + +**Without the Brief:** +- "Can we add this?" β†’ "I don't know, maybe?" +- No clear criteria for yes/no +- Scope grows unchecked +- Timeline and budget suffer + +**With the Brief:** +- "Can we add this?" β†’ "Let's check the brief" +- Vision: Does it align? +- Users: Do they need it? +- Criteria: Does it contribute? +- Constraints: Do we have time/budget? +- Clear yes/no with justification + +**Example:** + +Stakeholder suggesting enterprise features: +- Target users: "Parents managing household" β†’ Not enterprise users +- Constraints: "Bootstrap budget, 6-month timeline" β†’ No resources for enterprise +- Vision: "Family coordination" β†’ Consumer focus +- Response: "Great idea for phase 2, but doesn't fit MVP brief" + +--- + +## How Product Managers Use It + +Product managers reference the Product Brief to create roadmaps, write user stories, and measure success. + +### Creating Roadmaps + +**The Question:** "What should we build next?" + +**Without the Brief:** +- Roadmap based on requests +- Unclear prioritization criteria +- Risk of building wrong things +- Reactive instead of strategic + +**With the Brief:** +1. What serves the vision? +2. What moves success criteria? +3. What target users need most? +4. What's feasible within constraints? + +**Example:** + +PM planning Q2 roadmap: +- Success criteria: "70% weekly active users" β†’ Focus on retention +- Target users: "Parents managing household" β†’ Need reminders, notifications +- Constraints: "Small team" β†’ Must be achievable +- Roadmap: Notification system, recurring tasks, mobile improvements + +### Writing User Stories + +**The Question:** "How should we describe this feature?" + +**Without the Brief:** +- Generic user stories +- Unclear user context +- Missing success criteria +- Developers guess at intent + +**With the Brief:** +- Reference target users for "As a..." +- Reference vision for "I want to..." +- Reference success criteria for "So that..." +- Clear, contextualized stories + +**Example:** + +Writing story for task assignment: +- Target users: "Parents managing household responsibilities" +- Vision: "Eliminate coordination confusion" +- Success criteria: "Task completion < 2 minutes" +- Story: "As a parent managing household responsibilities, I want to quickly assign tasks to family members so that everyone knows their responsibilities without confusion or back-and-forth communication" + +### Measuring Success + +**The Question:** "Are we successful?" + +**Without the Brief:** +- Success is subjective +- Debates about what matters +- Moving goalposts +- Unclear when to celebrate + +**With the Brief:** +- Success criteria are defined +- Metrics are measurable +- Goalposts are fixed +- Clear success indicators + +**Example:** + +PM measuring launch success: +- User success: "80% report reduced stress" β†’ Survey shows 82% βœ… +- Business success: "1,000 active families by month 6" β†’ Hit 1,200 βœ… +- Technical success: "99.9% uptime" β†’ Achieved 99.95% βœ… +- Design success: "SUS score > 75" β†’ Scored 78 βœ… +- Result: Successful launch, all criteria met + +--- + +## When to Update the Brief + +The Product Brief is a living document, but not everything requires an update. + +### When to Update + +**βœ… Update when:** + +**Fundamental Assumptions Change:** +- Market research reveals different user needs +- Competitive landscape shifts significantly +- Business constraints change (budget, timeline, resources) +- Technical constraints change (platform requirements) +- Success criteria prove unrealistic or wrong + +**Example:** +- Discovery: Primary users also need multi-pet support +- Impact: Changes target users, success criteria, constraints +- Action: Update brief, notify team, adjust roadmap + +**Major Pivots:** +- Vision changes direction +- Target users shift +- Business model changes +- Positioning evolves + +**Example:** +- Decision: Pivot from consumer to enterprise +- Impact: Changes everything +- Action: Major brief update, team alignment session + +### When NOT to Update + +**❌ Don't update for:** + +**Tactical Decisions:** +- Individual feature decisions +- Design iterations +- Minor technical choices +- Day-to-day prioritization + +**Example:** +- Decision: Change button color +- Impact: None on strategy +- Action: No brief update needed + +**Opinions and Preferences:** +- Stakeholder suggestions +- Team member ideas +- User feature requests +- Competitive feature additions + +**Example:** +- Request: "Can we add dark mode?" +- Impact: Doesn't change strategy +- Action: Evaluate against brief, but don't update brief + +**The Rule:** Update the brief when fundamental strategy changes, not when tactics evolve. + +--- + +## Making It a Habit + +The brief is only powerful if people actually use it. Here's how to make it a habit: + +### Make It Accessible + +**Where to store it:** +- Project root: `/docs/A-Product-Brief/project-brief.md` +- Always in the same place +- Version controlled (Git) +- Linked from README + +**How to reference it:** +- Include path in onboarding +- Link in project documentation +- Reference in meeting agendas +- Quote in decision documents + +### Make It Referenced + +**In meetings:** +- Start design reviews by reading relevant sections +- Reference it when explaining decisions +- Update it when assumptions change +- End with action items linked to brief + +**In documentation:** +- Link to specific sections in PRDs +- Quote it in design specs +- Reference it in user stories +- Connect roadmap items to brief + +**In decisions:** +- "Let's check the brief" +- "According to our success criteria..." +- "Our target users need..." +- "Our constraints say..." + +### Make It Trusted + +**Keep it accurate:** +- Update when things change +- Remove outdated information +- Validate assumptions periodically +- Correct errors immediately + +**Keep it concise:** +- Remove what's not useful +- Focus on decisions, not history +- Avoid redundancy +- Stay under 3 pages + +**Keep it current:** +- Review quarterly +- Update after major learnings +- Refresh when pivoting +- Don't let it go stale + +--- + +## The Power of Shared Understanding + +When everyone on the team references the same Product Brief: + +**Designers** make confident decisions aligned with vision +**Developers** understand the "why" and build accordingly +**Stakeholders** track progress and prevent scope creep +**Product Managers** create roadmaps and measure success + +**The result:** +- βœ… Faster decisions (no constant meetings) +- βœ… Better alignment (everyone working toward same goals) +- βœ… Less rework (building right things first time) +- βœ… More confidence (clear direction and criteria) +- βœ… Stronger results (coordinated effort) + +**This is the power of a single source of truth.** + +--- + +## What's Next + +In the final lesson, we'll explore the additional strategic documents you can create as your project needs them - expanding your foundation beyond the core Product Brief. + +--- + +**[Continue to Lesson 6: Additional Strategic Documents β†’](lesson-06-additional-documents.md)** + +--- + +[← Back to Lesson 4](lesson-04-wds-advantage.md) | [Back to Module Overview](module-04-overview.md) diff --git a/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-06-additional-documents.md b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-06-additional-documents.md new file mode 100644 index 000000000..b2bd8a6e3 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/module-04-product-brief/lesson-06-additional-documents.md @@ -0,0 +1,645 @@ +# Module 04: Product Brief + +## Lesson 6: Additional Strategic Documents + +**Expanding your strategic foundation based on project needs** + +--- + +## Beyond the Core Brief + +The Product Brief is your foundation - the document every project needs. But some projects need additional strategic documents to provide deeper clarity in specific areas. + +**The principle:** Start with the Product Brief. Add other documents only when your project actually needs them. + +**All documents live together:** +``` +/docs/A-Product-Brief/ + β”œβ”€β”€ project-brief.md (always) + β”œβ”€β”€ core-features.md (if needed) + β”œβ”€β”€ tone-of-voice.md (if needed) + β”œβ”€β”€ visual-design-brief.md (if needed) + └── [other strategic docs as needed] +``` + +**Why this matters:** +- Single folder for all strategic decisions +- Easy to reference and update +- Version controlled together +- Shared across entire team + +--- + +## Document 1: Core Features + +**When you need it:** Complex products with many features that need prioritization + +### What It Contains + +**Must-Have Features:** +- Core functionality for MVP +- Essential to solve the main problem +- Required for launch + +**Should-Have Features:** +- Important but not launch-critical +- Enhance core experience +- Phase 1 or early Phase 2 + +**Could-Have Features:** +- Nice-to-haves for future iterations +- Improve experience but not essential +- Phase 2 or later + +**Won't-Have Features:** +- Explicitly out of scope +- Prevents scope creep +- Clear boundaries + +### Why It's Valuable + +**Clear Prioritization:** +- Team knows what to build first +- No "everything is important" syndrome +- Focus on what matters + +**Prevents Scope Creep:** +- "Can we add this?" β†’ Check the features doc +- Already decided what's in/out +- Clear boundaries everyone agreed to + +**Helps with Roadmap:** +- MVP is clear (must-haves) +- Phase 2 is clear (should-haves) +- Future is clear (could-haves) + +### How to Create It + +**With Saga:** +1. List all possible features +2. Evaluate each against Product Brief +3. Categorize: Must/Should/Could/Won't +4. Document with justification + +**Time:** 20-30 minutes + +--- + +## Document 2: Tone of Voice Guide + +**When you need it:** Products with significant written content or multiple writers + +### What It Contains + +**Brand Personality:** +- 3-5 personality traits +- How you want to sound +- What makes your voice unique + +**Voice Characteristics:** +- Formal vs casual +- Technical vs simple +- Serious vs playful +- Authoritative vs friendly + +**Do's and Don'ts:** +- Specific examples of good copy +- Specific examples of bad copy +- What to say and what to avoid + +**Example Phrases:** +- Real examples in your voice +- Common scenarios +- Consistent language + +### Why It's Valuable + +**Consistent Communication:** +- All touchpoints sound the same +- Predictable, trustworthy experience +- Strong brand identity + +**Faster Copywriting:** +- Clear guidelines to follow +- No guessing about tone +- Confident writing + +**Better Onboarding:** +- New writers understand voice quickly +- Less revision needed +- Consistent quality + +### How to Create It + +**With Saga:** +1. Define personality traits +2. Identify voice characteristics +3. Create do/don't examples +4. Document common phrases + +**Time:** 20-30 minutes + +--- + +## Document 3: Visual Design Brief + +**When you need it:** Projects that need custom visual design or brand development + +### What It Contains + +**Visual Mood:** +- Adjectives describing the look +- Emotional tone of visuals +- Overall aesthetic direction + +**Reference Inspiration:** +- Links to designs you like +- Explanation of why you like them +- What to borrow, what to avoid + +**Color Direction:** +- Warm vs cool +- Bright vs muted +- Energetic vs calm +- Specific palette if known + +**Typography Direction:** +- Friendly vs serious +- Modern vs classic +- Readable vs decorative +- Specific fonts if known + +**Visual Constraints:** +- Brand guidelines to follow +- Accessibility requirements +- Platform limitations + +### Why It's Valuable + +**Aligns Visual Direction:** +- Designer knows what you want +- Before design starts, not after +- Clear expectations + +**Prevents Revision Cycles:** +- No "I'll know it when I see it" +- Clear criteria for evaluation +- Faster to final design + +**Guides Design Decisions:** +- Color choices align with mood +- Typography matches personality +- Consistent visual language + +### How to Create It + +**With Saga:** +1. Describe desired mood +2. Share inspiration examples +3. Define color/typography direction +4. Document constraints + +**Time:** 15-20 minutes + +--- + +## Document 4: Technical Architecture Brief + +**When you need it:** Complex technical projects or working with external developers + +### What It Contains + +**Platform Requirements:** +- Web, mobile, desktop +- Browser/device support +- Online/offline needs + +**Technology Stack:** +- Preferred frameworks +- Languages and tools +- Infrastructure requirements + +**Integration Requirements:** +- APIs to connect to +- Third-party services +- Data sync needs + +**Performance Requirements:** +- Speed expectations +- Scalability needs +- Reliability standards + +**Security Requirements:** +- Data protection needs +- Compliance requirements +- Authentication/authorization + +### Why It's Valuable + +**Clear Technical Direction:** +- Developers know what to build with +- No surprises about requirements +- Aligned technical decisions + +**Accurate Estimates:** +- Developers can estimate properly +- No "we can't build that" surprises +- Realistic timelines + +**Prevents Technical Debt:** +- Right architecture from start +- Scalable foundation +- Future-proof decisions + +### How to Create It + +**With Saga:** +1. Define platform needs +2. Specify technology preferences +3. Document integrations +4. Set performance/security standards + +**Time:** 20-30 minutes + +--- + +## Document 5: Content Strategy + +**When you need it:** Content-heavy products (blogs, documentation, educational platforms) + +### What It Contains + +**Content Types:** +- What kinds of content you'll create +- Format and structure +- Purpose of each type + +**Content Goals:** +- What each type achieves +- How it serves users +- How it supports business + +**Publishing Frequency:** +- How often content is created +- Who creates it +- Review and approval process + +**Content Ownership:** +- Who creates +- Who reviews +- Who publishes +- Who maintains + +### Why It's Valuable + +**Sustainable Content Creation:** +- Clear expectations +- Manageable workload +- Consistent quality + +**Aligned Content:** +- All content serves strategy +- No random content +- Clear purpose + +**Efficient Process:** +- Defined workflows +- Clear ownership +- No bottlenecks + +--- + +## Document 6: Localization Strategy + +**When you need it:** Multi-language or multi-region products + +### What It Contains + +**Target Markets:** +- Which languages +- Which regions +- Priority order + +**Cultural Considerations:** +- What needs adaptation beyond translation +- Cultural sensitivities +- Regional preferences + +**Technical Approach:** +- How localization is implemented +- Translation workflow +- Quality assurance + +**Resource Requirements:** +- Translators needed +- Budget allocation +- Timeline per market + +### Why It's Valuable + +**Prevents "English-First" Problems:** +- Design works in all languages +- No text overflow issues +- Cultural appropriateness + +**Plans for Expansion:** +- Clear roadmap for markets +- Resource planning +- Realistic timelines + +**Quality Localization:** +- Not just translation +- Cultural adaptation +- Native-feeling experience + +--- + +## Document 7: Accessibility Requirements + +**When you need it:** Products with specific accessibility needs or compliance requirements + +### What It Contains + +**Compliance Level:** +- WCAG 2.1 AA, AAA +- Specific regulations +- Industry standards + +**Priority Users:** +- Specific disabilities to design for +- Assistive technologies to support +- User needs to address + +**Testing Requirements:** +- How accessibility is validated +- Tools and processes +- Success criteria + +**Technical Requirements:** +- Screen reader support +- Keyboard navigation +- Color contrast standards +- Focus management + +### Why It's Valuable + +**Accessibility Built In:** +- Not bolted on later +- Designed from start +- Lower cost, better results + +**Clear Requirements:** +- Designers know standards +- Developers know implementation +- QA knows testing + +**Compliance Confidence:** +- Meet legal requirements +- Serve all users +- Avoid costly retrofits + +--- + +## Document 8: Data & Privacy Strategy + +**When you need it:** Products handling sensitive user data + +### What It Contains + +**Data Collection:** +- What data you collect +- Why you collect it +- How you collect it + +**Data Storage:** +- Where data is stored +- How it's secured +- Retention policies + +**Data Usage:** +- How data is used +- Who has access +- Analytics and tracking + +**Compliance:** +- GDPR, CCPA, or other regulations +- User rights (access, export, delete) +- Privacy policy requirements + +### Why It's Valuable + +**Privacy by Design:** +- Not an afterthought +- Built into architecture +- Compliant from day one + +**Clear Requirements:** +- Developers know what to build +- Legal knows what's covered +- Users know what to expect + +**Builds Trust:** +- Transparent about data +- Respects user privacy +- Professional approach + +--- + +## How to Decide What You Need + +**Start with Product Brief (always)** + +Then add documents based on these questions: + +### Core Features Document + +**Add if:** +- βœ… Product has 10+ features +- βœ… Team needs prioritization clarity +- βœ… Working with external developers +- βœ… Risk of scope creep + +**Skip if:** +- ❌ Simple product (< 5 features) +- ❌ Solo developer +- ❌ Clear priorities already + +### Tone of Voice Guide + +**Add if:** +- βœ… Significant written content +- βœ… Multiple people writing copy +- βœ… Brand voice is critical +- βœ… Customer-facing communication + +**Skip if:** +- ❌ Minimal text in product +- ❌ Single writer +- ❌ Internal tool only + +### Visual Design Brief + +**Add if:** +- βœ… Creating custom visual design +- βœ… Working with external designers +- βœ… Visual brand is critical +- βœ… Need alignment before design + +**Skip if:** +- ❌ Using existing design system +- ❌ Solo designer with clear vision +- ❌ Visual design not critical + +### Technical Architecture Brief + +**Add if:** +- βœ… Complex technical requirements +- βœ… Working with external developers +- βœ… Multiple integration points +- βœ… Scalability critical + +**Skip if:** +- ❌ Simple technical stack +- ❌ Solo developer +- ❌ Standard architecture + +### Other Documents + +**Add based on:** +- Project complexity +- Team size and distribution +- Regulatory requirements +- Business criticality + +**The rule:** Don't create documents you won't use. Start minimal, add as needed. + +--- + +## Creating Additional Documents with WDS + +**Same conversational approach:** +1. Activate Saga +2. Tell her which document you need +3. Have a guided conversation +4. Saga creates the document +5. Review and refine + +**Same speed:** +- 15-30 minutes per document +- Professional quality +- Proper structure +- Easy to update + +**Same benefits:** +- No blank page +- Built-in best practices +- Consistent format +- Living documents + +--- + +## The Complete Strategic Foundation + +**When you have all relevant documents:** + +``` +/docs/A-Product-Brief/ + β”œβ”€β”€ project-brief.md + β”œβ”€β”€ core-features.md + β”œβ”€β”€ tone-of-voice.md + β”œβ”€β”€ visual-design-brief.md + β”œβ”€β”€ technical-brief.md + β”œβ”€β”€ content-strategy.md + β”œβ”€β”€ localization-strategy.md + β”œβ”€β”€ accessibility-requirements.md + └── data-privacy.md +``` + +**You have:** +- βœ… Complete strategic clarity +- βœ… Single source of truth for all decisions +- βœ… Clear guidance for entire team +- βœ… Protected scope boundaries +- βœ… Professional foundation + +**The result:** +- Designers make confident decisions +- Developers understand requirements +- Stakeholders track progress +- Product managers prioritize effectively +- Everyone works from same foundation + +--- + +## Keeping It Manageable + +**Don't create everything at once:** + +**Phase 1 (Always):** +- Product Brief + +**Phase 2 (As needed for MVP):** +- Core Features (if complex) +- Technical Brief (if complex) + +**Phase 3 (As project grows):** +- Tone of Voice (when writing matters) +- Visual Design Brief (when design starts) + +**Phase 4 (As you scale):** +- Content Strategy (when content grows) +- Localization (when expanding markets) +- Accessibility (when compliance needed) +- Data & Privacy (when handling sensitive data) + +**The principle:** Add documents when the pain of not having them exceeds the effort of creating them. + +--- + +## Module Complete + +You now understand: + +βœ… Why the Product Brief prevents chaos +βœ… The 5 strategic questions it must answer +βœ… What the document looks like and how it's structured +βœ… How WDS makes this fast (30-45 minutes) +βœ… How teams use it throughout the project +βœ… What additional documents you can create as needed + +**You're ready to create your own Product Brief.** + +--- + +## Next Steps + +**1. Complete the Tutorial** +- [Tutorial 04: Create Your Product Brief](tutorial-04.md) +- 30-45 minutes with Saga +- Create your actual Product Brief + +**2. Create Additional Documents** +- As your project needs them +- Same conversational approach +- Same speed and quality + +**3. Start Using Your Brief** +- Reference it in decisions +- Update it when things change +- Share it with your team +- Make it your single source of truth + +**4. Continue to Module 05** +- [Module 05: Trigger Mapping](../module-05-trigger-mapping/module-05-overview.md) +- Understanding user psychology +- Connecting business goals to user needs + +--- + +**[Start Tutorial 04: Create Your Product Brief β†’](tutorial-04.md)** + +--- + +[← Back to Lesson 5](lesson-05-using-brief.md) | [Back to Module Overview](module-04-overview.md) + +*Congratulations on completing Module 04! You now have the foundation to create strategic clarity for any project.* diff --git a/src/modules/wds/docs/learn-wds/module-04-product-brief/module-04-overview.md b/src/modules/wds/docs/learn-wds/module-04-product-brief/module-04-overview.md new file mode 100644 index 000000000..967ff9679 --- /dev/null +++ b/src/modules/wds/docs/learn-wds/module-04-product-brief/module-04-overview.md @@ -0,0 +1,194 @@ +# Module 04: Product Brief + +**Your Strategic Foundation in 30-45 Minutes** + +--- + +## Module Overview + +This module teaches you how to create a Product Brief - the strategic foundation that prevents chaos and saves weeks of rework. Learn what the document is, why it matters, and how WDS makes creating it fast through AI-guided conversation. + +**Time:** 46-58 minutes (6 lessons) +**Prerequisites:** Module 02 completed (WDS installed) +**What you'll create:** Product Brief (2-3 pages) + optional strategic documents as needed + +--- + +## What You'll Learn + +- Why projects fail without strategic foundation (and how to prevent it) +- The 5 strategic questions every Product Brief must answer +- What the document looks like and how it's structured +- How WDS makes this fast (30-45 min vs days of meetings) +- How teams use the Product Brief throughout the project +- Additional strategic documents you can create as needed + +--- + +## Lessons + +### [Lesson 1: The Chaos Problem](lesson-01-chaos-problem.md) + +**Time:** 6-8 minutes + +Why projects fail before they start: + +- The cost of no foundation (wasted design, misalignment, scope creep) +- What the Product Brief does (single source of truth) +- Time investment vs payoff (30-45 min saves weeks) +- Your insurance policy against chaos + +### [Lesson 2: The 5 Strategic Questions](lesson-02-five-questions.md) + +**Time:** 10-12 minutes + +What every Product Brief must answer: + +- **What & Why** - Vision and positioning +- **Who** - Target users and stakeholders +- **How We'll Know** - Success criteria (measurable outcomes) +- **Context** - Competitive landscape (alternatives, differentiation) +- **Boundaries** - Constraints (technical, business, design) + +### [Lesson 3: The Document Structure](lesson-03-document-structure.md) + +**Time:** 8-10 minutes + +What a Product Brief actually looks like: + +- Template structure walkthrough +- Key sections and what goes in each +- How to keep it concise (2-3 pages max) +- Making it scannable and useful +- Living document approach + +### [Lesson 4: How WDS Makes This Great](lesson-04-wds-advantage.md) + +**Time:** 8-10 minutes + +The unique features that ensure excellence: + +- Human-in-the-loop thinking partnership (BMad methodology) +- AI-guided discovery (no blank page paralysis) +- Conversational approach (talk it out, Saga writes it down) +- Structured output (proper formatting automatically) +- Built-in best practices (SMART goals, constraint checklists) +- Two levels: Simplified vs Complete (based on project needs) + +### [Lesson 5: Using Your Product Brief](lesson-05-using-brief.md) + +**Time:** 6-8 minutes + +How this document powers your entire project: + +- How designers use it (reference for every decision) +- How developers use it (understand the "why") +- How stakeholders use it (track progress, prevent scope creep) +- How product managers use it (roadmaps, user stories) +- When to update it (and when not to) + +### [Lesson 6: Additional Strategic Documents](lesson-06-additional-documents.md) + +**Time:** 8-10 minutes + +Expanding your strategic foundation: + +- Core Features Document (feature prioritization) +- Tone of Voice Guide (brand personality, communication) +- Visual Design Brief (visual direction, inspiration) +- Technical Architecture Brief (platform, integrations) +- Content Strategy (content types, publishing) +- Localization Strategy (multi-language planning) +- Accessibility Requirements (compliance, user needs) +- Data & Privacy Strategy (collection, storage, compliance) + +--- + +## Tutorial + +**[Tutorial: Create Your Product Brief β†’](tutorial-04.md)** + +Step-by-step hands-on guide to creating your Product Brief with Saga. + +**Time:** 30-45 minutes +**What you'll create:** Complete Product Brief document + +--- + +## Key Concepts + +**Product Brief:** +- 2-3 page strategic document +- Answers 5 critical questions (What/Why, Who, How We'll Know, Context, Boundaries) +- Single source of truth for entire team +- Created in 30-45 minutes through AI-guided conversation +- Living document that evolves with the project + +**The 5 Strategic Questions:** +1. **What & Why** - Vision and positioning (what you're building, why it matters, who it's for) +2. **Who** - Target users and stakeholders (who uses it, who decides, who builds) +3. **How We'll Know** - Success criteria (user, business, technical, design metrics) +4. **Context** - Competitive landscape (alternatives, differentiation, positioning) +5. **Boundaries** - Constraints (technical, business, design limitations) + +**WDS Advantage:** +- **Speed:** 30-45 min vs days of meetings +- **AI-Guided:** Saga asks the right questions, no blank page +- **Conversational:** Natural dialogue, not form-filling +- **Professional:** Built-in best practices (SMART goals, checklists) +- **Flexible:** Two levels (simplified vs complete) +- **Living:** Easy to update as you learn + +**Additional Documents:** +- Optional strategic documents created as needed +- All live in Project Brief folder +- Same conversational approach with Saga +- Expand foundation based on project complexity + +--- + +## Learning Outcomes + +By the end of this module, you will: + +- βœ… Understand why the Product Brief prevents chaos and saves weeks +- βœ… Know the 5 strategic questions that guide every design decision +- βœ… Be able to structure a clear, concise Product Brief +- βœ… Understand how WDS makes this fast through AI guidance +- βœ… Know how teams use the Product Brief throughout the project +- βœ… Be able to create additional strategic documents as needed +- βœ… Have confidence to create your own Product Brief in 30-45 minutes + +--- + +## What You'll Create + +**Core:** +- βœ… Product Brief (2-3 pages) + - Vision & positioning + - Target users & stakeholders + - Success criteria (measurable) + - Competitive landscape + - Constraints (technical, business, design) + +**Optional (as needed):** +- βœ… Core Features Document +- βœ… Tone of Voice Guide +- βœ… Visual Design Brief +- βœ… Technical Architecture Brief +- βœ… Content Strategy +- βœ… Localization Strategy +- βœ… Accessibility Requirements +- βœ… Data & Privacy Strategy + +--- + +## Start Learning + +**[Begin with Lesson 1: The Chaos Problem β†’](lesson-01-chaos-problem.md)** + +--- + +[← Back to Course Overview](../00-course-overview.md) | [Next: Module 05: Trigger Mapping β†’](../module-05-trigger-mapping/module-05-overview.md) + +*Part of the WDS Course: From Designer to Linchpin* diff --git a/src/modules/wds/docs/method/content-purpose-guide.md b/src/modules/wds/docs/method/content-purpose-guide.md index 538d3c93c..5f4ff753a 100644 --- a/src/modules/wds/docs/method/content-purpose-guide.md +++ b/src/modules/wds/docs/method/content-purpose-guide.md @@ -257,7 +257,7 @@ Different purposes emphasize different strategic models: **Model Priorities:** Badass Users ⭐⭐⭐, Action Mapping ⭐⭐⭐ -**Content:** "Hmm, that email format doesn't look quite right. Double-check for typos? (We're looking for: name@example.com)" +**Content:** "Hmm, that email format doesn't look quite right. Double-check for typos? (We're looking for: `name@example.com`)" **Review:** βœ… Non-judgmental, shows what's wrong, how to fix, example provided diff --git a/src/modules/wds/docs/method/phase-4-ux-design-guide.md b/src/modules/wds/docs/method/phase-4-ux-design-guide.md index b66d95de1..690e66b1c 100644 --- a/src/modules/wds/docs/method/phase-4-ux-design-guide.md +++ b/src/modules/wds/docs/method/phase-4-ux-design-guide.md @@ -94,6 +94,21 @@ Freya helps you: - Refine specifications - Visualize the concept before development +**Visual Refinement (Optional):** + +If the prototype looks functional but not visually appealing (design system incomplete): + +- Freya automatically identifies components needing refinement +- Injects components to Figma via MCP server for visual polish +- Designer refines in Figma (colors, spacing, typography, states) +- Freya reads refined components back automatically +- Updates design system with new tokens and components +- Re-renders prototype with enhanced design system + +This iterative refinement enables you to build the design system organically as you create prototypes, rather than requiring a complete design system upfront. + +See: [Figma Integration](../../workflows/5-design-system/figma-integration/prototype-to-figma-workflow.md) + ### 4E: PRD Update **When:** Page design is complete, before moving to the next scenario diff --git a/src/modules/wds/docs/method/phase-5-design-system-guide.md b/src/modules/wds/docs/method/phase-5-design-system-guide.md index 5d3caf435..477fa3347 100644 --- a/src/modules/wds/docs/method/phase-5-design-system-guide.md +++ b/src/modules/wds/docs/method/phase-5-design-system-guide.md @@ -17,6 +17,16 @@ Design System builds your component library following atomic design principles. Your Design System includes: +- **Visual Design (01-Visual-Design/)** - Early design exploration before scenarios + - Mood boards and style direction + - NanoBanana design concepts + - Color and typography exploration + - Visual inspiration and references +- **Assets (02-Assets/)** - Final production assets + - Logos and brand elements + - Icon sets + - Photography and illustrations + - Custom graphics - **Design Tokens** - Colors, typography, spacing, shadows - **Atomic Components** - Buttons, inputs, labels, icons - **Molecular Components** - Form groups, cards, list items @@ -97,6 +107,124 @@ Notice pattern across pages β†’ Extract as reusable component 4. Next page references the system component 5. Repeat +### Visual Design Exploration (01-Visual-Design/) + +**Independent Design Phase - Can Start Anytime:** + +**Key Insight:** Brand identity and visual design are NOT tied to the product! You can establish your visual identity at any time - before, during, or after product strategy work. + +**Purpose:** Establish the visual language that will tie UX to Brand. This is where you define how your brand's personality will be expressed visually across all touchpoints. + +**Timing Options:** +- **Before product work:** Establish brand identity first, then build products around it +- **Parallel to strategy:** Develop visual identity while defining product strategy +- **After strategy:** Use strategic insights to inform visual direction + +Before diving into scenario-specific design (Phase 4), establish your visual direction: + +**Mood Boards:** +- Collect visual inspiration +- Define style direction (modern, playful, professional, etc.) +- Establish visual tone and personality +- Reference examples from similar products + +**Design Concepts (NanoBanana):** +- Generate design variations using NanoBanana +- Explore different visual approaches +- Create custom graphics and illustrations +- Generate placeholder assets for prototypes + +**Color Exploration:** +- Test color palette options +- Define primary, secondary, and semantic colors +- Ensure accessibility (contrast ratios) +- Document color psychology and usage + +**Typography Tests:** +- Experiment with font pairings +- Define hierarchy (headings, body, labels) +- Test readability at different sizes +- Document font usage guidelines + +**When to Use:** +- **AFTER Phase 1 & 2** (Product Brief and Trigger Map must be complete first!) +- When establishing brand identity (with strategic context) +- When exploring multiple visual directions (informed by user psychology) +- Before committing to design tokens +- Before Phase 4 scenarios (but after strategic foundation) + +**Output Location:** `D-Design-System/01-Visual-Design/` + +--- + +### Production Assets (02-Assets/) + +**Later in Design Process - As Design Solidifies:** + +Once your visual direction is established and scenarios are designed: + +**Logos:** +- Final logo files (SVG, PNG) +- Logo variations (light/dark, horizontal/vertical) +- Brand mark and wordmark +- Usage guidelines + +**Icons:** +- Icon sets for UI elements +- Custom icons for product features +- Consistent style and sizing +- Multiple formats (SVG, PNG) + +**Images:** +- Photography for product pages +- Illustrations for empty states +- Hero images and backgrounds +- Optimized for web + +**Graphics:** +- Custom graphics and elements +- Decorative elements +- Patterns and textures +- Exported from NanoBanana or Figma + +**When to Add:** +- After visual direction is established +- When design is near completion +- Before development handoff +- As final assets are created + +**Output Location:** `D-Design-System/02-Assets/` + +--- + +### Figma Integration (Optional) + +**Automated Visual Refinement:** + +WDS supports automated Figma integration via MCP server for visual design refinement: + +**Workflow:** +1. Create functional prototype in Phase 4D +2. Freya identifies components needing visual polish +3. Freya injects components to Figma automatically (via MCP server) +4. Designer refines visual design in Figma +5. Freya reads refined components back automatically +6. Design system updated with new tokens/components +7. Prototype re-rendered with polished design + +**Benefits:** +- Build design system organically (no upfront investment) +- Component-level precision (not full-page extraction) +- Automated Object ID traceability +- Bidirectional sync (Prototype ↔ Figma ↔ Design System) + +**Tools:** +- **Figma MCP** (recommended): Automated integration via MCP server +- **Figma**: Visual design tool for refinement +- See: [Figma Integration Guide](../../workflows/5-design-system/figma-integration/prototype-to-figma-workflow.md) + +--- + ### Component Extraction As you specify scenarios in Phase 4, components naturally emerge: diff --git a/src/modules/wds/docs/method/tone-of-voice-guide.md b/src/modules/wds/docs/method/tone-of-voice-guide.md index 3b9e2dba4..ec7271af6 100644 --- a/src/modules/wds/docs/method/tone-of-voice-guide.md +++ b/src/modules/wds/docs/method/tone-of-voice-guide.md @@ -163,7 +163,7 @@ Clear rules for what fits your tone and what doesn't: - "Login failed. Verify your credentials and try again" **Technical & Precise:** -- "Invalid email format. Expected: name@domain.com" +- "Invalid email format. Expected: `name@domain.com`" - "Resource not found. Check URL and retry" - "Authentication error: Invalid credentials provided" diff --git a/src/modules/wds/docs/tools/cursor-windsurf.md b/src/modules/wds/docs/tools/cursor-windsurf.md new file mode 100644 index 000000000..e19860e05 --- /dev/null +++ b/src/modules/wds/docs/tools/cursor-windsurf.md @@ -0,0 +1,190 @@ +# Cursor/Windsurf IDE + +**Category:** Development Environment +**Purpose:** AI-powered IDE for WDS agent workflows +**Website:** / + +--- + +## What It Is + +Cursor and Windsurf are AI-powered IDEs built on VS Code that enable natural language interaction with WDS agents (Freya, Saga, Idunn). They provide the environment where agents can read, write, and modify code while maintaining full context of your project. + +--- + +## Why WDS Recommends It + +**AI Agent Integration:** +- Native support for AI agents like Freya, Saga, Idunn +- Agents can read/write files, run commands, analyze code +- Context-aware suggestions and automation + +**WDS Workflow Support:** +- File structure navigation for WDS projects +- Terminal integration for workflow commands +- Multi-file editing for specifications and prototypes +- Git integration for version control + +**Developer Experience:** +- VS Code compatibility (extensions, themes, settings) +- Fast performance +- Intelligent code completion +- Built-in terminal + +--- + +## Setup Instructions + +### 1. Installation + +**Cursor:** +```bash +# Download from https://cursor.sh +# Install for your OS (Windows, macOS, Linux) +``` + +**Windsurf:** +```bash +# Download from https://codeium.com/windsurf +# Install for your OS (Windows, macOS, Linux) +``` + +### 2. Initial Configuration + +Open Settings (Ctrl+, or Cmd+,): + +```json +{ + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "files.autoSave": "onFocusChange", + "terminal.integrated.defaultProfile.windows": "PowerShell", + "terminal.integrated.defaultProfile.osx": "zsh" +} +``` + +### 3. Recommended Extensions + +Install these extensions for WDS workflows: + +- **Prettier** - Code formatting +- **ESLint** - JavaScript linting +- **Markdown All in One** - Markdown editing +- **YAML** - YAML file support +- **Live Server** - Preview HTML prototypes +- **GitLens** - Enhanced Git integration + +### 4. WDS-Specific Setup + +Create workspace settings for WDS projects: + +`.vscode/settings.json`: +```json +{ + "files.associations": { + "*.agent.yaml": "yaml", + "*.workflow.yaml": "yaml" + }, + "search.exclude": { + "**/node_modules": true, + "**/dist": true, + "**/.git": true + }, + "files.watcherExclude": { + "**/node_modules/**": true + } +} +``` + +--- + +## WDS Best Practices + +### DO βœ… + +**1. Use Agent Chat Effectively** +- Be specific with requests to Freya, Saga, or Idunn +- Reference files using @ mentions +- Provide context about what you're trying to achieve + +**2. Organize Workspace** +- Open WDS project at root level +- Use workspace folders for multi-repo projects +- Keep terminal open for workflow commands + +**3. Leverage AI Features** +- Use Ctrl+K for inline AI edits +- Use chat for complex refactoring +- Let agents handle repetitive tasks + +**4. File Navigation** +- Use Ctrl+P for quick file open +- Use breadcrumbs for navigation +- Bookmark frequently used files + +### DON'T ❌ + +**1. Don't Fight the AI** +- If agent suggests changes, review before rejecting +- Provide feedback to improve suggestions +- Trust agents for WDS-specific patterns + +**2. Don't Skip Git Integration** +- Commit frequently +- Use descriptive commit messages +- Review changes before committing + +**3. Don't Ignore Workspace Settings** +- Configure for your project structure +- Use consistent formatting +- Set up proper file associations + +--- + +## Keyboard Shortcuts + +**Essential for WDS:** + +| Action | Windows/Linux | macOS | +|--------|---------------|-------| +| Command Palette | Ctrl+Shift+P | Cmd+Shift+P | +| Quick Open | Ctrl+P | Cmd+P | +| AI Chat | Ctrl+L | Cmd+L | +| Inline AI Edit | Ctrl+K | Cmd+K | +| Terminal | Ctrl+` | Cmd+` | +| Find in Files | Ctrl+Shift+F | Cmd+Shift+F | +| Git Panel | Ctrl+Shift+G | Cmd+Shift+G | + +--- + +## Troubleshooting + +### Issue: Agent can't read files + +**Solution:** +- Ensure files are in workspace +- Check file permissions +- Reload window (Ctrl+Shift+P β†’ "Reload Window") + +### Issue: Slow performance + +**Solution:** +- Exclude large folders from search +- Disable unused extensions +- Increase memory limit in settings + +--- + +## Resources + +**Cursor:** +- Website: +- Documentation: Check website + +**Windsurf:** +- Website: +- Documentation: Check website + +--- + +[← Back to Tools](wds-tools-guide.md) diff --git a/src/modules/wds/docs/tools/figma-mcp.md b/src/modules/wds/docs/tools/figma-mcp.md new file mode 100644 index 000000000..75b36e2ac --- /dev/null +++ b/src/modules/wds/docs/tools/figma-mcp.md @@ -0,0 +1,450 @@ +# Figma MCP + +**Category:** Integration Tool +**Purpose:** MCP server for automated Figma integration with WDS +**Repository:** WDS Figma MCP Server + +--- + +## What It Is + +Figma MCP (Model Context Protocol) is a server that enables automated, bidirectional communication between WDS agents (Freya) and Figma. It allows precise component-level injection from HTML prototypes into Figma and automated reading of refined components back into the design system. + +--- + +## Why WDS Recommends It + +**Automation:** +- Freya automatically injects components to Figma +- No manual upload or conversion needed +- Automated design token extraction +- Bidirectional sync (Prototype ↔ Figma ↔ Design System) + +**Precision:** +- Component-level injection (not full pages) +- Object ID preservation automatic +- Target specific Figma pages +- Batch component operations + +**Integration:** +- Seamless WDS workflow integration +- Page naming matches specification structure +- Automated design system updates +- Version control friendly + +--- + +## Setup Instructions + +### 1. Installation + +```bash +# Install Figma MCP server +npm install -g @wds/figma-mcp-server +``` + +### 2. Figma API Access + +Get your Figma personal access token: + +1. Go to Figma Settings β†’ Account +2. Scroll to "Personal access tokens" +3. Click "Generate new token" +4. Name it "WDS MCP Server" +5. Copy the token + +### 3. Configuration + +Set up environment variables: + +```bash +# Set Figma access token +export FIGMA_ACCESS_TOKEN="your-token-here" + +# Or create .env file +echo "FIGMA_ACCESS_TOKEN=your-token-here" > .env +``` + +Create MCP configuration file: + +`.wds/figma-mcp-config.yaml`: +```yaml +figma: + access_token: ${FIGMA_ACCESS_TOKEN} + default_file_id: "your-figma-file-id" + default_page: "WDS Components" + +extraction: + preserve_object_ids: true + extract_design_tokens: true + convert_to_components: true + maintain_hierarchy: true + +injection: + auto_layout: true + responsive_constraints: true + component_naming: "object-id" + page_naming: "scenario-page" + +sync: + bidirectional: true + auto_update_design_system: false + conflict_resolution: "manual" + +naming_conventions: + page_format: "{scenario-number}-{scenario-name} / {page-number}-{page-name}" + example: "01-Customer-Onboarding / 1.2-Sign-In" + source: "docs/C-Scenarios/" +``` + +### 4. Initialize MCP Server + +```bash +# Initialize for your project +wds figma init + +# Test connection +wds figma test-connection +``` + +### 5. Get Figma File ID + +From your Figma file URL: +``` +https://figma.com/file/ABC123DEF456/Project-Name + ^^^^^^^^^^^^ + This is your file ID +``` + +--- + +## Freya's Automated Workflow + +### Phase 1: Injection (Automated by Freya) + +``` +User: "Prototype needs refinement" + ↓ +Freya analyzes prototype components + ↓ +Freya identifies components needing refinement + ↓ +Freya presents options to user + ↓ +User: "Yes, inject to Figma" + ↓ +Freya automatically: + - Determines target Figma file from config + - Creates/navigates to matching page + - Injects selected components via MCP + - Preserves Object IDs in layer names + - Provides Figma link to user +``` + +### Phase 2: Reading Back (Automated by Freya) + +``` +User: "Finished refining in Figma" + ↓ +Freya automatically: + - Connects to Figma via MCP + - Reads refined components + - Extracts design tokens + - Identifies variants and states + - Presents changes to user + ↓ +User: "Update design system" + ↓ +Freya automatically: + - Updates design system files + - Creates/updates component docs + - Updates design tokens + - Offers to re-render prototype +``` + +--- + +## WDS Best Practices + +### DO βœ… + +**1. Use Freya Automation** +- Let Freya handle injection automatically +- Freya analyzes components and determines what to inject +- Freya reads refined components back +- No manual commands needed + +**2. Maintain Object ID Traceability** +- All components have Object IDs in HTML +- MCP preserves Object IDs in Figma layer names +- Enables tracking from spec β†’ prototype β†’ Figma β†’ design system + +**3. Follow Page Naming Convention** +- Pages match WDS specification structure +- Format: `[Scenario-Number]-[Scenario-Name] / [Page-Number]-[Page-Name]` +- Example: `01-Customer-Onboarding / 1.2-Sign-In` + +**4. Batch Related Components** +- Inject related components together +- Maintains context for designer +- Efficient workflow + +### DON'T ❌ + +**1. Don't Inject Entire Pages** +- Use component-level precision +- Inject only what needs refinement +- Avoid unnecessary extraction + +**2. Don't Skip Object IDs** +- Always include Object IDs in HTML +- Required for traceability +- Enables automated mapping + +**3. Don't Manually Upload** +- Use MCP server, not manual upload +- Automation is more reliable +- Maintains consistency + +--- + +## Troubleshooting + +### Issue: MCP server can't connect to Figma + +**Solution:** +```bash +# Verify access token +echo $FIGMA_ACCESS_TOKEN + +# Test connection +wds figma test-connection + +# Check Figma file permissions +# Ensure token has access to file +``` + +### Issue: Components not injecting + +**Solution:** +- Verify Object IDs exist in HTML +- Check Figma file ID in config +- Ensure page name is correct +- Check MCP server logs + +### Issue: Design tokens not extracting + +**Solution:** +- Ensure Figma uses variables (not hardcoded values) +- Check extraction settings in config +- Verify component has proper styling +- Review MCP server logs + +### Issue: Object IDs not preserved + +**Solution:** +- Check `preserve_object_ids: true` in config +- Verify Object IDs in HTML data attributes +- Ensure MCP server version is up to date + +--- + +## Security Best Practices + +### DO βœ… + +**1. Protect Access Token** +```bash +# Use environment variables +export FIGMA_ACCESS_TOKEN="token" + +# Or .env file (add to .gitignore) +echo "FIGMA_ACCESS_TOKEN=token" > .env +``` + +**2. Add to .gitignore** +```gitignore +.env +.wds/figma-mcp-config.yaml # If contains sensitive data +``` + +**3. Use Separate Tokens** +- Different tokens for dev/production +- Rotate tokens periodically +- Revoke unused tokens + +### DON'T ❌ + +**1. Don't Commit Tokens** +- Never commit access tokens to git +- Don't hardcode in configuration files +- Don't share tokens in documentation + +**2. Don't Use Personal Tokens for Team** +- Create team/project-specific tokens +- Use service accounts when available +- Track token usage + +--- + +## Advantages Over Manual Methods + +**vs. html.to.design:** +- βœ… Component-level precision (not full page) +- βœ… Automated Object ID preservation +- βœ… Bidirectional sync +- βœ… Batch operations +- βœ… Freya integration + +**vs. Manual Figma Creation:** +- βœ… Faster workflow +- βœ… Maintains code-design sync +- βœ… Automated token extraction +- βœ… Consistent structure +- βœ… Reduced manual work + +--- + +## Windsurf IDE Integration (Official Figma MCP) + +### Overview + +The official Figma Desktop MCP server provides read-only access to Figma files through Windsurf IDE. This enables AI agents like Freya to directly extract design definitions from Figma without manual copying. + +### Prerequisites + +- **Figma Account**: Paid account with Dev Mode access +- **Figma Desktop**: Latest version installed +- **Windsurf IDE**: With MCP support enabled + +### Configuration + +**1. MCP Config File** + +Location: `~/.codeium/windsurf/mcp_config.json` + +```json +{ + "mcpServers": { + "Figma Desktop": { + "serverUrl": "http://127.0.0.1:3845/mcp" + } + } +} +``` + +**Important**: Use `serverUrl` (not `url`) for HTTP-based MCP servers in Windsurf. + +**2. Figma Desktop Setup** + +1. Open Figma Desktop with your paid account +2. The official Figma MCP server runs automatically on port 3845 +3. Open your design file +4. Select the node/frame you want to extract + +**3. Windsurf Configuration** + +1. Open Windsurf Settings: `Ctrl+,` (or `Cmd+,` on Mac) +2. Navigate to: **Tools β†’ Windsurf Settings β†’ MCP Servers** +3. Click the **refresh button** after modifying `mcp_config.json` +4. Verify "Figma Desktop" appears as **Enabled** + +### Available Tools + +The Figma Desktop MCP server provides: + +- `get_design_context` - Extract full design context including code, styles, and assets +- `get_variable_defs` - Get design variable definitions +- `get_screenshot` - Capture visual screenshot of selected node +- `get_metadata` - Get structural metadata in XML format +- `create_design_system_rules` - Generate design system rules +- `get_figjam` - Extract FigJam board content + +### Usage Example + +**Extracting Color Definitions:** + +1. **In Figma Desktop**: Select the color palette frame +2. **In Windsurf**: Call the MCP tool: + +``` +mcp1_get_design_context( + clientLanguages: "markdown", + clientFrameworks: "unknown", + nodeId: "", // Empty for currently selected node + dirForAssetWrites: "path/to/assets" +) +``` + +3. **Result**: Receives React/Tailwind code with all color values, which can be parsed and converted to design tokens + +**Getting Visual Reference:** + +``` +mcp1_get_screenshot( + clientLanguages: "markdown", + clientFrameworks: "unknown", + nodeId: "" +) +``` + +### Real-World Success: Dogweek Design System + +**Date**: January 9, 2026 + +Successfully extracted the Dogweek color system from Figma and integrated into project design system: + +- **10 Primary Colors**: Brand colors, semantic colors (success, error, info) +- **7 Gradient Definitions**: For rich visual effects +- **Typography**: Font family specifications (Fredoka, Liberation Sans) + +The extracted data was automatically converted from React/Tailwind format to structured markdown documentation in the Dogweek project. + +### Troubleshooting + +**Issue: "Nothing is selected"** +- **Solution**: Select a node in Figma Desktop before calling MCP tools + +**Issue: "Path for asset writes required"** +- **Solution**: Provide `dirForAssetWrites` parameter with absolute path + +**Issue: "Failed to initialize server"** +- **Solution**: + - Ensure Figma Desktop is running + - Verify you're logged into a paid account with Dev Mode access + - Check that port 3845 is not blocked + +**Issue: MCP server not appearing in Windsurf** +- **Solution**: + - Use `serverUrl` instead of `url` in config + - Click refresh button in MCP settings + - Restart Windsurf completely + +### Benefits for WDS Method + +1. **Automated Design Token Extraction**: No manual copying of color codes, spacing values, etc. +2. **Single Source of Truth**: Design definitions come directly from Figma +3. **Version Control**: Changes in Figma can be re-extracted and documented +4. **AI Agent Integration**: Freya can reference actual design system values +5. **Reduced Human Error**: Eliminates transcription mistakes + +--- + +## Resources + +**Documentation:** +- MCP Server Integration Guide: `workflows/5-design-system/figma-integration/mcp-server-integration.md` +- Prototype to Figma Workflow: `workflows/5-design-system/figma-integration/prototype-to-figma-workflow.md` + +**Configuration:** +- Example config: `.wds/figma-mcp-config.yaml` +- Environment setup: `.env.example` + +**Support:** +- Figma API Docs: +- Check MCP server logs for errors +- Contact WDS team for integration issues + +--- + +[← Back to Tools](wds-tools-guide.md) diff --git a/src/modules/wds/docs/tools/figma.md b/src/modules/wds/docs/tools/figma.md new file mode 100644 index 000000000..1280480c3 --- /dev/null +++ b/src/modules/wds/docs/tools/figma.md @@ -0,0 +1,212 @@ +# Figma + +**Category:** Design Tool +**Purpose:** Visual design refinement and design system documentation +**Website:** + +--- + +## What It Is + +Figma is a collaborative design tool used in WDS for visual design refinement when prototypes need polish. It's where designers refine components extracted from HTML prototypes and define design tokens. + +--- + +## Why WDS Recommends It + +**Visual Design Refinement:** +- Polish components extracted from prototypes +- Define design tokens (colors, spacing, typography) +- Create component variants and states +- Document design decisions + +**Collaboration:** +- Real-time collaboration with team +- Share designs with stakeholders +- Comment and feedback system +- Version history + +**WDS Integration:** +- MCP server integration for component injection +- Bidirectional sync with design system +- Page structure mirrors WDS specifications +- Component traceability via Object IDs + +--- + +## Setup Instructions + +### 1. Account Creation + +1. Go to +2. Sign up for free account +3. Install desktop app (recommended) or use web version + +### 2. WDS Project Setup + +Create Figma file structure: + +``` +[Project Name] Design Refinement +β”œβ”€β”€ 01-Customer-Onboarding/ +β”‚ β”œβ”€β”€ 1.1-Start-Page +β”‚ β”œβ”€β”€ 1.2-Sign-In +β”‚ └── 1.3-Sign-Up +β”œβ”€β”€ 02-Product-Catalog/ +β”‚ β”œβ”€β”€ 2.1-Product-List +β”‚ └── 2.2-Product-Detail +└── Components/ + β”œβ”€β”€ Buttons + β”œβ”€β”€ Inputs + └── Cards +``` + +### 3. Design Tokens Setup + +Create Figma variables: + +**Colors:** +``` +Collection: Colors +β”œβ”€β”€ primary/50 +β”œβ”€β”€ primary/600 +β”œβ”€β”€ primary/700 +β”œβ”€β”€ neutral/50 +└── neutral/900 +``` + +**Spacing:** +``` +Collection: Spacing +β”œβ”€β”€ xs = 4px +β”œβ”€β”€ sm = 8px +β”œβ”€β”€ md = 16px +└── lg = 24px +``` + +**Typography:** +``` +Styles: Typography +β”œβ”€β”€ Heading/1 +β”œβ”€β”€ Heading/2 +β”œβ”€β”€ Body/Regular +└── Body/Bold +``` + +--- + +## WDS Best Practices + +### DO βœ… + +**1. Match WDS Structure** +- Page names: `[Scenario-Number]-[Scenario-Name] / [Page-Number]-[Page-Name]` +- Example: `01-Customer-Onboarding / 1.2-Sign-In` +- Mirrors `docs/C-Scenarios/` structure + +**2. Preserve Object IDs** +- Include Object IDs in layer names +- Example: Layer name "btn-login-submit" +- Maintains traceability to code + +**3. Use Design Tokens** +- Always use variables for colors +- Use variables for spacing +- Apply text styles consistently +- Don't hardcode values + +**4. Document Decisions** +- Add descriptions to components +- Document when to use each variant +- Note accessibility requirements +- Include usage examples + +### DON'T ❌ + +**1. Don't Diverge from Specs** +- If design changes, update specification +- Keep Figma and specs in sync +- Notify team of design evolution + +**2. Don't Skip Component Documentation** +- Always add WDS component ID +- Document variants and states +- Include usage guidelines + +**3. Don't Hardcode Values** +- Use variables, not hex colors +- Use spacing variables +- Apply text styles + +--- + +## WDS-Specific Workflows + +### Receiving Components from Freya + +1. Freya injects components via MCP server +2. Components appear in designated page +3. Layer names include Object IDs +4. Basic styling applied + +### Refining Components + +1. Apply design tokens (colors, spacing, typography) +2. Create component variants (primary, secondary, etc.) +3. Define states (default, hover, active, disabled) +4. Add visual polish (shadows, borders, effects) +5. Document in component description + +### Sending Back to WDS + +1. Notify Freya when refinement complete +2. Freya reads components via MCP server +3. Design tokens extracted automatically +4. Design system updated +5. Prototype re-rendered with refined design + +--- + +## Keyboard Shortcuts + +**Essential for WDS:** + +| Action | Shortcut | +|--------|----------| +| Frame | F | +| Component | Ctrl/Cmd+Alt+K | +| Text | T | +| Rectangle | R | +| Duplicate | Ctrl/Cmd+D | +| Group | Ctrl/Cmd+G | +| Auto Layout | Shift+A | +| Copy Properties | Ctrl/Cmd+Alt+C | +| Paste Properties | Ctrl/Cmd+Alt+V | + +--- + +## Troubleshooting + +### Issue: Components not syncing with WDS + +**Solution:** +- Check Object IDs in layer names +- Verify Figma file ID in project config +- Ensure MCP server configured +- Check Figma API access token + +--- + +## Resources + +- Help Center: +- Community: +- API Documentation: + +**Related WDS Documentation:** +- [Figma MCP](figma-mcp.md) - Automated integration +- Figma Designer Guide: `workflows/5-design-system/figma-integration/figma-designer-guide.md` + +--- + +[← Back to Tools](wds-tools-guide.md) diff --git a/src/modules/wds/docs/tools/git.md b/src/modules/wds/docs/tools/git.md new file mode 100644 index 000000000..b15427ac7 --- /dev/null +++ b/src/modules/wds/docs/tools/git.md @@ -0,0 +1,285 @@ +# Git + +**Category:** Version Control +**Purpose:** Track changes, collaborate, maintain project history +**Website:** + +--- + +## What It Is + +Git is a distributed version control system that tracks changes to your WDS project files. It enables collaboration, maintains history, and allows you to experiment safely with branches. + +--- + +## Why WDS Recommends It + +**Version Control:** +- Track all specification changes +- Maintain prototype history +- Document design system evolution +- Rollback if needed + +**Collaboration:** +- Multiple team members can work simultaneously +- Review changes before merging +- Track who changed what and when + +**WDS Workflow Integration:** +- Commit after each phase completion +- Branch for experimental designs +- Tag releases and milestones + +--- + +## Setup Instructions + +### 1. Installation + +**Windows:** +```bash +# Download from https://git-scm.com +# Or use winget +winget install Git.Git +``` + +**macOS:** +```bash +# Using Homebrew +brew install git +``` + +**Linux:** +```bash +# Ubuntu/Debian +sudo apt-get install git + +# Fedora +sudo dnf install git +``` + +### 2. Initial Configuration + +```bash +# Set your identity +git config --global user.name "Your Name" +git config --global user.email "your.email@example.com" + +# Set default branch name +git config --global init.defaultBranch main + +# Set default editor +git config --global core.editor "code --wait" + +# Enable color output +git config --global color.ui auto +``` + +### 3. WDS-Specific Configuration + +Create `.gitignore` for WDS projects: + +```gitignore +# Node modules +node_modules/ +npm-debug.log* + +# Build outputs +dist/ +build/ +*.log + +# IDE +.vscode/ +.idea/ +*.swp +*.swo + +# OS +.DS_Store +Thumbs.db + +# Environment +.env +.env.local + +# Temporary files +*.tmp +.cache/ +``` + +--- + +## WDS Best Practices + +### DO βœ… + +**1. Commit Frequently** +```bash +# After completing each phase +git add docs/C-Scenarios/01-Customer-Onboarding/ +git commit -m "feat: Complete customer onboarding scenario specification" + +# After design system updates +git add D-Design-System/ +git commit -m "feat: Add button component to design system" +``` + +**2. Use Descriptive Commit Messages** +```bash +# Good +git commit -m "feat: Add login page specification with multi-language support" +git commit -m "fix: Correct button hover state in design system" +git commit -m "docs: Update prototype-to-figma workflow guide" + +# Bad +git commit -m "updates" +git commit -m "fix stuff" +git commit -m "wip" +``` + +**3. Branch for Experiments** +```bash +# Create branch for design exploration +git checkout -b design/hero-section-variants + +# Experiment with different approaches +# ... + +# Merge if successful +git checkout main +git merge design/hero-section-variants + +# Or discard if not +git branch -D design/hero-section-variants +``` + +**4. Tag Milestones** +```bash +# Tag completed phases +git tag -a v1.0-phase4-complete -m "Phase 4: UX Design complete" + +# Tag releases +git tag -a v1.0-launch -m "Production launch" +``` + +### DON'T ❌ + +**1. Don't Commit Generated Files** +- Add build outputs to `.gitignore` +- Don't commit `node_modules/` +- Don't commit temporary files + +**2. Don't Force Push to Main** +```bash +# Never do this on shared branches +git push --force origin main # ❌ +``` + +**3. Don't Commit Secrets** +- Never commit API keys +- Never commit passwords +- Use environment variables +- Add `.env` to `.gitignore` + +--- + +## Common WDS Workflows + +### Starting a New WDS Project + +```bash +# Initialize repository +git init + +# Add WDS files +git add . + +# Initial commit +git commit -m "chore: Initialize WDS project structure" + +# Connect to remote +git remote add origin https://github.com/username/project.git +git push -u origin main +``` + +### Daily Workflow + +```bash +# Start of day - get latest changes +git pull + +# Work on specifications +# ... + +# Stage and commit changes +git add docs/C-Scenarios/ +git commit -m "feat: Add product detail page specification" + +# Push to remote +git push +``` + +### Collaboration Workflow + +```bash +# Create feature branch +git checkout -b feature/checkout-flow + +# Work on feature +# ... + +# Commit changes +git add . +git commit -m "feat: Add checkout flow specifications" + +# Push branch +git push -u origin feature/checkout-flow + +# Create pull request on GitHub/GitLab +# Team reviews +# Merge when approved +``` + +--- + +## Troubleshooting + +### Issue: Merge conflicts + +**Solution:** +```bash +# Pull latest changes +git pull + +# Resolve conflicts in files +# Edit files to resolve conflicts + +# Mark as resolved +git add +git commit -m "chore: Resolve merge conflicts" +``` + +### Issue: Accidentally committed wrong files + +**Solution:** +```bash +# Undo last commit, keep changes +git reset --soft HEAD~1 + +# Or remove specific file from commit +git reset HEAD +git checkout -- +``` + +--- + +## Resources + +- Documentation: +- Pro Git Book: +- GitHub Guides: + +--- + +[← Back to Tools](wds-tools-guide.md) diff --git a/src/modules/wds/docs/tools/html-to-design.md b/src/modules/wds/docs/tools/html-to-design.md new file mode 100644 index 000000000..726aea8f3 --- /dev/null +++ b/src/modules/wds/docs/tools/html-to-design.md @@ -0,0 +1,178 @@ +# html.to.design + +**Category:** Conversion Tool +**Purpose:** Convert HTML prototypes to Figma (fallback method) +**Website:** + +--- + +## What It Is + +html.to.design is a web-based tool that converts HTML/CSS to Figma files. In WDS, it serves as a fallback method when MCP server is unavailable for extracting prototypes to Figma. + +--- + +## Why WDS Recommends It + +**Fallback Option:** +- When MCP server not configured +- For full-page extraction +- Quick one-off conversions +- Exploring design possibilities + +**Conversion Capabilities:** +- HTML structure β†’ Figma frames +- CSS styles β†’ Figma styling +- Layout (Flexbox/Grid) β†’ Auto Layout +- Text content β†’ Text layers + +--- + +## Setup Instructions + +### 1. Access + +No installation required - web-based tool: +1. Go to +2. No account needed for basic use +3. Premium features available with account + +### 2. Prepare Prototype + +Before uploading: + +```html + + + + + + Page Title + + + + +
+

Title

+
+ + + +``` + +--- + +## WDS Best Practices + +### DO βœ… + +**1. Clean HTML Before Upload** +- Use semantic HTML elements +- Remove debug code +- Simplify complex nesting +- Use Flexbox/Grid layouts + +**2. Include Object IDs** +```html + +``` + +**3. Use Standard CSS** +- Avoid complex positioning +- Use standard properties +- Keep selectors simple + +### DON'T ❌ + +**1. Don't Use When MCP Available** +- MCP server is preferred method +- Better Object ID preservation +- Automated workflow integration + +**2. Don't Expect Perfect Conversion** +- Manual cleanup may be needed +- Complex layouts may not convert perfectly +- Review and refine in Figma + +--- + +## Usage Workflow + +### 1. Upload HTML + +``` +1. Go to https://html.to.design +2. Upload HTML file +3. Include associated CSS +4. Select target: Figma +``` + +### 2. Configure + +``` +Options: +- Preserve layout structure: Yes +- Convert to components: Yes (if available) +``` + +### 3. Download and Import + +``` +1. Download Figma file +2. Open in Figma +3. Manually add Object IDs to layers +4. Begin refinement +``` + +--- + +## Limitations + +### What Works Well + +- Standard layouts +- Flexbox and Grid +- Text content +- Basic styling + +### What May Need Manual Adjustment + +- Complex animations +- JavaScript-driven content +- Custom SVG graphics +- Advanced CSS effects + +--- + +## When to Use + +### Use html.to.design when: + +- MCP server not configured +- Need full-page extraction +- Quick one-off conversion +- Exploring design possibilities + +### Use MCP server instead when: + +- MCP server available +- Need component-level precision +- Require Object ID traceability +- Planning iterative refinement + +--- + +## Resources + +- Website: +- Documentation: Check website for latest guides + +**Related WDS Documentation:** +- [Figma MCP](figma-mcp.md) - Recommended automated method +- Prototype to Figma Workflow: `workflows/5-design-system/figma-integration/prototype-to-figma-workflow.md` + +--- + +[← Back to Tools](wds-tools-guide.md) diff --git a/src/modules/wds/docs/tools/nanobanana.md b/src/modules/wds/docs/tools/nanobanana.md new file mode 100644 index 000000000..841f0556a --- /dev/null +++ b/src/modules/wds/docs/tools/nanobanana.md @@ -0,0 +1,240 @@ +# NanoBanana + +**Category:** AI Design Tool +**Purpose:** Agent-driven asset creation and design inspiration +**Website:** + +--- + +## What It Is + +NanoBanana is an AI-powered design tool (think "agent-driven Photoshop") that creates visual design assets and generates design inspiration. It's used in WDS for: + +1. **Early design exploration** - Creating custom graphics, mood boards, visual concepts +2. **Sketch envisioning** - Converting sketches/specifications into visual designs (images or code) +3. **Asset creation** - Generating placeholder assets and custom graphics + +**Output formats:** +- **Images** - Visual designs, graphics, illustrations +- **Code snippets** - HTML/CSS/React code for designs + +--- + +## Why WDS Recommends It + +**Asset Creation:** +- Generate custom graphics and icons +- Create design inspiration and variations +- Explore visual concepts +- Generate placeholder assets +- Brand identity exploration + +**Design Exploration:** +- Multiple design variations quickly +- Explore different visual directions +- Generate creative ideas +- Inspire design decisions + +--- + +## Setup Instructions + +### 1. Account Creation + +1. Go to +2. Sign up for account +3. Choose plan (free tier available) + +### 2. WDS Integration + +NanoBanana has two integration workflows in WDS: + +#### **Workflow A: Early Design Exploration** + +**Key Insight:** Brand identity is INDEPENDENT of product! You can establish visual identity anytime - before, during, or after product strategy. + +``` +Phase 5: Visual Design Exploration (can happen ANYTIME) + ↓ +NanoBanana (create brand assets/visual identity) + ↓ +Save to D-Design-System/01-Visual-Design/ + ↓ +Refine concepts β†’ Establish visual direction + ↓ +Define design tokens (colors, typography) + ↓ +Phase 4: Create scenarios with established style + ↓ +Export final assets β†’ D-Design-System/02-Assets/ +``` + +#### **Workflow B: Sketch Envisioning (Alternative to Figma)** + +``` +Phase 4: Create specification + ↓ +NanoBanana (sketch/spec β†’ design as image or code) + ↓ +Freya interprets output (no Object IDs - manual process) + ↓ +Extract design tokens and components + ↓ +Update design system manually + ↓ +Create/update prototype with refined design +``` + +**Key Difference from Figma MCP:** +- ❌ No Object ID preservation (manual interpretation required) +- ❌ No automated bidirectional sync +- βœ… Can generate code snippets directly +- βœ… Can produce visual designs from text descriptions +- βœ… Faster for exploration (no Figma setup needed) + +**Folder Structure:** +- **01-Visual-Design/** - Early exploration, mood boards, NanoBanana outputs +- **02-Assets/** - Final logos, icons, images (added later) + +--- + +## WDS Best Practices + +### DO + +**1. Use for Creative Exploration** +- Generate multiple variations +- Explore different styles +- Create mood boards +- Inspire design direction + +**2. Refine AI Output** +- Don't use raw AI output +- Refine in Figma +- Align with brand guidelines +- Ensure consistency + +**3. Document Asset Sources** +- Track AI-generated assets +- Note generation prompts +- Maintain asset library +- Document usage rights + +**4. Integrate into Design System** +- Export refined assets +- Add to design system +- Create reusable components +- Document usage guidelines + +### DON'T ❌ + +**1. Don't Replace Human Design** +- Use as inspiration, not replacement +- Apply design thinking +- Ensure brand alignment +- Review quality + +**2. Don't Skip Refinement** +- Always refine AI output +- Ensure consistency +- Match brand guidelines +- Test usability + +**3. Don't Use Without Customization** +- Customize for your brand +- Adapt to design system +- Ensure uniqueness +- Avoid generic output + +--- + +## Usage Workflow + +### 1. Generate Assets + +``` +1. Describe desired asset +2. Generate multiple variations +3. Select best options +4. Download assets +``` + +### 2. Refine in Figma + +``` +1. Import to Figma +2. Apply brand colors +3. Adjust to design system +4. Create variants if needed +``` + +### 3. Integrate into WDS + +``` +1. Add to design system +2. Document usage +3. Use in prototypes +4. Share with team +``` + +### 4. Sketch Envisioning (Alternative Workflow) + +**For converting sketches/specs to designs:** + +``` +1. Provide sketch or specification to NanoBanana +2. Receive output (image or code) +3. Freya interprets output: + - Extract design tokens (colors, spacing, typography) + - Identify components and patterns + - Map to design system (manually - no Object IDs) +4. Update design system files +5. Create/update prototype +6. Test and refine +``` + +**Important Notes:** +- **No Object IDs** - Manual interpretation required +- **No automation** - Freya must manually extract and map components +- **Code snippets** - Need integration into WDS structure +- **Images** - Need manual component extraction + +--- + +## When to Use + +### Use NanoBanana for: + +**Early Design Exploration:** +- **ANYTIME** - Brand identity is independent of product strategy! +- When establishing brand identity (can be before, during, or after product work) +- When exploring multiple visual directions +- Before committing to design tokens +- Can happen before Phase 1, parallel to strategy work, or after Phase 4 + +**Sketch Envisioning (Alternative to Figma):** +- Converting sketches to visual designs quickly +- Generating code snippets from design concepts +- When Figma/MCP server not available +- Rapid prototyping without design system +- Exploring multiple design variations + +### Don't use for: + +- **Automated workflows** - No MCP integration (manual interpretation needed) +- **Object ID traceability** - Outputs lack Object IDs (use Figma MCP for this) +- **Final production code** - Code snippets need refinement and integration +- **Replacing design process** - Use as tool, not replacement +- **Bypassing brand guidelines** - Always align with brand standards + +--- + +## Resources + +- Website: +- Documentation: Check website for latest guides +- Support: Contact via website + +--- + +[← Back to Tools](wds-tools-guide.md) diff --git a/src/modules/wds/docs/tools/wds-tools-guide.md b/src/modules/wds/docs/tools/wds-tools-guide.md new file mode 100644 index 000000000..0885dffad --- /dev/null +++ b/src/modules/wds/docs/tools/wds-tools-guide.md @@ -0,0 +1,115 @@ +# WDS Tools + +**Purpose:** Recommended tools for WDS workflows with setup instructions and best practices. + +**Last Updated:** January 8, 2026 + +--- + +## Overview + +WDS works best with a curated set of tools that support the concept-first, iterative design workflow. Each tool has a dedicated page with comprehensive setup instructions, best practices, and WDS-specific workflows. + +--- + +## Tool Categories + +### Required Tools + +**[Cursor/Windsurf IDE](cursor-windsurf.md)** +- AI-powered IDE for WDS agent workflows +- Development environment for Freya, Saga, Idunn +- **Status:** Required for all WDS phases + +**[Git](git.md)** +- Version control for tracking changes +- Collaboration and project history +- **Status:** Required for all WDS phases + +--- + +### Recommended Tools + +**[Figma MCP](figma-mcp.md)** +- MCP server for automated Figma integration +- Component-level injection and bidirectional sync +- **Status:** Recommended for Phase 4-5 + +--- + +### Optional Tools + +**[Figma](figma.md)** +- Visual design refinement tool +- Design system documentation +- **Status:** Optional for Phase 4-5 + +**[html.to.design](html-to-design.md)** +- HTML to Figma conversion (fallback method) +- When MCP server unavailable +- **Status:** Optional for Phase 4-5 + +**[NanoBanana](nanobanana.md)** +- AI-powered asset creation tool +- Design inspiration and exploration +- **Status:** Optional for pre-Phase 4 + +--- + +## Quick Reference + +| Tool | Category | Primary Use | WDS Phase | Status | +|------|----------|-------------|-----------|--------| +| **[Cursor/Windsurf](cursor-windsurf.md)** | IDE | Development, agent interaction | All | Required | +| **[Git](git.md)** | Version Control | Track changes, collaborate | All | Required | +| **[Figma](figma.md)** | Design | Visual refinement, design system | 4-5 | Optional | +| **[Figma MCP](figma-mcp.md)** | Integration | Automated Figma ↔ WDS sync | 4-5 | Recommended | +| **[html.to.design](html-to-design.md)** | Conversion | HTML β†’ Figma (fallback) | 4-5 | Optional | +| **[NanoBanana](nanobanana.md)** | AI Design | Asset creation, inspiration | Pre-4 | Optional | + +--- + +## Getting Started + +### Minimum Setup (Required) + +1. Install [Cursor or Windsurf IDE](cursor-windsurf.md) +2. Install [Git](git.md) +3. Configure both for your project + +### Recommended Setup (For Full WDS Workflow) + +1. Install [Cursor or Windsurf IDE](cursor-windsurf.md) +2. Install [Git](git.md) +3. Create [Figma](figma.md) account +4. Install and configure [Figma MCP](figma-mcp.md) server +5. Set up Figma API access token + +### Full Setup (All Features) + +1. Install [Cursor or Windsurf IDE](cursor-windsurf.md) +2. Install [Git](git.md) +3. Create [Figma](figma.md) account +4. Install and configure [Figma MCP](figma-mcp.md) server +5. Set up Figma API access token +6. Explore [NanoBanana](nanobanana.md) for asset creation + +### Optional Tools + +- [html.to.design](html-to-design.md) - Fallback when MCP not available +- [NanoBanana](nanobanana.md) - Asset creation and inspiration + +--- + +## Support and Resources + +Each tool page includes: +- Detailed setup instructions +- WDS-specific best practices +- Troubleshooting guides +- Integration with WDS workflows +- Links to official documentation + +--- + +**Browse individual tool pages for comprehensive guides on setup, configuration, and WDS-specific workflows.** diff --git a/src/modules/wds/docs/wds-workflows-guide.md b/src/modules/wds/docs/wds-workflows-guide.md deleted file mode 100644 index a9ea141f6..000000000 --- a/src/modules/wds/docs/wds-workflows-guide.md +++ /dev/null @@ -1,90 +0,0 @@ -# Whiteport Design Studio (WDS) Module - -**Design-focused methodology for UX/UI product development** - -## Overview - -Whiteport Design Studio provides a complete design workflow from product exploration through detailed component specifications. WDS creates the design artifacts that feed into development modules like BMad Method (BMM). - -## Module Structure - -``` -wds/ -β”œβ”€β”€ _module-installer/ # Installation configuration -β”œβ”€β”€ agents/ # WDS specialized agents (Norse Pantheon) -β”‚ β”œβ”€β”€ saga-analyst.agent.yaml # Saga-Analyst - Business & Product Analyst -β”‚ β”œβ”€β”€ idunn-pm.agent.yaml # Idunn-WDS-PM - Product Manager -β”‚ └── freya-ux.agent.yaml # Freya-WDS-Designer - UX/UI Designer -β”œβ”€β”€ workflows/ # Phase-selectable design workflows -β”œβ”€β”€ data/ # Standards, frameworks, presentations -β”‚ └── presentations/ # Agent introduction presentations -β”œβ”€β”€ docs/ # Module documentation -β”‚ β”œβ”€β”€ method/ # Methodology deep-dives -β”‚ └── images/ # Diagrams and visuals -β”œβ”€β”€ examples/ # Real-world usage examples -β”‚ └── dog-week-patterns/ # Patterns from Dog Week project -β”œβ”€β”€ reference/ # Templates and checklists -β”‚ β”œβ”€β”€ templates/ # Document templates -β”‚ └── checklists/ # Phase completion checklists -β”œβ”€β”€ teams/ # Team configurations -└── README.md # This file (only README in module) -``` - -## Output Folder Structure - -WDS creates an alphabetized folder structure in the user's `docs/` folder: - -| Folder | Phase | Purpose | -| ------------------ | ----- | ---------------------------------- | -| `A-Product-Brief/` | 1 | Strategic foundation & vision | -| `B-Trigger-Map/` | 2 | Business goals, personas, drivers | -| `C-Scenarios/` | 4 | Visual specifications & sketches | -| `D-PRD/` | 3 | Product requirements documentation | -| `D-Design-System/` | 5 | Component library & design tokens | -| `E-UI-Roadmap/` | 6 | Development integration bridge | - -## Phases - -1. **Product Exploration** β†’ `A-Product-Brief/` -2. **User Research** β†’ `B-Trigger-Map/` -3. **Requirements** β†’ `D-PRD/` -4. **Conceptual Design** β†’ `C-Scenarios/` -5. **Component Design** β†’ `D-Design-System/` -6. **Dev Integration** β†’ `E-UI-Roadmap/` - -## Agents - The Norse Pantheon πŸ”οΈ - -| Agent | File | Role | Norse Meaning | -| ----------------------- | ------------------------- | -------------------------- | ----------------------------------- | -| **Saga the Analyst** | `saga-analyst.agent.yaml` | Business & Product Analyst | Goddess of stories & wisdom | -| **Idunn the PM** | `idunn-pm.agent.yaml` | Product Manager | Goddess of renewal & youth | -| **Freya the Designer** | `freya-ux.agent.yaml` | UX/UI Designer | Goddess of beauty, magic & strategy | - -## Conventions - -- **One README rule:** Only this README.md; all other docs use `xxx-guide.md` naming -- **Alphabetized output:** A-B-C-D-E folder prefix in user projects -- **Design focus:** No development artifacts (handled by BMM) -- **Phase-selectable:** Users choose phases based on project scale - -## Quick Start - -``` -# After installing BMad with WDS module -npx bmad-method@alpha install - -# In your IDE, activate any WDS agent and run: -*workflow-init -``` - -## Integration with BMM - -WDS outputs feed directly into BMad Method development workflows: - -``` -WDS β†’ E-UI-Roadmap/ β†’ BMM Architecture & Stories -``` - ---- - -Part of the BMad ecosystem β€’ Contributed by Whiteport Collective diff --git a/src/modules/wds/workflows/00-system/wds-workflow-status-template.yaml b/src/modules/wds/workflows/00-system/wds-workflow-status-template.yaml index 890f34220..a87d05c7b 100644 --- a/src/modules/wds/workflows/00-system/wds-workflow-status-template.yaml +++ b/src/modules/wds/workflows/00-system/wds-workflow-status-template.yaml @@ -31,7 +31,7 @@ project_structure: delivery: format: "{{delivery_format}}" # prd | wordpress | figma | prototype | direct-code | other target_platform: "{{target_platform}}" # wordpress | react | vue | html | custom - requires_prd: {{requires_prd}} # true | false + requires_prd: "{{requires_prd}}" # true | false description: "{{delivery_description}}" # Examples: # - "WordPress page editor code with markup and content sections" @@ -43,10 +43,10 @@ config: folder_prefix: "{{folder_prefix}}" # letters or numbers folder_case: "{{folder_case}}" # title or lowercase brief_level: "{{brief_level}}" # simplified or complete - include_design_system: { { include_design_system } } + include_design_system: "{{include_design_system}}" component_library: "{{component_library}}" specification_language: "{{specification_language}}" # Language for writing specs (EN, SE, etc.) - product_languages: { { product_languages } } # Array of languages product supports + product_languages: "{{product_languages}}" # Array of languages product supports # Folder mapping (generated based on config) folders: diff --git a/src/modules/wds/workflows/1-project-brief/alignment-signoff/section-guide.md b/src/modules/wds/workflows/1-project-brief/alignment-signoff/section-guide.md index 5c0eb0e57..359257ba7 100644 --- a/src/modules/wds/workflows/1-project-brief/alignment-signoff/section-guide.md +++ b/src/modules/wds/workflows/1-project-brief/alignment-signoff/section-guide.md @@ -8,7 +8,7 @@ --- -### 1. The Realization +## 1. The Realization **Framework**: Problem-Agitate-Solve (PAS) - Start here @@ -45,7 +45,7 @@ --- -### 2. Why It Matters +## 2. Why It Matters **Framework**: Value Proposition Canvas + Impact - Understanding why this matters and who we help @@ -65,7 +65,7 @@ --- -### 3. How We See It Working +## 3. How We See It Working **Questions to explore**: - "How do you envision this working?" @@ -78,7 +78,7 @@ --- -### 4. Paths We Explored +## 4. Paths We Explored **Questions to explore**: - "What other ways could we approach this?" @@ -91,7 +91,7 @@ --- -### 5. Recommended Solution +## 5. Recommended Solution **Questions to explore**: - "Which approach do you prefer?" @@ -102,7 +102,7 @@ --- -### 6. The Path Forward +## 6. The Path Forward **Purpose**: Explain how the work will be done practically - which WDS phases will be used and the workflow approach. @@ -130,7 +130,7 @@ --- -### 7. The Value We'll Create +## 7. The Value We'll Create **Framework**: Business Case Framework - What's the return? @@ -157,7 +157,7 @@ --- -### 8. Cost of Inaction +## 8. Cost of Inaction **Framework**: Problem-Agitate-Solve (PAS) - Agitate the problem / Business Case Framework @@ -181,7 +181,7 @@ --- -### 9. Our Commitment +## 9. Our Commitment **Framework**: Business Case Framework - What are we committing to? @@ -201,7 +201,7 @@ --- -### 10. Summary +## 10. Summary **Questions to explore**: - "What are the key points?" diff --git a/src/modules/wds/workflows/1-project-brief/alignment-signoff/substeps/README.md b/src/modules/wds/workflows/1-project-brief/alignment-signoff/substeps/substeps-guide.md similarity index 100% rename from src/modules/wds/workflows/1-project-brief/alignment-signoff/substeps/README.md rename to src/modules/wds/workflows/1-project-brief/alignment-signoff/substeps/substeps-guide.md diff --git a/src/modules/wds/workflows/2-trigger-mapping/mermaid-diagram/steps/step-08-quality-check.md b/src/modules/wds/workflows/2-trigger-mapping/mermaid-diagram/steps/step-08-quality-check.md index ea05cca83..28467bf79 100644 --- a/src/modules/wds/workflows/2-trigger-mapping/mermaid-diagram/steps/step-08-quality-check.md +++ b/src/modules/wds/workflows/2-trigger-mapping/mermaid-diagram/steps/step-08-quality-check.md @@ -150,7 +150,7 @@ Run through this comprehensive checklist to ensure diagram quality: **Test the diagram:** 1. Copy complete code -2. Paste into Mermaid live editor (https://mermaid.live) +2. Paste into Mermaid live editor () 3. Verify it renders correctly 4. Check all elements are visible 5. Confirm styling appears as intended diff --git a/src/modules/wds/workflows/4-ux-design/excalidraw-integration/excalidraw-guide.md b/src/modules/wds/workflows/4-ux-design/excalidraw-integration/excalidraw-guide.md index 8af5f5f9f..bde3dc86a 100644 --- a/src/modules/wds/workflows/4-ux-design/excalidraw-integration/excalidraw-guide.md +++ b/src/modules/wds/workflows/4-ux-design/excalidraw-integration/excalidraw-guide.md @@ -64,7 +64,7 @@ sketching: **Or use web version:** -- https://excalidraw.com (no installation needed) +- (no installation needed) ### **3. Load WDS Library (Optional)** @@ -289,9 +289,9 @@ sketching: **Excalidraw:** -- Website: https://excalidraw.com -- GitHub: https://github.com/excalidraw/excalidraw -- Discord: https://discord.gg/UexuTaE +- Website: +- GitHub: +- Discord: **WDS:** diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.js b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.js index fa05561dc..9fcf63aa9 100644 --- a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.js +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.js @@ -1,9 +1,12 @@ +/* eslint-disable n/no-unsupported-features/node-builtins */ +/* global document, window */ + /** * PROTOTYPE DEV MODE - * + * * Developer/feedback mode that allows users to easily copy Object IDs to clipboard * for providing precise feedback on prototype elements. - * + * * Features: * - Toggle dev mode with button or Ctrl+E * - Prototype works NORMALLY when dev mode is on @@ -11,13 +14,13 @@ * - Visual highlights show what will be copied (green when Shift is held) * - Tooltip shows Object ID on hover * - Success feedback when copied - * + * * Usage: * 1. Include this script in your prototype HTML * 2. Add the HTML toggle button and tooltip (see HTML template) * 3. Add the CSS styles (see CSS template) * 4. Call initDevMode() on page load - * + * * How it works: * - Activate dev mode (Ctrl+E or click button) * - Hover over elements to see their Object IDs (gray outline) @@ -40,21 +43,28 @@ let currentHighlightedElement = null; // ============================================================================ function initDevMode() { - const toggleButton = document.getElementById('dev-mode-toggle'); - const tooltip = document.getElementById('dev-mode-tooltip'); - - if (!toggleButton || !tooltip) { - console.warn('⚠️ Dev Mode: Toggle button or tooltip not found'); - return; - } - - setupKeyboardShortcuts(); - setupToggleButton(toggleButton, tooltip); - setupHoverHighlight(tooltip); - setupClickCopy(); - - console.log('%cπŸ’‘ Dev Mode available: Press Ctrl+E or click the Dev Mode button', - 'color: #0066CC; font-weight: bold;'); + const toggleButton = document.querySelector('#dev-mode-toggle'); + const tooltip = document.querySelector('#dev-mode-tooltip'); + + if (!toggleButton || !tooltip) { + console.warn('⚠️ Dev Mode: Toggle button or tooltip not found'); + return; + } + + // Check if user agent supports clipboard API + if (typeof navigator !== 'undefined' && navigator.clipboard) { + // Clipboard API available + } else { + console.warn('⚠️ Clipboard API not supported in this browser'); + return; + } + + setupKeyboardShortcuts(); + setupToggleButton(toggleButton, tooltip); + setupHoverHighlight(tooltip); + setupClickCopy(); + + console.log('%cπŸ’‘ Dev Mode available: Press Ctrl+E or click the Dev Mode button', 'color: #0066CC; font-weight: bold;'); } // ============================================================================ @@ -62,39 +72,37 @@ function initDevMode() { // ============================================================================ function setupKeyboardShortcuts() { - // Track Shift key for container selection - document.addEventListener('keydown', function(e) { - if (e.key === 'Shift') { - // Don't activate if user is typing in a form field - if (isTypingInField()) { - return; - } - - shiftKeyPressed = true; - document.body.classList.add('shift-held'); - if (devModeActive) { - console.log('%c⬆️ Shift held: Click any element to copy its Object ID', - 'color: #10B981; font-weight: bold;'); - } - } - - // Ctrl+E toggle - if (e.ctrlKey && e.key === 'e') { - e.preventDefault(); - document.getElementById('dev-mode-toggle')?.click(); - } - }); - - document.addEventListener('keyup', function(e) { - if (e.key === 'Shift') { - shiftKeyPressed = false; - document.body.classList.remove('shift-held'); - if (devModeActive) { - console.log('%c⬇️ Shift released: Prototype works normally (hold Shift to copy)', - 'color: #6b7280;'); - } - } - }); + // Track Shift key for container selection + document.addEventListener('keydown', (e) => { + if (e.key === 'Shift') { + // Don't activate if user is typing in a form field + if (isTypingInField()) { + return; + } + + shiftKeyPressed = true; + document.body.classList.add('shift-held'); + if (devModeActive) { + console.log('%c⬆️ Shift held: Click any element to copy its Object ID', 'color: #10B981; font-weight: bold;'); + } + } + + // Ctrl+E toggle + if (e.ctrlKey && e.key === 'e') { + e.preventDefault(); + document.querySelector('#dev-mode-toggle')?.click(); + } + }); + + document.addEventListener('keyup', (e) => { + if (e.key === 'Shift') { + shiftKeyPressed = false; + document.body.classList.remove('shift-held'); + if (devModeActive) { + console.log('%c⬇️ Shift released: Prototype works normally (hold Shift to copy)', 'color: #6b7280;'); + } + } + }); } // ============================================================================ @@ -102,34 +110,39 @@ function setupKeyboardShortcuts() { // ============================================================================ function setupToggleButton(toggleButton, tooltip) { - toggleButton.addEventListener('click', function(e) { - e.stopPropagation(); - devModeActive = !devModeActive; - - // Update UI - document.body.classList.toggle('dev-mode-active', devModeActive); - toggleButton.classList.toggle('active', devModeActive); - - const statusText = toggleButton.querySelector('span'); - if (statusText) { - statusText.textContent = devModeActive ? 'Dev Mode: ON' : 'Dev Mode: OFF'; - } - - // Log status - console.log(`πŸ”§ Dev Mode: ${devModeActive ? 'ACTIVATED' : 'DEACTIVATED'}`); - - if (devModeActive) { - console.log('%cπŸ”§ DEV MODE ACTIVE', 'color: #0066CC; font-size: 16px; font-weight: bold;'); - console.log('%c⚠️ Hold SHIFT + Click any element to copy its Object ID', 'color: #FFB800; font-size: 14px; font-weight: bold;'); - console.log('%cWithout Shift: Prototype works normally', 'color: #6b7280;'); - console.log('%cPress Ctrl+E to toggle Dev Mode', 'color: #6b7280;'); - } else { - tooltip.style.display = 'none'; - if (currentHighlightedElement) { - clearHighlight(); - } - } - }); + toggleButton.addEventListener('click', function (e) { + e.stopPropagation(); + if (typeof globalThis !== 'undefined') { + globalThis.devModeActive = true; + } else if (globalThis.window !== undefined) { + globalThis.devModeActive = true; + } + devModeActive = !devModeActive; + + // Update UI + document.body.classList.toggle('dev-mode-active', devModeActive); + toggleButton.classList.toggle('active', devModeActive); + + const statusText = toggleButton.querySelector('span'); + if (statusText) { + statusText.textContent = devModeActive ? 'Dev Mode: ON' : 'Dev Mode: OFF'; + } + + // Log status + console.log(`πŸ”§ Dev Mode: ${devModeActive ? 'ACTIVATED' : 'DEACTIVATED'}`); + + if (devModeActive) { + console.log('%cπŸ”§ DEV MODE ACTIVE', 'color: #0066CC; font-size: 16px; font-weight: bold;'); + console.log('%c⚠️ Hold SHIFT + Click any element to copy its Object ID', 'color: #FFB800; font-size: 14px; font-weight: bold;'); + console.log('%cWithout Shift: Prototype works normally', 'color: #6b7280;'); + console.log('%cPress Ctrl+E to toggle Dev Mode', 'color: #6b7280;'); + } else { + tooltip.style.display = 'none'; + if (currentHighlightedElement) { + clearHighlight(); + } + } + }); } // ============================================================================ @@ -137,55 +150,55 @@ function setupToggleButton(toggleButton, tooltip) { // ============================================================================ function setupHoverHighlight(tooltip) { - // Show tooltip and highlight on hover - document.addEventListener('mouseover', function(e) { - if (!devModeActive) return; - - // Don't highlight if user is typing in a field - if (isTypingInField()) { - tooltip.style.display = 'none'; - clearHighlight(); - return; - } - - clearHighlight(); - - let element = findElementWithId(e.target); - - if (!element || !element.id || isSystemElement(element.id)) { - tooltip.style.display = 'none'; - return; - } - - // Highlight element - highlightElement(element, shiftKeyPressed); - currentHighlightedElement = element; - - // Show tooltip - const prefix = shiftKeyPressed ? 'βœ“ Click to Copy: ' : '⬆️ Hold Shift + Click: '; - tooltip.textContent = prefix + element.id; - tooltip.style.display = 'block'; - tooltip.style.background = shiftKeyPressed ? '#10B981' : '#6b7280'; - tooltip.style.color = '#fff'; - - updateTooltipPosition(e, tooltip); - }); - - // Update tooltip position on mouse move - document.addEventListener('mousemove', function(e) { - if (devModeActive && tooltip.style.display === 'block') { - updateTooltipPosition(e, tooltip); - } - }); - - // Clear highlight on mouse out - document.addEventListener('mouseout', function(e) { - if (!devModeActive) return; - if (e.target.id) { - tooltip.style.display = 'none'; - clearHighlight(); - } - }); + // Show tooltip and highlight on hover + document.addEventListener('mouseover', function (e) { + if (!devModeActive) return; + + // Don't highlight if user is typing in a field + if (isTypingInField()) { + tooltip.style.display = 'none'; + clearHighlight(); + return; + } + + clearHighlight(); + + let element = findElementWithId(e.target); + + if (!element || !element.id || isSystemElement(element.id)) { + tooltip.style.display = 'none'; + return; + } + + // Highlight element + highlightElement(element, shiftKeyPressed); + currentHighlightedElement = element; + + // Show tooltip + const prefix = shiftKeyPressed ? 'βœ“ Click to Copy: ' : '⬆️ Hold Shift + Click: '; + tooltip.textContent = prefix + element.id; + tooltip.style.display = 'block'; + tooltip.style.background = shiftKeyPressed ? '#10B981' : '#6b7280'; + tooltip.style.color = '#fff'; + + updateTooltipPosition(e, tooltip); + }); + + // Update tooltip position on mouse move + document.addEventListener('mousemove', function (e) { + if (devModeActive && tooltip.style.display === 'block') { + updateTooltipPosition(e, tooltip); + } + }); + + // Clear highlight on mouse out + document.addEventListener('mouseout', function (e) { + if (!devModeActive) return; + if (e.target.id) { + tooltip.style.display = 'none'; + clearHighlight(); + } + }); } // ============================================================================ @@ -193,45 +206,49 @@ function setupHoverHighlight(tooltip) { // ============================================================================ function setupClickCopy() { - // Use capture phase to intercept clicks with Shift - document.addEventListener('click', function(e) { - if (!devModeActive) return; - - // Allow toggle button to work normally - if (isToggleButton(e.target)) return; - - // ONLY copy if Shift is held - if (!shiftKeyPressed) { - // Let prototype work normally without Shift - return; - } - - // Don't intercept if user is clicking in/around a form field - if (isTypingInField() || isFormElement(e.target)) { - return; - } - - // Shift is held and not in a form field - intercept and copy - e.preventDefault(); - e.stopPropagation(); - e.stopImmediatePropagation(); - - let element = findElementWithId(e.target); - - if (!element || !element.id || isSystemElement(element.id)) { - console.log('❌ No Object ID found'); - return false; - } - - // Copy to clipboard - const objectId = element.id; - copyToClipboard(objectId); - - // Show feedback - showCopyFeedback(element, objectId); - + // Use capture phase to intercept clicks with Shift + document.addEventListener( + 'click', + function (e) { + if (!devModeActive) return; + + // Allow toggle button to work normally + if (isToggleButton(e.target)) return; + + // ONLY copy if Shift is held + if (!shiftKeyPressed) { + // Let prototype work normally without Shift + return; + } + + // Don't intercept if user is clicking in/around a form field + if (isTypingInField() || isFormElement(e.target)) { + return; + } + + // Shift is held and not in a form field - intercept and copy + e.preventDefault(); + e.stopPropagation(); + e.stopImmediatePropagation(); + + let element = findElementWithId(e.target); + + if (!element || !element.id || isSystemElement(element.id)) { + console.log('❌ No Object ID found'); return false; - }, true); // Capture phase + } + + // Copy to clipboard + const objectId = element.id; + copyToClipboard(objectId); + + // Show feedback + showCopyFeedback(element, objectId); + + return false; + }, + true, + ); // Capture phase } // ============================================================================ @@ -239,175 +256,125 @@ function setupClickCopy() { // ============================================================================ function findElementWithId(element) { - let current = element; - let attempts = 0; - - while (current && !current.id && attempts < 10) { - current = current.parentElement; - attempts++; - } - - return current; -} + let current = element; + let attempts = 0; -function findParentContainer(element) { - let current = element; - const maxLevels = 10; - let level = 0; - - // Try to find semantic container parent first - while (current && current.id !== 'app' && level < maxLevels) { - if (current.parentElement && current.parentElement.id) { - const parentId = current.parentElement.id; - const parent = current.parentElement; - - // Prefer semantic containers - if (parentId.includes('section') || - parentId.includes('content') || - parentId.includes('container') || - parentId.includes('group') || - parentId.includes('tabs') || - parentId.includes('widget') || - parentId.includes('modal') || - parent.classList.contains('section') || - parent.classList.contains('container') || - parent.classList.contains('group')) { - return parent; - } - } - current = current.parentElement; - level++; - } - - // Fallback: find any parent with ID - current = element.parentElement; - level = 0; - while (current && level < maxLevels) { - if (current.id && current.id !== 'app') { - return current; - } - current = current.parentElement; - level++; - } - - return element; + while (current && !current.id && attempts < 10) { + current = current.parentElement; + attempts++; + } + + return current; } function isSystemElement(id) { - const systemIds = ['app', 'dev-mode-toggle', 'dev-mode-tooltip']; - return systemIds.includes(id); + const systemIds = ['app', 'dev-mode-toggle', 'dev-mode-tooltip']; + return systemIds.includes(id); } function isToggleButton(element) { - return element.id === 'dev-mode-toggle' || - element.closest('#dev-mode-toggle') || - element.classList.contains('dev-mode-toggle'); + return element.id === 'dev-mode-toggle' || element.closest('#dev-mode-toggle') || element.classList.contains('dev-mode-toggle'); } function isTypingInField() { - const activeElement = document.activeElement; - if (!activeElement) return false; - - const tagName = activeElement.tagName.toLowerCase(); - const isEditable = activeElement.isContentEditable; - - // Check if user is currently typing in a form field - return tagName === 'input' || - tagName === 'textarea' || - tagName === 'select' || - isEditable; + const activeElement = document.activeElement; + if (!activeElement) return false; + + const tagName = activeElement.tagName.toLowerCase(); + const isEditable = activeElement.isContentEditable; + + // Check if user is currently typing in a form field + return tagName === 'input' || tagName === 'textarea' || tagName === 'select' || isEditable; } function isFormElement(element) { - if (!element) return false; - - const tagName = element.tagName.toLowerCase(); - const isEditable = element.isContentEditable; - - // Check if the clicked element is a form element - return tagName === 'input' || - tagName === 'textarea' || - tagName === 'select' || - isEditable; + if (!element) return false; + + const tagName = element.tagName.toLowerCase(); + const isEditable = element.isContentEditable; + + // Check if the clicked element is a form element + return tagName === 'input' || tagName === 'textarea' || tagName === 'select' || isEditable; } function highlightElement(element, isShiftHeld) { - const color = isShiftHeld ? '#10B981' : '#6b7280'; - const width = isShiftHeld ? '3px' : '2px'; - const offset = isShiftHeld ? '3px' : '2px'; - const shadowSpread = isShiftHeld ? '5px' : '2px'; - const shadowOpacity = isShiftHeld ? '0.4' : '0.2'; - - element.style.outline = `${width} solid ${color}`; - element.style.outlineOffset = offset; - element.style.boxShadow = `0 0 0 ${shadowSpread} rgba(${isShiftHeld ? '16, 185, 129' : '107, 114, 128'}, ${shadowOpacity})`; + const color = isShiftHeld ? '#10B981' : '#6b7280'; + const width = isShiftHeld ? '3px' : '2px'; + const offset = isShiftHeld ? '3px' : '2px'; + const shadowSpread = isShiftHeld ? '5px' : '2px'; + const shadowOpacity = isShiftHeld ? '0.4' : '0.2'; + + element.style.outline = `${width} solid ${color}`; + element.style.outlineOffset = offset; + element.style.boxShadow = `0 0 0 ${shadowSpread} rgba(${isShiftHeld ? '16, 185, 129' : '107, 114, 128'}, ${shadowOpacity})`; } function clearHighlight() { - if (currentHighlightedElement) { - currentHighlightedElement.style.outline = ''; - currentHighlightedElement.style.boxShadow = ''; - currentHighlightedElement = null; - } + if (currentHighlightedElement) { + currentHighlightedElement.style.outline = ''; + currentHighlightedElement.style.boxShadow = ''; + currentHighlightedElement = null; + } } function updateTooltipPosition(e, tooltip) { - const offset = 15; - let x = e.clientX + offset; - let y = e.clientY + offset; - - // Keep tooltip on screen - const rect = tooltip.getBoundingClientRect(); - if (x + rect.width > window.innerWidth) { - x = e.clientX - rect.width - offset; - } - if (y + rect.height > window.innerHeight) { - y = e.clientY - rect.height - offset; - } - - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; + const offset = 15; + let x = e.clientX + offset; + let y = e.clientY + offset; + + // Keep tooltip on screen + const rect = tooltip.getBoundingClientRect(); + if (x + rect.width > window.innerWidth) { + x = e.clientX - rect.width - offset; + } + if (y + rect.height > window.innerHeight) { + y = e.clientY - rect.height - offset; + } + + tooltip.style.left = x + 'px'; + tooltip.style.top = y + 'px'; } function copyToClipboard(text) { - if (navigator.clipboard && navigator.clipboard.writeText) { - navigator.clipboard.writeText(text) - .then(() => { - console.log(`πŸ“‹ Copied to clipboard: ${text}`); - }) - .catch(err => { - console.error('Failed to copy:', err); - fallbackCopy(text); - }); - } else { + if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) { + navigator.clipboard + .writeText(text) + .then(() => { + console.log(`πŸ“‹ Copied to clipboard: ${text}`); + }) + .catch((error) => { + console.error('Dev Mode error:', error); fallbackCopy(text); - } + }); + } else { + fallbackCopy(text); + } } function fallbackCopy(text) { - const textarea = document.createElement('textarea'); - textarea.value = text; - textarea.style.position = 'fixed'; - textarea.style.left = '-999999px'; - document.body.appendChild(textarea); - textarea.focus(); - textarea.select(); - - try { - document.execCommand('copy'); - console.log(`πŸ“‹ Copied (fallback): ${text}`); - } catch (err) { - console.error('Fallback copy failed:', err); - } - - document.body.removeChild(textarea); + const textarea = document.createElement('textarea'); + textarea.value = text; + textarea.style.position = 'fixed'; + textarea.style.left = '-999999px'; + document.body.append(textarea); + textarea.focus(); + textarea.select(); + + try { + document.execCommand('copy'); + console.log(`πŸ“‹ Copied (fallback): ${text}`); + } catch (error) { + console.error('Dev Mode error:', error); + } + + textarea.remove(); } function showCopyFeedback(element, objectId) { - // Create feedback overlay - const feedback = document.createElement('div'); - feedback.textContent = 'βœ“ Copied: ' + objectId; - feedback.style.cssText = ` + // Create feedback overlay + const feedback = document.createElement('div'); + feedback.textContent = 'βœ“ Copied: ' + objectId; + feedback.style.cssText = ` position: fixed; top: 50%; left: 50%; @@ -423,19 +390,19 @@ function showCopyFeedback(element, objectId) { animation: fadeInOut 1.5s ease-in-out; pointer-events: none; `; - - document.body.appendChild(feedback); - - setTimeout(() => { - document.body.removeChild(feedback); - }, 1500); - - // Flash element - const originalOutline = element.style.outline; - element.style.outline = '3px solid #10B981'; - setTimeout(() => { - element.style.outline = originalOutline; - }, 300); + + document.body.append(feedback); + + setTimeout(() => { + feedback.remove(); + }, 1500); + + // Flash element + const originalOutline = element.style.outline; + element.style.outline = '3px solid #10B981'; + setTimeout(() => { + element.style.outline = originalOutline; + }, 300); } // Add CSS animation @@ -448,17 +415,16 @@ style.textContent = ` 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } } `; -document.head.appendChild(style); +document.head.append(style); // ============================================================================ // EXPORT // ============================================================================ // Make available globally -window.initDevMode = initDevMode; +globalThis.initDevMode = initDevMode; -// Auto-initialize if this is included as module -if (typeof module !== 'undefined' && module.exports) { - module.exports = { initDevMode }; +// Export for use in other scripts +if (typeof globalThis !== 'undefined' && globalThis.exports) { + globalThis.exports = { initDevMode }; } - diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/demo-data-template.json b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/demo-data-template.json index 5dd2f42fa..8a5956cbd 100644 --- a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/demo-data-template.json +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/demo-data-template.json @@ -1,63 +1,63 @@ { - "user": { - "id": "demo-user-001", - "firstName": "[First Name]", - "lastName": "[Last Name]", - "email": "[email@example.com]", - "phoneNumber": "[+1234567890]", - "picture": "", - "role": "owner", - "createdAt": "2024-01-01T00:00:00.000Z", - "updatedAt": "2024-01-01T00:00:00.000Z" + "user": { + "id": "demo-user-001", + "firstName": "[First Name]", + "lastName": "[Last Name]", + "email": "[email@example.com]", + "phoneNumber": "[+1234567890]", + "picture": "", + "role": "owner", + "createdAt": "2024-01-01T00:00:00.000Z", + "updatedAt": "2024-01-01T00:00:00.000Z" + }, + "family": { + "id": "demo-family-001", + "name": "[Family Name]", + "description": "[Brief family description]", + "location": "[City, Country]", + "picture": "", + "ownerId": "demo-user-001", + "createdAt": "2024-01-01T00:00:00.000Z", + "updatedAt": "2024-01-01T00:00:00.000Z" + }, + "members": [ + { + "id": "demo-member-001", + "familyId": "demo-family-001", + "userId": "demo-user-001", + "firstName": "[Member 1 First Name]", + "lastName": "[Member 1 Last Name]", + "email": "[member1@example.com]", + "role": "owner", + "picture": "", + "createdAt": "2024-01-01T00:00:00.000Z" }, - "family": { - "id": "demo-family-001", - "name": "[Family Name]", - "description": "[Brief family description]", - "location": "[City, Country]", - "picture": "", - "ownerId": "demo-user-001", - "createdAt": "2024-01-01T00:00:00.000Z", - "updatedAt": "2024-01-01T00:00:00.000Z" - }, - "members": [ - { - "id": "demo-member-001", - "familyId": "demo-family-001", - "userId": "demo-user-001", - "firstName": "[Member 1 First Name]", - "lastName": "[Member 1 Last Name]", - "email": "[member1@example.com]", - "role": "owner", - "picture": "", - "createdAt": "2024-01-01T00:00:00.000Z" - }, - { - "id": "demo-member-002", - "familyId": "demo-family-001", - "userId": "demo-user-002", - "firstName": "[Member 2 First Name]", - "lastName": "[Member 2 Last Name]", - "email": "[member2@example.com]", - "role": "co-owner", - "picture": "", - "createdAt": "2024-01-02T00:00:00.000Z" - } - ], - "dogs": [ - { - "id": "demo-dog-001", - "familyId": "demo-family-001", - "name": "[Dog Name]", - "breed": "[Dog Breed]", - "gender": "male", - "birthDate": "2020-05-15", - "color": "[Color]", - "specialNeeds": "[Any special needs or notes]", - "picture": "", - "createdAt": "2024-01-01T00:00:00.000Z", - "updatedAt": "2024-01-01T00:00:00.000Z" - } - ], - "comment": "This is demo data that loads automatically when prototype is opened for the first time. Edit this file to change the demo data. All fields with empty strings ('') are optional." -} \ No newline at end of file + { + "id": "demo-member-002", + "familyId": "demo-family-001", + "userId": "demo-user-002", + "firstName": "[Member 2 First Name]", + "lastName": "[Member 2 Last Name]", + "email": "[member2@example.com]", + "role": "co-owner", + "picture": "", + "createdAt": "2024-01-02T00:00:00.000Z" + } + ], + "dogs": [ + { + "id": "demo-dog-001", + "familyId": "demo-family-001", + "name": "[Dog Name]", + "breed": "[Dog Breed]", + "gender": "male", + "birthDate": "2020-05-15", + "color": "[Color]", + "specialNeeds": "[Any special needs or notes]", + "picture": "", + "createdAt": "2024-01-01T00:00:00.000Z", + "updatedAt": "2024-01-01T00:00:00.000Z" + } + ], + "comment": "This is demo data that loads automatically when prototype is opened for the first time. Edit this file to change the demo data. All fields with empty strings ('') are optional." +} diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/work-file-template.yaml b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/work-file-template.yaml index 0ee47393c..ad78976f1 100644 --- a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/work-file-template.yaml +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/work-file-template.yaml @@ -13,7 +13,7 @@ metadata: complexity: "simple | medium | complex" estimated_sections: [Number] estimated_time: "[X] minutes" - + # Device Compatibility device_compatibility: type: "mobile-only | mobile-tablet | responsive | desktop-only" @@ -28,10 +28,10 @@ metadata: - width: 428 height: 926 device: "iPhone 14 Pro Max" - breakpoints: [] # For mobile-only, leave empty + breakpoints: [] # For mobile-only, leave empty touch_optimized: true hover_interactions: false - + dependencies: - "shared/prototype-api.js" - "shared/init.js" @@ -47,18 +47,18 @@ design_tokens: primary_hover: "#1d4ed8" success: "#10b981" error: "#ef4444" - + tailwind_config: theme_extend: colors: - '[project-name]': - 50: '#eff6ff' - 500: '#2563eb' - 600: '#1d4ed8' - 700: '#1e40af' + "[project-name]": + 50: "#eff6ff" + 500: "#2563eb" + 600: "#1d4ed8" + 700: "#1e40af" fontFamily: sans: "['Inter', 'system-ui', 'sans-serif']" - + components_available: - "image-crop (components/image-crop.js)" - "toast (components/toast.js)" @@ -92,9 +92,9 @@ demo_data_needed: firstName: "[Example]" lastName: "[Example]" email: "[example@email.com]" - + # Add other demo data needs (family, dogs, etc.) - + example_submission: # Example of completed form data field1: "[value]" @@ -108,12 +108,12 @@ object_ids: header: - "[page]-header-back" - "[page]-header-title" - + form_inputs: - "[page]-input-[field1]" - "[page]-input-[field2]" # Add all form fields - + actions: - "[page]-button-submit" # Add all action buttons @@ -141,7 +141,7 @@ sections: - "Mobile viewport (375px) looks correct" - "Tailwind styles applied correctly" placeholder_message: "🚧 Building the form... Check back in a few minutes!" - + - id: "section-2" name: "[Section Name]" scope: "[What this section adds]" @@ -156,7 +156,7 @@ sections: - "[Test 1]" - "[Test 2]" placeholder_message: "[What's coming next]" - + # Add sections 3-6+ as needed # ============================================================================ @@ -167,19 +167,19 @@ javascript_functions: initialization: - "initPage() - Page-specific initialization" - "[Other init functions]" - + form_handling: - "handleSubmit(event) - Form submission" - "validateForm() - Validate all fields" - "[Other form functions]" - + ui_interactions: - "[Interaction function 1]" - "[Interaction function 2]" - + api_calls: - "DogWeekAPI.[method]([params])" - + feedback: - "showToast(message, type)" - "setLoadingState(isLoading)" @@ -200,34 +200,34 @@ navigation: testing_checklist: functionality: - - [ ] All form fields work - - [ ] Validation shows errors correctly - - [ ] Submit button works - - [ ] Loading states display - - [ ] Success feedback shows - - [ ] Error handling works - - [ ] Navigation works (back, next) - - [ ] Data persists (reload page test) - + - "[ ] All form fields work" + - "[ ] Validation shows errors correctly" + - "[ ] Submit button works" + - "[ ] Loading states display" + - "[ ] Success feedback shows" + - "[ ] Error handling works" + - "[ ] Navigation works (back, next)" + - "[ ] Data persists (reload page test)" + mobile_testing: - - [ ] Viewport is correct width - - [ ] All tap targets min 44x44px - - [ ] Text is readable (min 16px) - - [ ] No horizontal scroll - - [ ] Touch gestures work (if applicable) - + - "[ ] Viewport is correct width" + - "[ ] All tap targets min 44x44px" + - "[ ] Text is readable (min 16px)" + - "[ ] No horizontal scroll" + - "[ ] Touch gestures work (if applicable)" + code_quality: - - [ ] All Object IDs present - - [ ] Console logs helpful - - [ ] No console errors - - [ ] Tailwind classes properly used - - [ ] Functions documented - + - "[ ] All Object IDs present" + - "[ ] Console logs helpful" + - "[ ] No console errors" + - "[ ] Tailwind classes properly used" + - "[ ] Functions documented" + accessibility: - - [ ] Keyboard navigation works - - [ ] Form labels present - - [ ] Error messages clear - - [ ] Focus states visible + - "[ ] Keyboard navigation works" + - "[ ] Form labels present" + - "[ ] Error messages clear" + - "[ ] Focus states visible" # ============================================================================ # MIGRATION NOTES (for production) @@ -262,4 +262,3 @@ definition_of_done: - "No console errors" - "Code is clean" - "Story files document all sections" - diff --git a/src/modules/wds/workflows/4-ux-design/page-specification-quality/README.md b/src/modules/wds/workflows/4-ux-design/page-specification-quality/quality-guide.md similarity index 100% rename from src/modules/wds/workflows/4-ux-design/page-specification-quality/README.md rename to src/modules/wds/workflows/4-ux-design/page-specification-quality/quality-guide.md diff --git a/src/modules/wds/workflows/4-ux-design/steps/step-02-substeps/README.md b/src/modules/wds/workflows/4-ux-design/steps/step-02-substeps/substeps-guide.md similarity index 100% rename from src/modules/wds/workflows/4-ux-design/steps/step-02-substeps/README.md rename to src/modules/wds/workflows/4-ux-design/steps/step-02-substeps/substeps-guide.md diff --git a/src/modules/wds/workflows/4-ux-design/substeps/4d-prototype.md b/src/modules/wds/workflows/4-ux-design/substeps/4d-prototype.md index ce42e1182..44c3997b0 100644 --- a/src/modules/wds/workflows/4-ux-design/substeps/4d-prototype.md +++ b/src/modules/wds/workflows/4-ux-design/substeps/4d-prototype.md @@ -166,9 +166,105 @@ Choice [1/2/3]: Perfect! Your prototype validates the design. ✨ -**Prototype testing complete!** +**Prototype testing complete!** -Your design is validated and ready for development. Time to extract the functional requirements we discovered. πŸ“‹ +**Visual quality assessment:** + +How does the prototype look visually? + +1. **Polished** - Design system covers everything, looks great +2. **Needs refinement** - Works but looks basic, design system incomplete +3. **Minor tweaks** - Small CSS adjustments needed + +Choice [1/2/3]: + + + **Design Refinement Available** + +Since your design system is incomplete, I can help refine the visual design using: + +1. **Figma MCP** (Recommended) - Automated component extraction with Object ID preservation +2. **NanoBanana** (Alternative) - AI-powered sketch envisioning (outputs images or code, requires manual interpretation) + +Which would you prefer? + + Analyze prototype components and identify gaps in design system + + I've analyzed the prototype and found: + +**Components needing refinement:** +- {list components missing from design system} +- {list components with incomplete states/variants} + +**Estimated refinement time:** {X} components Γ— 15-30 min each = {Y} hours + +This will extend your design system and improve all future prototypes. + + Would you like me to: + 1. **Extract to Figma** - I'll inject these components for refinement + 2. **Continue as-is** - Functional prototype is sufficient for now + + Choice [1/2]: + + + Load and execute `workflows/5-design-system/figma-integration/prototype-to-figma-workflow.md` Phase 2 + + **Injecting components to Figma...** + +I'm using the MCP server to inject components directly into your Figma file. + +Target page: {scenario-number}-{scenario-name} / {page-number}-{page-name} + +{Show injection progress and results} + +βœ“ All components injected successfully! + +**Figma link:** {provide link} + +**Next steps:** +1. Open Figma and refine the components +2. When finished, let me know and I'll read them back +3. I'll update the design system automatically +4. We can re-render the prototype with improvements + +Take your time with the refinement. I'll be here when you're ready! + + For now, would you like to: + [C] Continue to PRD update (refine Figma later) + [W] Wait here until Figma refinement is complete + + Choice [C/W]: + + + I'll wait here. Let me know when you've finished refining in Figma. + Pause workflow, wait for user notification + + Have you finished refining the components in Figma? [Y/N] + + + Execute Phase 4 of prototype-to-figma-workflow (read refined components) + {Show design token extraction and design system updates} + + Would you like me to re-render the prototype with the enhanced design system now? [Y/N] + + + Re-render prototype with updated design system + βœ“ Prototype re-rendered with enhanced design system! + +The prototype now looks polished and professional. All components use the refined design tokens. + + + + + + + + What CSS adjustments are needed? + Apply quick CSS fixes to prototype + Updated! Test again in your browser. πŸ”„ + + +Your design is validated and ready for development. Time to extract the functional requirements we discovered. πŸ“‹ Ready to proceed to **Step 4E: PRD Update**? [Y/N] diff --git a/src/modules/wds/workflows/4-ux-design/README.md b/src/modules/wds/workflows/4-ux-design/ux-design-guide.md similarity index 96% rename from src/modules/wds/workflows/4-ux-design/README.md rename to src/modules/wds/workflows/4-ux-design/ux-design-guide.md index 00f7af8ac..791812a4c 100644 --- a/src/modules/wds/workflows/4-ux-design/README.md +++ b/src/modules/wds/workflows/4-ux-design/ux-design-guide.md @@ -59,6 +59,9 @@ Phase 4 transforms sketches and ideas into detailed, developer-ready page specif - Generate interactive HTML prototype - Uses Design System if enabled +- **Visual refinement option:** Extract to Figma via MCP server if design system incomplete +- Iterative refinement: Prototype β†’ Figma β†’ Design System β†’ Re-render +- See: `workflows/5-design-system/figma-integration/prototype-to-figma-workflow.md` ### 4E: PRD Update diff --git a/src/modules/wds/workflows/4-ux-design/workflow-new.yaml b/src/modules/wds/workflows/4-ux-design/workflow-new.yaml new file mode 100644 index 000000000..ac418533b --- /dev/null +++ b/src/modules/wds/workflows/4-ux-design/workflow-new.yaml @@ -0,0 +1,18 @@ +--- +name: UX Design Workflow +description: Transform ideas into detailed visual specifications through scenario-driven design using step-file architecture +main_config: "{project-root}/{bmad_folder}/wds/config.yaml" +web_bundle: true +--- +# Workflow configuration for UX Design process +# This workflow handles the complete UX design phase from concept to implementation + +phases: + - phase_1_project_brief + - phase_2_trigger_mapping + - phase_3_prd_platform + - phase_4_ux_design + - phase_5_design_system + - phase_6_design_deliveries + - phase_7_testing + - phase_8_ongoing_development diff --git a/src/modules/wds/workflows/4-ux-design/workflow.yaml b/src/modules/wds/workflows/4-ux-design/workflow.yaml index b5e5216fe..ac418533b 100644 --- a/src/modules/wds/workflows/4-ux-design/workflow.yaml +++ b/src/modules/wds/workflows/4-ux-design/workflow.yaml @@ -4,4 +4,15 @@ description: Transform ideas into detailed visual specifications through scenari main_config: "{project-root}/{bmad_folder}/wds/config.yaml" web_bundle: true --- +# Workflow configuration for UX Design process +# This workflow handles the complete UX design phase from concept to implementation +phases: + - phase_1_project_brief + - phase_2_trigger_mapping + - phase_3_prd_platform + - phase_4_ux_design + - phase_5_design_system + - phase_6_design_deliveries + - phase_7_testing + - phase_8_ongoing_development diff --git a/src/modules/wds/workflows/5-design-system/README.md b/src/modules/wds/workflows/5-design-system/design-system-guide.md similarity index 85% rename from src/modules/wds/workflows/5-design-system/README.md rename to src/modules/wds/workflows/5-design-system/design-system-guide.md index 706eddfd8..4148cecc9 100644 --- a/src/modules/wds/workflows/5-design-system/README.md +++ b/src/modules/wds/workflows/5-design-system/design-system-guide.md @@ -236,15 +236,26 @@ For each component: - `figma-designer-guide.md` - Step-by-step guide for designers - `figma-mcp-integration.md` - Technical MCP integration guide - `figma-component-structure.md` - Component organization in Figma (in data/design-system/) +- `prototype-to-figma-workflow.md` - **NEW:** Extract HTML prototypes to Figma for visual refinement +- `when-to-extract-decision-guide.md` - **NEW:** Decision framework for prototype extraction -**Workflow:** +**Workflows:** +**A. Figma β†’ WDS (Existing):** 1. Designer creates/updates component in Figma 2. Designer adds WDS component ID to description 3. MCP reads component via Figma API 4. Agent generates/updates WDS specification 5. Designer reviews and confirms +**B. Prototype β†’ Figma β†’ WDS (NEW):** +1. HTML prototype created (Phase 4D) +2. Extract to Figma using html.to.design +3. Designer refines visual design in Figma +4. Extract design system updates (tokens, components) +5. Re-render prototype with enhanced design system +6. Iterate until polished + **Key Features:** - Component structure guidelines @@ -252,6 +263,7 @@ For each component: - Variant and state organization - Node ID tracking - Bidirectional sync workflow +- **Iterative visual refinement** (prototype β†’ Figma β†’ design system β†’ re-render) --- @@ -273,6 +285,16 @@ For each component: ``` D-Design-System/ +β”œβ”€β”€ 01-Visual-Design/ [Early design exploration - pre-scenario] +β”‚ β”œβ”€β”€ mood-boards/ [Visual inspiration, style exploration] +β”‚ β”œβ”€β”€ design-concepts/ [NanoBanana outputs, design explorations] +β”‚ β”œβ”€β”€ color-exploration/ [Color palette experiments] +β”‚ └── typography-tests/ [Font pairing and hierarchy tests] +β”œβ”€β”€ 02-Assets/ [Final production assets] +β”‚ β”œβ”€β”€ logos/ [Brand logos and variations] +β”‚ β”œβ”€β”€ icons/ [Icon sets] +β”‚ β”œβ”€β”€ images/ [Photography, illustrations] +β”‚ └── graphics/ [Custom graphics and elements] β”œβ”€β”€ components/ β”‚ β”œβ”€β”€ button.md [Component ID: btn-001] β”‚ β”œβ”€β”€ input-field.md [Component ID: inp-001] diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/INTEGRATION-SUMMARY.md b/src/modules/wds/workflows/5-design-system/figma-integration/INTEGRATION-SUMMARY.md new file mode 100644 index 000000000..3e5a44403 --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/INTEGRATION-SUMMARY.md @@ -0,0 +1,458 @@ +# Figma Integration - Summary + +**Last Updated:** January 9, 2026 +**Version:** WDS v6 +**Status:** Active Development + +--- + +## Overview + +This integration enables bidirectional workflow between code and Figma for design system development and visual refinement. + +### Bidirectional Workflow + +``` +Code ⇄ Figma +``` + +**Two Main Workflows:** + +1. **Code to Figma (C2F):** Send code implementations to Figma for visual documentation and refinement +2. **Figma to Code (F2C):** Import design specifications from Figma to generate or update code + +**Key Innovation:** Specification-driven approach ensures design-code parity through shared OBJECT IDs, enabling traceability and consistency across both directions. + +--- + +## Workshop Structure + +### Code to Figma (C2F) Workshop +**Location:** `code-to-figma/` + +**Purpose:** Send code implementations to Figma for design review, documentation, and visual iteration + +**Workflow Steps:** +1. Connection Check - Verify html.to.design MCP server +2. Identify Type - Determine export scenario (prototype page, design system component, or frontend view) +3. Prepare Specifications - Find or create OBJECT IDs for proper Figma layer naming +4. Generate & Validate - Create Figma-compatible HTML with validation +5. Send to Figma - Execute export and verify success + +**Key Features:** +- Specification-driven OBJECT ID naming +- Three export scenarios with specific ID patterns +- Automated validation before export +- Reverse engineering for missing specifications + +--- + +### Figma to Code (F2C) Workshop +**Location:** `figma-to-code/` + +**Status:** Coming Soon + +**Purpose:** Import design specifications from Figma to generate or update code implementations + +**Planned Workflow:** +1. Connection Check - Verify Figma Desktop MCP server +2. Select Figma Node - Identify what to import +3. Extract Design Specs - Get colors, spacing, typography, layout +4. Generate/Update Code - Create or update components +5. Verify Implementation - Compare code output to Figma design + +--- + +## Reference Documentation + +**Location:** `reference/` + +Supporting documentation for Figma integration workflows: + +1. **`figma-designer-guide.md`** - Guide for designers creating components in Figma +2. **`mcp-server-integration.md`** - MCP server setup and configuration +3. **`tools-reference.md`** - Reference for Figma MCP tools and parameters +4. **`when-to-extract-decision-guide.md`** - Decision tree for when to use Figma integration +5. **`figma-mcp-integration.md`** - Technical documentation about MCP integration +6. **`prototype-to-figma-workflow.md`** - Iterative refinement workflow documentation + +--- + +## Folder Structure + +``` +figma-integration/ +β”œβ”€β”€ code-to-figma/ # C2F Workshop +β”‚ β”œβ”€β”€ workflow.md +β”‚ └── steps/ +β”‚ β”œβ”€β”€ step-01-connection-check.md +β”‚ β”œβ”€β”€ step-02-identify-export-type.md +β”‚ β”œβ”€β”€ step-03-prepare-specifications.md +β”‚ β”œβ”€β”€ step-04-generate-validate.md +β”‚ β”œβ”€β”€ step-05-execute-export.md +β”‚ └── [substeps folders] +β”‚ +β”œβ”€β”€ figma-to-code/ # F2C Workshop (coming soon) +β”‚ └── README.md +β”‚ +β”œβ”€β”€ reference/ # Reference documentation +β”‚ β”œβ”€β”€ figma-designer-guide.md +β”‚ β”œβ”€β”€ mcp-server-integration.md +β”‚ β”œβ”€β”€ tools-reference.md +β”‚ β”œβ”€β”€ when-to-extract-decision-guide.md +β”‚ β”œβ”€β”€ figma-mcp-integration.md +β”‚ └── prototype-to-figma-workflow.md +β”‚ +└── INTEGRATION-SUMMARY.md # This file +``` + +--- + +## Core Concepts + +### The Missing Dimension + +**Before:** WDS created specifications and functional prototypes, but visual design creation was manual + +**After:** WDS now supports iterative visual refinement through Figma extraction + +### Design System Evolution + +**Key Principle:** Design system grows organically as prototypes are built + +**Process:** +1. Create prototype with existing design system (may look basic) +2. Extract to Figma when gaps identified +3. Refine visuals and create missing components +4. Update design system with new tokens/components +5. Re-render prototype with enhanced design system +6. Iterate until polished + +### When to Extract + +**Extract when:** +- Design system is incomplete +- Prototype needs visual polish +- New components required +- Stakeholder presentation needed + +**Don't extract when:** +- Design system covers all needs +- Prototype looks sufficient +- Rapid iteration more important +- Early exploration phase + +--- + +## Tool Integration + +### html.to.design + +**Role:** Convert HTML prototypes to Figma for visual refinement + +**Process:** +1. Upload HTML prototype +2. Configure conversion options +3. Import to Figma +4. Refine design +5. Extract design system updates + +**Benefits:** +- Preserves layout structure +- Converts CSS to Figma styles +- Maintains element hierarchy +- Enables visual refinement + +### Area Tag System + +**Role:** Precise region mapping for image-based prototypes + +**Usage:** +- Map clickable regions on images +- Include Object IDs for traceability +- Extract coordinates via dev mode +- Document region mappings + +**Integration:** +- Works with dev-mode.js component +- Supports image-based prototypes +- Enables precise click mapping + +### Dev Mode Component + +**Role:** Extract Object IDs and area coordinates from prototypes + +**Features:** +- Shift + Click to copy Object IDs +- Visual highlights +- Area tag detection +- Coordinate extraction + +**Benefit:** Maintains traceability through Figma extraction + +--- + +## Workflow Integration + +### Phase 4: UX Design + +**Updated Step 4D (Prototype):** +- Create functional prototype +- Test functionality +- **NEW:** Assess visual quality +- **NEW:** Option to extract to Figma +- Continue to PRD update + +### Phase 5: Design System + +**New Workflow Branch:** +- Existing: Component specification β†’ Design system +- Existing: Figma manual creation β†’ Design system +- **NEW:** Prototype extraction β†’ Figma β†’ Design system + +### Iteration Loop + +**Complete Cycle:** +``` +1. Sketch (concept) +2. Specification (detailed) +3. Prototype (functional) +4. Figma extraction (if needed) +5. Visual refinement +6. Design system update +7. Re-render prototype +8. Assess β†’ Iterate or Complete +``` + +--- + +## Benefits + +### For Designers + +**Flexibility:** +- Start with functional prototypes +- Refine visuals when needed +- Iterate incrementally +- Build design system organically + +**Efficiency:** +- Don't need complete design system upfront +- Extract only when necessary +- Reuse refined components +- Reduce rework + +### For Teams + +**Collaboration:** +- Shared design language +- Clear handoff process +- Bidirectional sync +- Maintained traceability + +**Quality:** +- Polished final products +- Consistent design system +- Professional visuals +- Stakeholder-ready + +### For Projects + +**Speed:** +- Faster initial prototypes +- Iterative refinement +- Parallel work streams +- Reduced bottlenecks + +**Flexibility:** +- Adapt to changing requirements +- Grow design system as needed +- Balance speed and polish +- Ship working products + +--- + +## Public Release Readiness + +### Documentation Status + +βœ… **Complete:** +- Prototype-to-Figma workflow +- Decision guide +- Tools reference +- Phase 4D integration +- Phase 5 README update + +βœ… **Tested:** +- Workflow logic validated +- Integration points confirmed +- Decision framework practical +- Tool capabilities verified + +βœ… **Ready for:** +- Public documentation +- User testing +- Team adoption +- Production use + +### What's Not Included + +**Out of Scope:** +- MagicPatterns integration (not needed with html.to.design) +- Automated extraction (manual process documented) +- Real-time sync (manual iteration cycle) + +**Future Enhancements:** +- Automated design token extraction +- Figma plugin for WDS +- Real-time bidirectional sync +- AI-powered component matching + +--- + +## Migration Notes + +### For Existing WDS Users + +**No Breaking Changes:** +- Existing workflows continue to work +- New workflow is optional +- Backward compatible +- Incremental adoption + +**How to Adopt:** +1. Read prototype-to-Figma workflow +2. Try with one prototype +3. Refine in Figma +4. Update design system +5. Re-render and compare +6. Expand to more pages + +### For New WDS Users + +**Recommended Approach:** +1. Start with first page +2. Create basic prototype +3. Extract to Figma +4. Build design system foundation +5. Use for subsequent pages +6. Extract only when gaps found + +--- + +## Success Metrics + +### Quality Indicators + +βœ… Prototypes look polished +βœ… Design system is comprehensive +βœ… Figma and code are in sync +βœ… Object IDs maintained throughout +βœ… Iterations are productive +βœ… Team aligned on visual direction + +### Efficiency Indicators + +βœ… Fewer refinement cycles needed +βœ… Design system grows organically +βœ… Reusable components identified +βœ… Faster subsequent prototypes +βœ… Reduced rework + +--- + +## Next Steps + +### For Documentation + +1. βœ… Core workflow documentation complete +2. βœ… Decision guides created +3. βœ… Tools reference documented +4. βœ… Integration points updated +5. πŸ”„ Session logs cleanup (in progress) +6. ⏳ User testing and feedback +7. ⏳ Video tutorials (future) +8. ⏳ Example projects (future) + +### For Implementation + +1. βœ… Workflow files created +2. βœ… Phase 4D updated +3. βœ… Phase 5 updated +4. ⏳ Test with real projects +5. ⏳ Gather user feedback +6. ⏳ Refine based on usage +7. ⏳ Create example case studies + +--- + +## Key Takeaways + +### The Complete WDS Flow + +**Concept-First Approach:** +1. Sketch and specification are source of truth +2. Generate functional prototypes from specs +3. Apply design system (may be incomplete initially) +4. Extract to Figma when visual refinement needed +5. Refine design and extend design system +6. Re-render with enhanced design system +7. Iterate until polished + +### Design System Philosophy + +**Just-In-Time Design Definitions:** +- Don't need complete design system upfront +- Build definitions as needed +- Extract from working prototypes +- Grow organically with product +- Reduce upfront investment + +### Iterative Refinement + +**Balanced Approach:** +- Functional first, polish later +- Extract strategically, not automatically +- Iterate incrementally +- Ship working products +- Balance speed and quality + +--- + +## Contact and Support + +**Documentation Location:** +- `workflows/5-design-system/figma-integration/` + +**Related Documentation:** +- Phase 4: UX Design workflows +- Phase 5: Design System workflows +- Interactive Prototypes guides +- Figma Integration guides + +**Questions or Issues:** +- Review decision guide for common scenarios +- Check tools reference for troubleshooting +- Follow workflow documentation step-by-step +- Test with simple prototype first + +--- + +**This integration completes the WDS design workflow, enabling teams to create polished, production-ready designs through iterative refinement of functional prototypes.** + +--- + +## Version History + +**v1.0 - January 8, 2026** +- Initial release +- Prototype-to-Figma workflow +- Decision guide +- Tools reference +- Phase 4D and Phase 5 integration + +**Future Versions:** +- User feedback integration +- Enhanced automation +- Additional tool integrations +- Example case studies diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-connection-check.md b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-connection-check.md new file mode 100644 index 000000000..411ab6941 --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-connection-check.md @@ -0,0 +1,118 @@ +# Step 1: Connection Check & Installation + +**Progress: Phase 1 of 6** - Next: Identify Export Scenario + +**Duration:** 5-10 minutes (if setup needed) + +--- + +## YOUR TASK + +Verify html.to.design MCP server connection and guide user through setup if needed. + +--- + +## GOAL + +Ensure the export tool is available before proceeding with the workflow. + +--- + +## EXECUTION + +### Check MCP Tool Availability + + +Check if `mcp2_import-html` tool is accessible in current session. +Tool should be from "html.to.design MCP server" + + +**Decision Point:** +- βœ… Tool available β†’ **Skip to Step 2** +- ❌ Tool not available β†’ **Continue with substeps** + +--- + +## IF TOOL NOT AVAILABLE + +⚠️ Code to Figma Setup Required + +The html.to.design MCP server is not currently connected. To send code to Figma, we need to set up the integration. + +This requires: +1. Figma account with project access +2. html.to.design plugin installed in Figma +3. MCP server configured in your IDE + +Would you like me to guide you through the setup process? + +Proceed with setup? [Yes/No]: + +**If Yes:** Execute substeps in order +**If No:** Stop workflow, suggest alternative + +--- + +## SUBSTEPS (Execute if setup needed) + +**β†’ [Substep 1.1: Guide Plugin Installation](./step-01-substeps/substep-01-plugin-installation.md)** + +After all substeps complete, return here to verify connection. + +--- + +## VERIFICATION + +Once setup complete (or if tool was already available): + + +Execute test export: +```javascript +mcp2_import-html({ + name: "Connection Test", + html: "
βœ… Connection Test Successful
" +}) +``` + + +**Expected Response:** +```json +{ + "node": { + "id": "X:XXX", + "name": "Connection Test by html.to.design...", + "type": "SECTION" + } +} +``` + +Can you see the "Connection Test" layer in your Figma file? [Yes/No]: + +**If Yes:** βœ… Connection verified! +**If No:** Execute troubleshooting substeps + +--- + +## NEXT STEP + +Once connection verified: + +**β†’ Proceed to [Step 2: Identify Export Scenario](./step-02-identify-scenario.md)** + +--- + +## OUTPUT AT THIS POINT + +You now have: +- βœ… html.to.design MCP server connected +- βœ… Connection verified with test export + +Still need: +- ⏸️ Export scenario identified +- ⏸️ Specifications located/created +- ⏸️ HTML generated and validated +- ⏸️ Final export executed + +--- + +*Step 1 complete - Ready to export* diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-substeps/substep-01-plugin-installation.md b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-substeps/substep-01-plugin-installation.md new file mode 100644 index 000000000..e4b40917e --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-substeps/substep-01-plugin-installation.md @@ -0,0 +1,37 @@ +# Substep 1.1: Guide Plugin Installation + +**Parent Step:** Connection Check & Installation + +--- + +## YOUR TASK + +Provide step-by-step instructions for installing html.to.design plugin in Figma. + +--- + +## EXECUTION + +**Step 1: Install html.to.design Plugin** + +Please follow these steps to install the plugin: + + +1. Open Figma (desktop app or web: figma.com) +2. Click on your profile icon (top-right corner) +3. Select "Community" from the menu +4. In the search bar, type "html.to.design" +5. Click on the "html.to.design" plugin result +6. Click "Install" or "Try it out" button +7. Plugin is now installed + + +Have you completed the plugin installation? [Yes/No]: + +**Wait for user confirmation before proceeding.** + +--- + +## NEXT SUBSTEP + +**β†’ Proceed to [Substep 1.2: Activate Plugin](./substep-02-activate-plugin.md)** diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-substeps/substep-02-activate-plugin.md b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-substeps/substep-02-activate-plugin.md new file mode 100644 index 000000000..1413687a2 --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-substeps/substep-02-activate-plugin.md @@ -0,0 +1,37 @@ +# Substep 1.2: Activate Plugin + +**Parent Step:** Connection Check & Installation + +--- + +## YOUR TASK + +Guide user to activate the html.to.design plugin in their Figma file. + +--- + +## EXECUTION + +**Step 2: Activate the Plugin** + +Now let's activate the plugin in your Figma file: + + +1. Open any Figma file (or create a new one for testing) +2. Right-click anywhere on the canvas +3. Select "Plugins" β†’ "html.to.design" + OR + Use the menu: Plugins β†’ html.to.design +4. The plugin panel should appear on the right side of your screen +5. Keep the plugin panel open during the export process + + +Can you see the html.to.design plugin panel? [Yes/No]: + +**Wait for user confirmation before proceeding.** + +--- + +## NEXT SUBSTEP + +**β†’ Proceed to [Substep 1.3: Verify MCP Configuration](./substep-03-verify-mcp.md)** diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-substeps/substep-03-verify-mcp.md b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-substeps/substep-03-verify-mcp.md new file mode 100644 index 000000000..0b07aab26 --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-01-substeps/substep-03-verify-mcp.md @@ -0,0 +1,51 @@ +# Substep 1.3: Verify MCP Configuration + +**Parent Step:** Connection Check & Installation + +--- + +## YOUR TASK + +Confirm that the html.to.design MCP server is configured in the IDE. + +--- + +## EXECUTION + +**Step 3: Verify MCP Server Configuration** + +The html.to.design MCP server should be configured in your IDE settings. + +Please check: +1. Open your IDE Settings/Preferences +2. Navigate to the MCP Servers section +3. Look for "html.to.design" in the server list + +Is the html.to.design MCP server listed and enabled? [Yes/No]: + +**Wait for user response.** + +--- + +## IF YES + +βœ… MCP server is configured. Let's test the connection. + +**β†’ Return to [Step 1: Connection Check](../step-01-connection-check.md#verification) to run test export** + +--- + +## IF NO + +⚠️ MCP Server Not Configured + +The html.to.design MCP server needs to be added to your IDE configuration. + +Please refer to your IDE's MCP server documentation for configuration steps. The server should connect to the html.to.design plugin running in Figma. + +Once configured, please confirm and we'll test the connection. + +Have you configured the MCP server? [Yes/Retry/Need Help]: + +**If Yes:** Return to verification +**If Need Help:** Provide IDE-specific configuration guidance diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-02-identify-export-type.md b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-02-identify-export-type.md new file mode 100644 index 000000000..620047c1e --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-02-identify-export-type.md @@ -0,0 +1,161 @@ +# Step 2: Identify Code to Figma Type + +**Progress: Step 2 of 5** - Next: Prepare Specifications + +**Duration:** 2-3 minutes + +--- + +## YOUR TASK + +Determine which type of code-to-Figma scenario applies to the current request. + +--- + +## GOAL + +Match the user's request to one of three scenarios to ensure proper ID naming and structure. + +--- + +## EXECUTION + +### Analyze User Request + + +Examine the user's request and extract: +- Component/page name +- Scope (full page vs. component vs. block) +- Purpose (design system, prototype, visual adjustment) +- States/variations mentioned + + +--- + +### Determine Scenario Type + +Based on your request, I need to determine the export type... + +**Decision Tree:** + +``` +IF request mentions: + - Full page/screen + - Multiple sections (header, hero, footer) + - User flow or journey + - Page layout + β†’ Scenario A: Prototype Page Export + +ELSE IF request mentions: + - Component states (hover, active, disabled) + - Design system documentation + - Reusable component + - Component library + β†’ Scenario B: Design System Component + +ELSE IF request mentions: + - Visual adjustments + - Spacing/layout iteration + - Specific UI block + - Rapid prototyping + β†’ Scenario C: Frontend View/Component Block + +ELSE: + β†’ Ask user for clarification +``` + +--- + +### Confirm with User + +πŸ“‹ I've identified this as: + +**Scenario {A/B/C}: {Scenario Name}** + +This means we'll export: +- {Description of what will be exported} +- ID naming pattern: {pattern} +- Expected outcome: {outcome} + +Is this correct, or would you like to adjust the scope? + +Proceed with this scenario? [Yes/Adjust/Cancel]: + +**Wait for user confirmation.** + +--- + +## SCENARIO DETAILS + +### Scenario A: Prototype Page Export + +**When:** Full page/screen implementation ready for design review + +**ID Pattern:** `{page}-{section}-{element}` + +**Example IDs:** +``` +start-page-header +start-page-hero +start-hero-headline +start-hero-cta +start-message-section +``` + +--- + +### Scenario B: Design System Component + +**When:** Reusable component with states/variations needs documentation + +**ID Pattern:** `{component}-{variant}-{state}` + +**Example IDs:** +``` +btn-cta-primary-default +btn-cta-primary-hover +btn-cta-primary-active +btn-cta-primary-disabled +``` + +--- + +### Scenario C: Frontend View/Component Block + +**When:** Specific UI block needs visual iteration or adjustment + +**ID Pattern:** `{component}-{element}-{descriptor}` + +**Example IDs:** +``` +language-selector-button +language-selector-icon +language-selector-dropdown +language-selector-item-en +``` + +--- + +## NEXT STEP + +Once scenario confirmed: + +**β†’ Proceed to [Step 3: Prepare Specifications](./step-03-prepare-specifications.md)** + +--- + +## OUTPUT AT THIS POINT + +You now have: +- βœ… MCP connection verified +- βœ… Export scenario identified +- βœ… ID naming pattern determined + +Still need: +- ⏸️ Specifications located/created +- ⏸️ HTML generated and validated +- ⏸️ Final export executed + +--- + +*Step 2 complete - Export type identified* diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-prepare-specifications.md b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-prepare-specifications.md new file mode 100644 index 000000000..d473ff375 --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-prepare-specifications.md @@ -0,0 +1,138 @@ +# Step 3: Prepare Specifications + +**Progress: Step 3 of 5** - Next: Generate & Validate + +**Duration:** 5-15 minutes (depending on whether specs exist) + +--- + +## YOUR TASK + +Locate existing specifications with OBJECT IDs, or create them if they don't exist. + +--- + +## GOAL + +Ensure all components have proper OBJECT IDs from specifications for consistent Figma layer naming. + +--- + +## EXECUTION + +### Search for Specification Documents + + +Search for specification files that may contain OBJECT IDs: + +1. Search in `docs/C-Scenarios/` for scenario specifications +2. Search in `docs/D-Design-System/` for component documentation +3. Use grep_search to find files containing "OBJECT ID" +4. Look for markdown files matching component/page name + + +--- + +### Decision Point: Specifications Found? + +**If specifications exist with OBJECT IDs:** + +βœ… Found specification documents with OBJECT IDs: + +{list of files and IDs found} + +I'll use these OBJECT IDs for the export. + + +Extract OBJECT IDs from specifications: +- Read specification files +- Extract all OBJECT ID field values +- Map to components in code +- Store mapping for HTML generation + + +**β†’ Skip to validation and proceed to Step 4** + +--- + +**If NO specifications exist:** + +πŸ“ No specifications found for these components. + +To maintain design-code parity and proper naming in Figma, I recommend creating a specification document. + +I can: +1. Analyze the code and reverse-engineer specifications +2. Generate OBJECT IDs following project conventions +3. Create a specification document for your review + +Would you like me to create specifications for these components? + +Create specifications? [Yes/No]: + +**If Yes:** Execute substeps +**If No:** Auto-generate temporary IDs (with warning) + +--- + +## SUBSTEPS (Execute if creating specifications) + +**β†’ [Substep 3.1: Analyze Code](./step-03-substeps/substep-01-analyze-code.md)** + +After all substeps complete, return here with generated OBJECT IDs. + +--- + +## VALIDATION + + +Validate specification coverage: + +FOR EACH component in export scope: + IF component has OBJECT ID: + βœ… Mark as validated + ELSE: + ⚠️ Add to "missing specification" list + +Generate coverage report + + +πŸ“‹ Specification Coverage Report: + +βœ… Components with OBJECT IDs: {count} + - {list} + +⚠️ Components missing OBJECT IDs: {count} + - {list} + +Coverage: {percentage}% + +**If 100% coverage:** Proceed to next step +**If partial coverage:** Offer to create missing specs or auto-generate IDs + +--- + +## NEXT STEP + +Once all components have OBJECT IDs: + +**β†’ Proceed to [Step 4: Generate & Validate](./step-04-generate-validate.md)** + +--- + +## OUTPUT AT THIS POINT + +You now have: +- βœ… MCP connection verified +- βœ… Export scenario identified +- βœ… OBJECT IDs assigned to all components +- βœ… ID naming pattern established + +Still need: +- ⏸️ HTML generated with proper IDs +- ⏸️ Validation completed +- ⏸️ Final export executed + +--- + +*Step 3 complete - Specifications ready* diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-01-analyze-code.md b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-01-analyze-code.md new file mode 100644 index 000000000..a762f1d84 --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-01-analyze-code.md @@ -0,0 +1,62 @@ +# Substep 3.1: Analyze Code + +**Parent Step:** Prepare Specifications + +--- + +## YOUR TASK + +Extract component information from code to create specifications. + +--- + +## EXECUTION + +Analyzing component code to create specifications... + + +Analyze the component(s) that need OBJECT IDs: + +1. **Component Structure:** + - Identify component name and file location + - Map parent/child relationships + - Note component hierarchy + +2. **Props & States:** + - Extract available props + - Identify state variations (hover, active, disabled, focus, etc.) + - Note conditional rendering logic + +3. **Visual Properties:** + - Extract CSS classes used + - Note inline styles + - Identify design tokens/CSS variables referenced + - Document colors, spacing, typography + +4. **Content:** + - Extract text content + - Note language variations (if i18n present) + - Identify dynamic vs. static content + +5. **Behavior:** + - Document event handlers + - Note interactive elements + - Identify navigation/routing + + +**Analysis Complete** + +Found components: +{list of components analyzed} + +Key findings: +- States identified: {list} +- CSS classes: {list} +- Content variations: {list} + + +--- + +## NEXT SUBSTEP + +**β†’ Proceed to [Substep 3.2: Generate OBJECT IDs](./substep-02-generate-ids.md)** diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-02-generate-ids.md b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-02-generate-ids.md new file mode 100644 index 000000000..e55854c9e --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-02-generate-ids.md @@ -0,0 +1,69 @@ +# Substep 3.2: Generate OBJECT IDs + +**Parent Step:** Prepare Specifications + +--- + +## YOUR TASK + +Create OBJECT IDs following project naming conventions. + +--- + +## EXECUTION + + +Determine the project's naming pattern by analyzing existing OBJECT IDs in specifications: + +**Pattern A - Page-based:** +- Format: `{page}-{section}-{element}` +- Example: `start-hero-cta`, `start-message-headline` +- Use when: Exporting full pages or page sections + +**Pattern B - Component-based:** +- Format: `{component}-{variant}-{state}` +- Example: `btn-cta-primary-hover`, `input-text-disabled` +- Use when: Exporting design system components + +**Pattern C - Hierarchical:** +- Format: `{parent}-{child}-{grandchild}` +- Example: `header-nav-menu-item`, `footer-social-icon-twitter` +- Use when: Exporting component blocks with nested elements + + +**Detected Naming Pattern:** {pattern-type} + +Generating OBJECT IDs... + + +FOR EACH component without OBJECT ID: + 1. Identify component type and context + 2. Apply naming pattern + 3. Ensure uniqueness + 4. Add state suffix if applicable + +Example generation: + Component: Language selector button + Pattern: Component-based + Base ID: language-selector-button + + With states: + - language-selector-button-default + - language-selector-button-open + - language-selector-icon + - language-selector-dropdown + - language-selector-item-en + - language-selector-item-se + + +**Generated OBJECT IDs:** + +{list of generated IDs with descriptions} + +Total: {count} OBJECT IDs created + +--- + +## NEXT SUBSTEP + +**β†’ Proceed to [Substep 3.3: Create Specification Document](./substep-03-create-spec.md)** diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-03-create-spec.md b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-03-create-spec.md new file mode 100644 index 000000000..8926c7ada --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-03-create-spec.md @@ -0,0 +1,98 @@ +# Substep 3.3: Create Specification Document + +**Parent Step:** Prepare Specifications + +--- + +## YOUR TASK + +Generate a specification document with the generated OBJECT IDs. + +--- + +## EXECUTION + + +Create specification document using the project's specification format. + +Determine appropriate location: +- Design system component β†’ `docs/D-Design-System/03-Atomic-Components/{category}/` +- Page component β†’ `docs/C-Scenarios/{scenario}/{page}/` +- Shared component β†’ `docs/D-Design-System/04-Molecules/` or `05-Organisms/` + + +Creating specification document... + + +Generate specification with this structure: + +```markdown +# {Component/Page Name} + +**OBJECT ID**: `{primary-object-id}` + +## Purpose + +{Brief description of component purpose extracted from code analysis} + +## Structure + +- **HTML Tag**: `<{tag}>` +- **CSS Class**: `.{class-name}` +- **Component File**: `{file-path}` +- **OBJECT ID**: `{object-id}` + +## Visual Style + +- **Typography**: {font-family}, {size}, {weight}, {color} +- **Colors**: + - Background: {color} + - Border: {color} + - Text: {color} +- **Spacing**: + - Padding: {values} + - Margin: {values} +- **Layout**: {display}, {positioning} + +## States + +{For each state variation} + +### {State Name} +- **OBJECT ID**: `{component-id-state}` +- **Visual Changes**: {description} +- **Trigger**: {user action or condition} + +## Behavior + +{Interactive behavior description from code analysis} + +## Content + +{Text content and variations} + +- **EN**: "{english-content}" +- **SE**: "{swedish-content}" (if applicable) + +## Implementation Notes + +{Any technical details from code analysis} +``` + +Save to: `{determined-file-path}` + + +βœ… Specification document created: + +**Location**: {file-path} + +**OBJECT IDs defined:** +{list of all OBJECT IDs in the spec} + +**Coverage**: {count} components documented + +--- + +## NEXT SUBSTEP + +**β†’ Proceed to [Substep 3.4: Review with User](./substep-04-review-spec.md)** diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-04-review-spec.md b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-04-review-spec.md new file mode 100644 index 000000000..bc75fe63b --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-03-substeps/substep-04-review-spec.md @@ -0,0 +1,86 @@ +# Substep 3.4: Review with User + +**Parent Step:** Prepare Specifications + +--- + +## YOUR TASK + +Present the generated specification to the user for approval. + +--- + +## EXECUTION + +πŸ“ **Generated Specification Document** + +I've created a specification for {component-name}: + +**Location**: {file-path} + +**OBJECT IDs generated:** +{list of generated IDs with brief descriptions} + +**Naming pattern used**: {pattern-description} + +**Components covered**: {count} + +Would you like to: +1. **Approve and proceed** - Use these OBJECT IDs for the export +2. **Modify IDs** - Adjust the naming before proceeding +3. **Review document** - See the full specification first + +Choice [1/2/3]: + +--- + +## HANDLE USER CHOICE + +### Choice 1: Approve + +βœ… Specifications approved! + +Proceeding with these OBJECT IDs for the Code to Figma export. + +**β†’ Return to [Step 3: Prepare Specifications](../step-03-prepare-specifications.md) and proceed to Step 4** + +--- + +### Choice 2: Modify IDs + +Which OBJECT IDs would you like to modify? + +Please specify: +- Current ID: {id} +- New ID: {new-id} + +Or describe the naming change you'd like to make. + + +Update OBJECT IDs based on user feedback. +Regenerate specification document. +Return to review. + + +--- + +### Choice 3: Review Document + + +Display the full specification document content. + + +After reviewing, would you like to: +1. Approve and proceed +2. Modify IDs +3. Cancel and create specifications manually + +Choice [1/2/3]: + +**Handle choice accordingly.** + +--- + +## COMPLETION + +Once approved, return to Step 3 with finalized OBJECT IDs ready for HTML generation. diff --git a/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-04-generate-validate.md b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-04-generate-validate.md new file mode 100644 index 000000000..0db76a537 --- /dev/null +++ b/src/modules/wds/workflows/5-design-system/figma-integration/code-to-figma/steps/step-04-generate-validate.md @@ -0,0 +1,207 @@ +# Step 4: Generate & Validate + +**Progress: Step 4 of 5** - Next: Execute Export + +**Duration:** 5-10 minutes + +--- + +## YOUR TASK + +Generate Figma-compatible HTML with proper OBJECT IDs and validate before export. + +--- + +## GOAL + +Create clean, validated HTML that will render correctly in Figma with proper layer naming. + +--- + +## EXECUTION + +### Generate HTML Structure + + +Generate HTML with OBJECT IDs from specifications: + +1. Create root container with export name +2. Add state/variant containers for each component +3. Apply OBJECT IDs from specification mapping +4. Include state labels for clarity +5. Add proper semantic HTML tags + + +**HTML Structure Template:** +```html +
+ + +
+
{State Name}
+ <{tag} id="{object-id}" class="{css-class}"> + {content} + +
+
+``` + +--- + +### Apply Styling Requirements + + +Convert code styles to Figma-compatible CSS: + +βœ… Fonts: + - Use Google Fonts only + - Import in