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.
Wrapping an element in a stack in Subframe shows up instantly in the generated code.
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 allows you to grant direct access to your designs to these tools.Tailwind CSS
Tailwind CSS gives coding agents a consistent styling system to work with:- Tailwind’s utility classes let the agent edit styles directly in component markup.
- Subframe’s generated Tailwind theme gives the agent named colors, spacing, and other design tokens to reuse.
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/core ↗ that’s a thin wrapper around Radix. See the Radix documentation for primitive APIs and examples. We use @subframe/core instead of Radix directly to support other headless libraries like Base UI and React Aria in the future.
Coding agents can reuse the interaction logic in these headless components when adding dropdowns, modals, and accordions to your app.