> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subframe.com/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](/agent/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 gives AI tools guardrails, reducing invented colors or spacing. Subframe generates a robust Tailwind theme for you automatically.

See the [Tailwind v3 documentation](https://v3.tailwindcss.com/docs) or [Tailwind v4 documentation](https://tailwindcss.com/docs) for available utilities and configuration options.

### 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 package called [`@subframe/core` ↗](https://github.com/SubframeApp/subframe/tree/main/packages/subframe-core) that's a thin wrapper around Radix. See the [Radix documentation](https://www.radix-ui.com/primitives/docs/overview/introduction) for primitive APIs and examples. We use `@subframe/core` instead of Radix directly to support other headless libraries like [Base UI](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.


## Related topics

- [Design to code workflow](/develop/concepts/design-to-code.md)
- [Prototype with AI](/design/prototype-mode/overview.md)
- [Project settings](/design/projects/project-settings.md)