mcpField
S
stitch-mcp-list-design-systems

stitch-mcp-list-design-systems

github.com/gabelulDesign & UI4739 installsUpdated 14w ago
Repository

About stitch-mcp-list-design-systems

This skill guides users in listing available Stitch design systems through Stitch MCP and finding reusable theme configurations and their assetIds. Results can be filtered by project or shown across all projects.

Key features

  1. 01List available design systems
  2. 02Filter by project ID
  3. 03Inspect theme configurations and asset IDs
  4. 04Explain ID formats for later apply or update calls

Use cases

  1. 01Find an assetId before applying a design system
  2. 02Review existing design systems
  3. 03Check for an existing system before creating one
  4. 04Look for reusable themes during project setup

MCP support

It explains how to call Stitch MCP's list_design_systems tool and format projectId and returned asset IDs for subsequent calls.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-list-design-systems

After installing, type/stitch-mcp-list-design-systemsin Claude Code to confirm it loaded.

Details

From the project README

Stitch MCP — List Design Systems

Lists all available Stitch Design Systems. These are reusable theme configurations (colors, fonts, roundness) 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/15996705518239280238",
      "displayName": "SaaS Dashboard Theme",
      "designSystem": {
        "theme": {
          "colorMode": "LIGHT",
          "font": "DM_SANS",
          "roundness": "ROUND_EIGHT",
          "customColor": "#6366F1",
          "backgroundLight": "#FFFFFF",
          "backgroundDark": "#18181B"
        }
      }
    }
  ]
}

After listing

Present as a readable table:

#NameFontColorModeAsset ID
1SaaS Dashboard ThemeDM Sans#6366F1Light15996705518239280238

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 (assets/15996...). It's used two different ways depending on the next call:

  • apply_design_system's assetId — strip the assets/ prefix, pass the bare numeric id
  • update_design_system's designSystem.name — pass name as returned, with the prefix

Comments

Markdown supported