> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-apg-edit-updates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Code generation

> How Subframe generates clean, production-ready React code.

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.

<Frame caption="Increasing the size of text in Subframe reflects instantly in generated code.">
  <video autoPlay muted loop playsInline className="w-full" src="https://hevpkratkeuc60w7.public.blob.vercel-storage.com/Mintlify/design-changes-reflected-in-code-Swdkw45gXz7gO32nN7GRnEzPxtzu0T.mp4" />
</Frame>

## AI-ready code

Subframe's exported code is designed to work well with AI coding tools like Claude Code, Cursor, Codex, and Copilot. Our [MCP server](/guides/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](https://www.subframe.com/blog/how-headless-components-became-the-future-for-building-ui-libraries) 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 ↗](https://github.com/SubframeApp/subframe/tree/main/packages/subframe-core) package called `@subframe/core` that's a thin wrapper around [Radix ↗](https://www.radix-ui.com/). We use this package instead of Radix directly to support other headless libraries like [BaseUI](https://base-ui.com/) and [React Aria](https://react-aria.adobe.com/) 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 ↗](https://join.slack.com/t/subframecommunity/shared_invite/zt-380uma6dv-_lr7_bDLU5DJcoygfUYkeQ) and let us know what you'd like to see.