Design tools and AI coding assistants have evolved rapidly over the past two years, but they've evolved in parallel. Figma knows nothing about Claude, and Claude knows nothing about your Figma file. We built Subtree to connect them.
Subtree is a desktop app that bridges Claude Code, the Anthropic API, or OpenAI Codex to your Figma documents via the Model Context Protocol (MCP). You can chat with AI about your designs, generate design specs, run accessibility audits, and inspect element properties — all without leaving your workflow.
Why we built this
If you've used Claude Code or Codex for coding, you know how productive it feels to describe what you want and watch it happen. But that experience breaks down the moment you need to work on a design.
You end up copying text between tools, manually describing your Figma layout in a chat window, or taking screenshots and pasting them in. The AI can't see your canvas. It can't read your components. It definitely can't create a new frame and place it where you want.
Subtree fixes this by giving the AI direct access to Figma through 15 MCP tools — read, write, screenshot, inspect, manage variables, export, and more.
How it works
The architecture is straightforward:
- A Figma plugin runs inside your document, providing access to the Figma API
- An Electron app on your desktop manages the connection, chat UI, and local state
- A Rust MCP binary (subtree-mcp) speaks the MCP protocol to Claude or Codex
- WebSocket connections tie everything together in real-time
When you ask Claude to "create a card component with an avatar and action button," here's what happens: Claude calls the figma_write tool, which sends a batch of operations through the MCP server to the Electron app, which forwards them via WebSocket to the Figma plugin, which executes them on your canvas. The whole round trip takes about a second.
Four tools in one app
Chat
The core experience. Describe what you want in natural language and watch it appear on your canvas. Claude can read your current selection, understand your page structure, and create or modify nodes in real-time.
Specs
A five-stage workflow that turns a vague idea ("I need a settings page") into a structured design spec, then a plan, then tasks, then actual Figma frames. It catches missing edge cases early and generates component inventories automatically.
A11y
Select any frame and run a comprehensive accessibility audit. You get a WCAG compliance score, color contrast analysis, touch target checks, heading order validation, and actionable recommendations. No more shipping inaccessible designs.
Inspect
A DevTools-like panel for Figma. Browse the frame hierarchy, inspect element properties (dimensions, spacing, colors, typography), and see auto-layout details. Useful for developers implementing designs and for designers debugging layout issues.
Multi-provider support
Subtree isn't locked to one AI provider. You can choose from:
- Claude Code — Use your existing Claude Code CLI subscription with Opus, Sonnet, or Haiku
- Anthropic API — Bring your own API key for direct model access
- OpenAI Codex — Connect the Codex CLI for GPT-powered design
Switch between providers and models at any time from the settings panel.
Getting started
Download the app, install the Figma plugin, and connect your AI provider. The whole setup takes under a minute. We're excited to see what you build.