design
The Subframe MCP server exposes tools for the full design surface — pages, components, snippets, design documents, theme — and this skill teaches you when to reach for each one. Each tool returns a URL the user can open to see the result. The heaviest ones (design_page, design_component, edit_component) run as background AI jobs and also return a jobId — pass it to wait_for_jobs if you need to ensure completion.
Don't write UI code directly. Subframe generates production-ready React/Tailwind code that matches the design system. Design in Subframe first, then implement with /subframe:develop.
When to use this skill
The user wants to:
- Build a new page or screen, or iterate on an existing one
- Add a new reusable component or snippet to the project or edit existing ones
- Capture design intent or component usage guidance as written documentation
- Update the project-wide visual theme (colors, fonts, corners, shadows, typography)
- Remove pages, components, snippets, or flows that are no longer needed
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.