stitch-mcp-list-design-systems
npx machina-cli add skill gabelul/stitch-kit/stitch-mcp-list-design-systems --openclawStitch MCP — List Design Systems
Lists all available Stitch Design Systems. These are reusable theme configurations (colors, fonts, roundness, saturation) that can be applied to screens for visual consistency across a project.
Critical prerequisite
Only use this skill when the user explicitly mentions "Stitch".
When to use
- Before applying a design system — need to find the
assetId - User asks "what design systems do I have?"
- The orchestrator checks for existing design systems during project setup (Step 4b)
- Before creating a new design system — check if one already exists
Call the MCP tool
{
"name": "list_design_systems",
"arguments": {
"projectId": "3780309359108792857"
}
}
projectId — numeric ID only, optional
✅ "3780309359108792857"
❌ "projects/3780309359108792857"
If omitted, returns all design systems across all projects.
Output schema
Returns an array of Asset objects:
{
"assets": [
{
"name": "assets/ds_abc123",
"displayName": "SaaS Dashboard Theme",
"designSystem": {
"theme": {
"colorMode": "LIGHT",
"font": "DM_SANS",
"roundness": "ROUND_EIGHT",
"saturation": 3,
"customColor": "#6366F1",
"backgroundLight": "#FFFFFF",
"backgroundDark": "#18181B"
},
"designTokens": "...",
"styleGuidelines": "..."
}
}
]
}
After listing
Present as a readable table:
| # | Name | Font | Color | Mode | Asset ID |
|---|---|---|---|---|---|
| 1 | SaaS Dashboard Theme | DM Sans | #6366F1 | Light | ds_abc123 |
Then offer:
- "Apply one of these to a screen?" →
stitch-mcp-apply-design-system - "Update an existing design system?" →
stitch-mcp-update-design-system - "Create a new design system?" →
stitch-mcp-create-design-system
Extract the name field from each asset — this is the assetId needed for apply_design_system.
Source
git clone https://github.com/gabelul/stitch-kit/blob/main/skills/stitch-mcp-list-design-systems/SKILL.mdView on GitHub Overview
Stitch MCP — List Design Systems exposes all available Stitch Design Systems (theme configs) that can be applied to screens for visual consistency. You can filter by project to narrow results and retrieve the asset names (assetId) needed for apply or update operations. These systems define color, font, roundness, and saturation to maintain brand consistency.
How This Skill Works
The skill calls the MCP tool list_design_systems with an optional projectId. It returns an array of Asset objects, including name (assetId), displayName, and a designSystem object with theme (colorMode, font, roundness, saturation, etc.) and designTokens. You then use the assetId for apply_design_system or update_design_system operations.
When to Use It
- Before applying a design system to a screen to find the assetId to use
- When a user asks what Stitch design systems do I have
- During project setup to check for existing design systems (Step 4b)
- Before creating a new design system to ensure one doesn't already exist
- When comparing options by font, colorMode, and other theme details
Quick Start
- Step 1: Call list_design_systems with an optional projectId to fetch assets
- Step 2: Review the returned assets and note the assetId (name) from each entry
- Step 3: Use the assetId with stitch-mcp-apply-design-system or stitch-mcp-update-design-system
Best Practices
- Pass projectId when you want results scoped to a project; omit to list all design systems across projects
- Ensure the user explicitly mentions 'Stitch' before invoking this skill
- Extract and store assetId from Asset.name for future apply or update actions
- Review displayName and designSystem.theme values (colorMode, font, roundness, saturation) to choose the best match
- Check backgroundLight/backgroundDark to verify contrast and accessibility implications
Example Use Cases
- User asks: 'What Stitch design systems do I have?' → call list_design_systems with no projectId
- During project setup, run the list to see existing design systems (Step 4b)
- Found asset ds_abc123; apply to Screen A using stitch-mcp-apply-design-system
- Need to update a design system; select the assetId from the list and run stitch-mcp-update-design-system
- Planning to create a new design system; first verify if one exists in the project via this skill
