subtree
Now available for macOS & Windows

Supercharge your
Figma workflow

Connect Claude Code or Codex to Figma. Chat, write specs, audit accessibility, and inspect elements — all from one desktop app.

subtree
U
Add a hero section with gradient heading
Creating hero with gradient text...
Added to canvas

Products

Four tools.
One powerful app.

Chat

Bi-directional AI design

Design in Figma with Claude, Claude Code, or OpenAI Codex. Describe what you want in natural language and watch it appear on your canvas in real-time.

Claude & Codex supportReal-time canvas sync15 Figma tools
chat.subtree
Create a card component with avatar, title, and action button
I'll create that component on your canvas now...
●figma_writerunning
Card Title
Subtitle
Action
Added to Frame 1
Message Claude...
Claude Code · Opus 4.6 ▾
Specs

AI design specifications

Describe a screen or flow and get a complete design spec — visual requirements, component breakdowns, interaction patterns, and accessibility criteria. Then plan, generate tasks, and implement directly in Figma.

5-stage workflowClarify & planAuto-implement
specs.subtree
✓
Specify
✓
Clarify
3
Plan
4
Tasks
5
Implement
Design Plan
Typography: Inter 400/500/600
Colors: Primary #1B6FE4 · Surface #FFF
Components:
Button (sm/md/lg)
InputField
Card
Clarify Spec
Generate Tasks
Message Claude...
Claude Code · Opus 4.6 ▾
A11y

Accessibility audits

Select any frame and run comprehensive accessibility checks. Get WCAG compliance scores, color contrast analysis, and actionable recommendations to make your designs inclusive.

WCAG complianceColor contrastActionable fixes
a11y.subtree
78
Accessibility Score
Frame: Homepage Hero
Color contrast
92
Touch targets
88
Alt text
45
Focus indicators
100
Heading order
67
WCAG 2.1 AA · 3 issues found
Inspect

Element inspector

A DevTools-like experience for Figma. Inspect element properties, view the frame hierarchy, and debug your designs with a full device console.

Element inspectorFrame hierarchyDevice console
inspect.subtree
Page
Hero
Container
Heading
Button
Avatar
Features
Properties
width1200
heightauto
padding24 48
gap16
fill#0A0A0C
▸ Container 1200×auto

Getting Started

Up and running
in four steps.

01

Install the app

Download for macOS or Windows. Under a minute to set up.

02

Connect to Figma

Authenticate with your Figma account and grant tool permissions.

03

Configure AI

Choose Claude Code, Anthropic API, or OpenAI Codex as your provider.

04

Start building

Chat, write specs, run accessibility audits, or inspect elements — all from one app.

Testimonials

Loved by builders.

"I built Subtree because I wanted Claude to design directly in Figma. Now I can describe a screen and watch it appear on my canvas in real-time — it's the workflow I always wanted."

N
Nick
Founder at Subtree

"We caught 47 accessibility issues before shipping our redesign. The A11y tool paid for itself on day one."

M
Mitchel
Founder at Barberwise

"Inspect gives me the DevTools experience I always wanted in Figma. Being able to see the full frame hierarchy saves me hours every week."

V
Vincent
Founder at Vinnie.dev

Download

Ready to start?

Free 3-day trial. No credit card required.

Chat
AI-powered design
Specs
Design specifications
A11y
Accessibility audits
Inspect
Element inspector

Ready to build
something great?

Download Subtree and start designing with AI, auditing accessibility, and inspecting frames — all in one app.

Free 3-day trial · macOS & Windows