design-loop

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Loop — Autonomous Site Builder

Design Loop — 自主站点构建工具

Build complete multi-page websites through an autonomous loop. Each iteration reads a task, generates a page, integrates it, verifies it visually, then writes the next task to keep going.

通过自主循环搭建完整的多页网站。每轮迭代会读取任务、生成页面、整合入站点、进行视觉验证，然后写入下一个任务以维持循环运行。

Overview

概述

The Design Loop uses a "baton" pattern — a file (

.design/next-prompt.md

) acts as a relay baton between iterations. Each cycle:

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

This is orchestration-agnostic. The loop can be driven by:

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

Design Loop采用「接力棒」模式——文件

.design/next-prompt.md

会作为迭代之间的接力棒。每个循环周期：

从接力棒文件读取当前任务
生成页面（通过Claude或Google Stitch）
整合到站点结构中（导航、链接）
（若可用）通过浏览器自动化进行视觉验证
更新站点文档
将下一个任务写入接力棒文件，维持循环运行

该工具不绑定调度系统，循环可通过以下方式驱动：

人在回路：用户审核每个页面后，输入「next」或「keep going」继续
完全自主：Claude持续运行直到站点搭建完成
CI/CD：监听
```
.design/next-prompt.md
```
变更触发运行

Generation Backends

生成后端

Backend	Setup	Quality	Speed	Best for
Claude (default)	Zero dependencies	Great — production-ready HTML/Tailwind	Fast	Most projects, full code control
Google Stitch	`npm install @google/stitch-sdk` + API key	Higher fidelity AI designs	~10-20s/screen	Design-heavy projects, visual polish

后端	配置要求	质量	速度	适用场景
Claude（默认）	零依赖	出色——可生产环境使用的HTML/Tailwind	快	大多数项目，需要完全代码可控的场景
Google Stitch	`npm install @google/stitch-sdk` + API密钥	更高保真的AI设计	每个页面约10-20秒	重设计的项目，需要视觉打磨的场景

Detecting Stitch

Stitch可用性检测

At the start of each loop, check if Stitch is available:

Check if

@google/stitch-sdk

is installed:

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

Check if
```
STITCH_API_KEY
```
is set in
```
.dev.vars
```
or environment
Check if
```
.design/metadata.json
```
exists (contains Stitch project ID)

If all three are present, use Stitch. Otherwise, fall back to Claude generation.

每次循环开始时，检测Stitch是否可用：

检查是否安装了

@google/stitch-sdk

：

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

检查
```
.dev.vars
```
或环境变量中是否设置了
```
STITCH_API_KEY
```
检查是否存在
```
.design/metadata.json
```
（包含Stitch项目ID）

如果三个条件都满足，则使用Stitch，否则回退到Claude生成。

Stitch SDK Reference

Stitch SDK参考

Install:

npm install @google/stitch-sdk

. Set

STITCH_API_KEY

in environment or

.dev.vars

typescript

import { stitch } from "@google/stitch-sdk";

// Create a project
const result = await stitch.callTool("create_project", { title: "My Site" });

// Reference an existing project
const project = stitch.project("4044680601076201931");

// Generate a screen
const screen = await project.generate("A modern landing page with hero section", "DESKTOP");

// Get assets
const htmlUrl = await screen.getHtml();    // Download URL for HTML
const imageUrl = await screen.getImage();  // Download URL for screenshot

// Edit an existing screen (prefer this for refinements)
const edited = await screen.edit("Make the background dark and enlarge the CTA button");

// Generate variants
const variants = await screen.variants("Try different colour schemes", {
  variantCount: 3,
  creativeRange: "EXPLORE",     // "REFINE" | "EXPLORE" | "REIMAGINE"
  aspects: ["COLOR_SCHEME"],    // "LAYOUT" | "COLOR_SCHEME" | "IMAGES" | "TEXT_FONT" | "TEXT_CONTENT"
});

Device types:

"MOBILE"

"DESKTOP"

"TABLET"

"AGNOSTIC"

. Model selection: pass

"GEMINI_3_PRO"

"GEMINI_3_FLASH"

as third arg to

generate()

Other operations:

stitch.projects()

lists projects,

project.screens()

lists screens,

project.getScreen("id")

fetches one.

getHtml()

and

getImage()

return download URLs. Append

=w1280

to image URLs for full resolution. Auth:

STITCH_API_KEY

required (or

STITCH_ACCESS_TOKEN

GOOGLE_CLOUD_PROJECT

for OAuth). Errors throw

StitchError

with codes:

AUTH_FAILED

NOT_FOUND

RATE_LIMITED

安装：

npm install @google/stitch-sdk

，在环境变量或

.dev.vars

中设置

STITCH_API_KEY

。

typescript

import { stitch } from "@google/stitch-sdk";

// 创建项目
const result = await stitch.callTool("create_project", { title: "My Site" });

// 引用已有项目
const project = stitch.project("4044680601076201931");

// 生成页面
const screen = await project.generate("A modern landing page with hero section", "DESKTOP");

// 获取资源
const htmlUrl = await screen.getHtml();    // HTML下载地址
const imageUrl = await screen.getImage();  // 截图下载地址

// 编辑已有页面（优化时优先使用该方法）
const edited = await screen.edit("Make the background dark and enlarge the CTA button");

// 生成变体
const variants = await screen.variants("Try different colour schemes", {
  variantCount: 3,
  creativeRange: "EXPLORE",     // "REFINE" | "EXPLORE" | "REIMAGINE"
  aspects: ["COLOR_SCHEME"],    // "LAYOUT" | "COLOR_SCHEME" | "IMAGES" | "TEXT_FONT" | "TEXT_CONTENT"
});

设备类型：

"MOBILE"

"DESKTOP"

"TABLET"

"AGNOSTIC"

。模型选择：向

generate()

传入第三个参数

"GEMINI_3_PRO"

或

"GEMINI_3_FLASH"

指定模型。

其他操作：

stitch.projects()

列出所有项目，

project.screens()

列出项目下所有页面，

project.getScreen("id")

获取单个页面。

getHtml()

和

getImage()

返回下载链接，在图片链接后追加

=w1280

可获取全分辨率图片。鉴权：需要

STITCH_API_KEY

（或OAuth模式下的

STITCH_ACCESS_TOKEN

GOOGLE_CLOUD_PROJECT

）。错误会抛出

StitchError

，错误码包括：

AUTH_FAILED

、

NOT_FOUND

、

RATE_LIMITED

。

Stitch Project Persistence

Stitch项目持久化

Save Stitch identifiers to

.design/metadata.json

so future iterations can reference them:

json

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

Stitch integration tips:

Persist project ID in
```
.design/metadata.json
```
— don't create a new project each iteration
Use
```
screen.edit()
```
for refinements rather than full regeneration
Post-process Stitch HTML — replace headers/footers with your shared elements
Include DESIGN.md context in prompts — Stitch generates better results with explicit design system instructions

将Stitch标识保存到

.design/metadata.json

，方便后续迭代引用：

json

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

Stitch集成提示：

将项目ID持久化到
```
.design/metadata.json
```
——不要每次迭代都创建新项目
优化时使用
```
screen.edit()
```
而非完全重新生成
对Stitch生成的HTML做后处理——将页眉/页脚替换为项目的公共元素
在提示词中包含DESIGN.md的上下文——有明确的设计系统说明时Stitch生成效果更好

Getting Started

快速开始

First Run: Bootstrap the Project

首次运行：初始化项目

.design/

doesn't exist yet, create the project scaffolding:

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
```
  )
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

Write SITE.md from the template in the "SITE.md Template" section below
Write DESIGN.md — either manually from user input, or use the
```
design-system
```
skill to extract from an existing site
Write the first baton (
```
.design/next-prompt.md
```
) for the homepage

如果还不存在

.design/

目录，创建项目脚手架：

向用户询问以下信息：
- 站点名称和用途
- 目标受众
- 期望的视觉风格（极简、醒目、温暖等）
- 想要的页面列表
- 品牌色（或通过
```
/design-system
```
  从已有站点提取）
创建项目文件：

project/
├── .design/
│   ├── SITE.md           # 愿景、站点地图、路线图——项目的长期记忆
│   ├── DESIGN.md         # 视觉设计系统——一致性的唯一来源
│   └── next-prompt.md    # 接力棒文件——包含页面元数据的当前任务
└── site/
    └── public/           # 生产环境页面存放目录

根据下文「SITE.md模板」部分的模板编写
```
SITE.md
```
编写
```
DESIGN.md
```
——可以根据用户输入手动编写，也可以使用
```
design-system
```
技能从已有站点提取
为首页编写第一个接力棒文件（
```
.design/next-prompt.md
```
）

Subsequent Runs: Read the Baton

后续运行：读取接力棒

.design/next-prompt.md

already exists, parse it and continue the loop.

如果已经存在

.design/next-prompt.md

，解析该文件并继续循环。

The Baton File

接力棒文件

.design/next-prompt.md

has YAML frontmatter + a prompt body:

markdown

---
page: about
layout: standard
---
An about page for Acme Plumbing describing the company's 20-year history in Newcastle.

**DESIGN SYSTEM:**
[Copied from .design/DESIGN.md Section 6]

**Page Structure:**
1. Header with navigation (consistent with index.html)
2. Hero with company photo and tagline
3. Story timeline showing company milestones
4. Team section with photo grid
5. CTA section: "Get a Free Quote"
6. Footer (consistent with index.html)

Field	Required	Purpose
`page`	Yes	Output filename (without .html)
`layout`	No	`standard` , `wide` , `sidebar` — defaults to `standard`

.design/next-prompt.md

包含YAML前置元数据 + 提示词正文：

markdown

---
page: about
layout: standard
---
An about page for Acme Plumbing describing the company's 20-year history in Newcastle.

**DESIGN SYSTEM:**
[Copied from .design/DESIGN.md Section 6]

**Page Structure:**
1. Header with navigation (consistent with index.html)
2. Hero with company photo and tagline
3. Story timeline showing company milestones
4. Team section with photo grid
5. CTA section: "Get a Free Quote"
6. Footer (consistent with index.html)

字段	是否必填	用途
`page`	是	输出文件名（不带.html后缀）
`layout`	否	`standard` 、 `wide` 、 `sidebar` ——默认值为 `standard`

Execution Protocol

执行流程

Step 1: Read the Baton

步骤1：读取接力棒

Read .design/next-prompt.md
Extract: page name, layout, prompt body

读取 .design/next-prompt.md
提取：页面名称、布局、提示词正文

Step 2: Consult Context Files

步骤2：查阅上下文文件

Before generating, read:

File	What to check
`.design/SITE.md`	Section 4 (Sitemap) — don't recreate existing pages
`.design/DESIGN.md`	Colour palette, typography, component styles
Existing pages in `site/public/`	Header/footer/nav patterns to match

Critical: Read the most recent page's HTML to extract the exact header, navigation, and footer markup. New pages must use identical shared elements.

生成之前，读取以下文件：

文件	检查内容
`.design/SITE.md`	第4部分（站点地图）——不要重复创建已存在的页面
`.design/DESIGN.md`	调色板、排版、组件样式
`site/public/` 下的已有页面	要匹配的页眉/页脚/导航模式

关键：读取最新页面的HTML，提取准确的页眉、导航和页脚标记，新页面必须使用完全相同的公共元素。

Step 3: Generate the Page

步骤3：生成页面

Option A: Claude Generation (Default)

选项A：Claude生成（默认）

Generate a complete HTML file using Tailwind CSS (via CDN). The page must:

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)

Write the generated file to

site/public/{page}.html

使用Tailwind CSS（通过CDN）生成完整的HTML文件，页面必须满足：

完全匹配
```
.design/DESIGN.md
```
中的设计系统
复用已有页面的页眉/导航/页脚（逐字复制）
自包含——单个HTML文件引入Tailwind CDN，无需构建步骤
响应式——移动端优先，适配所有断点
如果设计系统指定了深色模式则需要支持
使用语义化HTML——正确的标题层级、地标角色、alt文本
绑定真实导航——所有导航链接指向真实页面（已存在或规划中）

将生成的文件写入

site/public/{page}.html

。

Option B: Stitch Generation (If Available)

选项B：Stitch生成（若可用）

If Stitch SDK is available:

Build the prompt by combining the baton body with the DESIGN.md system block
Call
```
project.generate(prompt, deviceType)
```
to generate the screen

Download the HTML from

screen.getHtml()

.design/designs/{page}.html

Download the screenshot from

screen.getImage()

.design/screenshots/{page}.png

Post-process the Stitch HTML:
- Replace the header/nav/footer with your project's shared elements
- Ensure consistent Tailwind config
- Wire internal navigation links
Save the processed file to
```
site/public/{page}.html
```
Update
```
.design/metadata.json
```
with the new screen ID

For iterative edits on an existing Stitch screen, use

screen.edit(prompt)

instead of regenerating.

如果Stitch SDK可用：

将接力棒正文与DESIGN.md的系统块组合生成提示词
调用
```
project.generate(prompt, deviceType)
```
生成页面

从

screen.getHtml()

下载HTML到

.design/designs/{page}.html

从

screen.getImage()

下载截图到

.design/screenshots/{page}.png

对Stitch生成的HTML做后处理：
- 将页眉/导航/页脚替换为项目的公共元素
- 确保Tailwind配置一致
- 绑定内部导航链接
将处理后的文件保存到
```
site/public/{page}.html
```
更新
```
.design/metadata.json
```
中的新页面ID

如果是对已有Stitch页面做迭代编辑，使用

screen.edit(prompt)

而非重新生成。

Step 4: Integrate into the Site

步骤4：整合到站点

After generating the new page:

Update navigation across ALL existing pages — add the new page to nav menus
Fix placeholder links — replace any
```
href="#"
```
with real page URLs
Verify cross-page consistency — header, footer, nav must be identical everywhere
Check internal links — no broken links between pages

生成新页面后：

更新所有已有页面的导航——将新页面添加到导航菜单中
修复占位链接——将所有
```
href="#"
```
替换为真实页面URL
验证跨页面一致性——页眉、页脚、导航在所有页面必须完全一致
检查内部链接——页面之间没有死链

Step 5: Visual Verification (If Browser Available)

步骤5：视觉验证（若浏览器可用）

If Playwright CLI or Chrome MCP is available:

Start a local server:
```
npx serve site/public -p 3456
```
Screenshot the new page at desktop (1280px) and mobile (375px) widths

Save screenshots to

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

and

{page}-mobile.png

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

If no browser automation is available, skip to Step 6.

如果Playwright CLI或Chrome MCP可用：

启动本地服务：
```
npx serve site/public -p 3456
```
截取新页面的桌面端（1280px）和移动端（375px）截图

将截图保存到

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

和

{page}-mobile.png

与设计系统做视觉对比
修复所有问题（布局错乱、颜色错误、导航不一致等）
停止服务

如果没有可用的浏览器自动化工具，直接跳转到步骤6。

Step 6: Update Site Documentation

步骤6：更新站点文档

Edit

.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/SITE.md

：

在第4部分（站点地图）中将该页面标记为已完成：
```
[x] {page}.html — {description}
```
从第5部分（路线图）或第6部分（创意）中移除已完成的项
添加生成过程中发现的新创意

Step 7: Write the Next Baton (CRITICAL)

步骤7：写入下一个接力棒（关键步骤）

You MUST update
.design/next-prompt.md
before completing. This keeps the loop alive.

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
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)
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

完成迭代前必须更新
.design/next-prompt.md
，这样才能维持循环运行。

选择下一个页面：
- 优先：检查第5部分（路线图）中的待处理高优先级项
- 其次：检查第5部分中的中优先级项
- 再次：从第6部分（创意）中选择
- 兜底：创建符合站点愿景的新页面
编写接力棒文件，包含：
- YAML前置元数据（
```
page
```
  ，可选的
```
layout
```
  ）
- 页面用途和内容的描述
- 从
```
.design/DESIGN.md
```
  第6部分复制的设计系统块
- 详细的页面结构（编号列表）
如果站点已完成（所有路线图项都已完成，没有更多创意）：
- 编写接力棒，指定
```
page: _complete
```
  并附上已搭建内容的摘要
- 该标记表示循环结束

Loop Completion

循环结束

The loop ends when:

All pages in the roadmap are built (
```
[x]
```
in SITE.md Section 4)
The user says to stop
The baton contains
```
page: _complete
```

On completion, output a summary:

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

满足以下条件时循环结束：

路线图中的所有页面都已搭建完成（SITE.md第4部分标记为
```
[x]
```
）
用户要求停止
接力棒文件包含
```
page: _complete
```

完成后输出摘要：

已搭建的页面（带链接）
截图（如果有捕获）
后续可扩展的创意点

Cross-Page Consistency Rules

跨页面一致性规则

The #1 risk in multi-page generation is drift — pages looking slightly different. Prevent this:

Element	Rule
Header/Nav	Copy exact HTML from the most recent page. Never regenerate.
Footer	Same — copy verbatim, only change active page indicator
Tailwind config	If using `<script>` config block, it must be identical across pages
Colour values	Always use the exact hex codes from DESIGN.md, never approximate
Font imports	Same Google Fonts `<link>` tag across all pages
Spacing scale	Consistent padding/margin values (document in DESIGN.md)

多页生成的最大风险是漂移——页面之间出现细微差异，按以下规则避免：

元素	规则
页眉/导航	从最新页面逐字复制HTML，绝对不要重新生成
页脚	同上——逐字复制，仅修改当前页的激活状态标识
Tailwind配置	如果使用 `<script>` 配置块，所有页面的配置必须完全一致
颜色值	始终使用DESIGN.md中给出的准确十六进制代码，不要近似
字体引入	所有页面使用完全相同的Google Fonts `<link>` 标签
间距规范	内边距/外边距值保持一致（在DESIGN.md中定义）

Design Mappings

设计映射

Use these to transform vague user requests into precise design instructions when writing baton prompts.

编写接力棒提示词时，使用以下映射将模糊的用户需求转换为精确的设计说明。

UI/UX Keyword Refinement

UI/UX关键词优化

Vague Term	Professional Terminology
"menu at the top"	"sticky navigation bar with logo and menu items"
"big photo"	"full-width hero section with focal-point imagery"
"list of things"	"responsive card grid with hover states and subtle elevation"
"button"	"primary call-to-action button with hover transition"
"form"	"form with labelled input fields, validation states, and submit button"
"picture area"	"hero section with background image or video"
"sidebar"	"collapsible side navigation with icon-label pairings"
"popup"	"modal dialog with overlay and smooth entry animation"
"footer stuff"	"footer with sitemap links, contact info, and legal notices"
"cards"	"content cards with consistent padding, rounded corners, and shadow"
"tabs"	"tabbed interface with active indicator and smooth content transition"
"search"	"search input with icon, placeholder text, and results dropdown"
"pricing"	"pricing comparison cards with highlighted recommended tier"
"testimonials"	"testimonial carousel or grid with avatar, quote, and attribution"

模糊表述	专业术语
"顶部的菜单"	"带logo和菜单项的吸顶导航栏"
"大图片"	"带焦点图像的通屏英雄区"
"列表内容"	"带悬停效果和微妙层级的响应式卡片网格"
"按钮"	"带悬停过渡效果的主行动号召按钮"
"表单"	"带标签输入框、校验状态和提交按钮的表单"
"图片区域"	"带背景图片或视频的英雄区"
"侧边栏"	"带图标-标签配对的可折叠侧边导航"
"弹窗"	"带遮罩层和平滑入场动画的模态框"
"页脚内容"	"带站点地图链接、联系信息和法律声明的页脚"
"卡片"	"带统一内边距、圆角和阴影的内容卡片"
"标签页"	"带激活指示器和平滑内容过渡的标签界面"
"搜索"	"带图标、占位文本和结果下拉框的搜索输入框"
"定价"	"带高亮推荐档位的定价对比卡片"
"评价"	"带头像、引用和署名的评价轮播或网格"

Atmosphere and Vibe Descriptors

氛围和风格描述

Basic Vibe	Enhanced Description
"Modern"	"Clean, minimal, generous whitespace, high-contrast typography"
"Professional"	"Sophisticated, trustworthy, subtle shadows, restricted premium palette"
"Fun / Playful"	"Vibrant, rounded corners, bold accent colours, bouncy animations"
"Dark Mode"	"High-contrast accents on deep slate or near-black backgrounds"
"Luxury"	"Elegant, spacious, fine lines, serif headers, high-fidelity photography"
"Tech / Cyber"	"Futuristic, neon accents, glassmorphism, monospaced typography"
"Warm / Friendly"	"Soft colours, rounded shapes, handwritten accents, inviting imagery"
"Bold / Industrial"	"Strong typography, high contrast, geometric shapes, dark backgrounds"
"Organic / Natural"	"Earth tones, soft textures, organic shapes, nature photography"
"Editorial"	"Magazine-like layouts, strong typographic hierarchy, generous leading"

基础风格	增强描述
"现代"	"干净、极简、留白充足、高对比度排版"
"专业"	"成熟、值得信任、微妙阴影、受限的高级调色板"
"有趣/活泼"	"明亮、圆角、醒目的强调色、有弹性的动画"
"深色模式"	"深石板灰或接近黑色背景上的高对比度强调色"
"奢华"	"优雅、宽松、细线条、衬线标题、高保真摄影"
"科技/赛博"	" futuristic、霓虹强调色、玻璃态效果、等宽排版"
"温暖/友好"	"柔和的颜色、圆角形状、手写风格装饰、有亲和力的图像"
"醒目/工业风"	"粗体排版、高对比度、几何形状、深色背景"
"有机/自然"	"大地色系、柔和纹理、有机形状、自然摄影"
"编辑风"	"杂志式布局、清晰的排版层级、充足的行高"

Geometry, Depth, and Spacing

几何形状、层级和间距

Description	Tailwind	Visual Effect
Pill-shaped	`rounded-full`	Buttons, tags, badges
Softly rounded	`rounded-xl`	Cards, containers, modals
Gently rounded	`rounded-lg`	Inputs, smaller elements
Sharp / precise	`rounded-none` or `rounded-sm`	Technical, brutalist aesthetic
Glassmorphism	`backdrop-blur-md bg-white/10 border border-white/20`	Overlays, nav bars
Frosted	`backdrop-blur-sm bg-white/80`	Subtle glass effect

Elevation	Description	Tailwind
Flat	No shadows, colour blocking and borders	`shadow-none`
Whisper-soft	Diffused, barely visible lift	`shadow-sm`
Subtle	Gentle shadow for card elevation	`shadow-md`
Floating	High-offset, soft shadow	`shadow-lg` or `shadow-xl`
Dramatic	Strong shadow for hero elements or modals	`shadow-2xl`
Inset	Inner shadow for pressed or nested elements	`shadow-inner`

Section Density	Description	Tailwind
Tight	Compact, information-dense	`py-8 md:py-12`
Balanced	Standard section spacing	`py-12 md:py-16`
Generous	Breathing room, premium feel	`py-16 md:py-24`
Dramatic	Statement spacing, luxury/editorial	`py-24 md:py-32`

描述	Tailwind类	视觉效果
胶囊形	`rounded-full`	按钮、标签、徽章
柔和圆角	`rounded-xl`	卡片、容器、模态框
轻微圆角	`rounded-lg`	输入框、小型元素
锐利/精确	`rounded-none` 或 `rounded-sm`	技术感、野兽派美学
玻璃态	`backdrop-blur-md bg-white/10 border border-white/20`	遮罩层、导航栏
磨砂效果	`backdrop-blur-sm bg-white/80`	微妙的玻璃效果

层级	描述	Tailwind类
扁平	无阴影、色块和边框区隔	`shadow-none`
极淡	扩散的、几乎不可见的上浮效果	`shadow-sm`
微妙	柔和阴影实现卡片上浮效果	`shadow-md`
悬浮	高偏移量、柔和阴影	`shadow-lg` 或 `shadow-xl`
醒目	强烈阴影用于英雄元素或模态框	`shadow-2xl`
内凹	内阴影用于按下状态或嵌套元素	`shadow-inner`

区块密度	描述	Tailwind类
紧凑	高密度信息展示	`py-8 md:py-12`
平衡	标准区块间距	`py-12 md:py-16`
宽松	充足呼吸感、高级感	`py-16 md:py-24`
夸张	展示性间距、奢华/编辑风	`py-24 md:py-32`

SITE.md Template

SITE.md模板

Use this when bootstrapping a new project. Write to

.design/SITE.md

markdown

undefined

初始化新项目时使用该模板，写入

.design/SITE.md

：

markdown

undefined

Project Vision

项目愿景

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

1. Core Identity

1. 核心身份

Field	Value
Project Name	[Name]
Mission	[What the site achieves]
Target Audience	[Who uses this site]
Voice & Tone	[Personality descriptors — warm, professional, playful, etc.]
Region	[Australia / US / UK — affects spelling, phone format, imagery]

字段	值
项目名称	[名称]
使命	[站点要实现的目标]
目标受众	[站点的使用人群]
语气与风格	[个性描述——温暖、专业、活泼等]
地区	[澳大利亚/美国/英国——影响拼写、电话格式、图像选择]

2. Visual Language

2. 视觉语言

Reference these when writing baton prompts.

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"]

编写接力棒提示词时参考这些内容。

主风格：[主要美学——例如「干净现代」]
次风格：[辅助美学——例如「温暖亲民」]
禁用风格：[要避免的风格——例如「不要太企业化、不要太杂乱」]

3. Technical Setup

3. 技术配置

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]

输出目录：
```
site/public/
```
CSS：通过CDN引入Tailwind CSS（无需构建步骤）
深色模式：[是/否]——如果支持，通过类切换实现
字体：[Google Fonts引入链接]

4. Live Sitemap

4. 实时站点地图

Update this when a page is successfully generated.

```
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

页面生成成功后更新该部分。

```
index.html
```
— 包含英雄区、特性、行动号召的首页
```
about.html
```
— 公司故事和团队介绍
```
services.html
```
— 服务介绍和定价
```
contact.html
```
— 联系表单和位置地图

5. Roadmap (Backlog)

5. 路线图（待办）

Pick the next task from here. Remove items as they're completed.

从这里选择下一个任务，完成后移除对应项。

High Priority

高优先级

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

搭建包含团队板块的关于页
搭建包含定价卡片的服务页

Medium Priority

中优先级

Build contact page with form
Build FAQ page

搭建带表单的联系页
搭建FAQ页面

Low Priority

低优先级

Blog index page
Individual blog post template

博客索引页
单篇博客文章模板

6. Creative Freedom

6. 创意空间

When the roadmap is empty, follow these guidelines to add pages:

Stay on-brand — new pages must fit the established vibe
Enhance the core — support the site mission
Naming convention — lowercase, descriptive filenames (e.g.
```
team.html
```
)

路线图为空时，遵循以下规则添加页面：

保持品牌一致——新页面必须符合已建立的风格
强化核心价值——支撑站点使命
命名规范——小写、描述性文件名（例如
```
team.html
```
）

Ideas to Explore

可探索的创意

```
testimonials.html
```
— Customer reviews and case studies
```
gallery.html
```
— Project portfolio with image grid
```
faq.html
```
— Frequently asked questions with accordion

```
testimonials.html
```
— 客户评价和案例研究
```
gallery.html
```
— 带图片网格的项目作品集
```
faq.html
```
— 带折叠面板的常见问题解答

7. Rules of Engagement

7. 运行规则

Do NOT recreate pages already marked
```
[x]
```
in Section 4
ALWAYS update
```
.design/next-prompt.md
```
before completing an iteration
Remove consumed ideas from Section 6
Copy header/nav/footer from existing pages — never regenerate
All internal links must point to real pages

undefined

不要重新创建第4部分中已经标记为
```
[x]
```
的页面
完成迭代前必须更新
```
.design/next-prompt.md
```
移除第6部分中已使用的创意
从已有页面复制页眉/导航/页脚——绝对不要重新生成
所有内部链接必须指向真实页面

undefined

DESIGN.md Template

DESIGN.md模板

Generate using the

design-system

skill, or create manually. Write to

.design/DESIGN.md

markdown

undefined

使用

design-system

技能生成，或手动创建，写入

.design/DESIGN.md

：

markdown

undefined

Design System: [Project Name]

设计系统：[项目名称]

1. Visual Theme & Atmosphere

1. 视觉主题与氛围

[Describe the mood, density, and aesthetic philosophy. Use evocative language.]

[描述风格、密度和美学理念，使用有感染力的语言。]

2. Colour Palette & Roles

2. 调色板与角色

Role	Name	Value	Usage
Primary	[Name]	`#hexcode`	Buttons, links, active states
Primary Foreground	[Name]	`#hexcode`	Text on primary backgrounds
Secondary	[Name]	`#hexcode`	Supporting elements, badges
Background	[Name]	`#hexcode`	Page background
Surface	[Name]	`#hexcode`	Cards, containers
Text Primary	[Name]	`#hexcode`	Headings, body text
Text Secondary	[Name]	`#hexcode`	Captions, metadata
Border	[Name]	`#hexcode`	Dividers, input borders
Accent	[Name]	`#hexcode`	Highlights, notifications

角色	名称	值	用途
主色	[名称]	`#hexcode`	按钮、链接、激活状态
主色前景	[名称]	`#hexcode`	主色背景上的文字
辅助色	[名称]	`#hexcode`	支撑元素、徽章
背景色	[名称]	`#hexcode`	页面背景
表面色	[名称]	`#hexcode`	卡片、容器
主文字色	[名称]	`#hexcode`	标题、正文
次文字色	[名称]	`#hexcode`	说明文字、元数据
边框色	[名称]	`#hexcode`	分割线、输入框边框
强调色	[名称]	`#hexcode`	高亮、通知

3. Typography

3. 排版

Element	Font	Weight	Size	Line Height
H1	[Font]	700	3rem	1.1
H2	[Font]	600	2rem	1.2
H3	[Font]	600	1.5rem	1.3
Body	[Font]	400	1rem	1.6
Small	[Font]	400	0.875rem	1.5

元素	字体	字重	字号	行高
H1	[字体]	700	3rem	1.1
H2	[字体]	600	2rem	1.2
H3	[字体]	600	1.5rem	1.3
正文	[字体]	400	1rem	1.6
小号文字	[字体]	400	0.875rem	1.5

4. Component Styles

4. 组件样式

Document each component: Buttons (primary, secondary, hover), Cards (bg, border, radius, shadow, padding), Navigation (sticky/static, active indicator, mobile pattern), Forms (input style, labels, validation colours).

记录每个组件：按钮（主、次、悬停）、卡片（背景、边框、圆角、阴影、内边距）、导航（吸顶/静态、激活标识、移动端模式）、表单（输入框样式、标签、校验颜色）。

5. Layout Principles

5. 布局原则

Max content width, section padding, grid system, whitespace philosophy.

最大内容宽度、区块内边距、网格系统、留白理念。

6. Design System Notes for Generation

6. 生成用设计系统说明

Copy this entire block into every baton prompt:

DESIGN SYSTEM (REQUIRED):

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

将整个块复制到每个接力棒提示词中：

DESIGN SYSTEM (REQUIRED):

平台：Web，桌面端优先，响应式
主题：[浅色/深色], [描述]
背景：[描述] (#hex)
表面：[描述] (#hex)
主色：[描述] (#hex) 用于 [角色]
文字：[描述] (#hex)
字体：通过Google Fonts引入的[字体名称]
圆角：[描述]
阴影：[描述]
间距：[描述]

undefined

File Structure

文件结构

project/
├── .design/
│   ├── SITE.md              # Project vision, sitemap, roadmap
│   ├── DESIGN.md            # Visual design system (source of truth)
│   ├── next-prompt.md       # The baton — current/next task
│   ├── metadata.json        # Stitch project/screen IDs (if using Stitch)
│   └── screenshots/         # Visual verification captures
├── site/
│   └── public/              # Production pages
└── .gitignore               # Add .design/screenshots/

project/
├── .design/
│   ├── SITE.md              # 项目愿景、站点地图、路线图
│   ├── DESIGN.md            # 视觉设计系统（唯一可信来源）
│   ├── next-prompt.md       # 接力棒文件——当前/下一个任务
│   ├── metadata.json        # Stitch项目/页面ID（如果使用Stitch）
│   └── screenshots/         # 视觉验证截图
├── site/
│   └── public/              # 生产环境页面
└── .gitignore               # 添加 .design/screenshots/

Tips

提示

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)

从首页开始搭建——首页会为所有其他页面建立视觉语言
生成前先阅读已有页面——一致性来自复制，而非重新生成
每次迭代只生成一个页面——不要尝试一次生成多个页面
每个接力棒都包含设计系统——Claude每次都需要最新的设计说明
使用路线图——不要随机生成页面，遵循用户的优先级顺序
尽早绑定导航——即使链接到还不存在的页面（后续会生成）

Common Pitfalls

常见陷阱

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

忘记更新
```
.design/next-prompt.md
```
（会中断循环）
重新创建站点地图中已经存在的页面
重新生成页眉/导航而非从已有页面复制
接力棒提示词中没有包含设计系统块
保留
```
href="#"
```
占位链接而没有替换为真实页面URL
页面之间的Tailwind配置不一致