The stack in this guide is VS Code, Claude, and Figma — plus the browser for prototyping. It is a clean setup that works. It is not the only one.
The stack is made of roles, not brands
What matters is the role each tool plays in the stack, not the specific product.
- The IDE is the workspace.
- The agent is the brain.
- The design tool is where the visual work lives.
Swap the products, keep the roles, and the stack still works.
Common combinations
Some real setups people use today:
- VS Code + Claude Code + Figma. What we use in this guide.
- Cursor + Claude + Figma. For designers who prefer Cursor's flavor of the IDE.
- Antigravity + Claude + Figma. A newer IDE alternative.
- VS Code + Gemini CLI + Figma. Google's agent instead of Claude.
- Cursor + Gemini + Figma. Any combination of the two.
Brand does not matter. Mental model does — an IDE, plus an agent, plus a design tool.
The design tool is swappable too
Figma is where this guide lands because it is where most real design teams work and where most design systems live. But it is not the only option.
- Sketch. The classic Mac design tool, still used in some teams.
- Penpot. Open-source Figma alternative.
- Canva. Popular for lighter, marketing-style design.
The ideas in this guide translate to the others. Pick the one your team already uses.
Why this matters
New AI products launch every week. If you hold the three-role picture in your head, every launch slots into one of those three boxes. You stop being confused about which tool to pick. You pick the one you prefer in each slot, and you get to work.