Beyond One-Shot Code: Building Websites with Stitch Agent Skills

Google released the stitch-skills library, introducing the baton pattern to enable coding agents to autonomously build multi-page websites by persisting state across iterations. The library packages frontend workflows into standardized skills for the Stitch MCP server, shifting from one-shot code generation to autonomous, stateful development loops. Developer interest has concentrated on design extraction and autonomous loops, with the stitch-loop skill addressing the limitation of current agents requiring constant human intervention for multi-page applications.

AI https://sourcefeed.dev/c/ai Article Beyond One-Shot Code: Building Websites with Stitch Agent Skills Google's new Stitch skills library introduces the baton pattern to turn coding agents into autonomous frontend builders. Rachel Goldstein https://sourcefeed.dev/u/rachel goldstein 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 https://github.com/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 https://stitch.withgoogle.com 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 as stitch-build : shadcn/ui https://ui.shadcn.com , 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 parses next-prompt.md to extract the current page target and the prompt instructions. Consult Context: It reads SITE.md which tracks the sitemap, roadmap, and project metadata and DESIGN.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 updates next-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 https://github.com/google-labs-code/stitch-skills — github.com - google-labs-code/stitch-skills Skills | Claude Code Skills https://crossaitools.com/skills/google-labs-code/stitch-skills — crossaitools.com - Google Labs/stitch-loop — Agent Skills | officialskills.sh https://officialskills.sh/google-labs-code/skills/stitch-loop — officialskills.sh - stitch-loop - Agent Skill by google-labs-code/stitch-skills https://agentskills.so/skills/google-labs-code-stitch-skills-stitch-loop — agentskills.so - design-md by google-labs-code/stitch-skills https://www.skills.sh/google-labs-code/stitch-skills/design-md — skills.sh Rachel Goldstein https://sourcefeed.dev/u/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.