Skip to content

DesignSubframe

Subframe

AI-native design tool that ships production React + Tailwind code.

Categories
DesignIDE
Pricing
FREEMIUM
Hosting
Cloud
Platforms
Web
Models
Multi-model
Verified
Jun 14, 2026

Subframe is a code-first design tool where you build interfaces from real, code-backed components on a visual canvas and export clean, production-ready React and Tailwind CSS. Designs map deterministically to code — what you draw is the code you ship — and connect to coding agents like Cursor and Claude Code via MCP. It syncs with Figma and auto-generates a custom design system.

Pros & cons

  • Deterministic, production-ready code
  • Designs from real coded components
  • MCP hooks into Cursor/Claude Code
  • Figma sync + auto design system
  • Generous free tier
  • Scoped to the React + Tailwind stack
  • Pro is per-editor ($29/mo)
  • Smaller community than Figma

Tags

Further reading

View all Design
  • View Onlook details
    DesignFREEMIUMOpen core

    Onlook

    Onlook

    The Cursor for designers — edit React apps visually in real code.

    Onlook is an open-source visual editor that lets designers and developers build and edit Next.js + Tailwind apps directly on an infinite canvas while the actual codebase stays the source of truth. You drag, style and tweak live React components and Onlook writes the corresponding code, with AI assistance for larger changes. It can be self-hosted for free, with a managed cloud version for teams.

    Worth knowing

    Open-source (Apache-2.0) and a Y Combinator W25 startup; its visual-editor repo trended #1 on GitHub and has 25k+ stars.

    • design-to-code
    • react
    • visual-editor
    • open-source
    • +1
  • View v0 details
    AgentFREEMIUM

    v0

    Vercel

    Prompt-to-UI generator from Vercel. Outputs React + Tailwind + shadcn.

    Vercel's generative UI surface. Type a description, get a working React component using Tailwind and shadcn primitives — copy the code or fork into a v0 project for iteration.

    Worth knowing

    Launched by Vercel in October 2023 (100K waitlist signups in three weeks) and rebranded from v0.dev to v0.app in January 2026.

    • ui-gen
    • react
    • tailwind
    • shadcn
  • View Magic Patterns details
    DesignFREEMIUM

    Magic Patterns

    North Park Labs

    AI prototyping for product teams — generate UI in your own design system.

    An AI design tool that turns prompts into working UI prototypes product teams can test with users and hand to engineering. Version 2.0 imports components from Figma, Storybook, or any website via its Chrome extension, so generated screens match your real design system rather than generic mockups. Includes real-time collaboration and a free tier to start.

    Worth knowing

    Grew profitably to $1M ARR with zero full-time employees before raising a $6M Series A led by Standard Capital in November 2025.

    • prototyping
    • design-systems
    • ui-generation
    • product-teams
  • View Uizard details
    DesignFREEMIUM

    Uizard

    Miro

    AI UI design: generate editable wireframes, mockups, and prototypes from a prompt.

    A browser-based UI design tool that turns text prompts, hand-drawn sketches, and screenshots into editable mockups and clickable prototypes. Its Autodesigner generates whole multi-screen projects with themes, and a Screenshot Scanner converts existing app screens into editable designs. Aimed at non-designers and PMs who want usable UI fast.

    Worth knowing

    Grew out of founder Tony Beltramelli's pix2code research in Copenhagen; acquired by Miro in 2024.

    • ui-design
    • wireframing
    • prototyping
    • no-code
    • +1