What does this skill do, and when should you use it?
This Agent Skill provides design workflows for the Google Stitch MCP server. It generates new screens from text or images, edits existing screens, and creates layout, color, image, or content variants. Before calling Stitch, it analyzes the project and design-system context and converts vague requests into structured UI/UX prompts. A configured and running Stitch MCP server is required.
Reads text descriptions, images, mockups, or requests about existing screens; finds or creates Stitch projects and checks their design systems; enhances prompts and calls generate_screen_from_text, edit_screens, or generate_variants; surfaces the text description and suggestions in outputComponents; downloads generated or edited HTML and screenshots into .stitch/designs; and updates .stitch/metadata.json after edits.
- A product designer wants to turn a product idea into a new desktop or mobile screen.
- A frontend or product team wants to recreate a screen from a screenshot or mockup in Stitch.
- A designer needs targeted changes to an existing login page, homepage, or dashboard.
- A design team wants several alternative directions for an existing screen.
- A developer using Stitch MCP wants generated HTML and screenshots saved as local design assets.
How do you install this skill?
- Confirm Stitch MCP, credentials, and dependencies are configured, and assess reachability from mainland-China networks before use.
- Bash, web_fetch, and Write are broad permissions; require confirmation and retain recoverable copies before downloading, overwriting `.stitch/designs`, or changing `.stitch/metadata.json`.
- Add input validation, diagnosable failure feedback, version/changelog information, and tests covering this skill's key paths.
- Verify that the referenced manage-design-system and upload-to-stitch skills and the referenced references/examples files are packaged and version-compatible.
- Shell / CLI
- Network access
- Local filesystem
- MCP Server
Stitch MCP server
Configure and run the Stitch MCP server in the agent environment first. To install the full skill collection, run: npx skills add google-labs-code/stitch-skills. In Codex, you can also add https://github.com/google-labs-code/stitch-skills as a plugin marketplace and install the stitch-design plugin. The source does not provide a separate command for installing only generate-design.
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/generate-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:
- Make a browse tab for a mobile app for romance and date night ideas.
- Edit the login screen to add a 'Remember Me' checkbox and change the button color to blue.
- Generate 3 design variants of the home screen with dark mode and high-density layouts.
After configuring Stitch MCP, use a natural-language request such as: “Make a browse tab for a mobile app for romance and date night ideas.” You can also ask: “Edit the login screen to add a 'Remember Me' checkbox and change the button color to blue.” or “Generate 3 design variants of the home screen with dark mode and high-density layouts.” The skill selects the text-generation, image, edit, or variant flow. If the project lacks a design system, the design-system workflow must be handled first; image-based work also depends on upload-to-stitch.
What are this skill's strengths and limitations?
- Covers text generation, image recreation, existing-screen editing, and design variants.
- Includes project discovery, design-system checks, prompt enhancement, and asset-download steps.
- Can save HTML, screenshots, and edited project metadata under the local .stitch directory.
- Follows the Agent Skills open standard and is described as compatible with coding agents including Codex and Claude Code.
- Requires a configured and running Stitch MCP server, including environment variables and credentials.
- The image flow depends on upload-to-stitch, and projects without a design system require manage-design-system.
- The source provides no test suite, performance data, or real-world platform validation results.
- Generation prompts must omit color, font, and theme instructions; some visual changes therefore belong in the edit flow.
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 Screen Generator this page | 45 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch Prompt Refiner | 49 · Use with care | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch Design System Synthesizer | 45 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Figma Design System Screen Builder ✓ OpenAI · Official | 46 · Use with care | ★ 28k | 4mo ago | — |
| UI/UX Consultation Guide | 56 · Use with care | ★ 113 | 1mo ago | Apache-2.0 |
How did FollowSkills review this skill?
The skill explicitly routes project, screen, and asset operations through Stitch MCP and declares tool access, but it also grants Bash, Write, and web_fetch, requires downloading remote HTML/screenshots, and can overwrite local files. User confirmation, least-privilege rationale, data-flow disclosure, sensitive-data handling, rollback, and source verification are incomplete, so points are deducted. No malware, credential theft, covert exfiltration, or destructive default red line is evident.
The document gives fairly detailed steps, parameter examples, and iteration guidance for four main flows, but lacks diagnosable handling for missing projects, tool failures, invalid outputs, download errors, and metadata conflicts. The use of `run_command` is also inconsistent with the declared tool names. Static evidence cannot exceed the 10-point reliability ceiling, so points are deducted.
The scenarios are clear: text generation, image generation, editing, and variants, with basic inputs and device types. However, non-fit boundaries, exclusion triggers, Chinese-language support, and network reachability are not specified. The core function depends on Stitch MCP, credentials, and potentially overseas services, with no mainland-China availability guidance, so points are deducted.
The skill has layered documentation with workflows, prompt templates, references, and an example; repository context supplies Apache-2.0, a security policy, and limited CI information. The selected skill lacks versioning, changelog, named maintenance responsibility, update path, troubleshooting guidance, and concrete dependency installation notes, while cross-skill dependencies remain only partially operationalized, so points are deducted.
The goal, workflow, expected Stitch output components, and local asset destinations are mostly clear, giving the happy path direct value. However, downloads, metadata updates, and result verification depend on unspecified tool behavior and external services, and no representative outputs are verifiably demonstrated. Under static calibration the score remains at or below 7, so points are deducted.
The selected file and its referenced materials are auditable, and the repository contains a real CI workflow. That workflow validates react-components rather than generate-design, with no target-specific tests, third-party execution evidence, or corroborating sources. Only limited verifiability credit is justified.
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 →