Ship what you design.

The AI-native design tool built for code.

Start building ◉ Watch demo

RevvityEmbraceApolloEqual PartsShopifyOctaveGemMovemintDeloitteStanfordGreenlight GuruConcentrixDentsuCrafty

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.

01 / Code handoff

The handoff is over.

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

</>Subframe

~$ npx @subframe/cli sync

syncing components...

done. 12 components pulled.

Radix UITailwind CSS

ProfilePage.tsx

1import { Button } from
  "@/ui/components/Button"

2import { TextField } from
  "@/ui/components/TextField"

3export function ProfilePage() {
4  const { data } = useSWR('/api/user')
5  return (
6    <Card>
7      <TextField value={data?.name} />
8      <Button onClick={save} />
9    </Card>
10  )
11}

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.

View docs ↗

02 / AI-native

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.

Pricing

Start building today.

Free

Start designing with code & AI.

Start for free

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

Pro

Custom

—

For large teams, agencies, and enterprises.

Schedule demo

✓Dedicated support
✓Custom security review
✓Enterprise collaboration
✓Tailored onboarding

Free viewer seats are available on all plans. We offer discounts for students & educators.

FAQ

For the ones who ship.

How is Subframe different from vibe coding tools?

Subframe is a visual design environment where layout, components and styles map directly to editable front-end code.

Is Subframe for designers or engineers?

Both. Designers work with real components while engineers receive a predictable, presentational code layer.

Does Subframe replace Figma?

It complements exploratory visual design with a code-native canvas for building production interfaces.

Can Subframe integrate with my codebase?

Components can be synced into an existing project, where developers add product logic and data wiring.

Do I need to know how to code to use Subframe?

No. Code knowledge expands what you can customize, but visual editing remains the primary workflow.

Does Subframe train AI on my data?

Your project context is used to personalize work in your own projects rather than to create generic output.

Design, meet code.

Start building ›