Setting the file. One moment.
Skill 10 · Stitch::manage Design System
Subchapter 10.1
reference/tool-schema.mdMarkdown6 KBView on GitHub
Use these examples to format your Stitch MCP design system tool calls correctly.
DESIGN.mdupload_to_stitch.pyUploads a DESIGN.md file to a project via the BatchCreateScreens endpoint.
This is the first step in creating a design system from a markdown file.
[!NOTE] Use the
upload-to-stitchskill’s script instead of theupload_design_mdMCP tool. The script handles base64 encoding in-process, avoiding the model’s output token limit.
python3 <SKILL_DIR>/scripts/upload_to_stitch.py \
--project-id <PROJECT_ID> \
--file-path /path/to/DESIGN.md \
--api-key <API_KEY>Creates a design system for a project using the uploaded DESIGN.md file.
{
"projectId": "4044680601076201931",
"selectedScreenInstance": {
"id": "98b50e2ddc9943efb387052637738f61",
"sourceScreen": "projects/4044680601076201931/screens/98b50e2ddc9943efb387052637738f61"
},
"deviceType": "DESKTOP"
}[!NOTE] You must upload
DESIGN.mdvia the script first to get the source screen ID, and then fetch the project details withget_projectto find the corresponding screen instance ID to pass asidinselectedScreenInstance.
Updates an existing design system for a project. This is required immediately after calling create_design_system to set the theme and display the design system in the UI.
[!NOTE] While
update_design_systemis mandatory after the basiccreate_design_systemcall, you do not need to call it aftercreate_design_system_from_design_md. The latter automatically populates and updates all theme tokens directly from the parsed YAML frontmatter of the uploadedDESIGN.md.
{
"name": "assets/15996705518239280238",
"projectId": "4044680601076201931",
"designSystem": {
"displayName": "My Design System", // OPTIONAL. Display name of the design system
"theme": { // REQUIRED. The design theme object
"colorMode": "LIGHT", // REQUIRED. Options: LIGHT, DARK
"headlineFont": "INTER", // REQUIRED. Options: INTER, ROBOTO, OPEN_SANS, LATO, MONTSERRAT, NOTO_SANS, NOTO_SERIF, etc.
"bodyFont": "INTER", // REQUIRED. Same font options as headlineFont
"labelFont": "INTER", // OPTIONAL. Same font options as headlineFont
"roundness": "ROUND_EIGHT", // REQUIRED. Options: ROUND_FOUR, ROUND_EIGHT, ROUND_TWELVE, ROUND_FULL
"customColor": "#0EA5E9", // REQUIRED. Primary brand color / seed color for dynamic color system (hex)
"colorVariant": "FIDELITY", // OPTIONAL. Options: FIDELITY, TONAL, VIBRANT, EXPRESSIVE, CONTENT, MONOCHROME, FRUIT_SALAD, RAINBOW
"overridePrimaryColor": "#996e47", // OPTIONAL. Override primary color (hex)
"overrideSecondaryColor": "#0EA5E9", // OPTIONAL. Override secondary color (hex)
"overrideTertiaryColor": "#c4956a", // OPTIONAL. Override tertiary color (hex)
"overrideNeutralColor": "#0D0D0D", // OPTIONAL. Override neutral color (hex)
"designMd": "# Design System..." // OPTIONAL. Markdown string with detailed design system spec
}
}
}| Field | Type | Description |
|---|---|---|
colorMode | enum | LIGHT or DARK |
headlineFont | enum | Font for headlines and display text. See font options below. |
bodyFont | enum | Font for body text. See font options below. |
roundness | enum | ROUND_FOUR, ROUND_EIGHT, ROUND_TWELVE, ROUND_FULL |
customColor | hex | Primary brand / seed color for the dynamic color system (e.g., #E8732A) |
| Field | Type | Description |
|---|---|---|
displayName | string | Human-readable name for the design system |
labelFont | enum | Font for labels and captions. Defaults to bodyFont if omitted. |
colorVariant | enum | FIDELITY, TONAL, VIBRANT, EXPRESSIVE, CONTENT, MONOCHROME, FRUIT_SALAD, RAINBOW |
overridePrimaryColor | hex | Override primary color (e.g., #E8732A) |
overrideSecondaryColor | hex | Override secondary color (e.g., #1B6B93) |
overrideTertiaryColor | hex | Override tertiary color (e.g., #F2A541) |
overrideNeutralColor | hex | Override neutral color (e.g., #FAF7F2) |
spacingScale | integer | Spacing scale factor (observed value: 3) |
designMd | string | Markdown string with detailed design system specifications |
The following font enum values are confirmed to work (server-validated):
| Value | Font Name |
|---|---|
INTER | Inter |
ROBOTO | Roboto |
OPEN_SANS | Open Sans |
LATO | Lato |
MONTSERRAT | Montserrat |
NOTO_SANS | Noto Sans |
NOTO_SERIF | Noto Serif |
PLUS_JAKARTA_SANS | Plus Jakarta Sans |
BE_VIETNAM_PRO | Be Vietnam Pro |
[!WARNING] Omit the legacy
fontfield when updating the design system to avoid “invalid argument” errors.
[!NOTE] The
namedColorsobject above is abbreviated. The full response contains 50+ Material 3 color tokens including all container, fixed, and inverse variants.
Applies a design system to one or more screens in a project.
[!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": "4044680601076201931",
"assetId": "c277fcdfc1e04baf91b92d975ff4c54a",
"selectedScreenInstances": [
{
"id": "98b50e2ddc9943efb387052637738f61",
"sourceScreen": "projects/4044680601076201931/screens/98b50e2ddc9943efb387052637738f61"
},
{
"id": "ab12cd34ef56789012345678abcdef01",
"sourceScreen": "projects/4044680601076201931/screens/ab12cd34ef56789012345678abcdef01"
}
]
}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.