git:20260711.57c1362 to git:20260711.fe811e1

20 added, 8 removed. Audit A to A.

---

name: web-flow-design

description: "web-flow 内部的设计系统阶段：消费已确认原型，提炼 design tokens 和布局契约，保证后续并行实现共享同一视觉与结构事实源。仅在 web-flow 主 Skill 明确调用时使用；当前阶段为 design。不要因普通用户请求单独触发。"

---

# web-flow-design · 设计系统

- 从 `../web-flow/workflow.yaml` 读取 `design` 契约。视觉方向以已选择的 prototype 为事实源，不在本阶段重新发明原型。

+ 按 [WebFlow 工作流](../web-flow/references/workflow.md)消费视觉门已批准的 artifact，不在本阶段重新发明信息架构或视觉方向。

+ ## 输入选择

+ - fast：只消费 G1 决策绑定的 `approved wireframe`。

+ - full：只消费 G2 决策绑定的 `approved prototype`。

+ 不能读取“最新文件”来猜输入；必须使用 gate event 绑定的 artifact revision 和实时 hash。

## 独立 memory

若本 Skill 的 `memory/index.md` 存在，只读取设计一致性、布局契约和当前外部设计工具相关的 1–3 条记忆；不存在时直接继续。通过三项验证的候选只写回本 Skill 的 `memory/`。

## 真实 SOP

1. **观察原型**：识别层级、节奏、关键状态和桌面/移动差异，记录证据。

- 2. **提炼 tokens**：定义颜色、字体、间距、圆角、边框、阴影和动效节奏；每个值能追溯到原型或明确决策。

+ 2. **提炼 tokens**：定义颜色、字体、间距、圆角、边框、阴影和动效节奏；每个值都能追溯到已批准 artifact 或明确决策。

3. **建立布局契约**：定义 sections 顺序、slot、容器、断点和关键组件状态，作为并行实现的共同输入。

- 4. **检查一致性**：用少量代表性 section 验证 tokens 与布局能复现原型，不把工具默认样式当设计决策。

+ 4. **写可执行 CSS**：把自定义属性、字体声明、断点和 motion tokens 写成普通 CSS，避免后续再翻译一层配置格式。

+ 5. **检查一致性**：用代表性 section 验证 tokens 与布局能复现已批准输入，不把工具默认样式当设计决策。

## 产物

- 写入 `.web-flow/runs/<run_id>/design/`：

+ 写入 run：

- - `design-tokens.yaml`

- - `layout-contract.yaml`

- - `stage-result.yaml`，包含结构化决策轨迹和 `next: build`

+ - `design/design-tokens.css`：可读取、可复制的 tokens 契约证据。

+ - `design/layout-contract.md`：sections、slots、断点、状态、动效意图和响应式变化。

+ - `design/stage-result.md`：观察、证据、决定、行动、验证、residual 和 `next: build`。

+ run 内 CSS 只是不可变的契约证据。真实站点样式由 build 阶段写入 `sourceDir`，不得让运行时 artifact 路径成为网站源码依赖。

+ 每个文件完成后执行 runtime `artifact add`；任何修订都追加 revision，不覆盖旧设计证据。

## 交接评分

- 调用 `web-flow-benchmark` 的 `design` rubric。每轮只处理 `top_fix`，最多两轮；`must_pass` 未通过时保持阻断。

+ 调用 `web-flow-benchmark` 的 design rubric，并通过 `review record` 绑定当前 artifact、review 文档和 rubric hash。每轮只处理一个 `top_fix`，最多两轮；`must_pass` 未通过时保持阻断并单独 recheck。