All skills
google-labs-code avatar

/stitch-loop

@d891a26 official

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

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

This session only. Nothing lands on disk.

examplesSITE.md

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

Project Vision & Constitution

AGENT INSTRUCTION: Read this file before every iteration. It serves as the project's "Long-Term Memory." If next-prompt.md is empty, pick the highest priority item from Section 5 OR invent a new page that fits the project vision.

1. Core Identity

  • Project Name: Oakwood Furniture Co.
  • Stitch Project ID: 13534454087919359824
  • Mission: A premium online furniture showroom showcasing handcrafted, sustainable wood furniture.
  • Target Audience: Design-conscious homeowners, interior designers, eco-minded buyers.
  • Voice: Warm, refined, artisanal, and trustworthy.

2. Visual Language (Stitch Prompt Strategy)

Strictly adhere to these descriptive rules when prompting Stitch. Do NOT use code.

  • The "Vibe" (Adjectives):

    • Primary: Warm (Inviting, cozy, natural materials).
    • Secondary: Minimal (Clean layouts, breathing room, gallery-like).
    • Tertiary: Artisanal (Handcrafted feel, attention to detail).
  • Color Philosophy (Semantic):

    • Backgrounds: Warm barely-there cream (#FCFAFA). Soft, inviting canvas.
    • Accents: Deep muted teal-navy (#294056) for CTAs and highlights.
    • Text: Charcoal near-black (#2C2C2C) for headlines, soft gray (#6B6B6B) for body.

3. Architecture & File Structure

  • Root: site/public/
  • Asset Flow: Stitch generates to queue/ -> Validate -> Move to site/public/.
  • Navigation Strategy:
    • Global Header: Logo, Shop, Collections, About, Contact.
    • Global Footer: Sustainability, Craftsmanship, Shipping Info, Social Links.

4. Live Sitemap (Current State)

The Agent MUST update this section when a new page is successfully merged.

  • index.html - Homepage with hero and featured collections.
  • collections.html - Overview of furniture categories.
  • about.html - Our story and craftsmanship philosophy.
  • contact.html - Contact form and showroom locations.

5. The Roadmap (Backlog)

If next-prompt.md is empty or completed, pick the next task from here.

High Priority

  • Product Detail Page: Template for individual furniture items.
  • Contact Page: Contact form with showroom map.

Medium Priority

  • Sustainability Page: Our commitment to eco-friendly practices.
  • Care Guide: How to maintain wood furniture.

6. Creative Freedom Guidelines

When the backlog is empty, follow these guidelines to innovate.

  1. Stay On-Brand: New pages must fit the "Warm + Minimal + Artisanal" vibe.
  2. Enhance the Core: Support the furniture shopping experience.
  3. Naming Convention: Use lowercase, descriptive filenames.

Ideas to Explore

Pick one, build it, then REMOVE it from this list.

  • materials.html - Showcase of wood types and finishes
  • custom.html - Custom furniture ordering process
  • gallery.html - Customer homes featuring our furniture
  • blog.html - Design tips and furniture care articles

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.
  4. Keep the loop moving.

Source: SKILL.md on GitHub

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

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
What it can do
Reads files Edits files Runs commands
All 5 allowed tools
stitch*:*chrome*:*ReadWriteBash
  • Frontend
  • MCP
  • stitch
  • website-builder
  • automation
  • design-system
  • iterative-development
  • html

README badge

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

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.

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.