SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场design-loop

design-loop

前端与建站

查看项目

更新于 10-14 07:34

技能介绍

用途

Design Loop 用于通过自主循环构建完整的多页面网站。每一轮迭代读取一个任务、生成一个页面、将其整合进站点，并在可行时进行视觉验证，然后写入下一个任务以保持循环继续。

主要能力

接力棒模式：文件 .design/next-prompt.md 充当迭代之间的接力棒。每个循环周期执行以下动作：读取接力棒中的当前任务；生成页面（通过 Claude 或 Google Stitch）；整合进站点结构（导航、链接）；如可用则通过浏览器自动化做视觉验证；更新站点文档；把下一个任务写入接力棒，从而让循环持续运行。

编排无关：循环可由三种方式驱动——人工介入（用户审阅每个页面后说“next”或“keep going”）、全自主（Claude 持续运行直到站点完成）、CI/CD（在 .design/next-prompt.md 变更时触发）。

两种生成后端：

  • Claude（默认）：零依赖，产出生产级 HTML/Tailwind，速度快，适合多数项目并可完全控制代码。
  • Google Stitch：需 npm install @google/stitch-sdk 及 API Key，AI 设计保真度更高，约 10-20 秒/屏，适合设计密集型项目与视觉打磨。

Stitch 可用性检测：每轮循环开始时检查 @google/stitch-sdk 是否已安装、STITCH_API_KEY 是否已在 .dev.vars 或环境中设置、.design/metadata.json 是否存在（含 Stitch 项目 ID）。三者齐全则使用 Stitch，否则回退到 Claude 生成。

Stitch SDK 能力：创建项目、引用已有项目、生成屏幕、获取资源（getHtml/getImage 返回下载 URL）、编辑已有屏幕（screen.edit 适合精修）、生成变体（可指定 variantCount、creativeRange 为 REFINE/EXPLORE/REIMAGINE、aspects 为 LAYOUT/COLOR_SCHEME/IMAGES/TEXT_FONT/TEXT_CONTENT）。设备类型支持 MOBILE/DESKTOP/TABLET/AGNOSTIC，模型可选 GEMINI_3_PRO 或 GEMINI_3_FLASH。其他操作包括 stitch.projects() 列出项目、project.screens() 列出屏幕、project.getScreen("id") 获取单个屏幕。图片 URL 追加 =w1280 可获得全分辨率。鉴权需 STITCH_API_KEY（或 OAuth 的 STITCH_ACCESS_TOKEN + GOOGLE_CLOUD_PROJECT）。错误抛出 StitchError，错误码包括 AUTH_FAILED、NOT_FOUND、RATE_LIMITED。

Stitch 项目持久化：将项目标识保存到 .design/metadata.json（含 projectId 与各页面的 screenId），以便后续迭代引用，避免每轮新建项目。建议用 screen.edit() 精修而非重新生成，对 Stitch HTML 进行后处理以替换共享的页眉/页脚，并在提示中包含 DESIGN.md 上下文。

使用方式

首次运行：引导项目。若 .design/ 尚不存在，则创建项目脚手架：询问用户站点名称与用途、目标受众、期望美学（极简、大胆、温暖等）、页面清单、品牌色（或通过 /design-system 从现有站点提取）。创建项目文件结构 project/.design/（含 SITE.md 愿景、站点地图、路线图；DESIGN.md 视觉设计系统；next-prompt.md 接力棒）以及 site/public/（生产页面存放处）。写入 SITE.md、DESIGN.md，并为首页写入第一个接力棒。

后续运行：读取接力棒。若 .design/next-prompt.md 已存在，则解析并继续循环。接力棒文件包含 YAML frontmatter（page 必填，为输出文件名不含 .html；layout 可选，为 standard/wide/sidebar，默认 standard）与提示正文。

执行协议（七步）：

  1. 读取接力棒，提取页面名、布局、提示正文。
  2. 参考上下文文件：SITE.md 第 4 节站点地图（避免重建已有页面）、DESIGN.md（配色、排版、组件样式）、site/public/ 中已有页面（页眉/页脚/导航模式）。关键：读取最近页面的 HTML 以提取确切的页眉、导航和页脚标记，新页面必须使用完全相同的共享元素。
  3. 生成页面。默认用 Claude 生成：产出完整 HTML 文件（Tailwind CSS via CDN），须精确匹配 DESIGN.md、逐字复用现有页面的页眉/导航/页脚、自包含单文件无构建步骤、响应式移动优先、如设计系统指定则含深色模式、语义化 HTML、真实导航链接，写入 site/public/{page}.html。若 Stitch 可用则用 Stitch 生成：结合接力棒正文与 DESIGN.md 系统块构建提示，调用 project.generate 生成屏幕，下载 HTML 与截图，后处理替换共享元素、统一 Tailwind 配置、接通内部导航链接，保存到 site/public/{page}.html，并更新 metadata.json 中的新 screenId。
  4. 整合进站点：更新所有现有页面的导航以加入新页面，修复占位链接，验证跨页面一致性（页眉、页脚、导航处处一致），检查内部链接无断链。
  5. 视觉验证（若浏览器可用）：启动本地服务器 npx serve site/public -p 3456，在桌面 1280px 与移动 375px 宽度截图，保存到 .design/screenshots/，对照设计系统比对并修复问题，停止服务器。若无浏览器自动化则跳到第 6 步。
  6. 更新站点文档：在 SITE.md 第 4 节标记页面完成，从第 5 节路线图或第 6 节想法中移除已消费项，添加生成过程中发现的新想法。
  7. 写入下一个接力棒（关键）：完成前必须更新 .design/next-prompt.md。选择下一页面的顺序为：先查第 5 节路线图高优先级项，其次中优先级项，再次从第 6 节想法中选，最后自创符合站点愿景的内容。若站点已完成（路线图全部完成且无更多想法），则写入 page: _complete 的接力棒并附构建总结，标志循环结束。

循环结束条件：路线图中所有页面已构建（SITE.md 第 4 节标记为 [x]）、用户表示停止、或接力棒包含 page: _complete。完成时输出总结：已构建页面（含链接）、截图（如已捕获）、未来工作的剩余想法。

跨页面一致性规则：多页面生成的最大风险是漂移（页面外观略有不同）。规则包括：页眉/导航从最近页面复制确切 HTML，绝不重新生成；页脚同样逐字复制，仅改活动页面指示；Tailwind config 若用 script 配置块须跨页面一致；颜色值始终使用 DESIGN.md 中的确切十六进制码；字体导入在各页使用相同的 Google Fonts link 标签；间距尺度保持一致。

设计映射：提供词表将模糊用户请求转化为精确设计指令，用于撰写接力棒提示，包括 UI/UX 关键词精炼（如“顶部菜单”→“带 logo 和菜单项的粘性导航栏”）、氛围描述词增强（如“现代”→“干净、极简、充裕留白、高对比排版”）、几何/深度/间距的 Tailwind 对应（如圆角、玻璃拟态、阴影层级、区块留白密度）。

SITE.md 模板：用于引导新项目，含核心身份、视觉语言、技术设置、实时站点地图、路线图（高/中/低优先级）、创作自由（想法列表）、交战规则。创作自由部分规定路线图为空时的指南：保持品牌一致、强化核心、采用小写描述性文件名。交战规则包括：不重建已标记 [x] 的页面；每次迭代完成前必须更新 next-prompt.md；从第 6 节移除已消费想法；从现有页面复制页眉/导航/页脚，绝不重新生成；所有内部链接必须指向真实页面。

DESIGN.md 模板：可用 design-system 技能生成或手动创建，写入 .design/DESIGN.md，含视觉主题与氛围等章节。

以上安装命令、代码与配置均保留原文，未作改动。