Stitch Design System Synthesizer
Analyze Stitch projects and turn existing UI patterns into a reusable DESIGN.md.
The skill permits Stitch MCP access, file reads, writing DESIGN.md, and web retrieval; scope is mostly explicit and no malicious behavior or credential theft is shown. However, it lacks user confirmation, data-flow disclosure, sensitive-data guidance, rollback, and write-failure recovery, so 12 points are deducted.
The workflow and output structure are fairly complete, but it depends on the Stitch MCP server, external download URLs, and an external guide; tool naming is inconsistent between web_fetch and read_url_content, and abnormal-input, network-failure, and empty-project diagnostics are absent. It receives 7 within the static ceiling, with 13 points deducted.
Audience, prerequisites, and primary scenario are clear, with an example prompt; non-fit boundaries, semantic trigger limits, Chinese-language support, and alternatives when Stitch is unavailable are not defined. Core reliance on potentially China-inaccessible overseas Stitch services also limits environment fit, so 7 points are deducted.
SKILL.md, README, and the example provide useful progressive structure, installation guidance, parameter conventions, an output template, and pitfalls. Versioning, changelog, maintenance ownership, update path, FAQ coverage, and dependency pinning are missing, so 7 points are deducted. Apache-2.0 licensing is clear; unverified publisher provenance is not independently penalized.
The skill clearly targets a directly usable DESIGN.md and specifies required content for colors, components, and layout, making the core value plausible. However, results depend on an accessible Stitch project and complete design assets, and the example output was not executed or verified here. It receives 6 within the static ceiling, with 9 points deducted.
The source files, output template, example, and repository CI provide limited auditable evidence. The CI validates another skill's TypeScript example rather than design-md key paths, and no third-party execution evidence is included, so it receives 3 points, with 7 deducted.
- Core functionality depends on a configured, reachable Stitch MCP server, downloadable project assets, and an external prompting guide; availability may be unstable on mainland-China networks.
- Before execution, confirm the target project, external resource retrieval, and DESIGN.md write scope, and add failure handling and rollback guidance.
- The example and repository CI do not cover this skill's actual key paths, so generated colors, fonts, dimensions, and project identity require manual review.
What does this skill do, and when should you use it?
This Agent Skill belongs to the stitch-utilities plugin and analyzes Stitch projects to generate DESIGN.md files. It gathers project and screen metadata, HTML/CSS, and optionally screenshots to identify visual themes, colors, typography, component styling, and layout patterns. The resulting document is intended to act as a design-language reference when prompting Stitch to create new screens. It requires a configured Stitch MCP Server and is most relevant to teams that need visual consistency across generated interfaces.
It discovers the Stitch MCP namespace, looks up projects and screens, and retrieves screen metadata including screenshot and HTML/CSS download URLs, dimensions, device type, and project design-theme data. It then uses web_fetch or read_url_content to download HTML, parses Tailwind classes, custom CSS, and component patterns, and synthesizes them into a DESIGN.md containing project identity, atmosphere, color roles, typography, component styling, and layout principles.
- A design team has one or more Stitch screens and wants to document their shared visual language.
- A frontend team wants future Stitch-generated screens to preserve an existing project's colors, typography, components, and layout patterns.
- A project maintainer needs to consolidate design conventions scattered across Stitch screen metadata and HTML/CSS.
- A team wants a semantic design reference with exact color values before generating additional screens in Stitch.
What are this skill's strengths and limitations?
- Covers atmosphere, color roles, typography, component styling, and layout principles in one output structure.
- Requires semantic design language while preserving exact hexadecimal color values.
- Combines screenshots, HTML/CSS, and project-level design-theme metadata.
- Follows the Agent Skills open standard and is described as compatible with coding agents including Codex, Claude Code, Gemini CLI, and Cursor.
- Requires a configured and running Stitch MCP Server and cannot operate independently of a Stitch project.
- The source provides no test suite, platform compatibility matrix, or detailed failure-handling guidance.
- The workflow depends on network access to retrieve HTML/CSS and optional screenshots.
- It generates design documentation rather than implementing frontend code directly.
How do you install this skill?
The skill is located at plugins/stitch-utilities/skills/design-md/ in the repository. To install the skill collection, run: npx skills add google-labs-code/stitch-skills. The README also documents registering the repository as a Codex plugin marketplace and installing the stitch-utilities plugin. No dedicated command for installing only this subdirectory is provided. Before use, configure and run the Stitch MCP Server and provide the required environment variables and credentials.
How do you use this skill?
In a coding agent with Stitch MCP configured, use a prompt such as: "Analyze Stitch project projects/123 and generate a DESIGN.md." If no project ID is supplied, the skill lists the user's projects and identifies one by title or URL pattern. If no screen ID is supplied, it lists project screens and selects a target by title, then retrieves the screen assets, analyzes them, and creates DESIGN.md. The source does not document detailed permission setup or retry behavior.