stitch::generate-design — Skills

What it does

Project: Use listprojects to find the correct projectId. If no

Design System: Check if a design system exists for the project via

Vague: "Make a nice header"

Professional: "Sticky navigation bar with glassmorphism effect and centered

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

Source

Repository: https://github.com/google-labs-code/stitch-skills

stitch::generate-design FAQ

What does the stitch::generate-design skill do?

>- 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. Project: Use listprojects to find the correct projectId. If no Design System: Check if a design system exists for the project via

What does stitch::generate-design require?

Configuration keys: REFINE, EXPLORE, REIMAGINE, LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT.

How do I install stitch::generate-design?

Run: npx -y skills add https://github.com/google-labs-code/stitch-skills --skill stitch::generate-design --agent claude-code — the source lives at github.com/google-labs-code/stitch-skills.

Maintain stitch::generate-design?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![stitch::generate-design on getagentictools](https://getagentictools.com/badge/skills/google-labs-code-stitch-skills-stitch-generate-design.svg)](https://getagentictools.com/skills/google-labs-code-stitch-skills-stitch-generate-design?ref=badge)

npx agentictools info skills/google-labs-code-stitch-skills-stitch-generate-design

The second line is the CLI lookup for this page — handy in READMEs and docs.