Cursor
AI-first code editor built on VS Code with deep codebase understanding and multi-file editing capabilities.
Strengths
- Understands entire codebase context
- Multi-file editing in single prompt
- Strong design system integration via @ references
Back to EEM Overview
07 Tool stack
The EEM Tool Stack
Agent IDEs for making. Design systems for constraint. Figma only when the system still needs preparation.
EEM is Tool-Agnostic
The framework specifies what must happen, not how or with which tools. Teams choose their own tools based on context, existing investments, and team preferences. This guide provides options, not mandates.
Key Principle: The tools landscape is evolving rapidly. What matters is capability fit, not brand loyalty. Evaluate tools based on how well they support EEM's core activities.
Agent IDEs
Agent IDEs are the primary tools for the Execute stage. They enable designers to direct AI agents to build functional prototypes without writing code themselves.
Tool
Best For
Environment
Learning Curve
Design System Integration
Cursor
Complex projects with existing codebases
Desktop (VS Code-based)
Medium
Excellent
Windsurf
Flow state coding, full-project understanding
Desktop
Medium
Excellent
Bolt
Rapid prototyping, quick experiments
Browser
Low
Good
Replit
Collaborative work, instant deployment
Browser
Low
Good
v0 (Vercel)
UI component generation, React focus
Browser
Very Low
Good
Claude Code
Terminal workflows, automation
Command Line
Higher
Excellent
Windsurf
Agentic IDE designed for flow state coding with AI that understands your entire project.
Strengths
- Proactive suggestions based on intent
- Excellent at understanding project structure
- Flows (agentic task execution)
Bolt
Browser-based development environment for rapid prototyping with instant preview.
Strengths
- Zero setup—runs in browser
- Instant preview as you build
- Great for quick experiments
Replit
Collaborative browser IDE with AI assistance and instant deployment capabilities.
Strengths
- Real-time collaboration
- One-click deployment
- Multiple language support
v0 (Vercel)
Generative UI tool that creates React components from natural language descriptions.
Strengths
- Extremely low barrier to start
- Shadcn/ui components built-in
- Great for UI exploration
Claude Code
Command-line agentic coding tool for terminal-based workflows and automation.
Strengths
- Powerful agentic capabilities
- Works in any environment
- Great for automation and scripting
Choosing an Agent IDE
- For Complex Projects
- Cursor or Windsurf. Both excel at understanding large codebases and making coordinated changes across files.
- For Quick Experiments
- Bolt or v0. Browser-based, zero setup, perfect for rapid exploration and stakeholder demos.
- For Terminal Users
- Claude Code. Powerful agentic capabilities for those comfortable in command-line environments.
Design System Documentation Tools
The design system is a critical input constraint in EEM. These tools help document, maintain, and share your system with AI agents and team members.
Storybook
Component-driven development environment. The standard for developer-friendly design system documentation.
Why It Matters for EEM
- Code is the source of truth
- AI agents can reference directly
- Interactive component playground
Zeroheight
Design system documentation platform that connects design files to code documentation.
Best For
- Designer-friendly documentation
- Figma integration
- Brand and usage guidelines
Figma
Design tool with component libraries and variables. Used for visual reference and preparation when system is immature.
Role in EEM
- Preparation when system is immature
- Visual reference layer
- Optional when system is mature
Code is the Source of Truth
In EEM, the design system lives in code (Storybook, component libraries), not in design files. Figma is a preparation tool when the system is immature, and an optional visualization layer when mature. Agent IDEs work best when they can reference actual component code, not design file representations.
Token Management
Design tokens (colors, spacing, typography) need to be code-accessible for Agent IDEs to use them effectively during execution.
Style Dictionary
Amazon's build system for design tokens. Transforms tokens into multiple platform formats.
- Multi-platform output (CSS, iOS, Android, etc.)
- Flexible token structure
- Industry standard
Figma Variables
Native Figma feature for managing design tokens within design files.
- Designer-friendly interface
- Modes for themes/brands
- Requires export for code use
Tokens Studio
Figma plugin that connects design tokens to code repositories.
- Bi-directional sync with Git
- Complex token relationships
- Team collaboration features
JSON/YAML in Repo
Simple approach: store tokens as data files directly in your code repository.
- Version controlled with code
- No external dependencies
- AI agents can read directly
Key Requirement: Code-Accessible Tokens
Whatever tool you choose, tokens must be accessible to Agent IDEs during execution. This typically means tokens stored in JSON/CSS/JS files that can be referenced in prompts or imported into components. If tokens only exist in Figma, they can't effectively constrain AI output.
Governance Tools
Governance needs visibility, comparison, decision capture, and system updates. These can be achieved with various tools—choose what fits your team's workflow.
Visibility
View what was created during Execute.
- Deployed preview URLs (Vercel, Netlify)
- Storybook instances
- Screen recordings (Loom, etc.)
Comparison
See what exists in design system vs. what was created.
- Git diff views
- Visual regression tools (Chromatic)
- Side-by-side prototype demos
Decision Capture
Record what was approved/rejected and why.
- PR comments and reviews
- Decision logs (Notion, Confluence)
- ADRs (Architecture Decision Records)
System Update
Write approved changes back to design system.
- Git PRs with component updates
- Storybook story additions
- Token file updates
Remember: Governance isn't a tool—it's a decision-making process supported by tools. The framework requires that governance happen, but is agnostic about which specific tools you use to facilitate it.
When to Use Traditional Design Tools
Figma and other traditional design tools aren't obsolete—they have a specific role in EEM based on your design system's maturity.
Use Figma for Preparation When
- Design system is immature—components don't exist yet
- Brand patterns not yet codified
- Complex component interactions need visual thinking
- Team is still learning the EEM workflow
Skip Figma & Execute Directly When
- Design system is mature and well-documented
- Team is comfortable directing agents
- Brand constraints are clear in the system
- Execution speed is more valuable than perfect fidelity
Integration Strategies
Lightweight Stack
For small teams or startups
- Bolt or v0 for rapid prototyping
- Tokens in JSON files
- Git PRs for governance
- Vercel for preview deployments
Standard Stack
For established product teams
- Cursor or Windsurf for execution
- Storybook for component docs
- Style Dictionary for tokens
- Chromatic for visual regression
Enterprise Stack
For large organizations
- Multiple Agent IDEs per team
- Zeroheight + Storybook
- Tokens Studio for Figma sync
- Custom governance dashboards
Need Help Choosing Your Stack?
Every team's context is different. Let's discuss which tools make sense for your specific situation, existing investments, and team skills.
Continue exploring: