# 工作流图示

> SKILL.md 六步主线 + critic 独立复评分支 + training 资产数据流。
> 同一套流程用 3 种方式画：ASCII 主线图、Mermaid 完整流程图、Mermaid 数据流图。

---

## 一 · ASCII 主线图（极简版）

```
┌────────────────────────────────────────────────────────────────┐
│                                                                │
│   用户："把这篇做成网站"                                        │
│        │                                                       │
│        ▼                                                       │
│  ┌────────────────────────┐                                    │
│  │  Step 0 · 状态判断      │  必读 6 项 checklist               │
│  │  · principles.md ✓     │                                    │
│  │  · rubric.md      ✓    │                                    │
│  │  · 53 案例索引     ✓    │                                    │
│  │  · 5 个核心问题    ✓    │                                    │
│  │  · 1-2 个 idx 模板 ✓    │                                    │
│  │  · 素材盘点        ✓    │                                    │
│  └────────────┬───────────┘                                    │
│               ▼                                                │
│  ┌────────────────────────┐                                    │
│  │  Step 1 · 需求挖掘      │  Q1 用途 / Q2 动效 / Q3 媒体 /     │
│  │                         │  Q4 时长 / Q5 调性 (idx 参考)      │
│  └────────────┬───────────┘                                    │
│               ▼                                                │
│  ┌────────────────────────┐                                    │
│  │  Step 2 · 选模板        │  对照 53 案例 → 选 1-2 个 idx       │
│  │                         │  → 读 index.html + 复刻说明.md     │
│  └────────────┬───────────┘                                    │
│               ▼                                                │
│  ┌────────────────────────┐                                    │
│  │  Step 3 · 备素材        │  BGM / 真人照 / 视频 / 配图        │
│  └────────────┬───────────┘                                    │
│               ▼                                                │
│  ┌────────────────────────┐                                    │
│  │  Step 4 · 生成          │  output/<name>/index.html         │
│  │                         │  + _复刻说明.md 列出 P-XXX 声明    │
│  └────────────┬───────────┘                                    │
│               ▼                                                │
│  ┌────────────────────────┐                                    │
│  │  Step 5a · Generator   │  5 项一票否决检查                  │
│  │           自检          │  (broken img / 短输入 / 维度矛盾 /  │
│  │                         │   alt / 空 src)                    │
│  └────────────┬───────────┘                                    │
│               │ 任一不过 → ship-blocked → 回 Step 4             │
│               │ 全过                                            │
│               ▼                                                │
│  ╔════════════════════════╗                                    │
│  ║  Step 5b · ★Critic     ║  ⭐ 独立 sub-agent 不读自评          │
│  ║           独立复评       ║  · Step 0 broken-image 前置检查    │
│  ║   (反 reward hacking   ║  · Step 1-5 按 28 条 rubric 重打     │
│  ║    协议核心)            ║  · 验证 P-XXX 声明真假              │
│  ║                         ║  · 输出 critic-report.md           │
│  ╚════════════╤═══════════╝                                    │
│               │                                                 │
│      ┌────────┴────────┐                                       │
│      │                  │                                       │
│      ▼                  ▼                                       │
│  S/A 档             B/C 档                                      │
│  (≥ 3.5)            (< 3.5)                                    │
│      │                  │                                       │
│      │                  └─→ 回炉 → Step 4 重做                 │
│      ▼                          (≤ 3 轮)                       │
│  ┌────────────────────────┐                                    │
│  │  Step 6 · 部署          │  Cloudflare Pages                  │
│  │                         │  + 二维码                          │
│  └────────────┬───────────┘                                    │
│               ▼                                                │
│  ┌────────────────────────┐                                    │
│  │  Step 7 · 交付          │  URL + 截图 + 二维码 + 交付说明     │
│  └────────────┬───────────┘                                    │
│               ▼                                                │
│  ┌────────────────────────┐                                    │
│  │  Sweep · 资产回流       │  critic-report 复制到              │
│  │                         │  training/exemplars/critic-reports/│
│  │                         │  (F-002 要求：critic gap → 新 P)   │
│  └────────────────────────┘                                    │
│                                                                │
└────────────────────────────────────────────────────────────────┘
```

---

## 二 · Mermaid 完整流程图（含分支）

```mermaid
flowchart TD
    User["用户：把这篇做成网站"] --> S0[Step 0 · 状态判断<br/>6 项 checklist]
    S0 --> S1[Step 1 · 需求挖掘<br/>5 个核心问题]
    S1 --> Dim{维度组合<br/>是否矛盾?}
    Dim -- 矛盾 --> Warn[5a.0c 报警<br/>让用户调]
    Warn --> S1
    Dim -- OK --> Short{用户输入<br/>< 30 字且无素材?}
    Short -- 是 --> Probe[5a.0b 必须反问<br/>Q1/Q2/Q5]
    Probe --> S1
    Short -- 否 --> S2[Step 2 · 选模板<br/>对照 53 案例索引]

    S2 --> S2Read[读 output/replicas/<idx>/<br/>index.html + 复刻说明.md]
    S2Read --> S3[Step 3 · 备素材]

    S3 --> S3a{需要 BGM?}
    S3a -- 是 --> S3a1[base64 内联 / 抽参考库 /<br/>Web Audio 程序合成]
    S3a -- 否 --> S3b{需要照片?}
    S3a1 --> S3b
    S3b -- 是 --> S3b1[用户提供 / gpt-image-2 生 /<br/>CSS 几何代偿]
    S3b -- 否 --> S4
    S3b1 --> S4[Step 4 · 生成<br/>output/&lt;name&gt;/index.html<br/>+ _复刻说明.md 列 P-XXX]

    S4 --> S5a[Step 5a · Generator 自检<br/>5 项一票否决]

    S5a --> S5a0a{5a.0a broken img?}
    S5a0a -- 命中 --> Ship[ship-blocked]
    Ship --> Fix[修复路径:<br/>1. 验上传落盘<br/>2. AI 生图<br/>3. CSS 代偿]
    Fix --> S4
    S5a0a -- 通过 --> S5a0d{5a.0d/0e<br/>alt / 空 src OK?}
    S5a0d -- 不通过 --> S4
    S5a0d -- 通过 --> S5b

    S5b["Step 5b · ★ Critic 独立复评<br/>(反 reward hacking 协议核心)"]:::critical
    S5b --> S5bStep0[Step 0 · broken-image<br/>前置一票否决<br/>playwright + Read 截图]
    S5bStep0 --> SbBlocked{ship-blocked?}
    SbBlocked -- 是 --> Ship
    SbBlocked -- 否 --> S5b1[Step 1-5 ·<br/>验证 P-XXX 声明<br/>+ 28 条 rubric 打分<br/>+ 算加权总分<br/>+ ≥ 3 个可定位差距]

    S5b1 --> Grade{总分档位?}
    Grade -- "< 3.0 (C 档)" --> Rework[实质性返工<br/>可能换模板]
    Rework --> S2
    Grade -- "3.0-3.4 (B 档)" --> Patch[改 1-2 个硬伤<br/>≤ 3 轮]
    Patch --> S4
    Grade -- "≥ 3.5 (A/S 档)" --> S6[Step 6 · 部署<br/>Cloudflare Pages + 二维码]

    S6 --> S7[Step 7 · 交付<br/>URL + 截图 + 二维码 + 说明]
    S7 --> Sweep[Sweep · 资产回流<br/>critic-report → training/]

    classDef critical fill:#ffe5e5,stroke:#c01a16,stroke-width:3px,color:#000
```

---

## 三 · 数据流图（training 资产的读写）

```mermaid
flowchart LR
    subgraph TRAIN[training/ 资产层]
        P[principles.md<br/>49 条 P-001~P-049]
        R[rubric.md<br/>28 条 R-001~R-028]
        E[exemplars/good/<br/>6 件 S 档样本]
        PF[protocol-feedback.md<br/>F-001~F-004]
        CR[exemplars/critic-reports/<br/>历史复评]
    end

    subgraph GEN[Generator 执行层]
        Skill[.claude/skills/build-site/SKILL.md]
        Gen[generator agent]
        Out[output/&lt;name&gt;/index.html<br/>+ _复刻说明.md]
    end

    subgraph CRIT[Critic 复评层]
        CriAgent[独立 critic sub-agent]
        Report[output/&lt;name&gt;/critic-report.md]
    end

    subgraph FEED[反馈回流层]
        ExtP[principles-extender<br/>提炼新 P-XXX]
        ExtF[protocol 反思<br/>新 F-XXX]
    end

    P -.读.-> Gen
    R -.读.-> Gen
    E -.读.-> Gen
    Skill -.读.-> Gen
    Gen -- 写 --> Out

    Out -- "只读 index.html<br/>不读自评" --> CriAgent
    P -.读.-> CriAgent
    R -.读.-> CriAgent
    CR -.参考历史.-> CriAgent
    CriAgent -- 写 --> Report

    Report -- "gap 提炼" --> ExtP
    Report -- "协议层 bug" --> ExtF
    ExtP -- 更新 --> P
    ExtP -- 更新 --> R
    ExtF -- 更新 --> PF

    Report -- 归档 --> CR

    classDef readNode fill:#e8f4f8,stroke:#2c5282
    classDef writeNode fill:#fef5e7,stroke:#c05621
    classDef criticNode fill:#ffe5e5,stroke:#c01a16,stroke-width:2px
    class P,R,E,PF,CR readNode
    class Out,Report writeNode
    class CriAgent,Report criticNode
```

---

## 四 · 单步细节速查表

| 步骤 | 输入 | 输出 | 时长 | 关键约束 |
|---|---|---|---|---|
| Step 0 | 用户描述 | 6 项 checklist 状态 | < 1min | 6 项全过才进 Step 1 |
| Step 1 | 用户描述 + 上传素材 | 5 个核心问题答案 + 推荐 idx | 2-5min | 输入 < 30 字 + 无素材 → 必须反问 |
| Step 2 | 5 个问题答案 | 选定 1-2 个 idx 模板 + 已读 index.html | 5-10min | 必须真读不能跳 |
| Step 3 | 选定模板 + 用户素材 | base64 / gpt-image-2 / CSS 代偿 | 5-15min | broken-image 0 容忍的前置准备 |
| Step 4 | 模板 + 素材 | index.html + _复刻说明.md（含 P-XXX 声明） | 15-30min | 必须在 _复刻说明.md 列 ≥ 5 条 P-XXX |
| Step 5a | 成品 | 5 项一票否决结果 | ≤ 2min | 全过才进 5b |
| Step 5b | 成品（不含自评） | critic-report.md + 档位 S/A/B/C | 10-15min | 必须独立 sub-agent，不读 generator 自评 |
| Step 6 | A/S 档成品 | URL + 二维码 | 2-5min | < 3.5 不准部署 |
| Step 7 | URL + 二维码 | 交付包 | 2-5min | 接单要交付说明 |
| Sweep | critic-report.md | 复制到 training/exemplars/critic-reports/ | < 1min | F-002 要求 |

---

## 五 · 关键判定点（一图清完）

```
┌─────────────────────────────────────────────────────────┐
│  ship-blocker 列表 (任一命中 = 绝对不准部署)             │
│                                                          │
│  ① 5a.0a  broken image / dom_broken / network_broken    │
│  ② 5a.0b  用户输入 < 30 字 + 无素材  且未反问            │
│  ③ 5a.0c  维度组合矛盾未报警                             │
│  ④ 5a.0d  alt 是通用词 / placeholder / TODO              │
│  ⑤ 5a.0e  空 src / placeholder src                       │
│  ⑥ 5b·Step0  critic 视觉复核发现 broken image            │
│  ⑦ critic 加权总分 < 3.5                                 │
│  ⑧ R-001/R-002/R-009/R-011/R-013/R-027 任一一票否决项=0  │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│  档位与决策                                              │
│                                                          │
│  S 档 (≥ 4.0) → 部署 + 建议收进 exemplars/good          │
│  A 档 (3.5-3.9) → 部署                                   │
│  B 档 (3.0-3.4) → 改 1-2 个硬伤回炉 (≤ 3 轮)            │
│  C 档 (< 3.0)   → 实质性返工，可能换模板                │
│  SHIP-BLOCKED   → 修复路径逐条试，5a+5b 全流程重跑       │
└─────────────────────────────────────────────────────────┘
```

---

## 六 · Training 资产的角色定位

```
            ┌─────────────────┐
            │  principles.md  │ ← 49 条品味规则 (写之前查，写完再查)
            └────────┬────────┘
                     │ 翻译成可验收
                     ▼
            ┌─────────────────┐
            │   rubric.md     │ ← 28 条评分项 (critic 工具)
            └────────┬────────┘
                     │ 锚定到真实样本
                     ▼
            ┌─────────────────┐
            │  exemplars/good │ ← 6 件 S 档样本 (形态参考)
            └────────┬────────┘
                     │ 历史 gap
                     ▼
            ┌─────────────────┐
            │ exemplars/      │
            │ critic-reports/ │ ← 历史复评 (新 P 提炼源)
            └────────┬────────┘
                     │ 协议 bug
                     ▼
            ┌─────────────────┐
            │ protocol-       │
            │ feedback.md     │ ← F-001~F-004 协议层 retrospective
            └─────────────────┘
```

每件资产对 generator 和 critic 都是只读的。所有"训练成果"的写入只发生在协议反馈循环（critic-report → principles-extender → 更新 P / R / F）。

---

## 七 · 一句话总结

```
读 principles → 选模板 → 生成 → 自检 5 项一票否决
                ↓
        独立 critic 复评 28 条
                ↓
        ≥ 3.5 部署，否则回炉
                ↓
        critic-report 回流到 training/
```

**核心命门**：Critic 必须独立。评分者 = 被评分者的系统，方向必然向自己有利的方向偏。