# 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.**