What are the prerequisites?

A numeric projectId, one or more screenIds, and a valid assetId from a Stitch design system (from list_design_systems or create_design_system).

Can I apply to multiple screens at once?

Yes, pass an array of screenIds in selectedScreenIds; all selected screens will be updated.

What happens after applying?

Returns updated screen data; re-fetch updated screens to review and optionally edit or apply to more screens.

stitch-mcp-apply-design-system

npx machina-cli add skill gabelul/stitch-kit/stitch-mcp-apply-design-system --openclaw

Files (1)

SKILL.md

2.3 KB

Stitch MCP — Apply Design System

Applies a previously created Stitch Design System to one or more screens. This updates the screen's visual theme (colors, font, roundness) to match the design system, ensuring visual consistency across a project.

Critical prerequisite

Only use this skill when the user explicitly mentions "Stitch".

You must have:

A projectId (numeric)
One or more screenId values (numeric)
An assetId from a design system (from list_design_systems or create_design_system)

When to use

After creating a design system and wanting to apply it to screens
User says "make all screens match this theme" or "apply the design system"
The orchestrator's Step 5b stores an assetId and offers to apply it
Ensuring visual consistency across a multi-screen project

Call the MCP tool

{
  "name": "apply_design_system",
  "arguments": {
    "projectId": "3780309359108792857",
    "selectedScreenIds": ["88805abc123def456", "99906xyz789ghi012"],
    "assetId": "ds_abc123"
  }
}

Parameter reference

`projectId` — numeric ID only, no prefix

✅ "3780309359108792857"
❌ "projects/3780309359108792857"

`selectedScreenIds` — array of numeric screen IDs

✅ ["88805abc123def456"]
❌ ["projects/123/screens/88805abc123def456"]

All selected screens will have the design system applied.

`assetId` — the design system identifier

The name field from a design system asset, or just the ID portion:

✅ "ds_abc123"

Get this from:

stitch-mcp-list-design-systems → extract from the name field of each asset
stitch-mcp-create-design-system → returned in the response name field

Output

Returns updated screen data reflecting the applied design system.

After applying

Re-fetch affected screens: stitch-mcp-get-screen for each screenId
Show updated screenshots to the user
Offer:
- "Edit the updated screens?" → stitch-mcp-edit-screens
- "Convert to code?" → framework conversion
- "Apply to more screens?" → another apply_design_system call

Source

git clone https://github.com/gabelul/stitch-kit/blob/main/skills/stitch-mcp-apply-design-system/SKILL.mdView on GitHub

Overview

Applies a previously created Stitch Design System to one or more screens, updating their colors, fonts, and roundness to match the system's theme. Requires an assetId from a design system (from list_design_systems or create_design_system). The result is visually consistent screens across a project.

How This Skill Works

Provide projectId, one or more screenIds, and the design system assetId to the MCP tool (apply_design_system). The tool updates each screen's visual theme (colors, fonts, roundness) to align with the design system and returns updated screen data. After applying, re-fetch affected screens to review the updates.

When to Use It

After creating a design system and wanting to apply it to screens
You want to make all screens match a specific theme or branding
The orchestrator stores an assetId in Step 5b and needs to apply it to screens
Ensuring visual consistency across a multi-screen project
When you need to update colors, fonts, or rounded corners across multiple screens

Quick Start

Step 1: Ensure you have projectId, one or more screenIds, and an assetId from list_design_systems or create_design_system
Step 2: Run the MCP tool with name apply_design_system and arguments including projectId, selectedScreenIds, and assetId
Step 3: Re-fetch each updated screen with stitch-mcp-get-screen and review the updated visuals

Best Practices

Verify assetId corresponds to the intended design system before applying
Apply to a small subset first to preview changes
Re-fetch screens after applying to confirm visuals
Coordinate with design and development to align typography and spacing
Document the assetId used for auditing and future changes

Example Use Cases

Applying a newly created design system to a batch of screens in a project
Updating legacy screens to match a refreshed color palette and typography
Syncing fonts and roundness after a theme update
Applying an assetId from a design system to all screens to ensure consistency
Re-auditing visuals by re-fetching updated screens and comparing before/after

Frequently Asked Questions

Add this skill to your agents