Guide · Agent skill
How to use the Generate Stitch Design Screens agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The stitch::generate-design skill teaches an AI agent to create, edit and vary user interface screens in Google's Stitch design tool. It suits designers who want fast first drafts, developers who want to prototype a layout before coding it, and teams already using Stitch. After this guide you will know what the skill does, how to install it, how to phrase requests so the agent uses it, and what to check before you rely on the output.
Generate Stitch Design Screensgoogle-labs-code/stitch-skills · Apache-2.0 Download the skill Quick start
- 1Connect Stitch. Set up a Google Stitch MCP server connection so the agent can call Stitch tools. The skill cannot work without it.
- 2Install the skill. Download the ZIP from this page and unzip it into ~/.claude/skills/, or into a project's .claude/skills/ folder. In the Claude apps, upload it under Settings → Capabilities → Skills.
- 3Make a request. Describe the screen in plain language, including the product, audience and main content. Leave colours and fonts out of generation requests.
- 4Review the AI feedback. Read the text description and suggestions the tool returns. Use them to decide whether to edit or accept the layout.
- 5Check the downloaded files. Open the HTML and screenshots saved in .stitch/designs and review them before using any code in a project.
What the skill makes the agent do
Without this skill, an agent sends your request to Stitch as written. With it, the agent first rewrites a plain request such as 'make a nice header' into precise layout and component language, for example 'sticky navigation bar with logo and list items'. It checks whether the project already has a design system, then calls Stitch to create a new screen or edit an existing one.
After generation, the agent can download the resulting HTML and screenshots into a local .stitch/designs folder so you can open them outside the chat.
- Generate a new screen from a text description
- Generate a screen from an image, screenshot or mockup (via the upload-to-stitch skill)
- Edit an existing screen with a targeted prompt
- Create design variants of a screen
What you need before installing
The skill cannot do anything on its own. It calls Stitch tools, so you need a working Google Stitch MCP server connection that exposes tools such as list_projects, generate_screen_from_text and edit_screens. The source does not describe how to set up that connection, so check your agent's documentation or Stitch's own setup guidance.
The skill also expects Bash and file write access so it can save assets into .stitch/designs, and curl available for downloading screen HTML and screenshots. Two related skills are used for specific jobs: manage-design-system for design tokens and upload-to-stitch for image upload.
- A Google Stitch MCP server connection
- Bash and file write access in your agent
- curl available on the machine
- Optional related skills: manage-design-system and upload-to-stitch
Install the skill from the ZIP or the Claude apps
Download the skill ZIP from this page and unzip it. For a personal install, place the unzipped skill folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead.
If you use the Claude apps, you can upload the skill instead. Open Settings, go to Capabilities, then Skills, and upload it there.
- Personal install: ~/.claude/skills/
- Single project install: the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need a special command. Describe the screen you want in ordinary language and say what it is for. The agent chooses the right flow: a text description starts the Generate from Text flow, an image or mockup starts the Generate from Image flow, and a request to change an existing screen starts the Edit flow.
Good requests name the product, the audience and the main content. Leave colours, fonts and theme out of generation requests, because the skill applies those through the project's design system. If you need a specific colour change, ask for it in an edit request.
- 'Make a landing page for my fitness app called Pulse with a hero section and a features area.'
- 'Turn this dashboard screenshot into a Stitch screen with a data table, sidebar navigation and chart widgets.'
- 'On the checkout screen, add a secondary button next to the primary one labelled Learn More.'
- 'Give me three layout variants of the pricing page.'
Safety notes: network access and uploaded content
The skill uses the network, because it calls Stitch and downloads screen files. It does not run scripts. Prompt text and image content are sent to Stitch, so do not use this skill with sensitive or confidential mockups unless your organisation is comfortable with that third-party service.
Downloaded files are written to .stitch/designs. After an edit, the agent overwrites the previous local versions so they match the latest changes. Review generated HTML before using it, since accuracy and quality are not guaranteed.
- Network use: yes, to reach Stitch and download files
- Scripts: none run
- Prompts and images leave your machine for Stitch
- Local files are overwritten after edits
Tips for better results
Start with a clear layout request and let the agent generate once. If the layout is wrong, ask for an edit rather than a full regeneration, since the skill itself recommends editing unless the fundamental layout is wrong.
Describe the intent behind an image instead of asking the agent to copy it exactly. The skill's own example is to say it is a dashboard mockup and ask for a proper data table and sidebar.
- Describe purpose and content, not colours or fonts, in generation prompts
- Use edits for small fixes and specific visual changes
- Check the AI description and suggestions the tool returns
- Treat output as a starting point for review
What people use it for
- A designer turns a written brief into a first draft of a web landing page.
- A developer sketches a mobile settings screen to test layout before writing front-end code.
- A team recreates an existing dashboard screenshot as an editable Stitch screen.
- A designer generates several layout variants of a pricing page to compare.
Frequently asked questions
Is the Generate Stitch Design Screens skill free?
The skill is published under the Apache-2.0 licence. The source does not list prices for Google Stitch, so check Stitch's own terms and any account requirements before you rely on it.
What do I need to install and use this skill?
You need a Google Stitch MCP server connection, Bash and file write access in your agent, and curl available on the machine. You also need a Stitch account, since the skill cannot call Stitch tools without it.
How do I install the stitch::generate-design skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, upload it under Settings → Capabilities → Skills.
Why won't the agent generate screens with this skill?
The most likely cause is a missing Stitch MCP connection, because the skill cannot call Stitch tools without one. Confirm that the Stitch tools such as list_projects and generate_screen_from_text are available to your agent, then try again.
Can I use the generated HTML in production?
Not without review. The source says generated HTML is a starting point, and accuracy and quality are not guaranteed. Test and check it before using it in a live product.
Does the skill send my designs to a third party?
Yes. Prompt text and image content are sent to Google Stitch. Avoid sensitive or confidential mockups unless that is acceptable for your organisation.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want fast first drafts of web or mobile screens from written descriptions and you already use Google Stitch. Pick another approach if you need final production UI, if you cannot connect a Stitch account, or if your mockups are too sensitive to send to a third-party service.
Download the skill