skilld
All skills
google-labs-code avatar

/stitch-loop

@d891a26 official
by Google Labs Codegoogle-labs-code/stitch-skills8.4k stars
1,105

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

Ask your Agent

Use this Skill: https://skilld.dev/gh/google-labs-code/stitch-skills/stitch-loop

This session only. Nothing lands on disk.

resourcessite-template.md

≈743 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Site Template

Use these templates when setting up a new project for the build loop.

SITE.md Template

# Project Vision & Constitution

> **AGENT INSTRUCTION:** Read this file before every iteration. It serves as the project's "Long-Term Memory."

## 1. Core Identity
* **Project Name:** [Your project name]
* **Stitch Project ID:** [Your Stitch project ID]
* **Mission:** [What the site achieves]
* **Target Audience:** [Who uses this site]
* **Voice:** [Tone and personality descriptors]

## 2. Visual Language
*Reference these descriptors when prompting Stitch.*

* **The "Vibe" (Adjectives):**
    * *Primary:* [Main aesthetic keyword]
    * *Secondary:* [Supporting aesthetic]
    * *Tertiary:* [Additional flavor]

## 3. Architecture & File Structure
* **Root:** `site/public/`
* **Asset Flow:** Stitch generates to `queue/` → Validate → Move to `site/public/`
* **Navigation Strategy:** [How nav works]

## 4. Live Sitemap (Current State)
*Update this when a new page is successfully merged.*

* [x] `index.html` - [Description]
* [ ] `about.html` - [Description]

## 5. The Roadmap (Backlog)
*Pick the next task from here if available.*

### High Priority
- [ ] [Task description]
- [ ] [Task description]

### Medium Priority
- [ ] [Task description]

## 6. Creative Freedom Guidelines
*When the backlog is empty, follow these guidelines to innovate.*

1. **Stay On-Brand:** New pages must fit the established vibe
2. **Enhance the Core:** Support the site mission
3. **Naming Convention:** Use lowercase, descriptive filenames

### Ideas to Explore
*Pick one, build it, then REMOVE it from this list.*

- [ ] `stats.html` - [Description]
- [ ] `settings.html` - [Description]

## 7. Rules of Engagement
1. Do not recreate pages in Section 4
2. Always update `next-prompt.md` before completing
3. Consume ideas from Section 6 when you use them

DESIGN.md Template

Generate this using the design-md skill from an existing Stitch screen, or create manually:

# Design System: [Project Name]
**Project ID:** [Stitch Project ID]

## 1. Visual Theme & Atmosphere
[Describe mood, density, aesthetic philosophy]

## 2. Color Palette & Roles
- **[Descriptive Name]** (#hexcode) – [Functional role]
- **[Descriptive Name]** (#hexcode) – [Functional role]

## 3. Typography Rules
[Font family, weights, sizes, spacing]

## 4. Component Stylings
* **Buttons:** [Shape, color, behavior]
* **Cards:** [Corners, background, shadows]
* **Inputs:** [Stroke, background, focus states]

## 5. Layout Principles
[Whitespace strategy, margins, grid alignment]

## 6. Design System Notes for Stitch Generation
**Copy this block into every baton prompt:**

**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Theme: [Dark/Light], [descriptors]
- Background: [Description] (#hex)
- Primary Accent: [Description] (#hex)
- Text Primary: [Description] (#hex)
- Font: [Description]
- Layout: [Description]

Source: SKILL.md on GitHub

Third-party checks

No alerts16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill facilitates an autonomous, iterative website-building process using the Stitch design tool. It manages project context via local markdown files and uses a task-passing system to maintain a development loop, with optional visual verification using a local server.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer6mo

    6 files scanned · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at d891a26. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Steadyupdated 7 months ago

Capability

What it can do
Reads files Edits files Runs commands
All 5 allowed tools
stitch*:*chrome*:*ReadWriteBash

Topics

  • Frontend
  • MCP
  • stitch
  • website-builder
  • automation
  • design-system
  • iterative-development
  • html

README badge

README badge for google-labs-code/stitch-skills/stitch-loop

What it does

Teaches agents to autonomously build websites using the Stitch design tool through an iterative loop that reads tasks from a baton file, generates pages, integrates them into the site structure, and writes the next task back. Targets the Stitch MCP server workflow and requires a .stitch/DESIGN.md file for visual consistency across iterations.

Generated from the current SKILL.md.

Frequently asked

What is the baton system and why is it critical?
The baton is a `.stitch/next-prompt.md` file that relays tasks between iterations. Each agent reads the current task, generates a page, and writes the next task to the file. Failing to update it breaks the loop.
Do I need Chrome DevTools MCP Server installed?
No, it's optional. Chrome tools enable visual verification of generated pages against Stitch screenshots, but the skill works without them.
What files must exist before I start?
A `.stitch/DESIGN.md` file (describing the visual design system) and a `.stitch/SITE.md` file (documenting site vision, sitemap, and roadmap). Generate DESIGN.md using the design-md skill if needed.
What happens if a page already exists in the sitemap?
Do not recreate it. Check Section 4 of `.stitch/SITE.md` before generating to avoid overwriting existing pages.
Must the design system block be included in every prompt?
Yes. Section 6 of `.stitch/DESIGN.md` must be copied into the baton prompt every iteration to ensure visual consistency across all generated pages.

Generated from the current SKILL.md. These answers refresh after source changes.