Subframe – The AI design tool built for code

Ship what you design.

The AI-native design tool built for code.

Start building Watch demo

Drag & drop meets code.

Real design tool, real components.

Start building interfaces — not mockups.

Real design control.

Insert, drag, duplicate, or edit inline. Every layer maps directly to code.

Build your design system.

Create components synced with code. From props to slots to variants.

Responsive canvas.

Design web apps with built-in auto layout, plus mobile responsive support.

Multiplayer collaboration.

Work in real-time across projects, and comment directly on layers.

The handoff is over.

Pixel perfect front-end code. No AI slop machine.

Designers build visually. Work with the same components used in production.

Engineers pull code. Subframe takes care of the styling, you focus on business logic.

$ npx @subframe/cli sync

syncing components...

done. 12 components pulled.

1 import { Button } from

"@/ui/components/Button"

2 import { TextField } from

"@/ui/components/TextField"

3 import { Card } from

"@/ui/components/Card"

4 // add your business logic

5 export function ProfilePage() {

6 const { data } = useSWR('/api/user')

7 return (

8 <Card>

9 <TextField value={data?.name} />

10 <Button onClick={save}>Update</Button>

11 </Card>

12 )

13 }

Designers build visually. Work with the same components used in production.

Engineers pull code. Subframe takes care of the styling, you focus on business logic.

Subframe exports clean front-end code without the use of AI. Instant & predictable. Fully yours to edit in your IDE.

You own the code.

View docs

AI-native, designer-first.

Curate, remix, and elevate your craft. Your system. Your context. Your personal AI.

Ask AI, anywhere.

Generate pages, themes, components, or insert inline. AI is there when you need it.

Remix variations.

Mix-and-match from generations or @mention your pages as context. You design the final result.

Prototype with code.

Annotate your designs, get interactive prototypes. Share limitless ideas that match your product.

Personalized context.

Teach AI your components, your design style, your product. It only gets better as you build.

Your designs are only used to personalize AI in your own projects, not to train on your data.

Our AI is built for designers, by designers.

Unlock AI workflows.

Connect to AI code tools like Cursor & Claude Code via MCP + Skills. Sync components, export code for pages, and prompt new designs directly from your IDE with codebase context.

Agent Skillsnpx skills add SubframeApp/subframe

Read the installation guide for more details.

Start building today.

Free

Start designing with code & AI.

1 project
Up to 10 pages
2 prototypes
Unlimited team members
Limited AI features
24 hour version history

Start for free

Pro

$29

per editor/month

For startups, freelancers, and power users.

Unlimited projects
Unlimited pages
Unlimited prototypes
Unlimited team members
Unlimited AI usage
Custom fonts
7 day version history

Get started

Custom

For large teams, agencies, and enterprises.

Schedule demo

Free viewer seats are available on all plans. We offer discounts for students & educators, contact us at support@subframe.com to learn more.