Design Restore

---
name: design-restore
description: >
  后台管理系统还原设计标准（restore 模式专用）。以"与效果图的还原度 Fidelity"
  为唯一验收口径，替代 frontend-design 的"原创性 Originality"。提供还原契约
  结构、三层裁定模型、Fidelity 6 维评分标准与校准示例、电力企业后台设计锚点。
  供 restore-planner 与 frontend-evaluator（restore 分支）使用。
user-invocable: false
---

# Design-Restore — 后台管理系统还原设计标准

本 skill 定义 restore 模式的设计验收标准。它**替代** `frontend-design`，用于"按效果图忠实还原后台管理系统"的场景。

## 核心哲学：还原优先，而非原创优先

`frontend-design` 奖励"独特、大胆、反模板"（Originality），适用于自由生成。**restore 模式恰恰相反**——目标是**忠实还原既定效果图**。因此：

- **Originality → Fidelity（还原度/吻合度）**：评的是"与效果图像不像"，不是"独不独特"。
- **组件库规范使用不是 AI slop**：效果图本就是 Ant Design 风企业后台（密集表格、筛选区、抽屉、Tab、彩色状态标签、迷你进度条）。**规范使用 Ant Design 是"忠实还原"的加分项，不是扣分项。**
- **禁止 pivot**：与效果图的差异 = 缺陷。任何时候不得整体重设计视觉层，只允许 refine 向效果图/契约靠拢。
- **一致性来自 design tokens**：所有颜色/字号/间距/圆角只从 design tokens（ui-lib theme token）注入，禁止局部硬编码。

## 三层裁定模型（冲突时怎么判）

当效果图、spec、生图提示词之间不一致时，按三层裁定：

| 层 | 规则 | 优先级 |
|---|---|---|
| **L1 硬覆盖层** | spec **强制约定**（如 CGCS2000、数据截止时间标注、RBAC、AES-256/SHA-256）→ 无条件覆盖效果图 | 最高，一票否决，不计入权重 |
| **L2 软权重层** | `image_weight` vs `spec_weight`（和=1，默认 0.8/0.2）。图与 spec **非强制**描述冲突时按权重裁定 | 中 |
| **L3 图基底** | 效果图为默认实现基准 | 基底 |

**PNG 是布局/组件/字段的最终权威**：与 MD 冲突时 PNG 优先（复杂布局页 MD 可能漏面板/漏字段）。

## 还原契约结构（restore-planner 产出，6 区块）

```markdown
# 还原契约 — <界面名> (<编号>)
## 0. 元信息（效果图路径 / spec关联 / 还原占比 / 优先级 / 界面类型）
## 1. 页面定位（一句话功能意图）
## 2. 三源校验注记（MD↔PNG↔生图提示词 一致性 + AI图可行性过滤 + PNG增量/纠错）
## 3. L1 强制约定（spec 硬覆盖项，一票否决）
## 4. 区域划分 + 宽度比/栅格（分区树）+ 响应式与弹性（按"响应式总纲"逐区写明）
## 4A. 图片类内容占位符清单（按"占位符规则"单独列出，不实现图像内容）
## 5. 组件清单（类型 + props + 状态/颜色规则）
## 6. 字段/列/表单清单 + 样例数据（复用 MD/PNG 真实数据）
## 7. 交互（点击/弹窗/抽屉/Tab/跳转/CRUD 闭环）
## 8. 验收 checklist（套 6 阶段闭环 + Fidelity 6 维自查）
```

## 图片类内容占位符规则（A1 必做，用户裁定 2026-07-22）

效果图中的**大面积图片、banner、图片展示、复杂 icon、装饰性插图**（电力场景大图/全景照片/卫星地图/列表缩略图/U盘插图等）：

1. **A1 逆向分析时就必须单独识别、单独列出**（写入契约 §4A 占位符清单），不混入组件清单。
2. **一律不实现图像内容**——不程序生成、不 canvas 合成、不 SVG 简化描绘、不找近似素材。实现了也没用（demo 观众知道是样例），**浪费 token 和时间**。
3. 实现层统一用 **`ImagePlaceholder` 图片占位符组件**（灰底 + 居中图标 + 内容标注文字，如"全景图 360° 占位"），尺寸/比例按效果图占位。
4. **组件与交互仍还原**：占位的是"图像内容"，不是组件本身。例：全景查看器仍用 Pannellum（L1 强制）+ 极简占位图，拖拽/缩放/全屏/切换交互完整；列表缩略图位仍按效果图尺寸排版。
5. **Fidelity 评分**：占位符内容不计入视觉语言/组件维度扣分（裁定豁免项）；但占位符的**尺寸、位置、比例**与效果图不符仍扣分。

## 响应式总纲（用户裁定 2026-07-22）

效果图是固定画布，真实浏览器尺寸可变。契约 §4 必须含响应式与弹性约定：

- **最小宽度 = 效果图画布宽度**（本项目 1672px）：视口小于此宽度 → 页面保持最小宽度，出**横向滚动条**，不挤压变形。
- **width 100% 占满**：视口大于最小宽度 → 内容弹性拉伸占满页面宽度。
- **栏高弹性**：不用固定像素栏高把内容折出可视区；可视区内弹性填充，溢出出纵向滚动。
- 文字溢出规则：长文本省略号或换行，禁止互叠。

## Fidelity 6 维评分标准（evaluator 打分用）

总分 0–100，按维度加权。**L1 为否决项**（任一 L1 未落地 → 直接 FAIL，不计总分）。

| 维度 | 权重 | 评什么 |
|---|---|---|
| 布局结构（分区/宽度比/栅格） | 高 | 与效果图的分区、比例、栅格是否一致 |
| 视觉语言（配色/字体/间距/标签色） | 高 | 色板、字族、间距、状态标签颜色是否一致 |
| 组件（类型/样式/状态） | 高 | 用了对的组件（表格/抽屉/Tab/进度条），样式与状态对 |
| 字段与样例数据（列/字段/真实数据） | 中 | 表格列、表单字段、样例数据与效果图一致 |
| 交互（点击/弹窗/抽屉/Tab） | 中 | 交互行为与效果图描述一致 |
| **spec 强制约定 L1 落地** | **否决** | L1 项是否全部实现 |

**评分锚点**：
- **90–100**：结构/组件/字段/配色全部对得上，仅个别像素级细节偏差。
- **85–89**：核心结构/组件/字段/配色正确，少量次要细节偏差。**≥85 = PASS 线**。
- **70–84**：主体结构对，但有可察觉的模块缺失或配色/组件不一致。
- **<70**：布局错误（如漏面板、栏数不对）、组件用错、字段缺失——**FAIL**。
- **不追求 95+**：AI 图幻觉细节、像素级对齐不值得磨。

## 评估档位（full / visual-only，用户裁定 2026-07-23）

restore 的评估分两档，由 sprint 合同的"评估档位"字段决定，evaluator 据此分流：

### 档位一 · full（完整，默认）
- Fidelity **6 维全评**（布局/视觉/组件/字段/交互 + L1 否决）。
- playwright **验视觉 + 功能交互**：跑 6 阶段闭环（Entry/Interaction/Propagation/Persistence/Reverse/Failure）+ 刷新存活。
- **L1 全部核验**，一票否决。
- 产出完整 `fidelity-report` + G2 完整报告。
- 适合：正式交付/演示、要质量保障、效果图业务逻辑可信。

### 档位二 · visual-only（仅视觉还原度）
- playwright **只导航 + 截图做视觉比对**，**禁止点击/填表/弹窗/刷新等任何功能交互**（省 30-40% token）。
- Fidelity **评 5 维**（布局/视觉/组件/字段），**交互维标 N/A**，总分按 5 维加权**归一**到 0-100（交互维权重分摊到其余维）。
- **L1 拆两类**：
  - **静态 L1**（截图可见：如"孔口坐标（CGCS2000）"标注、角色名、状态色、文案改字、字段存在性）→ **正常核验，仍一票否决**。
  - **动态 L1**（必须交互：persist 刷新存活、必填校验、状态流转、批量联动）→ **标注"未验·人工兜底"，不计入否决**（本次 demo 52 项 L1 中约 35% 为动态）。
- 报告顶部强制声明 `⚠️ 仅覆盖视觉还原度，功能/动态 L1 未验，需人工验收`；Fidelity 分注明"5 维归一分，不可与 full 档横比"。
- 适合：效果图业务不全对、快速出第一版、后续人工调整。

> **边界提醒**：visual-only 漏掉的缺陷全部是"人工一点就发现"的交互类（如静默保存失败、persist 失效），不会有"必须自动化才暴露"的视觉盲区——视觉正是该档全力验的。但若用于正式交付，务必切换 full 复验一次。

## 校准示例（防分数漂移，每次评分前重读）

### 示例 P（PASS）：项目列表高保真
**Fidelity = 88**
- 顶部筛选区（搜索+4下拉+时间范围+重置+3按钮）齐全；表格 12 列与效果图一致；状态标签颜色映射正确（🔵在建 blue/✅已完成 green/⏳待审核 orange）；数据完整度迷你进度条按 >80%绿/60-80%黄/<60%红 着色；右侧抽屉含基本信息+关联统计+快捷操作+附件。
- 偏差：分页器样式与效果图略不同（次要）。L1（CGCS2000、数据截止时间）已落地。
- **判 PASS**：核心结构/组件/字段/配色都对，仅次要样式偏差。

### 示例 F（FAIL）：项目画像漏右侧面板
**Fidelity = 55**
- 只做了"左 1/3 列表 + 右 2/3 查看器"两栏，**漏掉了效果图实际的右侧"全景点位信息面板"（三栏布局）**；地图联动缩略图、底部操作按钮组、数据质量评分/数据量概览均缺失。
- **判 FAIL**：布局结构错误（栏数不对、漏模块），属"排版/模块偏差大"的典型。正确响应 = refine 补三栏 + 信息面板 + 联动，**不是 pivot**。

### 示例 L（FAIL，L1 否决）：坐标系未用 CGCS2000
- 界面视觉还原度高（Fidelity 各维度本可到 88），但钻孔坐标未按 spec 强制用 CGCS2000 经纬度（用了任意坐标系）。
- **判 FAIL**：L1 强制约定未落地，一票否决，不计总分。正确响应 = 修正坐标系，非视觉调整。

## 电力企业后台设计锚点（替代 Linear/Vercel 等西方 SaaS 锚点）

评 Fidelity 时，对照"中国电力/政务企业后台"的视觉语言，而非西方互联网产品：
- **布局**：顶部筛选区 + 表格主体 + 底部分页统计 + 右侧抽屉；或左侧列表/树 + 右侧详情分屏；或顶部信息横条 + Tab + 多栏内容。
- **配色**：深蓝主色（#1a365d 系）+ 科技蓝强调（#3182ce），白底卡片，灰底页面。
- **组件**：密集表格、下拉筛选、彩色状态标签、迷你进度条、Tab、抽屉/弹窗、描述列表、统计圆环。
- **密度**：信息密度适中偏高（企业后台特征），不追求大留白。

## 给 restore-planner 的指引
- 产契约时以 PNG 为权威做三源校验；复杂布局页 PNG 校验不可省略。
- 样例数据复用效果图 MD/PNG 的真实数据，不造假数据。
- 契约设 definition of done（6 区块全填 + 宽度比 + 状态规则 + 样例数据 + 6 阶段 checklist + L1 标注），够用即停。

## 给 frontend-evaluator（restore 分支）的指引
- **先读 sprint 合同"评估档位"字段**，按 full / visual-only 分流（见上节）。
- 评 Fidelity 前重读校准示例 P/F/L 锚定。
- 用 Playwright 截图 demo，与效果图 PNG 对比，按维度逐项 ✅/⚠️/❌（visual-only 档只评 5 维，交互维 N/A）。
- 每条 FAIL 标注差距来源（契约歧义 / 实现偏差 / 图幻觉），喂给 stall 回溯。
- 一致性检查：发现局部硬编码色值/字号（未走 design tokens）→ 记为视觉语言维度扣分。
- **visual-only 档额外**：L1 逐条标"静态/动态"，动态项标"未验·人工兜底"；报告顶部加免责声明；Fidelity 分注明"5 维归一"。