Berth 设计稿工作流

活稿在 canvas 上改，仓库 design/ 里放它的只读镜像，任何 agent（Claude / Codex / Cursor）都读这份镜像，用 sha256 判断照的是不是同一版稿。拉取只能在 Claude 里做，由交接人负责。

ADR-0190 / 0191 / 0193 / 0194 canvas：claude.ai/artifact/JiFvo67iRhEWjLa6GUh17X 当前镜像 version 1792912999-972e · 94 个文件

一张图看完

设计大佬 / jojo

1在 canvas 改稿只在 Berth Design canvas 改。
Play 视图自查，两档主题都要看。

交接人Claude 会话

2拉取/design-pull
把 canvas 整体替换进 design/，并重算 lock

→

3提交 + pushchore(design): pull canvas <version>
只含 design/

→

4钉票description 加「## 设计稿」四元组（从 lock 抄）＋挂 Play 截图 → ready-for-agent

实现者任意 agent

5认领--assignee self --state "In Progress"
git pull

→

6比对 sha256票面 vs design/canvas.lock.json
（或 shasum -a 256）

→

7照稿还原读 design/project/<artboard>
kit 部件读同目录的 Mobile<Name>.dc.html

8验证 + 收尾verify / verify-mobile、react-doctor
勾 AC → 证据 comment → Done

闸pre-push + CI

design:check（arch:audit 内）镜像和 lock 逐字一致、文件不多不少，lock 不能为空。手改、漏拉、拉一半都会红。

第 6 步：sha256 比对结果怎么处理

相同

照稿实现。只是 version 变了、sha256 没变的，不算漂移（version 是整个 canvas 共用的）。

不同

先 git pull 再比一次，可能只是本地镜像还停在交接前的旧版本。

仍不同 / 文件不存在

停下来问交接人要不要纳入本票，自己不二选一。

票面没有「设计稿」段

这张票没有判定依据。已上线的屏以现行代码和对应的 ADR / 票为准，不去翻旧稿凑依据。

票面四元组

## 设计稿

- canvas：https://claude.ai/artifact/JiFvo67iRhEWjLa6GUh17X
- artboard：project/mobile-trade-perp.dc.html
- version：1792912999-972e
- sha256：<lock 里该文件的值>

四项缺一不可；version 和 sha256 都从 lock 抄。
涉及多张 artboard（比如 web + mobile）时，每张各列一组 artboard / sha256，canvas 和 version 共用。
票上只挂截图。.dc.html 不再挂附件，冻结版本在 git log -- design/project/<artboard> 里能查到。
改的是 kit 组件：票里钉 Mobile<Name>.dc.html 本身。屏的 sha256 不包含它引用的 kit。

还原规则

web

组件用 @berth/uikit / @berth/widgets
契约：coding-standards → uikit-composition.md「从设计稿还原时」（ADR-0061）
验证：verify skill

mobile

kit 和代码同名：MobileButton ↔ apps/mobile/src/ui 的 Button
尺寸档 / variant / tone 照 kit 的调节项取，不在屏里手搓同形件
画布 402×874，数值是 pt，照写成任意值 h-[40px]，不换算成 rem
两档主题都核；验证用 verify-mobile

仓库里的设计稿

design/
  canvas.lock.json      canvas url · version · 每个文件的 sha256
  project/              = canvas 的 project/，路径一一对应
    canvas.json         页面 / 布局索引
    web-*.dc.html       web artboard
    mobile-*.dc.html    mobile 屏（-sheet-* 为底部弹层）
    Mobile<Name>.dc.html  Mobile kit 部件
    ds/berth/           tokens.css/json · 组件 bundle · 字体

`.dc.html` 格式

<x-dc> 模板：HTML 标记 + {{ 插值 }}，<sc-if> / <sc-for> 控制流
<dc-import name="MobileX"> 引用其他 artboard
<script type="text/x-dc" data-props=…>：调节项定义 + class Component extends DCLogic（状态 / 交互）
样式全用设计系统 token（var(--primary) 等）
本地只能读源码，离线渲染不了；看效果用票上截图，或 canvas 的 Play 视图

命令速查

场景	命令	谁
拉 canvas 到本地	`/design-pull`	Claude
拉取后重算 lock	`pnpm design:lock --version <v>`	design-pull 流程内
校验镜像	`pnpm design:check`（`arch:audit` 自动跑）	任何人 / CI
自算 sha256	`shasum -a 256 design/project/<artboard>`	任意 agent
找当时照的那版	`git log -- design/project/<artboard>`	任何人

不要

✕	手改 `design/` 后再跑 `design:lock` 让闸变绿。改稿去 canvas 改。
✕	只拉单个文件。lock 记的是整个 canvas 某一个 version 的快照。
✕	比对 sha256 不一致时自己挑一版照着做。
✕	拿 tag `design-legacy-final` 里的旧原型当判定依据。
✕	在 canvas 编辑态点画布做自查。只看 Play 视图。

常见情况

情况	做法
交接后 canvas 又改了	镜像不会自动更新。交接人重新跑 `/design-pull`，更新票面四元组；或者另开一张票。
拉取时 version 一直变（有人在改）	以 read 结果里的 version 为准，拉完重新列一次文件清单核对，不一致就重拉。
实现者没有 claude.ai 账号	不影响，只读 `design/` 和票上截图就够。
`design:check` 报红	有人手改了文件或者只拉了一半。跑 `/design-pull` 整体重拉。