ldy26098
/
BMAD-METHOD
mirror of https://github.com/bmad-code-org/BMAD-METHOD.git
1
0
Fork 0
Code Packages Projects Releases Wiki Activity
BMAD-METHOD/docs/tools/wds-tools-guide.md

3.6 KiB
Raw Blame History

WDS Tools

Purpose: Recommended tools for WDS workflows with setup instructions and best practices.

Last Updated: February 25, 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

  • AI-powered IDE for WDS agent workflows
  • Development environment for Freya, Saga, Idunn
  • Status: Required for all WDS phases

Git

  • Version control for tracking changes
  • Collaboration and project history
  • Status: Required for all WDS phases

Recommended Tools

Excalidraw

  • Agent + human collaborative wireframing (JSON format)
  • Agent writes elements, user edits visually in VS Code
  • Status: Recommended for Phase 4 wireframing

Figma MCP

  • MCP server for automated Figma integration
  • Component-level injection and bidirectional sync
  • Status: Recommended for Phase 4-5

Optional Tools

Figma

  • Visual design refinement tool
  • Design system documentation
  • Status: Optional for Phase 4-5

html.to.design

  • HTML to Figma conversion (fallback method)
  • When MCP server unavailable
  • Status: Optional for Phase 4-5

NanoBanana

  • 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 IDE Development, agent interaction All Required
Git Version Control Track changes, collaborate All Required
Excalidraw Wireframing Agent+human wireframes, JSON format 4 Recommended
Figma Design Visual refinement, design system 4-5 Optional
Figma MCP Integration Automated Figma ↔ WDS sync 4-5 Recommended
html.to.design Conversion HTML → Figma (fallback) 4-5 Optional
NanoBanana AI Design Asset creation, inspiration Pre-4 Optional

Getting Started

Minimum Setup (Required)

  1. Install Cursor or Windsurf IDE
  2. Install Git
  3. Configure both for your project

Recommended Setup (For Full WDS Workflow)

  1. Install Cursor or Windsurf IDE
  2. Install Git
  3. Install Excalidraw VS Code extension (wireframing)
  4. Create Figma account
  5. Install and configure Figma MCP server
  6. Set up Figma API access token

Full Setup (All Features)

  1. Install Cursor or Windsurf IDE
  2. Install Git
  3. Install Excalidraw VS Code extension (wireframing)
  4. Create Figma account
  5. Install and configure Figma MCP server
  6. Set up Figma API access token
  7. Explore NanoBanana for asset creation

Optional Tools

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.