Skip to main content
This guide walks through the full design-to-code workflow with Subframe and an AI coding assistant. The demo uses Claude Code, but the same workflow applies to any MCP-compatible AI assistant.

​
Getting started

Install the Subframe MCP server and agent skills for your AI assistant. See Agent skills for setup instructions.
This guide uses Claude Code as the example, but the workflow works with any MCP-compatible AI assistant including Cursor and Codex.

​
Design with AI

Prompting Claude Code to design a page in Subframe
You can ask your AI agent to design a page at any stage — during planning, mid-implementation, or as a standalone task. The agent uses the design_page tool to generate design variations in Subframe. After generating designs, Subframe returns an MCP link. Open it to review the design variations.

​
Review design variations

From the review page you can:
  • Copy link of any variation to reference later
  • Open in editor to refine visually
Either action adds the page to your project for future reference.

​
Combine variations

There are two ways to mix and match elements from different variations:
  • Ask your AI agent — your agent has access to all variations. Ask it to combine elements from different ones, for example “use the header from variation 1 with the layout from variation 3.”
  • Edit in Subframe — click Open in editor on the variation you want to start from, then use Ask AI to incorporate elements from other variations.

​
Edit in the Subframe editor

Click Open in editor to enter the full design editor. From there you can:

​
Using designs with your AI agent

To hand the design to your AI agent, copy the MCP link and reference it in your prompt. You can get the MCP link for any design by either:
  • Copying the link from the browser address bar
  • Copying the link under Code > Inspect in Subframe
Copy MCP link from Subframe

​
How AI agents implement your designs

Claude Code implementing a Subframe design
Implementation varies depending on your setup. If you’re evaluating Subframe for the first time, we recommend starting with a blank project.
Your AI agent creates a new project, initializes Subframe with /subframe:setup, then implements your designs. This is the fastest path to see the full workflow end-to-end.
  1. Ask your AI agent to scaffold a new project
  2. Run /subframe:setup to initialize Subframe
  3. Share the MCP link and ask the agent to implement the design
Last modified on February 12, 2026