What is the stitch-generate-design skill?
The stitch-generate-design skill is the main prompt-to-screen workflow in the Stitch plugin set. It requires the agent to rewrite your request in professional UI terms first, then call Stitch to generate from text or an image, edit a screen, or produce variants, and save the HTML and screenshots.
The skill covers four jobs inside the stitch-design plugin: new screens from text, new screens from an image or mockup, edits to an existing screen, and variants of one. All of them call the Stitch MCP server through your agent.
Its distinctive rule is that every request passes through a prompt enhancement pipeline before any Stitch tool runs. The SKILL.md says the agent must enhance the prompt, not forward it as typed.
The prompt enhancement pipeline
- Analyze context. Find the project with list_projects, creating one with create_project if needed, and check list_design_systems.
- Refine the wording using the bundled design mappings and prompting keywords, so a vague header becomes a sticky navigation bar with a centered logo.
- Structure the prompt around purpose, platform and page structure. Colors, fonts and themes are left out of generation prompts.
- Show the outputComponents text description and suggestions to the user after each call.
Four flows, one skill
- Text: generate_screen_from_text takes the enhanced prompt, an optional design system and a device type of mobile, desktop or tablet.
- Image: the image goes up through upload-to-stitch, then edit_screens refines it from a prompt that states the intent of the mockup.
- Edit: edit_screens takes selected screen IDs and a targeted prompt, and hex codes are allowed here for precise color changes.
- Variants: generate_variants takes a count, a creative range and the aspects to vary.
Who the stitch-generate-design skill is for
Best for
- Designers and developers who prompt Stitch often and want consistent, structural prompts.
- Teams with a Stitch design system, since tokens apply at project level and stay out of the prompt.
- Anyone exploring alternatives, because variants expose layout, color, images, font and text as separate aspects.
Not for
- Building a multi-page site from a loop of prompts. stitch-loop is designed for that.
- Only polishing a rough prompt. The standalone enhance-prompt skill does that.
- Converting finished screens to code. Pair this one with a build skill.
Use it with UiChemy
The skill produces Stitch screens, not WordPress pages. When a design is approved, UiChemy can bring AI builds into WordPress, or work from Figma and Composer. Click Get Started on uichemy.com. Related: stitch-design-taste.
How to install Stitch Generate Design Skill: Screens, Edits and Variants from Prompts
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeConnect Stitch
Complete the Stitch MCP setup at https://stitch.withgoogle.com/docs/mcp/setup/. Every flow in this skill calls tools such as list_projects and edit_screens through that server.
Add the plugin to your project
In Claude Code, run
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code. In Cursor, run it with--scope workspace --target cursor. The skill is in stitch-design.Use the Codex marketplace
Run
codex plugin marketplace add google-labs-code/stitch-skills --ref mainand install the stitch-design plugin.Prompt it
Describe a screen, hand over an image, or name a screen to edit. The agent chooses the matching flow.
Check that it loaded
Ask for a new landing screen. The agent should rewrite your prompt with page structure, call generate_screen_from_text, show you the suggestions and save HTML and a screenshot under .stitch/designs.
Key features
- Mandatory prompt enhancementBefore any generation or edit tool is called, the agent must analyze context, refine terminology and structure the prompt.
- Design mappings and keywordsReference files map vague phrases to professional UI terms and list component names, adjective palettes, color roles and shape descriptions.
- Project and design system checkThe agent finds or creates a project and checks for a design system. If none exists it hands off to the manage-design-system skill first.
- Layout-only generation promptsGeneration prompts cover purpose, platform and page structure, and never include hex codes, font names or roundness, which clash with project tokens.
- Image and mockup flowA picture is uploaded as a new screen, then edited with a prompt such as recreating a dashboard mockup with a data table, sidebar and chart widgets.
- Targeted editsEdit prompts name a location, a visual change and any structural addition, and the skill advises one focused edit at a time.
- Variant controlsvariantCount runs from 1 to 5, with a default of 3. creativeRange is REFINE, EXPLORE or REIMAGINE, and aspects include LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT and TEXT_CONTENT.
- Asset downloadHTML and screenshot URLs from outputComponents are saved into .stitch/designs, named by screen ID or a descriptive slug.
- Metadata syncAfter an edit, .stitch/metadata.json is updated so screen titles, IDs, device types and design system info stay current.
Frequently asked questions
What does the stitch-generate-design skill do?
It lets an agent create Stitch screens from text or images, edit existing screens and generate variants. Before each call it enhances your prompt using design mappings and professional UI vocabulary, then it saves the returned HTML and screenshots under .stitch/designs.
Why are colors and fonts kept out of generation prompts?
Design tokens such as colors, fonts and roundness are applied at the project level through a design system. The skill warns that repeating them in a generation prompt causes conflicts. Edit prompts are the exception, where a hex code is fine for a precise color change.
What variant settings can I control?
You can ask for 1 to 5 variants, with 3 as the default. The creative range is REFINE for subtle changes, EXPLORE for balanced ones or REIMAGINE for radical ones. Aspects include layout, color scheme, images, text font and text content, or you can leave them empty.
How do I install the stitch-generate-design skill?
Register the Stitch MCP server, then run the repository's plugin install, for example npx plugins add google-labs-code/stitch-skills with a project scope and your agent as the target. Codex users add the repo as a plugin marketplace instead.
How does the image flow work?
The agent uploads your image with the upload-to-stitch skill, which creates a screen, then finds the new screen ID and calls edit_screens. The tip is to describe the intent of the image, such as a dashboard mockup to rebuild with a table and sidebar, instead of saying make it like this.
What happens if the project has no design system?
The skill delegates to manage-design-system first, so tokens exist before screens are generated. If a design system already exists, the agent passes its ID to the generation call and leaves all color and font instructions out of the prompt.
Should I regenerate or edit when a result is close?
Edit. The skill says not to regenerate from scratch unless the fundamental layout is wrong, and recommends one focused edit at a time. After each edit the agent downloads the updated files over the old ones so local copies match the latest version.