Skills

Stitch Skills: generate and edit UI drafts after MCP is ready

For people who want to generate screens from text or images, edit existing drafts, or make variants in Google Stitch, provided Stitch MCP is already configured and running in the agent environment.

Official source · Stitch Skills

Install

npx skills add google-labs-code/stitch-skills

Who it is for

If you already use Google Stitch for interfaces and want a coding agent, following the open Agent Skills standard, to generate new screens, edit existing ones, or produce design variants, this set fits. It is a skill and plugin pack for Google Stitch. The explainer is

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

The product itself is

https://stitch.withgoogle.com/

The better fit is someone who has already registered Stitch MCP, has environment variables and credentials ready per the official install notes, and accepts only the skill install command below. These skills require Stitch MCP to be configured and running in the agent environment; without MCP, the skills have no design backend to call. Install notes are

https://stitch.withgoogle.com/docs/mcp/setup/

The first run should be a small, checkable generate or variant, not a rewrite of a whole production design system. Official docs name several coding environments; one of them says manual install is required, but no manual steps are given. Do not read the named roster as the only usable environments, and do not invent installers that are not written down. The pack follows the open Agent Skills standard. Skill names appear as stitch::generate-design; do not invent other stitch:: names that are not written. If you still lack a Stitch account or MCP credentials, go to the Setup docs first, do not run npx first.

First try in 3 minutes

Skills use only this official optional install command:

npx skills add google-labs-code/stitch-skills

Do not hunt for another marketplace, plugin, or second skill installer. After install, restart the agent and confirm the skill appears.

Prerequisite: Stitch MCP is registered per the Setup docs above, environment variables and credentials are set, and the process is running. If MCP is not ready, stop at configuration checks; do not call generate. This machine must also be able to run npx.

In an agent that already has the skill installed and MCP running, do a low-risk task: call stitch::generate-design, describe a sandbox screen in a short text (for example “an empty-state page with only a title and a primary button”), and first have it restate the prompt that will go to Stitch, whether it will edit an existing screen, and whether it will write local files. After you confirm it will only generate a new draft and not overwrite a formal one, allow it to continue.

Success signal: a matching new screen or an openable design result appears in Stitch, not fake HTML unrelated to Stitch. If the skill says the backend is unavailable, go back to whether MCP is running and whether credentials follow the official docs. Do not change the install command to try undocumented sources. If it asks for secret placeholders that do not appear in the docs, stop. Use only the environment variable names written on the Setup page.

Use cases

Case 1: Generate a new screen from text or an image. The note for stitch::generate-design is: generate new screens from text or images. Prepare one interface description, or a reference image you have the right to use, and let the skill produce a first draft in Stitch. Stop if the image path or text is not ready. Generation lands on the Stitch side and is an outbound call; confirm the prompt before running. Official docs do not give prompt templates or image-size limits. When those details are missing, keep the description short and do not fabricate parameters.

Case 2: Edit an existing screen or produce variants. The same skill also says it can edit existing screens and create design variants. Point to an existing draft in Stitch and ask for only one or two variants; do not overwrite in bulk. Official docs do not give a variant-count cap or a rollback button, so first have it say which screen it will change and whether it will save a variant separately; run only after you confirm. This is a different operation of the same skill as case 1, not another install. If the agent proposes an undocumented plugin command for the same job, refuse and keep using only the installed skill name.

Limits

Without a running Stitch MCP, this set cannot be used as an ordinary drawing skill. You must first finish server registration plus environment variables and credentials; official docs give no bypass for a missing piece. Do not treat the skill install command as an MCP install command.

Official skill install is only npx skills add google-labs-code/stitch-skills. The page also has an npx plugins add form with --target for a given host; that is a plugin landing, not the skill-install entry this guide uses. For environments whose roster says “manual install”, official docs give no copyable steps, so do not invent directory-copy or marketplace commands.

generate-design creates or edits screens in Stitch and is a side-effectful external call. Check the prompt, the target screen, and whether it will save separately before running. Official docs do not authorize shipping generated results straight to a production app, and they do not list skill names outside the table; do not guess capabilities that are not written. When generating from an image, use only a reference you have the right to use. Before editing an existing screen, confirm in Stitch that it is still a draft, so you do not overwrite a delivered interface.