develop
Implement Subframe designs with business logic into your codebase.
- Fetches designs via MCP from Subframe by URL, page ID, or name, then syncs required components locally
- Detects project state and guides you through either full Subframe integration or using designs as inspiration in existing non-Subframe projects
- Handles component syncing, page creation in the correct directory structure, and preservation of existing business logic when updating designs
- Provides patterns for adding data fetching, form handling, event handlers, and loading/error states to generated presentational code
Implement Subframe designs in the codebase. Fetch the design via MCP, sync components, and add business logic.
MCP Authentication
If you cannot find the get_page_info tool (or any Subframe MCP tools), the MCP server likely needs to be authenticated. Ask the user to authenticate the Subframe MCP server. If the user is using Claude Code, instruct them to run /mcp to view and authenticate their MCP servers, and then say "done" when they're finished.
Detect Project State
Before starting, check for package.json and .subframe/ folder in the current directory:
| Condition | Action |
|---|---|
No package.json |
Run /subframe:setup first — there's no project to implement into yet. |
Has package.json AND has .subframe/ folder |
Proceed with the workflow below. |
Has package.json but NO .subframe/ folder |
Ask the user (see below). |
Existing non-Subframe project
If the current directory has a package.json but no .subframe/ folder, ask the user which approach they prefer:
More from subframeapp/subframe
design
Design UI pages in Subframe. Use when building new UI, iterating on existing UI, exploring design options, or to get a visual starting point to refine in the Subframe design tool. Don't write UI code directly - design first, then implement with /subframe:develop.
482setup
Initialize Subframe in a new or existing project. Sets up the CLI, syncs components, configures Tailwind and fonts.
474import
Import an existing design system into Subframe. Discovers component files, stories, and CSS/Tailwind config, then uploads everything to Subframe for processing. This feature is only available for certain teams.
239