stitch::generate-designby Google Labs

Stitch Generate Design Skill.

A Claude Code and Codex skill for UI design: generates, edits, and varies screens in Stitch from text or reference images.

Web & UI
Design file

Download OpenDesign View usage guide

google-labs-code/stitch-skills · plugins/stitch-design/skills/generate-design/SKILL.mdSKILL.md

--- name: stitch::generate-design description: - 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. --- ## 🎨 Prompt Enhancement Pipeline ## Steps ## 💡 Tips

Front matter and section headings read from the upstream file on 2026-09-14 · 10,959 characters in full

01 What it does

What the stitch::generate-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill drives Stitch MCP through four flows: generating a new screen from text, recreating an image or mockup, editing an existing screen, and generating variants. Before any generation or edit call it runs a prompt enhancement pipeline that resolves the project and design system, swaps vague wording for UI/UX terminology from its design mappings, and formats the prompt around layout, content and structure, using a template with PLATFORM and PAGE STRUCTURE sections.

Visual styling stays at project level, so generation prompts must carry no hex codes, fonts or roundness values. AI feedback is surfaced after every call and assets are downloaded to .stitch/designs.

What it produces

The generated screen's HTML and screenshot, downloaded into the .stitch/designs directory.
The AI text description and suggestions returned in outputComponents, shown to the user.
Variant screens for the chosen direction, in batches of one to five.

See the example prompt ↗

How It Works

01
Enhance the Prompt Before Anything Else
The pipeline is mandatory, not optional: the agent rewrites the user's request before it is allowed to call a Stitch generation or editing tool.
02
Check What the Project Already Styles
If the project already has a design system, colors, fonts and roundness are applied at project level, so the enhanced prompt must leave visual styling out entirely.
03
Format the Prompt as Platform Plus Page Sections
New screens follow a template that states overall purpose first, then PLATFORM, then a numbered PAGE STRUCTURE running from Header through Footer.
04
Pick One of the Four Flows
The request is routed to Generate from Text, Generate from Image, Edit, or Generate Variants before any tool is called.

02 Find your fit

When to Use the stitch::generate-design Skill

Use the stitch::generate-design skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Starting a brand-new screen from a written description of the page.
Recreating something you already have as an image, screenshot or mockup.
Making a targeted change to a screen that already exists in the project.
Exploring alternative layouts, color schemes or copy for a screen you have.

Know the Boundaries

It will not generate screens before a design system exists: if the project has none, the work is handed off to the manage-design-system skill first.
Uploading an image is not done here; the image first becomes screen content through the upload skill, and only then is it refined with edits.

What to Provide

InputThis is what the enhancement pipeline rewrites into a structured Stitch prompt.
The target projectThe agent looks the project up by id, and creates one only when no suitable project exists.
The screen for edits or variantsEdits and variants need both the projectId and the screenId, found by listing or fetching screens.

03 Inside the skill

Rules the stitch::generate-design Skill Gives Claude Code and Codex

6 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

No Theme Leakage in Generation Prompts
Never put hex codes, font names or color roles in a generation prompt; the design system handles all visual styling and duplication conflicts.
Hex Codes Only When Editing
Exact hex values are permitted for precise color matching in edit prompts, which is the one place the generation-prompt ban does not apply.
Always Surface outputComponents
After any Stitch tool call, the agent must show the user the Text Description and Suggestions returned, not just the resulting screen.
Edit Rather Than re-generate
Full re-generation is reserved for a wrong fundamental layout; everything else should go through targeted edits.
Overwrite the Local Copies After an Edit
The updated HTML and screenshot urls are downloaded again over the previous files so the local files reflect the latest edits.
Keep .stitch/metadata.json in Sync
After downloading assets, metadata is updated with changed screen titles or new screen IDs; the file tracks all screens, device types and design system info.

04 Put it to work

Install stitch::generate-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add stitch::generate-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for plugins/stitch-design/skills/generate-design/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Adapt this prompt with your own content and constraints, then run it in Claude Code or Codex.

Example prompt

This is a dashboard mockup — recreate it with a proper data table, sidebar navigation, and chart widgets.

Source: SKILL.md example (verbatim).

Check the First Result

What the SKILL.md itself says a correct result looks like:

Look at the output screen and confirm the requested changes actually landed.
If the result is not exactly as expected, continue in the Edit flow instead of regenerating; repeat with a fresh specific prompt when more polish is needed.
Before generating, verify whether a design system exists for the project.

In OpenDesign import stitch::generate-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Skill file: plugins/stitch-design/skills/generate-design/SKILL.md Content checksum recorded at verification; commit 0337446
License: Apache-2.0 From LICENSE.
Repository stars: 8,304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for stitch::generate-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

🎨 Prompt Enhancement PipelineAnalyze context, replace vague terms, structure the prompt, surface AI insights
StepsMode selection plus text, image, edit and variants flows with their tool calls
💡 TipsBe structural, content first, iterative polish, no theme leakage, focused edits
📚 ReferencesDesign mappings, prompting keywords and a before/after enhanced prompt example

The Skill's Own Description

“- 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.”

Front-matter description from SKILL.md. The full file is about 10,959 characters. Read the full file on GitHub.

06 Before you install

Questions About the stitch::generate-design Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Do I need to configure tool names before it works?

The skill calls Stitch MCP tools such as list_projects, generate_screen_from_text and edit_screens, and its own note says to follow your system prompt for how MCP tool prefixes are handled. So the prefix convention comes from your setup, not from the skill.

How do variants differ from edits?

Edits change the screen you have; variants explore alternatives around it through the generate_variants tool. You can drive the direction with creativeRange — REFINE for subtle, EXPLORE for balanced, REIMAGINE for radical — and narrow the aspects or leave them empty for all.

Can I start from a screenshot or mockup instead of a description?

Yes. The image is handed to the upload-to-stitch skill to put it into the project, after which the agent finds the new screenId and refines the design with an edit prompt describing what to adjust or recreate.

Stitch Generate Design

Run stitch::generate-design on a Real UI Design Task.

Download OpenDesign, import stitch::generate-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills