npx claudepluginhub an8079/take-skills# /takes-fro-review - GAN式前端对抗审查 灵感来源:GAN(生成对抗网络)——将"生成"和"评估"拆给两个独立 Agent,让评估者用具体打分标准将主观判断转化为可量化指标。 ## 使用方式 ## 核心概念 --- ## 团队组成 | 角色 | 职责 | 使用的技能 | |------|------|-----------| | **Generator** | 负责前端页面生成与修改,接收评估反馈并改进 | `skills/frontend-design/SKILL.md` | | **Evaluator** | 用量化标准评估页面,启动 agent-browser 实际测试 | `/agent-browser` + `skills/webapp-testing/SKILL.md` | | **Orchestrator** | 协调两者迭代,统计评分,记录改进历史 | 主会话 | --- ## 四项评分标准(量化打分) 每项满分 25 分,总分 100 分。Evaluator 须逐项给出分数+证据。 | 维度 | 评估内容 | 扣分项 | |------|---------|--------| | **设计质量** (25) | 视觉连贯性、辨识度、整体协调性 | 布局混乱、配色打架、无视觉层次 | | **原创性** (2...
灵感来源:GAN(生成对抗网络)——将"生成"和"评估"拆给两个独立 Agent,让评估者用具体打分标准将主观判断转化为可量化指标。
/takes-fro-review
/takes-fro-review http://localhost:3000
/takes-fro-review --max-iterations 20
/takes-fro-review --target-score 85
┌─────────────────────────────────────────────────────────┐
│ GAN 审查循环 │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Generator │◄────────│ Evaluator │ │
│ │ (生成器) │ 反馈 │ (评估器) │ │
│ │ 修改/生成页面 │────────►│ 量化打分+建议 │ │
│ └──────────────────┘ └──────────────────┘ │
│ ▲ │ │
│ │ 迭代 (5~15 轮) │ │
│ └──────────────────────────────┘ │
│ │
│ 退出条件: 评分达标 OR 达到最大迭代次数 │
│ │
└─────────────────────────────────────────────────────────┘
| 角色 | 职责 | 使用的技能 |
|---|---|---|
| Generator | 负责前端页面生成与修改,接收评估反馈并改进 | skills/frontend-design/SKILL.md |
| Evaluator | 用量化标准评估页面,启动 agent-browser 实际测试 | /agent-browser + skills/webapp-testing/SKILL.md |
| Orchestrator | 协调两者迭代,统计评分,记录改进历史 | 主会话 |
每项满分 25 分,总分 100 分。Evaluator 须逐项给出分数+证据。
| 维度 | 评估内容 | 扣分项 |
|---|---|---|
| 设计质量 (25) | 视觉连贯性、辨识度、整体协调性 | 布局混乱、配色打架、无视觉层次 |
| 原创性 (25) | 有无独立设计决策,是否千篇一律的 AI 味 | 俗套 AI 审美(见 checklist);加分项可弥补扣分 |
| 工艺 (25) | 排版、间距、配色和谐度、CSS 细节 | 间距不一致、字体选择随意、hover 效果粗糙 |
| 功能性 (25) | 可用性、任务完成度、交互反馈 | 点击无反应、表单无法提交、响应式断裂 |
| 分数区间 | 等级 | 说明 |
|---|---|---|
| 90-100 | 卓越 | 四项均表现优秀,有独特设计语言 |
| 75-89 | 良好 | 有明显辨识度,工艺良好,可用性达标 |
| 60-74 | 合格 | 整体可用,但设计或工艺有明显改进空间 |
| 40-59 | 不足 | 存在多个维度问题,需大幅改进 |
| 0-39 | 不合格 | 视觉粗糙、功能断裂、无设计决策 |
确定目标页面:
http://localhost:3000 等)→ 直接使用localhost:3000/4000/5173/8080)创建输出目录:
mkdir -p .claude-studio/fro-reviews/{timestamp}/screenshots
mkdir -p .claude-studio/fro-reviews/{timestamp}/iterations
读取前端代码(Generator 视角):
glob "src/**/*.{tsx,jsx,vue,svelte,html,css}"
git diff HEAD~3 --name-only -- "*.tsx" "*.jsx" "*.vue" "*.css"
确定审查范围:
Generator 接收当前页面状态(或初始需求),生成或修改页面。
输入:
输出:
角色定义:你是前端设计生成专家,负责根据评估反馈持续改进页面。你不是创作型设计师,而是"响应式修复者"——你的价值在于精准响应问题,而不是发挥创意。每次行动都以 Evaluator 的具体反馈为锚点。
迭代策略:
接收评估反馈:
何时大改、何时微调:
Constraints:
skills/frontend-design/SKILL.md 的设计原则作为基准,主动规避 AI 俗套(见下节"原创性 checklist")Evaluator 使用 /agent-browser(Playwright)实际操作页面,逐项打分。
评估步骤:
1. 截图存档(iteration-{N}-{dimension}.png)
2. 截图对比(iteration-{N}-before.png / iteration-{N}-after.png)
3. 逐维度打分,每维度附证据截图
4. 输出结构化评分报告
逐维度评估指南:
评分报告格式:
## 评估报告 - 迭代 #{N}
| 维度 | 分数 | 主要问题 |
|------|------|---------|
| 设计质量 | 18/25 | 视觉层次不清晰,配色过于平淡 |
| 原创性 | 15/25 | 仍在使用 Inter 字体,缺乏独特性 |
| 工艺 | 17/25 | 按钮 hover 效果粗糙,间距不统一 |
| 功能性 | 20/25 | 移动端导航菜单无法展开 |
| **总分** | **70/100** | |
### 关键改进建议
1. **[设计质量]** 强化视觉层次:增加主标题与副标题的对比度
2. **[原创性]** 替换字体:考虑使用 Playfair Display 或 Source Serif Pro
3. **[工艺]** 完善 hover 效果:添加平滑过渡动画
4. **[功能性]** 修复移动端菜单:检查 JavaScript 事件绑定
### 证据截图
- [设计质量问题](screenshots/iteration-3-design-issue.png)
- [工艺问题](screenshots/iteration-3-craft-issue.png)
- [功能性问题](screenshots/iteration-3-functionality-issue.png)
决策逻辑:
评分 >= 目标分(默认 85)?
└─ 是 → 迭代完成,输出最终报告
└─ 否 → 当前迭代 < 最大迭代次数(默认 15)?
└─ 是 → 将评估报告传给 Generator,进入下一轮
└─ 否 → 迭代上限,输出最终报告(带警告)
评分趋势记录:
| 迭代 | 设计质量 | 原创性 | 工艺 | 功能性 | 总分 |
|------|---------|-------|-----|-------|-----|
| #1 | 15 | 12 | 14 | 18 | 59 |
| #2 | 17 | 14 | 16 | 19 | 66 |
| #3 | 19 | 16 | 18 | 20 | 73 |
写入 .claude-studio/fro-reviews/{timestamp}/final-report.md
# GAN 前端对抗审查报告
| 字段 | 值 |
|------|---|
| **审查日期** | {YYYY-MM-DD} |
| **目标 URL** | {URL} |
| **迭代次数** | {N} |
| **最终评分** | {SCORE}/100 |
| **审查状态** | PASSED / MAX_ITERATIONS |
---
## 评分趋势

---
## 最终评分
| 维度 | 分数 | 状态 |
|------|------|------|
| 设计质量 | {N}/25 | 卓越/良好/合格/不足/不合格 |
| 原创性 | {N}/25 | 卓越/良好/合格/不足/不合格 |
| 工艺 | {N}/25 | 卓越/良好/合格/不足/不合格 |
| 功能性 | {N}/25 | 卓越/良好/合格/不足/不合格 |
| **总分** | **{SCORE}/100** | |
---
## 改进历史
### 迭代 #1
- **修改**: 初始页面生成
- **评估**: 59/100
- **主要问题**: 设计质量低、原创性差
### 迭代 #2
- **修改**: 替换字体、增加视觉层次
- **评估**: 66/100
- **主要问题**: 工艺粗糙、功能性缺陷
### 迭代 #3
- **修改**: 完善 hover 效果、修复移动端菜单
- **评估**: 73/100
- ...
---
## 核心改进建议
1. **[高优先级]** {具体建议}
2. **[中优先级]** {具体建议}
3. **[低优先级]** {具体建议}
---
## 截图对比
### 设计质量
**迭代 #1** 
**最终** 
### 功能性
**迭代 #1** 
**最终** 
| 参数 | 默认值 | 说明 |
|---|---|---|
--max-iterations | 15 | 最大迭代轮数 |
--target-score | 85 | 达标目标分数 |
--scope | full | 审查范围:full / single / diff |
--port | auto | 强制指定端口 |
| 维度 | /takes-fro-review | /qa |
|---|---|---|
| 目标 | 设计质量与原创性 | 功能 bug 修复 |
| 方式 | GAN 对抗迭代 | 发现-修复循环 |
| 评分 | 四维量化(设计+原创+工艺+功能) | 健康分(console/links/visual) |
| 退出条件 | 评分达标或最大迭代 | 所有 bug 修复 |
| 适用 | 设计评审、视觉改进 | 功能测试、回归验证 |
当 /agent-browser 不可用时,按以下降级方案执行:
| 降级等级 | 触发条件 | 评估方式 | 精度影响 |
|---|---|---|---|
| L0 - 完整 | /agent-browser 可用 | Playwright 驱动,真实浏览器截图 + 交互测试 | 最高(100%) |
| L1 - 截图 | 无法启动 Playwright,但可访问 URL | 使用系统截图工具(PrtScn / snipping tool)或 Bash 截图命令,对每个维度人工分析截图 | 精度约 70%(无交互测试) |
| L2 - 代码审查 | 无法访问 URL(服务未启动) | Generator 输出代码变更,Evaluator 通过代码静态分析(AST + 样式检查)评估工艺和功能性,人工阅读截图 | 精度约 50%(无运行时验证) |
L1 降级执行步骤:
screenshot 命令(需用户提供截图)L2 降级执行步骤:
ast_grep_search 检查常见问题(未绑定的 click 事件、缺失的 focus 样式等)降级通知:每次进入降级模式前,必须告知用户当前模式及精度影响,由用户决定是否继续。