stitch-design — stitch design system stitch-design, stitch-skills, official, stitch design system, ide skills, design system synthesis, high-fidelity screen generation, design systems lead, prompt engineer, design system context, Claude Code

Verified
v1.0.0
GitHub

About this Skill

Perfect for UI/UX-focused Agents needing advanced design system synthesis and high-fidelity screen generation via Stitch MCP stitch-design is a skill that provides a unified entry point for Stitch design work, handling prompt enhancement, design system synthesis, and high-fidelity screen generation via Stitch MCP.

Features

Handles prompt enhancement using UI/UX keywords and atmosphere
Performs design system synthesis via .stitch/DESIGN.md
Generates high-fidelity screens using Stitch MCP
Supports design system context analysis
Transforms rough intent into structured prompts
Bridges the gap between vague ideas and precise design specifications

# Core Topics

stitch design system design system synthesis high-fidelity screen generation design systems lead prompt engineer design system context
google-labs-code google-labs-code
[3.3k]
[360]
Updated: 3/26/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reviewed Landing Page Review Score: 11/11

Killer-Skills keeps this page indexable because it adds recommendation, limitations, and review signals beyond the upstream repository text.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution Quality floor passed for review Locale and body language aligned
Review Score
11/11
Quality Score
77
Canonical Locale
en
Detected Body Locale
en

Perfect for UI/UX-focused Agents needing advanced design system synthesis and high-fidelity screen generation via Stitch MCP stitch-design is a skill that provides a unified entry point for Stitch design work, handling prompt enhancement, design system synthesis, and high-fidelity screen generation via Stitch MCP.

Core Value

Empowers agents to transform rough design intent into structured prompts using professional UI/UX terminology and design system context, synthesizing design systems via .stitch/DESIGN.md files and generating high-fidelity screens through Stitch MCP, leveraging design system synthesis and prompt enhancement capabilities

Ideal Agent Persona

Perfect for UI/UX-focused Agents needing advanced design system synthesis and high-fidelity screen generation via Stitch MCP

↓ Capabilities Granted for stitch-design

Enhancing vague design ideas into precise design specifications
Generating high-fidelity screens for design prototypes using Stitch MCP
Synthesizing design systems from .stitch/DESIGN.md files for consistent UI designs

! Prerequisites & Limits

  • Requires Stitch MCP server access
  • Limited to design systems compatible with .stitch/DESIGN.md file format

Source Boundary

The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is stitch-design?

Perfect for UI/UX-focused Agents needing advanced design system synthesis and high-fidelity screen generation via Stitch MCP stitch-design is a skill that provides a unified entry point for Stitch design work, handling prompt enhancement, design system synthesis, and high-fidelity screen generation via Stitch MCP.

How do I install stitch-design?

Run the command: npx killer-skills add google-labs-code/stitch-skills/stitch-design. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for stitch-design?

Key use cases include: Enhancing vague design ideas into precise design specifications, Generating high-fidelity screens for design prototypes using Stitch MCP, Synthesizing design systems from .stitch/DESIGN.md files for consistent UI designs.

Which IDEs are compatible with stitch-design?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for stitch-design?

Requires Stitch MCP server access. Limited to design systems compatible with .stitch/DESIGN.md file format.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add google-labs-code/stitch-skills/stitch-design. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use stitch-design immediately in the current project.

Imported Repository Instructions

The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

Supporting Evidence

stitch-design

Install stitch-design, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly
Imported Repository Instructions
The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.
Supporting Evidence

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:

markdown
1[Overall vibe, mood, and purpose of the page]
2
3**DESIGN SYSTEM (REQUIRED):**
4- Platform: [Web/Mobile], [Desktop/Mobile]-first
5- Palette: [Primary Name] (#hex for role), [Secondary Name] (#hex for role)
6- Styles: [Roundness description], [Shadow/Elevation style]
7
8**PAGE STRUCTURE:**
91. **Header:** [Description of navigation and branding]
102. **Hero Section:** [Headline, subtext, and primary CTA]
113. **Primary Content Area:** [Detailed component breakdown]
124. **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

💡 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.

Related Skills

Looking for an alternative to stitch-design or another official skill for your workflow? Explore these related open-source skills.

View All

flags

Logo of facebook
facebook

Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.

★ 244.2k
⑂ 0
Developer

extract-errors

Logo of facebook
facebook

extract-errors is a React error handling skill that automates the process of extracting and assigning error codes, ensuring accurate and up-to-date error messages in React applications.

★ 244.2k
⑂ 0
Developer

fix

Logo of facebook
facebook

fix is a code optimization skill that automates formatting and linting using yarn prettier and linc.

★ 244.2k
⑂ 0
Developer

flow

Logo of facebook
facebook

Use when you need to run Flow type checking, or when seeing Flow type errors in React code.

★ 244.2k
⑂ 0
Developer

Related Collections

View All Collections →
■12 Official AI Agent Skills & Trusted Tools to Install First[12]