DOCSEARCHbyAlgolia
Submit Docs

Subframe Documentation

repository·main·Indexed 19 days ago

https://github.com/subframeapp/subframe

A UI design tool for exporting React and Tailwind CSS code from a visual drag-and-drop editor. Features include AI-powered prototyping, a deterministic code generation engine, and the @subframe/cli for syncing design system components. Includes @subframe/core, a lightweight wrapper around Radix UI headless components, and starter kits for Astro, Next.js, and Vite.

Tokens
62K
Snippets
136
Records
345
Agent score
64%

What's inside Subframe

  1. Overview of the Subframe workflow

    main

    Subframe is a design-to-code platform that allows you to design visually using real UI components and export production-ready React code. It aims to eliminate the traditional design-to-code hand-off by using code as the source of truth.

    The Subframe Workflow:

    1. Build your design system: Define your theme, components, and documentation. You can use the pre-built library or create custom components that sync as production code.
    2. Design and prototype visually: Use a drag-and-drop editor with real components to build interactive prototypes.
    3. AI-assisted design: Use AI to generate designs from prompts or images. The AI learns from your specific theme, components, and existing pages.
    4. Code hand-off: Sync components via the CLI and export pages as copyable React code or via an MCP server. Subframe generates this code programmatically (not via AI), ensuring you own the code locally.

  3. Overview of Subframe

    main
    Subframe is a UI design tool designed to bridge the gap between design and code. It features a drag-and-drop visual editor and provides high-quality code exports using React and Tailwind CSS. Additionally, it includes AI-powered features for design and prototyping.

  4. Understand Subframe core concepts

    main

    Subframe is a design-to-code platform built on atomic design principles. Its workflow revolves around several key abstractions:

    • Projects: The top-level container that holds your theme, components, and pages. Teams can manage multiple projects.
    • Components: Reusable React UI components that are synced with your codebase. You can use pre-built libraries or create custom components to build your design system.
    • Pages: Individual layouts designed in a drag-and-drop visual editor using your project's components.
    • Theme: A collection of design tokens (colors, typography, shadows, borders) that syncs to your code as a Tailwind configuration.
    • Ask AI: A feature to generate designs from prompts or images using your existing design system, including inline edits and page variations.
    • Prototypes: Interactive web app representations created by annotating pages and using AI to prompt functionality. Prototypes can be shared or downloaded as code.
    • CLI: A command-line interface used to manage the connection between Subframe and your local codebase.
    • MCP Server: A Model Context Protocol server that allows AI coding tools (like Claude Code, Cursor, or Codex) to access context and code from your Subframe components and pages.

  5. Navigate the Subframe editor layout

    main

    The editor is organized into three primary functional areas:

    Left Panel

    • Pages: Switch between different pages, flows, designs, or subcomponents within a project.
    • Layers: View and organize the element hierarchy (component tree). You can select, reorder, or group elements here.
    • Insert: Browse and drag components or snippets onto the canvas. You can toggle between snippet and component libraries.

    Canvas (Center)

    This is the design surface where elements are rendered at their actual size.

    Note on Layout: Unlike tools that use absolute positioning, Subframe uses flexbox for layout. Elements use Stacks to flow, resize responsively, and arrange themselves automatically (similar to Figma's auto-layout).

    Inspector (Right Panel)

    A context-aware properties panel that changes based on your current mode and selection:

    • Design Mode: Controls layout, sizing, colors, backgrounds, borders, shadows, padding, overflow, and component-specific properties.
    • Code Mode: Features an Inspect tab that displays the code for the currently selected element.

  6. Compare Subframe plans

    main

    Subframe offers three tiers of service: Free, Pro, and Custom. Billing is calculated per team using seat-based pricing for Editors and Admins. Viewers are free on all plans and can be added without increasing costs.

    FeatureFreeProCustom
    Price$0$29/editor/monthContact us
    Projects1UnlimitedUnlimited
    Pages5UnlimitedUnlimited
    Prototypes1UnlimitedUnlimited
    AI usageLimitedUnlimitedUnlimited
    Version history24 hours7 daysExtended
    Custom fonts–✓✓
    Import components––✓
    Dedicated support––✓

  7. Use Code Mode to inspect and export design code

    main

    Code Mode allows you to view and export high-quality React code generated from your designs. It features three primary tabs:

    • Inspect: Used to view the code for your entire page or specific elements.
    • Installation: Provides setup instructions for your codebase, MCP servers (Claude Code, Cursor, Codex), or Replit projects.
    • Prompts: Provides prebuilt prompts or MCP links for use with AI assistants.

  8. What is the Subframe MCP server?

    main

    The Subframe MCP (Model Context Protocol) server allows AI coding assistants (such as Claude Code, Cursor, and Codex) to interact directly with your Subframe projects.

    Through this server, an AI assistant can perform the following tasks:

    • Design Management: Read, design, and delete pages, components, and snippets.
    • Visual Inspection: Take screenshots of pages and components.
    • Prototyping: Read existing prototypes.
    • Documentation & Design: Write design documents and edit the project theme.
    • Search: Search through the Subframe documentation.

    Note: There is a separate Subframe Docs MCP server specifically for accessing the Subframe documentation site.

  9. Handle dark mode in exported Tailwind configs

    main

    When dark mode is enabled in your Subframe theme, the exported configuration includes specific overrides to support dark mode styling:

    • For Tailwind v3: The export includes an additional theme.css file containing :root and .dark CSS variable blocks. The tailwind.config.js will also include darkMode: 'selector'.
    • For Tailwind v4: The theme.css file includes a .dark block and an @custom-variant dark declaration.

  10. Use @subframe/core for headless components

    main
    The @subframe/core package provides a lightweight wrapper around Radix UI's headless components. This package is used by the Subframe design system to provide accessible, unstyled component primitives that can be styled with Tailwind CSS.

  11. Review and manage AI variations

    main

    When using open-ended prompts, Subframe may generate up to three distinct variations. Deterministic edits (e.g., "make the text bold") will return only a single result.

    Using the Review Tray

    When variations are generated, a review tray appears with labeled thumbnails.

    1. Preview: Click a variation thumbnail to see it applied live on the canvas.
    2. Refine: Type into the shared Refine... input to regenerate a new set of variations based on additional instructions.
    3. Commit: Click Keep to apply the active variation to your project.
    4. Dismiss: Click Discard to close the tray without changes.

    Note: When editing existing elements, the tray includes an Original card to allow comparison with the unedited version.

  12. How responsive design and breakpoints work in Subframe

    main

    Subframe uses a mobile-first, max-width breakpoint system.

    • Desktop: The base layer. It has no media query and applies to all widths. It owns everything wider than your largest defined breakpoint.
    • Other Breakpoints: Every breakpoint added after Desktop is a max-width breakpoint. It applies from the next-narrower breakpoint up to its own defined width.

    For example, if you have a Mobile breakpoint set at 767px, its styles apply from 0px up to 767px. The Desktop styles apply to everything above that threshold unless overridden.