Skip to content
Development
Skill

/stitch-mcp-list-design-systems

Lists all Stitch Design Systems, optionally filtered by project. Returns asset names needed for apply and update operations.

From plugin
stitch-kit
4936 skills1 agent2 hooks

Claude Code

$ npx -y skills add gabelul/stitch-kit --skill stitch-mcp-list-design-systems --agent claude-code

SKILL.md

stitch-mcp-list-design-systems.SKILL.md
name: stitch-mcp-list-design-systems
description: Lists all Stitch Design Systems, optionally filtered by project. Returns asset names needed for apply and update operations.
allowed-tools:
  - "stitch*:*"

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:

| # | Name | Font | Color | Mode | Asset ID | |---|------|------|-------|------|----------| | 1 | SaaS Dashboard Theme | DM Sans | #6366F1 | Light | `15996705518239280238` |

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
Read more
@gabelul
Ships withstitch-kit

Your coding agent writes decent code and designs terrible UI. stitch-kit fixes the second half — it wires agents into Google Stitch (text prompts → genuinely beautiful screens) and teaches them to drive it properly.

4936 skills1 agent
Get the whole plugin

Stars on GitHub

Momentum

stars in total
49
Star history of gabelul/stitch-kit on GitHub, a chart by star-history.com

Other skills on stitch-kit.

stitch-a11y

stitch-a11y

Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes,…

@gabelul@gabelulInstall Skill
stitch-animate

stitch-animate

Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte…

@gabelul@gabelulInstall Skill
stitch-design-md

stitch-design-md

Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex…

@gabelul@gabelulInstall Skill
stitch-design-system

stitch-design-system

Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4…

@gabelul@gabelulInstall Skill
stitch-html-components

stitch-html-components

Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom…

@gabelul@gabelulInstall Skill
stitch-ideate

stitch-ideate

Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive…

@gabelul@gabelulInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills2w309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react5d252k
@facebook@facebookInstall Skill

Questions about stitch-mcp-list-design-systems.

Which coding agents can use stitch-mcp-list-design-systems?
stitch-mcp-list-design-systems installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.