Agent skill

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

View SKILL.md on GitHub Repository
Stars 3,802
Forks 426

Install this agent skill to your Project

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

SKILL.md

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 Intent Workflow Primary Tool
"Design a [page]..." text-to-design generate_screen_from_text + Download
"Edit this [screen]..." edit-design edit_screens + Download
"Create/Update .stitch/DESIGN.md" generate-design-md get_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
[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.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

google-labs-code/stitch-skills

shadcn-ui

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

3,802 426
Explore
google-labs-code/stitch-skills

design-md

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

3,802 426
Explore
google-labs-code/stitch-skills

stitch-loop

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

3,802 426
Explore
google-labs-code/stitch-skills

enhance-prompt

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.

3,802 426
Explore
google-labs-code/stitch-skills

react:components

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

3,802 426
Explore
google-labs-code/stitch-skills

taste-design

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

3,802 426
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results