# Stitch Manage Design System > Create, list, and apply Stitch design systems from DESIGN.md using the verified Stitch MCP design-system tools and safe upload fallbacks. - Skill: `practicalswan/stitch-manage-design-system` (Agent Skill, multi-file: 5 files) - Install (CLI): `npx skillmds add practicalswan/stitch-manage-design-system` - Raw SKILL.md: https://api.skillmd.com/api/skills/practicalswan/stitch-manage-design-system/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: AI & ML - License: Apache-2.0 - Author: practicalswan (https://skillmd.com/u/practicalswan) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/practicalswan/stitch-manage-design-system --- # Stitch Manage Design System This skill is a catalog-normalized import from `https://github.com/google-labs-code/stitch-skills` at commit `7b53207b94e62911777d53d4238b5f8c88c2b519`, source path `plugins/stitch-design/skills/manage-design-system`. The upstream control file was corrected for this workspace: the verified Stitch MCP surface here is design-system oriented, so screen lookup, screen generation, and screen editing tools must be used only when the current host explicitly exposes them. ## When to Use This Skill - Use when `.stitch/DESIGN.md` should become a Stitch design system or an existing design system should be listed or applied. - The task involves Google Stitch project IDs, `.stitch/` artifacts, DESIGN.md files, Stitch exports, or Stitch-specific validation. - The broader `stitch-design` router points here as the narrowest workflow. ## Workflow 1. Create or identify the target project; use `create_project` only when a new project is appropriate. 2. Inspect `.stitch/DESIGN.md` for project name, colors, type, shape, component, layout, and anti-pattern rules. 3. For small DESIGN.md files, base64-encode UTF-8 content and call `upload_design_md` with the numeric project ID; for the bundled helper, pass `--generated-by` with the calling skill or agent name. 4. Immediately call `create_design_system_from_design_md` with the returned screen instance `id` and `sourceScreen`. 5. Use `list_design_systems` to confirm the design-system asset exists for the project. 6. Use `apply_design_system` only with valid selected screen instance `id` and `sourceScreen` values. ## Local Assets - `examples/`, `resources/`, `references/`, or `reference/` are upstream support material when present. Treat `SKILL.md` as the source of truth if a support file mentions an unavailable MCP tool. - `scripts/` are optional helpers. On Windows, prefer PowerShell or Node equivalents unless Git Bash or WSL is actually available. - Keep generated `.stitch/` files out of commits unless the user explicitly wants them as durable examples. ## Corrected Stitch MCP Surface Verified in this workspace on 2026-06-15: `create_project`, `upload_design_md`, `create_design_system_from_design_md`, `list_design_systems`, and `apply_design_system`. This 2026-07-29 source refresh did not re-verify a broader live MCP surface. Do not claim `list_projects`, `list_screens`, `get_project`, `get_screen`, `generate_screen_from_text`, `edit_screens`, or `generate_variants` were used unless the current host exposes those exact tools in the active tool list. ## Cross-Client Portability This skill is written to stay usable across GitHub Copilot, Claude Code, and Codex. - GitHub Copilot: keep the folder in a Copilot-visible skill path or wrap the workflow in project instructions when folder discovery is unavailable. - Claude Code: keep the folder in a local skills directory or a compatible plugin source. - Codex: install or sync the folder into `$CODEX_HOME/skills/stitch-manage-design-system` and restart Codex after major changes. ## MCP Availability And Fallback Preferred MCP Server: Stitch MCP - Fallback prompt: "Use the Stitch Manage Design System skill without MCP. Follow the documented local or manual fallback, show the selected tool surface, and report the verification evidence." - Use local `.stitch/` artifacts, exported HTML or screenshots, bundled scripts, and the Stitch web UI when the host does not expose the needed Stitch MCP operation. - Do not claim screen lookup, generation, editing, or variant MCP calls unless those tools are present in the active host tool list. - Do not claim an MCP operation was used when the active host does not expose it. ## Anti-Patterns - Claiming a Stitch screen-generation, screen-editing, or screen-retrieval MCP call succeeded when the active host does not expose that tool. - Uploading files, screenshots, HTML, markdown, or design assets to Stitch without user-approved destination and artifact details. - Reading, printing, storing, or committing Stitch API keys, MCP config secrets, cookies, or credential-bearing files. - Treating generated design or code as final without local render, syntax, or artifact verification. - Collapsing this workflow into a broader frontend/design skill when Stitch-specific files, project IDs, or design-system assets matter. ## Verification Protocol Before claiming this skill was applied successfully: 1. Pass/fail: `upload_design_md` and `create_design_system_from_design_md` were called in sequence, or fallback evidence is recorded. 2. Pass/fail: `list_design_systems` returns the expected design-system asset. 3. Pass/fail: `apply_design_system` calls pass only `id` and `sourceScreen` for selected screen instances. 4. Pass/fail: Local metadata records the project ID and design-system asset ID when available. 5. Pressure-test scenario: Repeat the workflow with Stitch MCP screen tools unavailable and confirm the fallback path remains honest and actionable. 6. Success metric: The user can identify the exact artifact, project/design-system target, and verification evidence without relying on unstated MCP behavior. ## Related Skills - [stitch-design-md](../stitch-design-md/SKILL.md): Use when the task also needs this adjacent Stitch workflow. - [stitch-extract-design-md](../stitch-extract-design-md/SKILL.md): Use when the task also needs this adjacent Stitch workflow. - [stitch-taste-design](../stitch-taste-design/SKILL.md): Use when the task also needs this adjacent Stitch workflow. - [stitch-generate-design](../stitch-generate-design/SKILL.md): Use when the task also needs this adjacent Stitch workflow.