Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
Permissions
Files
Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
Create a "source of truth" for your project's design language to ensure consistency across all future screens.
[!NOTE] Refer to your system prompt for instruction on handling MCP tool prefixes for all tools mentioned in this skill (e.g.,
get_screen,create_design_system_from_design_md,apply_design_system).
To analyze a Stitch project, you must retrieve metadata and assets using the Stitch MCP tools:
Version history
list_projectsprojectIdlist_screens for that projectId to find
representative screens (e.g., "Home", "Main Dashboard").get_screen for the target screen to get
screenshot.downloadUrl and htmlCode.downloadUrl.read_url_content to fetch the HTML code.If you need to extract a design system from existing screens, use the design-md skill (in the stitch-utilities plugin).
If there are no existing screens (new project), or the user provides a direct description (e.g., "dark theme, blue and purple, rounded, Inter font"):
design-md skill in stitch-utilities or generate-design skill).DESIGN.md file (refer to the design-md skill in stitch-utilities for structure).The DESIGN.md file should follow the structure defined in the design-md skill (in the stitch-utilities plugin).
After generating .stitch/DESIGN.md, make sure to also create or update the
design system in Stitch.
Two-step design system creation:
[!WARNING] Checkpoint — User Confirmation Required. Before uploading, you MUST pause and ask the user for confirmation. Present a summary of the design system you are about to create (display name, key colors, fonts, and roundness) and wait for explicit approval before proceeding. Do NOT upload until the user confirms.
DESIGN.md:
Option A (Recommended - Uploader Script): Use the modified upload-to-stitch Python script which natively handles .md files. It base64-encodes the markdown file in-process and sends it to the /v1/projects/{projectId}/screens:batchCreate endpoint, bypassing output token limits.
python3 stitch-skills/plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py \
--project-id <PROJECT_ID> \
--file-path /path/to/DESIGN.md \
--api-key <API_KEY> \
--generated-by <GENERATED_BY>
Set <GENERATED_BY> to identify the skill or tool that produced the
DESIGN.md. Use the calling skill name when invoked from another skill
(e.g. stitch::code-to-design), or the agent/tool name for standalone
use (e.g. Gemini, Claude Code). If omitted, the script defaults to
UserUploadedDesignMd.
This returns the sourceScreen ID and the screenInstance ID.
Option B (Direct MCP Tool): If the DESIGN.md is small (under ~5KB), you can call the upload_design_md MCP tool directly, passing the base64-encoded design markdown content as designMdBase64.
create_design_system_from_design_md tool immediately after the upload, passing the projectId and the selectedScreenInstance (containing the id and sourceScreen returned from the upload step).Once the upload script and create_design_system_from_design_md have both completed,
Stitch holds the design tokens at the project level — you do NOT need to repeat
them in generation prompts.
Use apply_design_system to apply a design system to existing screens.
[!IMPORTANT]
selectedScreenInstancesmust contain onlyidandsourceScreen— do NOT include position/dimension fields (x,y,width,height) or the request will fail with "invalid argument". Get the screen instance IDs fromget_project.
{
"projectId": "...",
"assetId": "...",
"selectedScreenInstances": [
{
"id": "...",
"sourceScreen": "projects/.../screens/..."
}
]
}
How to get the required IDs:
get_project to retrieve screenInstances — each has an id and
sourceScreen.list_design_systems to retrieve the design system name (format:
assets/{assetId}) — use the part after assets/ as the assetId.type: "DESIGN_SYSTEM_INSTANCE" — only pass
real screens.After writing .stitch/DESIGN.md, also create or update .stitch/metadata.json
to track the projectId, title, all known screens, and design system summary.
See examples/metadata.json for the format.
See reference/tool-schema.md for the full
designSystem object schema with all available options.
Refer to the design-md skill (in the stitch-utilities plugin) for best practices on describing design elements.
In these kits
Works with
Claude, Codex, Cursor & more