Design
Design and evolve Subframe pages, components, snippets, docs, and theme via MCP—then implement with develop, not hand-written UI.
Overview
Design is an agent skill for the Build phase that orchestrates Subframe MCP tools to create and edit UI, snippets, docs, and theme before code implementation.
Install
npx skills add https://github.com/subframeapp/subframe --skill designWhat is this skill?
- Full Subframe MCP surface: pages, components, snippets, design documents, and project-wide theme (deletion supported exc
- Heavy jobs (`design_page`, `design_component`, `edit_component`) return jobId—poll with `wait_for_jobs` when completion
- Hard rule: do not write UI code directly; design in Subframe first, then `/subframe:develop` for production React/Tailwi
- Each MCP tool returns a URL the user can open to inspect the design result
- Covers new builds, iteration, design-system evolution, written design intent, and project cleanup
Adoption & trust: 534 installs on skills.sh; 392 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want agent-driven UI work but hand-written components break your design system and skip a reviewable design surface.
Who is it for?
Solo builders using Subframe + Claude Code or Cursor who want MCP-guided design iteration with a hard design-before-code gate.
Skip if: Teams not on Subframe or builders who insist on coding UI directly without the Subframe design pass.
When should I use this skill?
Always load when taking any action through the Subframe MCP server: building or iterating UI, evolving the design system, capturing design intent, cleaning up resources, or updating theme.
What do I get? / Deliverables
Subframe resources are created or updated with openable URLs (and completed background jobs when needed), ready for `/subframe:develop` to generate matching React/Tailwind code.
- Subframe pages, components, or snippets with preview URLs
- Updated theme and design documentation
- Completed background design jobs when jobId is tracked
Recommended Skills
Journey fit
UI and design-system work happens in Build; Subframe is the design-first surface before React/Tailwind implementation. Frontend subphase is where screens, reusable components, and visual theme are defined for the product.
How it compares
Design-first Subframe MCP workflow—not a replacement for generic frontend coding skills or non-Subframe Figma-to-code pipelines.
Common Questions / FAQ
Who is design for?
Indie SaaS builders and agent users on Subframe who need pages, components, snippets, documentation, and theme changes through the official MCP server.
When should I use design?
During Build frontend work whenever you add or iterate screens, evolve the design system, write design intent docs, update theme tokens, or clean up Subframe project resources.
Is design safe to install?
Check this page’s Security Audits panel; the skill assumes MCP access to your Subframe project and can modify or delete design resources (except theme deletion constraints noted in SKILL.md).
SKILL.md
READMESKILL.md - 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. ## Picking the right tool | Intent | Tool | | --- | --- | | Find out what already exists in the project | `list_components`, `list_pages`, `list_snippets`, `list_flows`, `get_project_info` | | Build a screen the user navigates to | `design_page` (new) / `edit_page` (targeted change) | | Build a reusable building block (Button, Card, ListItem) used inside pages | `design_component` (new) / `edit_component` (targeted change) | | Build a small example used inside a design document (e.g. a Button-variants demo) | `design_snippet` (new) / `edit_snippet` (targeted change) | | Write or update written design / usage documentation | `write_design_document` | | Change project-wide colors, fonts, corners, shadows, typography | `edit_theme` | | Remove a page, flow, component, or snippet | `delete_page` / `delete_flow` / `delete_component` / `delete_snippet` | ## MCP Authentication If you cannot find the design tools (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 or Codex, instruct them to run `/mcp` to view and authenticate their MCP servers, and then say "done" when they're finished. ## Find the projectId Every design tool takes a `projectId`. Resolve it like this: 1. Check `.subframe/sync.json` if it exists locally. 2. If no projectId is found, call `list_projects`. Each project includes a `projectId`, `name`, `teamId`, and `teamName`. - **One project**: Use it automatically. - **Multiple projects**: Always ask the user which project to use. Present each project with its `teamName` to disambiguate. If the user already mentioned a specific team or project name, match it against the `teamName` and `name` fields — but still confirm before proceeding. Never silently pick a project when multiple exist. ## Audit what already exists Before working on any design, get a picture of the project's current state. On any project where you don't already have explicit knowledge of what's been built, call: - `list_components` — see which components already exist. Some projects may have pre-existing components, some may not have any components yet. - `get_theme` — see the project's theme toke