What does this skill do, and when should you use it?
This Agent Skill from google-labs-code/stitch-skills converts an existing frontend application or component into a Stitch Design. It extracts a self-contained HTML file from the build output, analyzes source files to produce DESIGN.md, and uploads both artifacts to a Stitch project. It is a good fit for teams that already have frontend code and want to continue design iteration in Stitch. A configured and running Stitch MCP server is required.
It reads a built web application directory containing index.html and assets, then delegates extraction of a single standalone.html file. It analyzes source components, stylesheets, and theme configuration to create .stitch/DESIGN.md. It then uses the Stitch MCP and upload workflows to send the design system and HTML to a target Stitch project identified by projectId. The workflow requires a Stitch API key and specified generated-by values for uploads.
- A frontend developer wants to migrate an existing Vite or React interface into Stitch for further design iteration.
- A design-engineering team wants to document the design system already present in components, stylesheets, and theme configuration.
- A project maintainer needs to upload a built web snapshot and its design system to a specific Stitch project.
- A team planning a frontend redesign wants to preserve the current interface as a starting point in Stitch.
How do you install this skill?
- Before upload, show the files, assets, and potentially sensitive content that will be sent to Stitch, and require user confirmation; do not expose the API key through command-line arguments or logs.
- Document pinned dependency/script versions, diagnosable failures, retries, rollback, and cleanup for partial uploads.
- Narrow the “always trigger” rule and document non-fit cases such as runtime-dependent apps, private dependencies, non-Vite/React projects, and unreachable Stitch service.
- Add reproducible tests and real CI coverage for the code-to-design critical path.
- Shell / CLI
- Network access
- Local filesystem
- MCP Server
Stitch MCP serverStitch API keybuilt web application directoryStitch projectId
This skill is part of the repository's stitch-design plugin. The README documents selective installation with: npx skills add google-labs-code/stitch-skills. For Codex, the repository can also be added as a marketplace before installing the stitch-design plugin. Selective installation requires including the skill's dependent skills; the provided material does not document a standalone package or version for this skill.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/stitch-design/skills/code-to-design" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Upload the frontend code at `/path/to/dashboard` into a Stitch project named 'Dashboard-Migration-2026'.
Configure and run the Stitch MCP server, then prepare a built application directory with index.html and assets, the source files, a Stitch API key, and a target projectId. An example trigger is: "Upload the frontend code at /path/to/dashboard into a Stitch project named 'Dashboard-Migration-2026'." If the projectId is unknown, the workflow says to use list_projects. After standalone.html is generated, you may inspect it in a browser, but verification is optional and should not block the remaining steps.
What are this skill's strengths and limitations?
- Covers the full migration flow from HTML extraction through design-system extraction and Stitch upload.
- Uses both build artifacts and source-code design information.
- Explicitly targets Vite, React, and similar frontend scenarios.
- Follows the Agent Skills open standard and is intended for multiple coding agents.
- Requires a running Stitch MCP server, an API key, and a valid projectId.
- Expects a built application directory containing index.html and assets.
- Depends on extract-static-html, extract-design-md, manage-design-system, and upload-to-stitch workflows.
- The supplied material does not document a test suite, retry behavior, or validation coverage across frontend frameworks.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Stitch Code-to-Design this page | 38 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch Frontend Design Extractor | 42 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch Design System Manager | 45 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| TypeUI (Hermes Agent Design Skill) | 59 · Recommended | ★ 2k | 3mo ago | NOASSERTION |
| Frontend Design Skill | 52 · Use with care | ★ 5.5k | 5mo ago | MIT |
How did FollowSkills review this skill?
The skill explicitly reads frontend code, writes .stitch/DESIGN.md, and uploads HTML and a design system; the data flow is partly visible, but the allowed Bash, Write, web_fetch, and Stitch tool scope is broad. It does not require per-upload confirmation, explain sensitive-data handling or API-key protection, or provide rollback/revocation. Its instruction not to block on verification further reduces user review, so points are deducted. No malware, credential theft, covert exfiltration, or destructive default is evidenced.
The sequence and prerequisites are reasonably clear, but the target file does not include the dependent skills, scripts, parameter schemas, or abnormal-input handling. Step 3 refers to extract-design-md while Step 4 invokes manage-design-system, leaving dependency interpretation to the user. There is no target-skill test coverage, failure feedback, retry strategy, or partial-completion recovery guidance, so only limited static plausibility is credited.
The audience, inputs (a built directory, index.html, assets, and projectId), and main outputs are fairly clear. However, the “always use” trigger for save, migrate, or upload is overly broad, and non-fit cases, framework boundaries, dynamic-app limitations, and Chinese-language behavior are unspecified. Core operation depends on Stitch MCP, an API key, and an external service; reachability from mainland-China networks is not evidenced, so points are deducted.
The target file has a readable prerequisite/workflow structure and links to dependent skills; the repository README documents installation, and repository context supplies an Apache-2.0 license and security policy. The skill itself lacks versioning, changelog, maintenance ownership, troubleshooting, stable parameter documentation, and complete examples. Dependency implementation details are absent from the supplied evidence, preventing a higher score.
The chain covers static HTML extraction, design-system extraction, and upload, so it plausibly addresses the core code-to-design task. However, there is no skill-specific reusable output example or execution evidence; verification is optional and non-blocking, leaving upload correctness, asset completeness, and post-failure usability for manual checking. Under the static calibration ceiling, this earns only a moderate-low score.
The target file supplies auditable workflow steps, paths, and parameter requirements, and the README gives positioning and usage examples. The supplied CI only validates a react-components example and does not cover code-to-design paths. There are no committed tests for this skill, third-party reproduction records, or result evidence, so the conclusion rests mainly on one static document.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →