google-labs-code/stitch-skills
Overview
This skill teaches agents to iteratively build and integrate pages using the Stitch MCP in an autonomous baton-passing loop. Each iteration reads a baton file, generates a page with Stitch tools, integrates the output into the site, updates documentation, and writes the next baton to continue the loop. It focuses on reliable handoffs, reproducible prompts, and maintaining site consistency.
How this skill works
The agent parses next-prompt.md to extract the target page name and the full prompt (including the DESIGN.md design system block). It uses Stitch MCP calls to create or select a project, generate a screen, and download HTML and screenshot assets into a staging queue. The agent then moves the generated HTML into site/public, fixes asset paths and navigation links, updates SITE.md sitemap/roadmap, and writes a new next-prompt.md to pass the baton to the next iteration.
When to use it
- Automating incremental frontend work for a Stitch-based site
- Running continuous site growth via CI/CD or agent chains
- Prototyping many pages quickly while preserving a shared design system
- Handing off work between multiple autonomous agents
- Maintaining a repeatable generation-and-integration workflow
Best practices
- Always include the DESIGN.md design system block inside the baton prompt to ensure visual consistency
- Check SITE.md sitemap and roadmap before generating to avoid recreating existing pages
- Persist stitch.json after creating a project so future iterations reuse the same projectId
- Wire placeholder links (href="#") to the new page and keep headers/footers consistent across pages
- Update next-prompt.md before finishing each iteration — failing to do so breaks the loop
Example use cases
- A CI job triggers an agent to add one roadmap item per commit and updates the baton for the next job
- An agent chain where one agent generates a page and another verifies visuals using Chrome DevTools MCP
- A developer-run loop to rapidly prototype site sections while preserving a single design system
- A human-in-loop process where the agent generates assets and a reviewer approves navigation changes and baton selection
FAQ
Stitch generation will likely produce inconsistent styles. Always copy Section 6 (design system) from DESIGN.md into the baton before generating.
How do I avoid duplicating pages already in the site?
Read SITE.md Section 4 (Sitemap) first; if a page is already listed, pick a different roadmap or creative freedom item. The agent must not recreate existing pages.
6 skills
This skill helps you iteratively build web pages with Stitch using a baton-loop, delivering pages and next tasks for continuous improvement.
This skill helps you discover, install, and customize shadcn/ui components in your project with best practices and zero runtime overhead.
This skill generates Remotion walkthrough videos from Stitch screens, applying smooth transitions, zoom effects, and contextual text overlays for engaging
This skill transforms vague UI ideas into polished Stitch prompts with design system context and structured output for better generation results.
This skill converts Stitch designs into modular React components with TypeScript interfaces and automated validation to ensure clean, reusable code.
This skill analyzes Stitch projects and synthesizes a semantic design system into DESIGN.md to ensure new screens align with the existing design language.
