SITE.md与DESIGN.md的分工：stitch-skills两大章程文件详解

SITE.md与DESIGN.md的分工：stitch-skills两大章程文件详解

【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills

stitch-skills 是一套遵循 Agent Skills 开放标准的技能库（Skills Library），配合 Google Stitch 与 Stitch MCP 服务器使用，可让 Claude Code、Gemini CLI、Cursor、Antigravity 等 AI 编码智能体自主生成、管理网站设计。其中SITE.md与DESIGN.md是它最重要的两份"章程文件"：前者管"建什么"，后者管"长什么样"。本文用通俗方式带你一次看懂两者的分工与协作。

为什么需要两份"章程文件"？🧭

AI 智能体有一个天然弱点：上下文有限、容易"失忆"。当你让它连续生成一个网站的多个页面时，它可能：

• 忘记网站的名字、使命和目标用户
• 每页都用不同的颜色、字体，风格漂移
• 重复生成已经做过的页面，或漏掉导航链接

stitch-skills 的解法是：在项目根目录下建立一个.stitch/文件夹，用两份 Markdown 文件作为智能体的"长期记忆"（Long-Term Memory），每次迭代前强制读取。

.stitch/ ├── SITE.md # 项目章程：愿景、站点地图、路线图 ├── DESIGN.md # 设计系统：颜色、字体、组件风格 ├── next-prompt.md # 接力棒：下一轮要做什么 └── metadata.json # Stitch 项目与页面的 ID 档案

SITE.md：项目的"宪法"与任务清单

SITE.md 由 site-md 技能 生成，官方把它称为项目的"constitution"（宪法）。它回答的问题是：这个网站是谁做的、为什么做、要哪些页面、下一步干什么？

一份合格的 SITE.md 必须覆盖 7 个章节：

📄 想要直观感受，可以直接阅读官方示例 SITE.md——一个虚构的家具品牌网站，从使命"手工可持续家具线上展厅"到站点地图、优先级任务、创意点子清单写得清清楚楚，是一份很好的入门范本。

DESIGN.md：AI 看得懂的"视觉设计系统"

DESIGN.md 则是视觉层的唯一事实来源（Source of Truth）。它回答的问题是：所有页面应该长什么样？

关键设计理念是：Stitch 通过"自然语言视觉描述 + 精确色值"来理解设计。所以 DESIGN.md 不写代码，而是用设计师语言描述，例如把border-radius: 8px翻译成"Subtly rounded corners（微微圆润的边角）"，把#294056命名为"Deep Muted Teal-Navy（深沉柔和的蓝绿-藏青）"并标注功能角色。

标准 DESIGN.md 包含 5 大章节：

1. 视觉主题与氛围（Visual Theme & Atmosphere）
2. 色板与角色（Color Palette & Roles）——描述性命名 + Hex 值 + 用途
3. 字体排印规则（Typography Rules）
4. 组件样式（Component Stylings：按钮、卡片、输入框、导航）
5. 布局原则（Layout Principles：留白、栅格、响应式）

📄 完整示例见 DESIGN.md，它对"Whitespace Strategy（留白策略）"的细致程度，堪称 AI 生成页面保持高级感的秘诀。

DESIGN.md 有三种生成方式，按需选择：

生成后还可以用 manage-design-system 技能 把它上传到 Stitch 项目级设计系统，并一键应用到所有屏幕。

SITE.md 与 DESIGN.md 核心分工对比

一句话记忆：SITE.md 决定"去哪儿"，DESIGN.md 决定"穿什么衣服去"。

两大章程如何驱动 Build Loop 自动建站 🔄

真正让两份文件"活起来"的是 stitch-loop 技能（Build Loop 模式），它通过"接力棒"机制实现多页面自动迭代：

1. 读接力棒：从 next-prompt.md 读取本轮要生成的页面名与提示词
2. 查阅章程：读 SITE.md 取 Stitch Project ID、避免重复已存在的页面；读 DESIGN.md 提取设计系统块
3. 生成页面：调用 Stitch MCP 工具生成屏幕，下载 HTML 与截图到.stitch/designs/
4. 集成进站点：移入site/public/，接好导航链接
5. 回写文档：在 SITE.md 站点地图打勾、划掉已完成的路线图任务
6. 写下一棒：更新 next-prompt.md，循环继续

示例接力棒里能看到 DESIGN.md 的影子——设计系统块被原样复制进提示词（背景 Warm cream #FCFAFA、主色 Teal-Navy #294056），保证每一页风格统一。

新手快速上手三步走

第一步：克隆仓库（如需源码）

git clone https://gitcode.com/GitHub_Trending/st/stitch-skills

第二步：安装技能插件（以 Claude Code 为例，完整方案见 README.md）

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

第三步：用自然语言下达指令，例如：

• "根据这份需求文档生成 .stitch/SITE.md"（触发 site-md 技能）
• "分析 Stitch 项目 projects/123 并生成 DESIGN.md"（触发 design-md 技能）
• "用 Build Loop 建一个 5 页的作品集网站"（触发 stitch-loop 循环）

⚠️ 前提：需先在智能体环境中配置好 Stitch MCP 服务器。单独安装技能时注意依赖关系，务必把相关技能装齐。

常见踩坑与避坑建议 💡

• ❌忘记更新 next-prompt.md→ 接力棒断掉，循环停摆（stitch-loop 称之为"Critical"规则）
• ❌提示词里漏掉 DESIGN.md 设计系统块→ 页面风格漂移、生成质量下降
• ❌重复生成站点地图中已有的页面→ 每轮务必先核对 SITE.md 第 4 章
• ❌DESIGN.md 里只写"蓝色""圆角"这类模糊词→ 应写"描述性命名 + Hex 值 + 功能角色"
• ❌占位链接href="#"不接线→ 集成时要把新页面挂进全局导航

总结

stitch-skills 用两份 Markdown 章程解决了 AI 建站"失忆"与"风格漂移"两大难题：SITE.md 是项目管理层，记录身份、地图与路线图；DESIGN.md 是视觉规范层，用自然语言锁定色板、字体与组件风格。两者加上接力棒 next-prompt.md，构成 Build Loop 的完整记忆系统——理解了这套分工，你就能指挥 AI 智能体稳定地产出风格统一、多页面完整的网站。

【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills