Get started with Agent Skills

Stitch Design Skills are agent instructions that extend your coding agent with design superpowers — generating screens, extracting design systems, building multi-page sites, and converting designs to React components. They work with any agent that supports the Agent Skills standard: Gemini CLI, Claude Code, Cursor, or Antigravity.

Install the plugin suite

Run this from your project directory:

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

This installs all three plugins (stitch-design, stitch-build, stitch-utilities) with 13 skills total.

Pick your agent target

# Claude Code
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

# Cursor
npx plugins add google-labs-code/stitch-skills --scope project --target cursor

# Gemini CLI
npx plugins add google-labs-code/stitch-skills --scope project --target gemini-cli

Antigravity users: The plugins CLI does not yet support Antigravity as a target. Use the npx add-skill command in the Install selectively section instead.

Install selectively (optional)

If you only need specific skills, run the following command and select the skills you want:

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

Many skills depend on each other. The code-to-design skill, for example, requires extract-static-html, extract-design-md, and upload-to-stitch. The full plugin install is the safer choice.

Connect the Stitch MCP server

The skills talk to Stitch through the Model Context Protocol. Follow the Stitch MCP Setup Instructions to register the server and configure your API credentials.

Once connected, your agent gains access to tools like list_projects, generate_screen_from_text, and get_screen.

Verify the connection

You should see your existing projects — or an empty list if this is your first time using Stitch. If you see an error, double-check that the MCP server is running and your API key is valid.

Generate your first screen

Start with a rough idea. The enhance-prompt skill transforms vague concepts into structured, generation-ready prompts.

Notice the output — the skill adds a platform specification, structures the page into numbered sections, replaces vague terms with specific UI/UX keywords, and generates a design system block with color roles. This enhanced prompt produces dramatically better results than the original.

Now generate:

This takes 15–30 seconds. When complete, you’ll see a confirmation with the screen ID and file paths. Open the generated screenshot to see your design — a complete landing page with hero section, feature cards, navigation, and footer, all from a single text prompt.

What’s next

You’ve installed skills, connected to Stitch, and generated your first screen. Here’s where to go from here:

• Import from your codebase — Extract a DESIGN.md from existing source code
• Code to Design roundtrip — Import a React app into Stitch, edit the design, export back to components
• Build in a loop — Generate an entire website from a single concept
• Skill reference — Full catalog of all 13 skills

Troubleshooting

Problem	Fix
npx plugins not found	Install Node.js 18+: node --version
MCP server not responding	Verify setup: MCP Setup guide
Skills not visible in agent	Restart the agent session after installation
Permission errors	Use --scope project instead of --scope global
API key errors	Confirm the key in your agent’s MCP config hasn’t expired