design

Installation

Summary

Design UI pages in Subframe with AI-generated variations, then implement with code.

Create new pages or redesign existing UI with multiple design variations to explore options before committing to code
Use design_page for new designs and edit_page for targeted changes to existing Subframe pages
Generates production-ready React/Tailwind code that matches your design system; refine visually in the Subframe editor before implementation
Update project theme globally with edit_theme to adjust colors, typography, borders, and shadows across all pages

SKILL.md

Design pages using the design_page and edit_page MCP tools. design_page creates a set of AI-generated design variations that auto-apply as pages in a Subframe flow as each variation finishes generating. edit_page applies targeted changes directly to an existing Subframe page. Both produce designs the user can refine visually in the Subframe editor and then implement in code. Update the theme for the entire project using edit_theme.

Don't write UI code directly. Subframe generates production-ready React/Tailwind code that matches the design system. Design first, then implement with /subframe:develop.

When to Use This

Use /subframe:design when the user:

Needs UI while coding
Wants to explore design options
Has codebase context that should inform the design
Wants a starting point to refine in a design tool
Is collaborating on designs with a team
Wants to modify an existing page
Wants to edit the theme for their Subframe designs

The key value: /subframe:design and /subframe:develop bridge coding and design. They work in both directions — create designs while coding and then ensure your code exactly reflects your design.