What is stitch::generate-design?

A design-generation skill for Stitch, a tool that creates user-interface screens from text, images, or mockups. It can also edit existing screens and create design variations using a project's design tokens, such as colors, fonts, and corner shapes.

Use it to create, edit, or vary web and app screens from descriptions, screenshots, or mockups.

It gives Stitch more structured instructions and keeps generated screens aligned with the project's existing design system. It also handles the project and design-system checks needed before generation.

stitch::generate-design — Skill for Claude Code by google-labs-code: A design-generation skill for Stitch, a tool that creates…

About the project

Stitch Design Skills is a collection of Agent Skills and plugins for Google Stitch, a design tool accessed through the Stitch MCP server. It is for coding agents such as Codex, Antigravity, Gemini CLI, Claude Code, Cursor, and OpenCode, with catalogue entries covering Stitch design, build, and utility workflows.

google-labs-code/stitch-skills · 8,256 stars · on GitHub · stitch.withgoogle.com

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add skills/google-labs-code/stitch-skills/generate-design

Any agent

npx skills add google-labs-code/stitch-skills --skill generate-design

Clone the repo

git clone --depth 1 https://github.com/google-labs-code/stitch-skills

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/google-labs-code/stitch-skills/generate-design.svg)](https://agentmods.dev/skills/google-labs-code/stitch-skills/generate-design)

Your own site

<a href="https://agentmods.dev/skills/google-labs-code/stitch-skills/generate-design"><img src="https://agentmods.dev/badge/skills/google-labs-code/stitch-skills/generate-design.svg" alt="Measured on agentmods" height="20"></a>

Per session 54 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,615 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 1 finding. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00054	$0.02615
Opus 5	$0.00027	$0.01307
Sonnet 5	$0.00011	$0.00523
Haiku 4.5	$0.00005	$0.00262

Measured 7d ago against content hash d03d2de3a0ce, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

stitch::generate-design scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

- **Tools**: Use `curl -o` via `run_command` or similar.

plugins/stitch-design/skills/generate-design/SKILL.md · 340 lines

How it starts

The opening of the file, as written. The whole thing — 340 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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., list_projects, generate_screen_from_text, edit_screens).

🎨 Prompt Enhancement Pipeline

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

1. Analyze Context

Project: Use list_projects to find the correct projectId. If no suitable project exists, create one using create_project.
Design System: Check if a design system exists for the project via list_design_systems. 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:

[Overall purpose and user intent of the page]

**PLATFORM:** [Web/Mobile], [Desktop/Mobile]-first

**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]

Read the full file on GitHub · 340 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

7d ago First seen · 340 lines · 54 tokens per session scan A d03d2de3a0ce

Subscribe to this mod's changes

stitch::generate-design is a skill published in the GitHub repository google-labs-code/stitch-skills (8,256 stars, last pushed 19d ago), licensed Apache-2.0. It adds 54 tokens to every session and 2,615 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Design and UX

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

stitch::generate-design