{"slug": "beyond-one-shot-code-building-websites-with-stitch-agent-skills", "title": "Beyond One-Shot Code: Building Websites with Stitch Agent Skills", "summary": "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.", "body_md": "[AI](https://sourcefeed.dev/c/ai)Article\n\n# Beyond One-Shot Code: Building Websites with Stitch Agent Skills\n\nGoogle's new Stitch skills library introduces the baton pattern to turn coding agents into autonomous frontend builders.\n\n[Rachel Goldstein](https://sourcefeed.dev/u/rachel_goldstein)\n\nThe 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.\n\nGoogle'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.\n\n## The Shift from Tools to Agent Skills\n\nAn 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.\n\nThe `stitch-skills`\n\nlibrary 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:\n\n**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`\n\n):**Build (** Manages code generation, framework integration (such as`stitch-build`\n\n):[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`\n\n):\n\nAccording to registry data, developer interest has concentrated heavily on design extraction and autonomous loops rather than simple component generation:\n\n```\nxychart-beta\ntitle \"Stitch Skills Installs (Thousands)\"\nx-axis [design-md, enhance-prompt, stitch-loop, shadcn-ui, react-comp, remotion, stitch-design, taste-design]\ny-axis \"Installs\" 0 --> 50\nbar [47.1, 42.6, 42.0, 38.4, 36.4, 28.0, 25.2, 10.4]\n```\n\n## The Baton Pattern and Autonomous Loops\n\nThe most compelling capability in this library is `stitch-loop`\n\n. It addresses a fundamental limitation of current coding agents: their inability to build multi-page applications without constant human intervention.\n\nHistorically, 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`\n\nskill automates this via a file-based state machine called the \"baton\" pattern.\n\nInstead of keeping state in the LLM's volatile context window, the agent persists its state in a local file named `next-prompt.md`\n\n. Each iteration of the loop follows a strict protocol:\n\n**Read the Baton:** The agent parses`next-prompt.md`\n\nto extract the current page target and the prompt instructions.**Consult Context:** It reads`SITE.md`\n\n(which tracks the sitemap, roadmap, and project metadata) and`DESIGN.md`\n\n(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`\n\nwith instructions for the next page in the queue, effectively passing the baton to the next run.\n\nThis 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.\n\n## Setting Up a Self-Sustaining Frontend Workspace\n\nTo adopt these skills, developers must have the Stitch MCP server configured and running in their agent's environment.\n\nFor a project-scoped installation using Claude Code, the plugins can be added directly via the command line:\n\n```\nnpx plugins add google-labs-code/stitch-skills --scope project --target claude-code\n```\n\nIf you prefer to install only the autonomous loop and its design-system extractor, you can target those skills selectively:\n\n```\nnpx skills add google-labs-code/stitch-skills --skill design-md\n```\n\nA typical workspace configured for autonomous generation uses a structured directory layout to separate staging assets from production code:\n\n```\nproject/\n├── next-prompt.md   # The active baton file\n├── stitch.json      # Persisted Stitch project metadata\n├── DESIGN.md        # Visual design system (generated via design-md)\n├── SITE.md          # Site vision, sitemap, and roadmap\n├── queue/           # Staging area for raw Stitch HTML and screenshots\n│   ├── about.html\n│   └── about.png\n└── site/public/     # Production-ready, integrated pages\n    ├── index.html\n    └── about.html\n```\n\nFor 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.\n\n## The Reality of Agentic Frontend Workflows\n\nWhile the baton pattern is a major step forward for agent autonomy, developers should approach it with realistic expectations.\n\nFirst, selective installation can be fragile. The skills in the `stitch-skills`\n\nlibrary, particularly those in `stitch-design`\n\n, have tight inter-dependencies. If you install `stitch-loop`\n\nwithout `design-md`\n\n, the agent will struggle to maintain visual consistency because it lacks the ability to parse and update the semantic design system file.\n\nSecond, the loop is only as good as its input files. If the design system in `DESIGN.md`\n\nis poorly defined, the generated pages will quickly drift in style, leading to a fragmented user interface. Developers must treat `DESIGN.md`\n\nas a strict API contract for visual styles.\n\nFinally, 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.\n\n## The Verdict\n\nGoogle's `stitch-skills`\n\nlibrary 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.\n\nFor 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.\n\n## Sources & further reading\n\n-\n[google-labs-code/stitch-skills](https://github.com/google-labs-code/stitch-skills)— github.com -\n[google-labs-code/stitch-skills Skills | Claude Code Skills](https://crossaitools.com/skills/google-labs-code/stitch-skills)— crossaitools.com -\n[Google Labs/stitch-loop — Agent Skills | officialskills.sh](https://officialskills.sh/google-labs-code/skills/stitch-loop)— officialskills.sh -\n[stitch-loop - Agent Skill by google-labs-code/stitch-skills](https://agentskills.so/skills/google-labs-code-stitch-skills-stitch-loop)— agentskills.so -\n[design-md by google-labs-code/stitch-skills](https://www.skills.sh/google-labs-code/stitch-skills/design-md)— skills.sh\n\n[Rachel Goldstein](https://sourcefeed.dev/u/rachel_goldstein)· Dev Tools Editor\n\nRachel 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.\n\n## Discussion 0\n\nNo comments yet\n\nBe the first to weigh in.", "url": "https://wpnews.pro/news/beyond-one-shot-code-building-websites-with-stitch-agent-skills", "canonical_source": "https://sourcefeed.dev/a/beyond-one-shot-code-building-websites-with-stitch-agent-skills", "published_at": "2026-07-11 15:04:13+00:00", "updated_at": "2026-07-11 15:37:59.852114+00:00", "lang": "en", "topics": ["artificial-intelligence", "developer-tools", "ai-agents", "ai-tools", "ai-products"], "entities": ["Google", "Stitch", "stitch-skills", "Model Context Protocol", "Claude Code", "Cursor", "Codex"], "alternates": {"html": "https://wpnews.pro/news/beyond-one-shot-code-building-websites-with-stitch-agent-skills", "markdown": "https://wpnews.pro/news/beyond-one-shot-code-building-websites-with-stitch-agent-skills.md", "text": "https://wpnews.pro/news/beyond-one-shot-code-building-websites-with-stitch-agent-skills.txt", "jsonld": "https://wpnews.pro/news/beyond-one-shot-code-building-websites-with-stitch-agent-skills.jsonld"}}