116 lines
3.2 KiB
Markdown
116 lines
3.2 KiB
Markdown
# 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.**
|