Huo15 Openclaw Design Critique

SKILL.md

---
name: huo15-openclaw-design-critique
displayName: 火一五设计评审技能
description: 5 维度设计评审（美学 / 可用性 / 品牌一致 / 内容 / 技术实现）+ Keep/Fix/Quick Wins 三分类 + 雷达图结构化输出。用于对现成网页、HTML、截图、Figma 链接做专业打分与改进建议。触发词：设计评审、UI 审查、给这个页面打分、review 这个设计、这个界面怎么样、优化建议。
version: 1.0.0
aliases:
  - 火一五设计评审
  - 设计评审
  - UI 审查
  - UX 评审
  - 设计打分
  - design review
  - design critique
---

# 火一五设计评审技能 v1.0

> 结构化 5 维设计评审 — 青岛火一五信息科技有限公司

---

## 一、触发场景

当用户对一个已存在的界面/页面/截图，要求**专业评价或改进建议**：

- "给这个页面打分"
- "review 一下这个 UI"
- "这个设计哪里有问题"
- "这个落地页怎么优化"
- 附带一张截图或一个 URL 要求评估

**产出**：5 维打分（雷达图文本化）+ Keep/Fix/Quick Wins 三分类清单 + 优先级排序。

---

## 二、五维评分体系（每项 1-5 分）

| 维度 | 关注点 | 1 分 | 5 分 |
|------|--------|------|------|
| **美学 Aesthetic** | 字体 / 颜色 / 动效 / 空间 / 氛围 | 通用 AI slop | 意图明确的流派 |
| **可用性 Usability** | 信息层级、可点击性、反馈、a11y | 用户需要猜 | 一眼理解下一步 |
| **品牌一致 Brand** | 与品牌调性 / 产品定位一致度 | 和任何其他站能混用 | 一眼辨识品牌 |
| **内容 Content** | 文案质量、信息密度、有无废话 | 占位文案 / 废话堆砌 | 每个字都在做事 |
| **实现 Implementation** | 性能、响应式、代码质量、可维护 | 打开慢 / 布局崩 | 丝滑 / 鲁棒 |

**总分规则**：
- 5×5 = 25 分制
- **短板决定印象**：任何一项 ≤ 2 分，总分不得超过 15（木桶短板）
- **"AI slop 雷区"**：命中 `huo15-openclaw-frontend-design §四` 硬红线任一，美学直接 ≤ 2

---

## 三、输出结构（每次评审必按此格式）

```
### 总评
[一句话总结：这个设计是什么流派？最大亮点？最大问题？]

### 五维打分
| 维度 | 分数 | 备注 |
|------|------|------|
| 美学 | X/5 | ... |
| 可用性 | X/5 | ... |
| 品牌一致 | X/5 | ... |
| 内容 | X/5 | ... |
| 实现 | X/5 | ... |
**总分：XX/25**

### 雷达图（ASCII）
        美学 5
          ●
  内容 ● ─┼─ ● 可用性
        ●│●
      实现 ● 品牌
(用 ● 的位置表示分数，1-5 对应距离中心)

### Keep（保持）
- ...（这几点做得好，不要动）

### Fix（必改）
- P0 ...（上线前必须修）
- P1 ...（下个迭代）

### Quick Wins（1 小时内能做）
- ...（性价比最高的小改动）

### 改进后预期
[预计改完能从 XX/25 到 YY/25]
```

---

## 四、评审工作流

### 阶段 1 · 获取素材
- 如果给的是 URL → 要求用户提供截图（调用 `huo15-openclaw-frontend-design §六·阶段 4` 的 Playwright 截图 CLI）
- 如果给的是 HTML 代码 → 自己读 + 要求用户在本地浏览器打开后截图
- 如果只给了描述 → 拒绝评审，要求至少提供一张截图

### 阶段 2 · 硬红线体检（30 秒）
对照 `huo15-openclaw-frontend-design §四` 的 8 条硬红线逐一过一遍。命中直接列入 Fix · P0。

### 阶段 3 · 五维打分
依次给 5 个维度打分，每个维度**至少一条具体理由**（不能只给分数）。

### 阶段 4 · 三分类建议
- **Keep**：避免改掉的闪光点（保护用户已有投入）
- **Fix**：必改项，按 P0/P1 排序
- **Quick Wins**：投入 ≤ 1 小时、收益明显的

### 阶段 5 · 出报告
按 §三的格式出一份完整报告。

---

## 五、常见评审反模式（Claude 自己要避免）

1. ❌ 只夸不改 —— 这不是评审是吹捧
2. ❌ 全盘否定 —— 用户的投入也有价值，要找 Keep
3. ❌ 空话大话 —— "这里可以更现代化"，没用。要说"字体改成 Playfair Display，字号从 48px 改到 64px"
4. ❌ 建议互相矛盾 —— 先想清楚整体方向再逐条提
5. ❌ 忽略实现成本 —— 要分 P0/P1/Quick Win

---

## 六、与其他 huo15 技能的分工

| 场景 | 归属 |
|------|------|
| 评审 Web UI / HTML / 截图 | **本技能** |
| 评审 PPT 演示稿 | `huo15-openclaw-ppt` 的 review 模式（如有） |
| 评审 Word 文档结构 | `huo15-openclaw-office-doc` |
| 生成设计后自检 | `huo15-openclaw-frontend-design §六·阶段 5` 调用本技能 |

---

## 七、触发词

- 设计评审 / UI 审查 / UX 评审
- 给这个页面打分 / 给这个设计打分
- review 这个设计 / review UI
- 这个界面怎么样 / 这个页面有什么问题
- 优化建议 / 改进建议（针对已有页面）

---

## 八、版本历史

- **v1.0.0（当前 · 2026-04-23）**：初始版本。5 维评分体系 + Keep/Fix/Quick Wins 三分类 + ASCII 雷达图 + 硬红线体检快速筛 + 5 类反模式警示。

---

**技术支持：** 青岛火一五信息科技有限公司