Skip to content
Get packs

Generate Stitch Design Screens

Lets an agent create, edit and download UI screens from text or images using Google Stitch.

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
4 files

What it does

This skill teaches an AI agent how to produce user interface screens through Google's Stitch design tool. Before generating, the agent rewrites a plain request into precise layout and component language, checks for an existing design system, and calls Stitch to create or edit screens. It can also download the resulting HTML and screenshots into a local .stitch/designs folder.

Great for

  • Designers who want fast first drafts of web or mobile screens from a description
  • Developers prototyping a UI layout before building it in code
  • Teams already using Google Stitch and its MCP tools

Skip it if

  • Final production UI, since generated HTML is a starting point and needs review (accuracy and quality are not guaranteed)
  • Users without a Stitch account or MCP connection, because the skill cannot call Stitch tools without them
  • Sensitive or confidential mockups uploaded to a third-party service, since image and prompt content is sent to Stitch

Try asking

  • “Generate a mobile login screen with a header, form and a primary call-to-action button”
  • “Recreate this dashboard screenshot as a Stitch screen with a sidebar and data table”
  • “Change the hero button to a darker blue and add a subtle shadow on my existing landing page screen”
  • “Create three layout variants of my pricing page”
Step-by-step guide: how to use Generate Stitch Design ScreensInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the Apache-2.0 licence and an attribution note.

    generate-design.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip generate-design.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip generate-design.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Keep colours and fonts out of generation prompts; set them through the design system so they do not conflict.
  • Describe the intent behind an uploaded image rather than asking the agent to copy it exactly.
  • Review the downloaded HTML and screenshots before reusing them, and check the AI feedback the tool returns.

What's inside

  • examples/enhanced-prompt.md
  • references/design-mappings.md
  • references/prompt-keywords.md
  • SKILL.md

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.