/design

name: design
description: Design and edit anything in Subframe — pages, components, snippets, design documents, the theme. Use when the user explicitly wants a resource in the Subframe design tool created or changed, asks to explore visual directions in Subframe, or invokes /subframe:design. Do not use for implementation-only work in an existing codebase. Always load this skill when taking any action through the Subframe MCP server. This includes building or iterating on UI, evolving the design system, capturing design intent in writing, or cleaning up a project. Don't write UI code directly — design first, then implement with /subframe:develop.
argument-hint: "[what to design or change]"

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.

**Treat a Subframe design as an explicit output, not a prerequisite for UI coding.** When the user requests a Subframe design artifact or meaningful design exploration, design in Subframe first and then implement with `/subframe:develop` if requested. For implementation-only requests, edit the code directly.

When to use this skill

Use this skill when the user wants to:

• Create a page or screen in Subframe, materially redesign one, or explore visual directions
• Add or edit a reusable Subframe component or snippet
• Capture design intent or component usage guidance as a Subframe design document
• Update the Subframe project's visual theme (colors, fonts, corners, shadows, typography)
• Remove Subframe pages, components, snippets, or canvases 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_canvases`, `get_project_info` | | Build a screen the user navigates to | `design_page` (new) / `edit_page` (targeted change) | | Change only the styles of existing page or snippet elements | `update_node_styles` | | 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, canvas, component, or snippet | `delete_page` / `delete_canvas` / `delete_component` / `delete_snippet` | | Rename a page, component, snippet, or canvas | `rename` | | Move a page to a different grid cell or canvas | `move` | | Make an exact copy of a page, component, snippet, or canvas | `duplicate` | | Find an icon to reference in design or edit code | `search_icons` | | Add icons or custom fonts to the project | `create_asset_upload`, then `add_icons` / `add_fonts` | | See or remove the project's icons and fonts | `list_icons` / `list_fonts` / `get_icon_info`; `delete_icons` / `delete_fonts` |

MCP access

Discover the Subframe MCP tools first if your client loads them on demand. If no Subframe MCP tools are available, help the user install, enable, or authenticate the server using the [MCP setup guide](https://docs.subframe.com/agent/mcp-server). In Claude Code or Codex, `/mcp` shows the server's connection and authentication status.

If read tools work but design or editing tools are unavailable, check the user's project permissions. Viewers have read-only MCP access, including screenshots and search; designing or editing requires an editor seat. Explain that permission requirement when it is the cause instead of asking the user to authenticate again.

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 projec