Subframe — AI-native design tool built for code

• Subframe

  This page

  Pricing

  • Free tier
  • Paid Pro

• Figma

  Pricing

  • Freemium
  • Paid teams/Dev Mode

• v0

  Pricing

  • Credit-based AI UI

1. Subframe — official site
2. Figma — official site
3. v0 — official site

Free tier

Yes

Pricing summary

Subframe offers a free plan with limited projects, pages, prototypes, and AI usage. Pro unlocks unlimited projects, pages, prototypes, and AI for paid plan rates—with free viewer seats on all plans. Enterprise pricing is custom—confirm live tiers on the official site.

Reviewed on 22 August 2026 · Subframe — official site

• Visual editor with real components

  Drag, duplicate, and edit layers that map directly to React components—not abstract shapes detached from code.

• Deterministic code export

  Pages and components export as clean React and Tailwind without LLM misinterpreting your layout.

• Design system sync

  Build components with variants, props, and slots; sync them to your codebase via CLI as production source.

• AI design assistance

  Generate pages, themes, and components from prompts or images grounded in your system context.

• Interactive prototypes

  Share prototypes built from the same components used in exported code—confirm limits on free tier.

• MCP and IDE workflows

  Connect Cursor, Claude Code, and other MCP tools to export pages and iterate with codebase context.

1. 1

   Set up your system

   Start from the prebuilt library or define custom components, tokens, and documentation in Subframe.

2. 2

   Design pages visually

   Compose screens on a responsive canvas with auto layout and real component instances.

3. 3

   Sync or export code

   Sync components via CLI to your repo and export pages through copy-paste or the MCP server.

4. 4

   Add business logic

   Wire exported presentation code to APIs, state, and auth in your IDE—with or without AI assistants.

• Product designers on React stacks

  Design with components developers actually ship—reducing handoff friction and pixel drift.

• Startup engineering teams

  Move from screen design to production-ready UI faster without maintaining parallel Figma specs.

• Design-system owners

  Keep documentation, visual editing, and component source aligned in one tool.

Output stack

React and Tailwind CSS built on Radix primitives—confirm version details in docs.

Sync model

CLI syncs components to your repo; pages export via MCP or copy-paste inspect panel.

Collaboration

Unlimited team members with free viewer seats; paid editor seats for design work—confirm on site.