Ship what you design.

The AI-native design tool built for code.

Revvity
Embrace
Apollo
Equal Parts
Shopify
Octave
Gem
Movemint
Deloitte
Chkk
Stanford
Greenlight Guru
Concentrix
Dentsu
Crafty
Revvity
Embrace
Apollo
Equal Parts
Shopify
Octave
Gem
Movemint
Deloitte
Chkk
Stanford
Greenlight Guru
Concentrix
Dentsu
Crafty

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.
Subframe
~$ npx @subframe/cli sync
syncing components...
done. 12 components pulled.
1import { Button } from
"@/ui/components/Button"
2import { TextField } from
"@/ui/components/TextField"
3import { Card } from
"@/ui/components/Card"
4// add your business logic
5export 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}

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

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.

npx skills add SubframeApp/subframe
Read the installation guide for more details.
Cursor
Claude
Gemini

Start building today.

Free

$0

Start designing with code & AI.

  • 1 project
  • Up to 5 pages
  • 1 AI prototype
  • Unlimited team members
  • Limited AI features
  • 24 hour version history

Pro

$29
per editor/month

For startups, freelancers, and power users.

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

Custom

For large teams, agencies, and enterprises.

Free viewer seats are available on all plans. We offer discounts for students & educators, contact us at [email protected] to learn more.

FAQ.

For the ones who ship.

Design, meet code.