skills.rest
tranhoainam298
tranhoainam298COMMUNITY
Explore all skills by this author →
GitHub

stitch::manage-design-system

Create, update, and apply Stitch design systems from DESIGN.md files using MCP tools.

1|Updated Jun 27, 2026
Search Tags:#design system#design tokens#theme#design.md#stitch#ui consistency#mcp tools
One-click install
npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill stitch-manage-design-system-tranhoainam298
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch::manage-design-system
Source: https://github.com/tranhoainam298/qr-parking-booking-system/tree/main/.claude/plugins/stitch-design/skills/manage-design-system
Command: npx skills add https://github.com/tranhoainam298/qr-parking-booking-system --skill stitch-manage-design-system-tranhoainam298

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Maintaining a consistent visual language across generated screens is difficult when each screen is designed in isolation. This Skill establishes a single source of truth for a project's design language in Stitch, so colors, fonts, and roundness stay consistent across all future screens. ## Core Features & Use Cases - Design System Creation: Generate a DESIGN.md file from existing screens or a plain-language description (e.g., "dark theme, blue and purple, rounded, Inter font"), then upload it to Stitch via the upload script or the upload_design_md MCP tool. - Token Management: Create or update project-level design tokens with create_design_system_from_design_md, covering color mode, fonts, roundness, and color overrides. - Apply to Screens: Use apply_design_system to propagate the design system to selected screen instances, with correct ID handling to avoid invalid argument errors. - Use Case: After generating several app screens in Stitch, extract a design system from the main dashboard screen, confirm the summary with the user, upload it, and apply it to every screen in the project for visual consistency. ## Quick Start Ask the assistant to create a Stitch design system from your project screens and apply it to all screens in the project.

Frequently Asked Questions about stitch::manage-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design system in Stitch from existing screens?▼

Retrieve the project with list_projects, find representative screens with list_screens, and fetch their HTML via get_screen and read_url_content. Synthesize a DESIGN.md file, upload it with the upload_to_stitch.py script, then call create_design_system_from_design_md with the returned screen IDs.

How do I apply a Stitch design system to multiple screens?▼

Call apply_design_system with the projectId, the assetId from list_design_systems, and selectedScreenInstances containing only id and sourceScreen for each target screen. Get the instance IDs from get_project and exclude any instances of type DESIGN_SYSTEM_INSTANCE.

Why does apply_design_system fail with an invalid argument error?▼

The request fails when selectedScreenInstances include position or dimension fields like x, y, width, or height. Pass only the id and sourceScreen fields for each screen instance to resolve the error.

Can I create a Stitch design system without existing screens?▼

Yes. Map the user's description, such as dark theme with Inter font and rounded corners, to concrete hex codes, font families, and roundness values, generate a DESIGN.md file, then upload it and call create_design_system_from_design_md.

Do I need to call update_design_system after create_design_system_from_design_md?▼

No. create_design_system_from_design_md automatically populates and updates all theme tokens from the parsed YAML frontmatter of the uploaded DESIGN.md. The separate update_design_system call is only required after the basic create_design_system call.

Related Skills

Explore More Design & Creative Skills→
google-labs-codegoogle-labs-code
8.2k

stitch::manage-design-system

Create, update, and apply design systems in Stitch projects via MCP tools.

Official
Intermediate
anukkrit149anukkrit149

design-md

Synthesize Stitch screen HTML and design metadata into a semantic DESIGN.md.

Community
Advanced
rattamnoonrattamnoon

design-md

Extract design tokens from a Stitch project and generate a DESIGN.md.

Community
Advanced
gabelulgabelul
38

stitch-design-system

Extract semantic design tokens and CSS custom properties from Google Stitch projects.

Community
Intermediate