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-skillsstitch-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 个章节章节内容通俗理解1. 核心身份 Core Identity项目名、Stitch 项目 ID、使命、目标用户、语气网站的身份证2. 视觉语言 Visual Language主/次/辅三级气质形容词如 Warm、Minimal一句话定调性3. 架构与文件结构目录布局、资产流转、导航策略网站的户型图4. 实时站点地图 Sitemap已完成页面标[x]待做页面标[ ]工程进度表5. 路线图 Roadmap高/中/低优先级任务清单待办事项 Backlog6. 创作自由指引路线图用完后允许智能体自由发挥的边界自由发挥的护栏7. 参与规则 Rules禁止重复造页、必须更新接力棒等铁律工作纪律 想要直观感受可以直接阅读官方示例 SITE.md——一个虚构的家具品牌网站从使命手工可持续家具线上展厅到站点地图、优先级任务、创意点子清单写得清清楚楚是一份很好的入门范本。DESIGN.mdAI 看得懂的视觉设计系统DESIGN.md 则是视觉层的唯一事实来源Source of Truth。它回答的问题是所有页面应该长什么样关键设计理念是Stitch 通过自然语言视觉描述 精确色值来理解设计。所以 DESIGN.md 不写代码而是用设计师语言描述例如把border-radius: 8px翻译成Subtly rounded corners微微圆润的边角把#294056命名为Deep Muted Teal-Navy深沉柔和的蓝绿-藏青并标注功能角色。标准 DESIGN.md 包含 5 大章节视觉主题与氛围Visual Theme Atmosphere色板与角色Color Palette Roles——描述性命名 Hex 值 用途字体排印规则Typography Rules组件样式Component Stylings按钮、卡片、输入框、导航布局原则Layout Principles留白、栅格、响应式 完整示例见 DESIGN.md它对Whitespace Strategy留白策略的细致程度堪称 AI 生成页面保持高级感的秘诀。DESIGN.md 有三种生成方式按需选择技能适用场景design-md分析 Stitch 项目中已有的屏幕反推出语义化设计系统taste-design从零生成拒绝 AI 味的高端设计系统附带禁飞清单禁止 Inter 字体、纯黑、霓虹发光、三列等宽卡片等extract-design-md直接从React/Vue 等前端源码提取设计系统生成后还可以用 manage-design-system 技能 把它上传到 Stitch 项目级设计系统并一键应用到所有屏幕。SITE.md 与 DESIGN.md 核心分工对比维度SITE.mdDESIGN.md定位项目宪法 / 长期记忆视觉设计系统 / 事实来源回答的问题建什么、为什么、做到哪了每一页该长什么样生成技能site-mddesign-md / taste-design / extract-design-md关键内容身份、站点地图、路线图色板、字体、组件、布局更新时机每完成一个页面后更新地图与进度风格变更时重新生成类比产品经理 项目经理设计总监一句话记忆SITE.md 决定去哪儿DESIGN.md 决定穿什么衣服去。两大章程如何驱动 Build Loop 自动建站 真正让两份文件活起来的是 stitch-loop 技能Build Loop 模式它通过接力棒机制实现多页面自动迭代读接力棒从 next-prompt.md 读取本轮要生成的页面名与提示词查阅章程读 SITE.md 取 Stitch Project ID、避免重复已存在的页面读 DESIGN.md 提取设计系统块生成页面调用 Stitch MCP 工具生成屏幕下载 HTML 与截图到.stitch/designs/集成进站点移入site/public/接好导航链接回写文档在 SITE.md 站点地图打勾、划掉已完成的路线图任务写下一棒更新 next-prompt.md循环继续示例接力棒里能看到 DESIGN.md 的影子——设计系统块被原样复制进提示词背景 Warm cream #FCFAFA、主色 Teal-Navy #294056保证每一页风格统一。新手快速上手三步走第一步克隆仓库如需源码git clone https://gitcode.com/GitHub_Trending/st/stitch-skills第二步安装技能插件以 Claude Code 为例完整方案见 README.mdnpx 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考