Design & Frontend stitch-mcpui-designscreen-generationprompt-enhancementdesign-variantsdesign-tokensui-ux

Stitch Screen Generator

Generate, edit, and explore Stitch screens from text or images.

FollowSkills review · FSRS-2.0
Not recommended
45/ 100 5-point scale 2.3 / 5
Trust10 / 25 · 2.0/5

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.

Reliability8 / 20 · 2.0/5

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.

Adaptability9 / 15 · 3.0/5

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.

Convention8 / 15 · 2.7/5

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.

Effectiveness6 / 15 · 2.0/5

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.

Verifiability4 / 10 · 2.0/5

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.

Evidence confidence:Low Reviewed Jul 20, 2026 Reviewed revision ad4b8bc8c519
The upstream repository has new commits since this review. The score still applies to the reviewed revision shown and may not cover the latest changes.
Before you use it
  • 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.
Review evidence [1][2][3][4][5][6][7][8]
See the full review method →

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.

  1. A product designer wants to turn a product idea into a new desktop or mobile screen.
  2. A frontend or product team wants to recreate a screen from a screenshot or mockup in Stitch.
  3. A designer needs targeted changes to an existing login page, homepage, or dashboard.
  4. A design team wants several alternative directions for an existing screen.
  5. A developer using Stitch MCP wants generated HTML and screenshots saved as local design assets.

What are this skill's strengths and limitations?

Pros
  • 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.
Limitations
  • 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 do you install this skill?

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.

How do you use this skill?

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.

FAQ

Can it run without Stitch MCP?
No. The SKILL.md requires Stitch MCP tools, and the README requires the Stitch MCP server to be configured and running.
Does installation automatically install dependent skills?
The source does not say. It warns that selective installation must include required dependencies, such as upload-to-stitch for image workflows and manage-design-system when no design system exists.
Where are generated results saved?
The workflow downloads HTML and screenshots into .stitch/designs and updates .stitch/metadata.json after edits.
What does it cost?
The supplied source does not state the cost of the skill, Stitch MCP, or related services.

More skills from this repository

All from google-labs-code/stitch-skills

Design & Frontend

Stitch Prompt Refiner

Turns vague UI ideas into structured prompts optimized for better Stitch generation.

Design & Frontend

Stitch Design System Synthesizer

Analyze Stitch projects and turn existing UI patterns into a reusable DESIGN.md.

Design & Frontend

Stitch React Component Builder

Turn Stitch screens into modular, maintainable, and validated React components.

Design & Frontend

Stitch Frontend Design Extractor

Turn frontend source code into a Stitch-ready DESIGN.md.

Design & Frontend

Stitch Design System Manager

Create, update, and apply consistent project-level design systems in Stitch.

Design & Frontend

Stitch Design Taste

Generates rigorous, non-generic DESIGN.md systems for premium Google Stitch screen generation.

Dev & Engineering

Stitch Remotion Walkthrough Builder

Turn Stitch app screens into polished walkthrough videos with transitions, zoom effects, and contextual overlays.

Design & Frontend

Stitch Build Loop

Continuously generate, integrate, and advance website pages with Stitch iterations.

Dev & Engineering

Stitch React Native Builder

Turn Stitch HTML designs into maintainable React Native components and sync existing native screens with design updates.

Design & Frontend

Stitch Static HTML Extractor

Turn a rendered web page into a self-contained HTML snapshot for sharing or Stitch upload.

Dev & Engineering

Stitch React Dashboard Builder

Turn Stitch screens into production-ready React and Vite dashboards for dense data workflows.

Design & Frontend

Stitch Code-to-Design

Turn an existing frontend codebase into a Stitch-ready design and design system.

Design & Frontend

Stitch Asset Uploader

Reliably upload local images, HTML, and design documents to Google Stitch projects.

Design & Frontend

shadcn/ui Component Integration Guide

Guides developers through discovering, installing, customizing, and validating shadcn/ui components.

Related skills