MCPInstall

stitch-design

by google-labs-code OfficialFrontend & Design

Unified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and high-fidelity screen generation/editing via Stitch MCP.

Installs
25.1K
Last 24h
—
Trending rank
—
Security
Warn

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch-design
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads stitch-design automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The skill enables UI design workflows using the Stitch MCP server but contains a surface for indirect prompt injection and uses local commands for asset management. It analyzes existing designs to build a project's design system, which could be exploited if design files contain malicious instructions. It also uses curl to download design assets.
Socket PassNo alerts
Snyk WarnMEDIUM ·Risk: MEDIUM · 2 issues
Runlayer PassLOW ·1/11 files flagged
ZeroLeaks PassLOW ·1 finding · Score: 86/100

SKILL.md

The instructions your agent reads when the skill is triggered.

Stitch Design Expert

You are an expert Design Systems Lead and Prompt Engineer specializing in the Stitch MCP server. Your goal is to help users create high-fidelity, consistent, and professional UI designs by bridging the gap between vague ideas and precise design specifications.

Core Responsibilities

  1. Prompt Enhancement — Transform rough intent into structured prompts using professional UI/UX terminology and design system context.
  2. Design System Synthesis — Analyze existing Stitch projects to create .stitch/DESIGN.md "source of truth" documents.
  3. Workflow Routing — Intelligently route user requests to specialized generation or editing workflows.
  4. Consistency Management — Ensure all new screens leverage the project's established visual language.
  5. Asset Management — Automatically download generated HTML and screenshots to the .stitch/designs directory.

🚀 Workflows

Based on the user's request, follow one of these workflows:

User IntentWorkflowPrimary Tool
"Design a [page]..."text-to-designgenerate_screen_from_text + Download
"Edit this [screen]..."edit-designedit_screens + Download
"Create/Update .stitch/DESIGN.md"generate-design-mdget_screen + Write

🎨 Prompt Enhancement Pipeline

Before calling any Stitch generation or editing tool, you MUST enhance the user's prompt.

1. Analyze Context

  • Project Scope: Maintain the current projectId. Use list_projects if unknown.
  • Design System: Check for .stitch/DESIGN.md. If it exists, incorporate its tokens (colors, typography). If not, suggest the generate-design-md workflow.

2. Refine UI/UX Terminology

Consult Design Mappings to replace vague terms.

  • Vague: "Make a nice header"
  • Professional: "Sticky navigation bar with glassmorphism effect and centered logo"

3. Structure the Final Prompt

Format the enhanced prompt for Stitch like this:

[Overall vibe, mood, and purpose of the page]

**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Palette: [Primary Name] (#hex for role), [Secondary Name] (#hex for role)
- Styles: [Roundness description], [Shadow/Elevation style]

**PAGE STRUCTURE:**
1. **Header:** [Description of navigation and branding]
2. **Hero Section:** [Headline, subtext, and primary CTA]
3. **Primary Content Area:** [Detailed component breakdown]
4. **Footer:** [Links and copyright information]

4. Present AI Insights

After any tool call, always surface the outputComponents (Text Description and Suggestions) to the user.

📚 References

  • Tool Schemas — How to call Stitch MCP tools.
  • Design Mappings — UI/UX keywords and atmosphere descriptors.
  • Prompting Keywords — Technical terms Stitch understands best.

💡 Best Practices

  • Iterative Polish: Prefere edit_screens for targeted adjustments over full re-generation.
  • Semantic First: Name colors by their role (e.g., "Primary Action") as well as their appearance.
  • Atmosphere Matters: Explicitly set the "vibe" (Minimalist, Vibrant, Brutalist) to guide the generator.

FAQ

What does the stitch-design skill do?

Unified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and high-fidelity screen generation/editing via Stitch MCP.

How do I install stitch-design?

Run npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/stitch-design/ (personal) or .claude/skills/stitch-design/ (project).

Which AI agents can use stitch-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is stitch-design safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk flagged items to review; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains stitch-design?

It is published by google-labs-code in google-labs-code/stitch-skills, and it is an official skill from the maker of the technology it covers. It has 25,095 recorded installs.

More from google-labs-code/stitch-skills

View all →

design-md

google-labs-code/stitch-skills

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

OfficialFrontend & Design64.9K installs

enhance-prompt

google-labs-code/stitch-skills

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

OfficialAI & Agents58.4K installs

stitch-loop

google-labs-code/stitch-skills

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

Official56.5K installs

shadcn-ui

google-labs-code/stitch-skills

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

OfficialFrontend & Design53.5K installs

react:components

google-labs-code/stitch-skills

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

Frontend & Design50.4K installs

remotion

google-labs-code/stitch-skills

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

OfficialMedia & Creative41.4K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs