.design/next-prompt.md

1. Reads the current task from the baton
2. Generates the page (via Claude or Google Stitch)
3. Integrates into the site structure (navigation, links)
4. Verifies visually via browser automation (if available)
5. Updates site documentation
6. Writes the NEXT task to the baton — keeping the loop alive

• Human-in-loop: User reviews each page, then says "next" or "keep going"
• Fully autonomous: Claude runs continuously until the site is complete
• CI/CD: Triggered on

  .design/next-prompt.md

  changes

1. Check if

   @google/stitch-sdk

   is installed:

   ls node_modules/@google/stitch-sdk 2>/dev/null

2. Check if

   STITCH_API_KEY

   is set in

   .dev.vars

   or environment
3. Check if

   .design/metadata.json

   exists (contains Stitch project ID)

.design/metadata.json

{
  "projectId": "4044680601076201931",
  "screens": {
    "index": { "screenId": "d7237c7d78f44befa4f60afb17c818c1" },
    "about": { "screenId": "bf6a3fe5c75348e58cf21fc7a9ddeafb" }
  }
}

1. Persist project ID in

   .design/metadata.json

   — don't create a new project each iteration
2. Use

   screen.edit()

   for refinements rather than full regeneration
3. Post-process Stitch HTML — replace headers/footers with your shared elements
4. Include DESIGN.md context in prompts — Stitch generates better results with explicit design system instructions

.design/

1. Ask the user for:
   • Site name and purpose
   • Target audience
   • Desired aesthetic (minimal, bold, warm, etc.)
   • List of pages they want
   • Brand colours (or extract from existing site with

     /design-system

     )
2. Create the project files:

project/
├── .design/
│   ├── SITE.md           # Vision, sitemap, roadmap — the project's long-term memory
│   ├── DESIGN.md         # Visual design system — the source of truth for consistency
│   └── next-prompt.md    # The baton — current task with page frontmatter
└── site/
    └── public/           # Production pages live here

1. Write SITE.md from the template in the "SITE.md Template" section below
2. Write DESIGN.md — either manually from user input, or use the

   design-system

   skill to extract from an existing site
3. Write the first baton (

   .design/next-prompt.md

   ) for the homepage

• Match the design system from

  .design/DESIGN.md

  exactly
• Reuse the same header/nav/footer from existing pages (copy verbatim)
• Be self-contained — single HTML file with Tailwind CDN, no build step
• Be responsive — mobile-first, works at all breakpoints
• Include dark mode if the design system specifies it
• Use semantic HTML — proper heading hierarchy, landmarks, alt text
• Wire real navigation — all nav links point to actual pages (existing or planned)

site/public/{page}.html

1. Build the prompt by combining the baton body with the DESIGN.md system block
2. Call

   project.generate(prompt, deviceType)

   to generate the screen
3. Download the HTML from

   screen.getHtml()

   to

   .design/designs/{page}.html

4. Download the screenshot from

   screen.getImage()

   to

   .design/screenshots/{page}.png

5. Post-process the Stitch HTML:
   • Replace the header/nav/footer with your project's shared elements
   • Ensure consistent Tailwind config
   • Wire internal navigation links
6. Save the processed file to

   site/public/{page}.html

7. Update

   .design/metadata.json

   with the new screen ID

screen.edit(prompt)

1. Update navigation across ALL existing pages — add the new page to nav menus
2. Fix placeholder links — replace any

   href="#"

   with real page URLs
3. Verify cross-page consistency — header, footer, nav must be identical everywhere
4. Check internal links — no broken links between pages

1. Start a local server:

   npx serve site/public -p 3456

2. Screenshot the new page at desktop (1280px) and mobile (375px) widths
3. Save screenshots to

   .design/screenshots/{page}-desktop.png

   and

   {page}-mobile.png

4. Compare visually against the design system
5. Fix any issues (broken layout, wrong colours, inconsistent nav)
6. Stop the server

.design/SITE.md

• Mark the page as complete in Section 4 (Sitemap):

  [x] {page}.html — {description}

• Remove any consumed item from Section 5 (Roadmap) or Section 6 (Ideas)
• Add any new ideas discovered during generation

.design/next-prompt.md

1. Choose the next page:
   • First: Check Section 5 (Roadmap) for pending high-priority items
   • Second: Check Section 5 for medium-priority items
   • Third: Pick from Section 6 (Ideas)
   • Last resort: Invent something that fits the site vision
2. Write the baton with:
   • YAML frontmatter (

     page

     , optional

     layout

     )
   • Description of the page purpose and content
   • Design system block copied from

     .design/DESIGN.md

     Section 6
   • Detailed page structure (numbered sections)
3. If the site is complete (all roadmap items done, no more ideas):
   • Write a baton with

     page: _complete

     and a summary of what was built
   • This signals the loop is finished

• All pages in the roadmap are built (

  [x]

  in SITE.md Section 4)
• The user says to stop
• The baton contains

  page: _complete

• Pages built (with links)
• Screenshots (if captured)
• Any remaining ideas for future work

AGENT INSTRUCTION: Read this file before every iteration. It is the project's long-term memory.

• Primary Vibe: [Main aesthetic — e.g. "Clean and modern"]
• Secondary Vibe: [Supporting aesthetic — e.g. "Warm and approachable"]
• Anti-Vibes: [What to avoid — e.g. "Not corporate, not cluttered"]

• Output Directory:

  site/public/

• CSS: Tailwind CSS via CDN (no build step)
• Dark Mode: [Yes/No] — if yes, via class toggle
• Fonts: [Google Fonts import URL]

• index.html

  — Homepage with hero, features, CTA

• about.html

  — Company story and team

• services.html

  — Service offerings with pricing

• contact.html

  — Contact form and location map

• Build about page with team section
• Build services page with pricing cards

• Build contact page with form
• Build FAQ page

• Blog index page
• Individual blog post template

1. Stay on-brand — new pages must fit the established vibe
2. Enhance the core — support the site mission
3. Naming convention — lowercase, descriptive filenames (e.g.

   team.html

   )

• testimonials.html

  — Customer reviews and case studies

• gallery.html

  — Project portfolio with image grid

• faq.html

  — Frequently asked questions with accordion

1. Do NOT recreate pages already marked

   [x]

   in Section 4
2. ALWAYS update

   .design/next-prompt.md

   before completing an iteration
3. Remove consumed ideas from Section 6
4. Copy header/nav/footer from existing pages — never regenerate
5. All internal links must point to real pages

undefined

• Platform: Web, Desktop-first, responsive
• Theme: [Light/Dark], [descriptors]
• Background: [Description] (#hex)
• Surface: [Description] (#hex)
• Primary: [Description] (#hex) for [role]
• Text: [Description] (#hex)
• Font: [Font name] via Google Fonts
• Corners: [Description]
• Shadows: [Description]
• Spacing: [Description]

undefined

• Start with the homepage — it establishes the visual language for everything else
• Read existing pages before generating — consistency comes from copying, not recreating
• One page per iteration — don't try to generate multiple pages at once
• Include the design system in every baton — Claude needs it fresh each time
• Use the roadmap — don't generate pages randomly; follow the user's priority order
• Wire navigation early — even link to pages that don't exist yet (they will soon)

• Forgetting to update

  .design/next-prompt.md

  (breaks the loop)
• Recreating a page that already exists in the sitemap
• Regenerating the header/nav instead of copying from existing pages
• Not including the design system block in the baton prompt
• Leaving

  href="#"

  placeholder links instead of real page URLs
• Inconsistent Tailwind config across pages