Agent skill · design visual · google-labs-code
stitch::manage-design-system
Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
Why this skill is useful
Adds specific commands and workflows for managing design systems in Stitch that the AI wouldn't reliably generate on its own.
What it needs
Requires bash installed locally. About 3k tokens when loaded. Last updated 2026-07-30. 7,933 stars on the source repository.
What this skill does
Design-System Create a "source of truth" for your project's design language to ensure consistency across all future screens. [!NOTE] Refer to your system prompt for instruction on handling MCP tool prefixes for all tools mentioned in this skill (e.g., getscreen, createdesignsystemfromdesignmd, applydesignsystem). 📥 Retrieval To analyze a Stitch project, you must retrieve metadata and assets using the Stitch MCP tools: 1. Project lookup: Use listprojects to find the target projectId. 2. Screen lookup: Use listscreens for that projectId to find representative screens (e.g., "Home", "Main Dashboard"). 3. Metadata fetch: Call getscreen for the target screen to get screenshot.downloadUrl and htmlCode.downloadUrl. 4. Asset download: Use readurlcontent to fetch the HTML code. 🧠 Synthesis from Description If you need to extract a design system from existing screens, use the design-md skill (in the stitch-utilities plugin). If there are no existing screens (new project), or the user provides a direct description (e.g., "dark theme, blue and purple, rounded, Inter font"): 1. Map the user's vague terms to precise values using the design mappings (see design-md skill in stitch-utilities or generate-design skill). 2. Select concrete hex codes, font families, and roundness values. 3. Generate the DESIGN.md file (refer to the design-md skill in stitch-utilities for structure). 4. Proceed to the "Create or Update Design System in Stitch" step below. 📝 Output Structure The DESIGN.md file should follow the structure defined in the design-md skill (in the stitch-utilities plugin). 🚀 Create or Update Design System in Stitch After generating .stitch/DESIGN.md, make sure to also create or update the design system in Stitch. Two-step design system creation: [!WARNING] Checkpoint — User Confirmation Required. Before uploading, you MUST pause and ask the user for confirmation. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills google-labs-code/manage-design-system