Skip to main content
Subframe generates production-ready React code deterministically—no LLM involved.

​
How it works

When you make edits in Subframe, you’re editing the underlying code directly. If it can’t be translated to code, you can’t do it in Subframe. Subframe’s code output is designed to be:
  • Deterministic — The same design always produces the same code, without AI hallucinations or unexpected output.
  • Clean — You get a minimal set of changes. No extra wrappers, one-off components, or redundant styles.
  • Instant — Changes reflect real-time, without waiting for AI calls.
  • Presentational — No API calls, state management, or business logic for developers to unwind during handoff.

Increasing the size of text in Subframe reflects instantly in generated code.

​
AI-ready code

Subframe’s exported code is designed to work well with AI coding tools like Cursor, Claude Code, and Copilot. Our MCP server allows you to grant direct access to your designs to these tools.

​
Tailwind CSS

Tailwind CSS is a popular, robust CSS framework that, in our testing, is very AI-friendly:
  • Tailwind’s utility classes make it easy to copy, paste, and refactor code after AI edits.
  • A well-architected Tailwind theme give guardrails to AI tools, which dissuades it from inventing arbitrary colors or spacing. Subframe generates a robust Tailwind theme for you automatically.

​
Headless components

Subframe uses headless components for interactivity because we believe they are the future of building UI libraries. Headless components are unstyled components that help separate styling from functionality, giving you:
  • Flexibility — Restyle without breaking behavior
  • Composability — Mix and match primitives, without reinventing the wheel
  • Accessibility — Built-in ARIA support and keyboard navigation
Subframe publishes an open-source package called @subframe/core that’s a thin wrapper around Radix . We use this package instead of Radix directly to support other headless libraries like BaseUI and React Aria in the future. We also found headless components to be AI-friendly. Relying on an open-source, battle-tested library for component logic—rather than asking AI to build dropdowns, modals, and accordions from scratch—produces higher quality, more consistent code that is easier to modify with AI.

​
Future support

We’re exploring support for other frameworks and languages. If you’re interested, join our Slack community and let us know what you’d like to see.