stitch-loop

Iteratively build multi-page websites with Google Stitch MCP using a baton-driven loop.

38|5|Updated Feb 18, 2026
One-click install
npx skills add https://github.com/gabelul/stitch-kit --skill stitch-loop-gabelul
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitch-loop
Source: https://github.com/gabelul/stitch-kit/tree/main/skills/stitch-loop
Command: npx skills add https://github.com/gabelul/stitch-kit --skill stitch-loop-gabelul

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the manual effort, visual drift, and workflow stalls that come with building multi-page websites using Google Stitch, removing the need to manually coordinate page generation, integration, and design consistency across iterations.

Core Features & Use Cases

  • Baton-driven iterative loop: Automatically reads a task baton file, generates the next page with Stitch MCP, integrates it into the existing site, and writes the next baton to continue the workflow without manual intervention.
  • Design consistency enforcement: Requires the design system block from DESIGN.md in every generation prompt to ensure all pages match the same visual language, color palette, and typography.
  • Use Case: Build a 5-page SaaS landing site or furniture e-commerce showroom, generating each page (home, about, contact, product details) one by one while maintaining uniform navigation, styling, and brand identity across all screens.

Quick Start

Ask your AI coding agent to use the stitch-loop skill to iteratively build your multi-page Stitch site, providing your pre-generated DESIGN.md and SITE.md files to start the automated build loop.

Frequently Asked Questions about stitch-loop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a multi-page website with Google Stitch without losing visual consistency?

To build consistent multi-page Stitch sites, you can use an automated baton-driven loop that injects a DESIGN.md design system block into every page generation prompt. This ensures uniform navigation, styling, and brand identity across all generated screens without manual coordination.

How do I automate iterative page generation and integration for frontend sites?

Automating iterative page generation requires a next-prompt.md baton file to coordinate the workflow. The loop reads the baton, generates the next page with Stitch MCP, integrates it into the existing site, and writes the next baton to continue the build automatically.

What files do I need to start automated multi-page site building with Stitch?

Starting the automated build loop requires three pre-generated files: a DESIGN.md file for visual consistency, a SITE.md file for project vision and sitemap, and a next-prompt.md baton file to coordinate iterative page generation and state persistence.

Can I generate a large SaaS landing site or e-commerce showroom page by page?

Yes, you can generate multi-page SaaS landing sites or e-commerce showrooms page by page. The workflow maintains uniform visual design across all generated screens by enforcing the design system from DESIGN.md during every iteration.

Why does my multi-page frontend generation workflow stall between pages?

Frontend generation workflows stall without a baton file to coordinate state persistence. Using a next-prompt.md baton file allows the automated loop to generate the next page, integrate it, and write the next baton without manual intervention.

Does the stitch-loop Skill work for marketing sites that require uniform styling?

Yes, the stitch-loop Skill applies to marketing sites, e-commerce product pages, and SaaS landing pages. It enforces design consistency by requiring the design system block from DESIGN.md in every generation prompt.