Agent skill · design visual · google-labs-code
stitch::generate-design
Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities.
Why this skill is useful
Provides a structured prompt enhancement pipeline and specific design mappings that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-07-30. 7,933 stars on the source repository.
What this skill does
Generate Design Create new design screens from text descriptions, images, or mockups, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. [!NOTE] Refer to your system prompt for instruction on handling MCP tool prefixes for all tools mentioned in this skill (e.g., listprojects, generatescreenfromtext, editscreens). 🎨 Prompt Enhancement Pipeline Before calling any Stitch generation or editing tool, you MUST enhance the user's prompt. 1. Analyze Context Project: Use listprojects to find the correct projectId. If no suitable project exists, create one using createproject. Design System: Check if a design system exists for the project via listdesignsystems. If one exists, design tokens (colors, fonts, roundness) are already applied at the project level — do NOT include any color, font, or theme instructions in the generation prompt. If none exists, delegate to the manage-design-system skill first before generating screens. 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" Use Prompting Keywords for component names, adjective palettes, color roles, and shape descriptions. 3. Structure the Final Prompt Format the enhanced prompt for Stitch. Focus exclusively on layout, content, and structure — never include colors, fonts, or theme instructions (these are handled by the manage-design-system skill at the project level). For new screens, use this template: For edits, be specific about what to change: Location: "Change the [primary button] in the [hero section]..." Visuals: "...to a darker blue (#004080) and add a subtle shadow." Structure: "Add a secondary button next to the primary one with the text 'Learn More'." [!CAUTION] Do NOT include hex codes, font names, color palettes, roundness values, or any design system tokens in a generation prompt. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills google-labs-code/generate-design