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

design-ship

前端与建站

查看项目

更新于 10-16 02:50

技能介绍

用途

Design Ship 面向这样的场景：你手上有一个 Claude Design 的交接 URL（或本地交接文件），希望直接在当前分支上打开一个 PR，而不需要中间的手动步骤、手动生成测试或手动起草 PR 描述。

如果只需要导入、不需要测试和 PR，应改用 design-import。

主要能力

它把多个技能组合成一条流水线：

  1. design-import：搭建组件、写入来源信息、协调 token，组件可能被写入或复用。
  2. cover：为每个新组件生成 Storybook 故事；如果注册了新路由/视图，则生成 Playwright E2E；对包含非平凡逻辑的组件生成单元测试（纯展示型组件跳过）。
  3. expect：做差异感知的浏览器验证，并保存截图供 PR 正文使用。
  4. create-pr：打开 PR，正文包含 Claude Design URL 链接、前后对比截图、组件搭建清单、覆盖率变化，并打上 claude-design 标签。
  5. 更新来源信息：把打开的 PR 编号和 URL 写回 .claude/design-handoffs/<id>.json。

使用方式

命令形式：

design-ship https://claude.ai/design/abc123     # 从交接 URL
design-ship /tmp/handoff-bundle.json            # 从本地文件

预检

流水线开始前会检查工作区是否足够干净：

  • 若 git status --porcelain 有未提交改动，会询问如何处理：先提交、暂存并在 PR 打开后恢复、包含进本次 PR（有风险，仅当改动相关时）、或取消。
  • 若当前分支是 main、master 或 dev，会询问是否创建特性分支（推荐 feat/design-ship-<bundle-id>），或取消并自行切换分支。

各阶段

阶段 1 — 导入：把 bundle 参数委托给 design-import，捕获其输出（导入清单），其中包含 bundle_id、写入的组件列表和来源文件路径。如果导入失败则停止，不会针对部分导入的组件继续生成测试。

阶段 2 — 覆盖：把 cover 限定在阶段 1 写入的组件上运行，通过 ork:test-generator 子代理执行。要求：每个组件必须有 Storybook 故事；若注册了新路由则生成 Playwright E2E（检查 src/app 或 src/pages）；若组件包含非平凡逻辑则生成单元测试。

阶段 3 — 验证：通过 ork:expect-agent 子代理运行 expect，对当前 diff 做差异感知验证，并为每个新组件捕获前后截图，保存到 .claude/design-handoffs/{bundle_id}/screenshots/。验证失败不会阻塞，只报告发现并继续，失败会在 PR 评审中暴露。

阶段 4 — 创建 PR：使用 create-pr，正文由 bundle 和验证结果模板化生成，包含摘要、组件表（决策/组件/路径）、token 变化（新增/修改/已解决冲突数量）、验证摘要、覆盖率变化和截图表。通过 gh pr create 打开，并打上 claude-design 标签。

阶段 5 — 更新来源信息：读取来源文件，写入 pr 字段（编号、URL、打开时间），再写回。

失败模式

  • 预检：工作区脏或在 main 上 → 询问用户，不静默继续。
  • 阶段 1 导入：schema 偏差、token 冲突 → design-import 本身会提示；用户取消则中止。
  • 阶段 2 覆盖：测试生成失败 → 继续到 expect，测试可在 PR 评审中补救。
  • 阶段 3 验证：浏览器验证失败 → 继续到 PR，失败记录在 PR 正文中。
  • 阶段 4 创建 PR：gh 未认证 → 停止并暴露认证错误。
  • 阶段 5 来源信息：文件不可写 → 警告但不失败（PR 已打开）。

适用场景

  • 有 Claude Design 交接 URL 或文件，想直接得到可评审 PR。
  • 希望自动生成 Storybook 故事、Playwright E2E 和浏览器验证截图。
  • 希望 PR 正文自动包含组件清单、token 变化和覆盖率变化。

限制

  • 不自动合并：本技能只打开 PR，由人工评审和合并。
  • 无迭代循环：如果 PR 评审暴露出设计变更，目前需要从 Claude Design 重新导出并重新运行 design-ship。反向路径（实时 UI 漂移 → 为 claude.ai/design 生成精炼提示）在 M124 — Claude Design Drift Sync (Bet B) 中跟踪：#1391（PR hook）、#1393（design-iterate）、#1395（design-drift-detector agent）。
  • 单 bundle 范围：一次调用、一个 bundle、一个 PR，不支持多 bundle 批量。

不属于本技能职责的部分

  • 解析 bundle：由 claude-design-orchestrator 代理负责（由 design-import 调用）。
  • 组件去重：由 orchestrator 代理负责（由 design-import 调用）。
  • 测试执行（CI）：由 GitHub Actions 负责，本技能只生成测试。
  • 合并 PR：由人工评审者负责，绝不自动合并。