AIArticle
Google's new Stitch skills library introduces the baton pattern to turn coding agents into autonomous frontend builders.
The Model Context Protocol (MCP) has quickly become the plumbing of the AI developer ecosystem. But exposing tools, like a file writer or a database client, to an LLM is only half the battle. The harder half is teaching the agent how to use those tools in a logical, multi-step sequence without losing its context halfway through.
Google's release of the google-labs-code/stitch-skills library tackles this orchestration problem head-on. By packaging complex frontend workflows into standardized "skills" designed for the Google Stitch MCP server, it shifts the paradigm from one-shot code generation to autonomous, stateful development loops.
The Shift from Tools to Agent Skills #
An MCP tool is a raw API endpoint. It is stateless, passive, and relies entirely on the LLM's reasoning engine to decide when and how to call it. An "Agent Skill," following the Agent Skills open standard, is a higher-level behavioral blueprint. It teaches the agent a structured methodology for coordinating multiple tools, handling errors, and maintaining state across separate runs.
The stitch-skills
library targets coding assistants like Claude Code, Cursor, and Codex. Instead of requiring developers to write long, fragile system prompts to guide these assistants through complex design-to-code tasks, the library provides pre-packaged capabilities divided into three core plugins:
Design ( Handles core visual workflows, such as converting frontend code to a Stitch design via HTML extraction, generating new screens, and extracting design systems into a markdown file.stitch-design
):Build ( Manages code generation, framework integration (such asstitch-build
):shadcn/ui), and asset compilation, including converting Stitch screens into React or React Native components.Utilities ( Provides helper tools for prompt enhancement, spec generation, and design standard enforcement.stitch-utilities
):
According to registry data, developer interest has concentrated heavily on design extraction and autonomous loops rather than simple component generation:
xychart-beta
title "Stitch Skills Installs (Thousands)"
x-axis [design-md, enhance-prompt, stitch-loop, shadcn-ui, react-comp, remotion, stitch-design, taste-design]
y-axis "Installs" 0 --> 50
bar [47.1, 42.6, 42.0, 38.4, 36.4, 28.0, 25.2, 10.4]
The Baton Pattern and Autonomous Loops #
The most compelling capability in this library is stitch-loop
. It addresses a fundamental limitation of current coding agents: their inability to build multi-page applications without constant human intervention.
Historically, building a multi-page site meant prompting the agent for page A, waiting for the code, copying the design tokens, prompting for page B, and manually wiring the navigation. The stitch-loop
skill automates this via a file-based state machine called the "baton" pattern.
Instead of keeping state in the LLM's volatile context window, the agent persists its state in a local file named next-prompt.md
. Each iteration of the loop follows a strict protocol:
Read the Baton: The agent parsesnext-prompt.md
to extract the current page target and the prompt instructions.Consult Context: It readsSITE.md
(which tracks the sitemap, roadmap, and project metadata) andDESIGN.md
(which stores the visual design system tokens).Generate and Integrate: The agent calls the Stitch MCP server to generate the page, downloads the HTML and assets, moves them to the production public directory, and automatically updates the site's global navigation links.Write the Next Baton: Before exiting, the agent updatesnext-prompt.md
with instructions for the next page in the queue, effectively passing the baton to the next run.
This file-based state management is a brilliant, low-tech solution to the context-drift problem. If the agent run crashes or hits a rate limit, the entire state of the build pipeline is safely serialized on disk, ready to resume.
Setting Up a Self-Sustaining Frontend Workspace #
To adopt these skills, developers must have the Stitch MCP server configured and running in their agent's environment.
For a project-scoped installation using Claude Code, the plugins can be added directly via the command line:
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code
If you prefer to install only the autonomous loop and its design-system extractor, you can target those skills selectively:
npx skills add google-labs-code/stitch-skills --skill design-md
A typical workspace configured for autonomous generation uses a structured directory layout to separate staging assets from production code:
project/
├── next-prompt.md # The active baton file
├── stitch.json # Persisted Stitch project metadata
├── DESIGN.md # Visual design system (generated via design-md)
├── SITE.md # Site vision, sitemap, and roadmap
├── queue/ # Staging area for raw Stitch HTML and screenshots
│ ├── about.html
│ └── about.png
└── site/public/ # Production-ready, integrated pages
├── index.html
└── about.html
For teams seeking higher fidelity, the loop can be integrated with the Chrome DevTools MCP server. When available, the agent will spin up a local development server, navigate to the newly integrated page, take a screenshot, and perform a visual regression check against the original Stitch mockup before writing the next baton.
The Reality of Agentic Frontend Workflows #
While the baton pattern is a major step forward for agent autonomy, developers should approach it with realistic expectations.
First, selective installation can be fragile. The skills in the stitch-skills
library, particularly those in stitch-design
, have tight inter-dependencies. If you install stitch-loop
without design-md
, the agent will struggle to maintain visual consistency because it lacks the ability to parse and update the semantic design system file.
Second, the loop is only as good as its input files. If the design system in DESIGN.md
is poorly defined, the generated pages will quickly drift in style, leading to a fragmented user interface. Developers must treat DESIGN.md
as a strict API contract for visual styles.
Finally, there is the cost and latency of multi-turn loops. Running five or six iterations of an agent that calls external APIs, downloads assets, and runs local servers for visual verification is computationally expensive and slow. This is not a real-time preview tool; it is an asynchronous background builder.
The Verdict #
Google's stitch-skills
library is more than just a collection of helper scripts. It is a proof of concept for how developers will interact with AI coding assistants in the future. By moving away from chat interfaces and toward file-based, autonomous state machines, it provides a practical blueprint for complex, multi-step engineering tasks.
For developers building greenfield projects, marketing sites, or rapid prototypes, adopting the baton pattern is well worth the initial setup time. It shifts the developer's role from writing repetitive boilerplate to acting as a system architect, reviewing structured pull requests generated by an autonomous background loop.
Sources & further reading #
google-labs-code/stitch-skills— github.com - google-labs-code/stitch-skills Skills | Claude Code Skills— crossaitools.com - Google Labs/stitch-loop — Agent Skills | officialskills.sh— officialskills.sh - stitch-loop - Agent Skill by google-labs-code/stitch-skills— agentskills.so - design-md by google-labs-code/stitch-skills— skills.sh
Rachel Goldstein· Dev Tools Editor
Rachel has been embedded in the developer tooling ecosystem for nearly eight years, covering everything from IDE wars and package-manager drama to the quiet rise of AI-assisted coding. She has a soft spot for open-source maintainers and an unhealthy number of terminal emulators installed on a single laptop.
Discussion 0 #
No comments yet
Be the first to weigh in.