结构化 6 维设计评审 + 4 档审美档位 + 年代识别 + Master 级对标库 — 青岛火一五信息科技有限公司 v2.0 起:从 5 维扩到 6 维(加时代感)+ 4 档审美档位识别(AI-Slop / Junior / Senior / Master)+ 9 类过时视觉年代信号 + 8 流派 Master 级对标库 + 评审报告新增"对标差距"段
当用户对一个已存在的界面/页面/截图,要求 专业评价或改进建议:
产出:先 判档位(4 档)→ 跑 年代识别(9 类信号)→ 6 维打分(雷达图文本化)+ Keep/Fix/Quick Wins 三分类 + 对标差距分析 + 升级路径建议。
档位信号可救度AI-Slop紫粉渐变 / Inter 默认字体 / Tailwind 默认色 / 玻璃拟态 / Hero+Features+CTA 千篇一律骨架不可救药,建议 重做****Junior pass占位文案 + 占位图 + 跑通骨架 + shadcn 默认组件可救,目标是先到 SeniorSenior 落地字体定制 / 自家配色 / 自家组件 / OKLCH 色板 / 反差字体已经合格,可考虑升 MasterMaster 级单一签名钩子 / 反工业范式 / 时代感强 / 字距精调 / 微版式顶尖,提改进只动小细节
判档流程(30 秒筛):
判档结果直接写在报告顶端,决定全篇评审基调(AI-Slop 档不需要细评,重做就行)。
命中任一 美学维度直接 ≤ 2,不要客气。
#年代信号出现年代当前判定1紫粉渐变 + 玻璃磨砂2023-2024 AI slop 高峰❌ 已死2默认 Inter + 16px Tailwind 圆角2022-2023 shadcn 范式❌ 千篇一律3Hero / Features / CTA / Footer 模板化骨架2020 - 至今⚠️ 需要打破4Material You 默认 dynamic color 不改2021-⚠️ 没品牌识别5重型拟物 / Skeuomorphism(除非"轻拟物 iOS 26 风")2008-2013 iOS 风❌ 过时(iOS 26 是新拟物,不是这个)6Comic Sans / 默认 emoji 当图标永远过时❌7左侧彩色竖条 + 圆角卡片千篇一律2020 Tailwind 范式❌ 烂大街8CSS 画的伪 3D 产品图2015 Material 时代延续❌9大色块 blur 渐变背景(粉紫蓝青)2023 AI 生成范式❌ AI slop 标志
反过来:v2.0 当代信号(命中 = 加分项,记到 Keep 里):
维度关注点1 分5 分美学 Aesthetic字体 / 颜色 / 动效 / 空间 / 氛围AI slop意图明确的流派可用性 Usability信息层级、可点击性、反馈、a11y用户需要猜一眼理解下一步品牌一致 Brand与品牌调性 / 产品定位一致度和任何其他站能混用一眼辨识品牌内容 Content文案质量、信息密度、有无废话占位文案 / 废话堆砌每个字都在做事实现 Implementation性能、响应式、代码质量、可维护打开慢 / 布局崩丝滑 / 鲁棒时代感 Era ⭐v2.0是 2026 当代设计还是过时复刻命中 §三 任一过时信号命中 §三 当代信号 ≥ 2 个
总分规则:
每个流派给 2-3 个真实可访问的 Master 标杆,评审时 必须挑 1 个对标,落到"对标差距"段。
流派Master 对标关键学习点bold-minimallinear.app / vercel.com / stripe.press / raycast.comOKLCH 渐变文字 / 永久 BUILD 戳 / 衬线 display + Söhne bodyeditorialnytimes.com(深度专题)/ monocle.com / linear.app/blog / stripe.press衬线 display 78pt+ / 引号装饰 / 纵向栅格 / 长篇排版brutalist 2026are.na / nothing.tech / plainenglishpodcast.com / tylko.com灰白底 + 警示黄 / 等宽字 / 极少装饰 / 永久 metadataretro-futurenothing.tech ROM / A.G. Cook 网站 / Cyberpunk 2077 UIDruk Wide / OKLCH 单一霓虹 accent / 不要堆砌organicaesop.com / oatly.com / Notion 早期 / cosmos.so暖灰 / 衬线 + 手绘元素 / 真摄影不要 emojimobile-native-iosiOS 26 Settings / Apple Notes 真机 / Day One / Things 3系统蓝 + safe-area / large title / blur navbar / segmented controlmobile-native-md3Pixel Launcher / Gmail Android 2025 / m3.material.ioseed 派生主色 / FAB / emphasized easing 4 档mobile-native-harmonyHarmonyOS 4 Settings / 鸿蒙音乐 / 华为新闻灵动色块 L≈0.78 / 大圆角胶囊 / fluid easing
对标差距分析模板(评审报告必含,§六 输出结构):
text
### 对标差距
对标 [linear.app](bold-minimal Master 标杆)
- 字体:linear 用 Söhne 自定字距 -1.5%;本设计用默认 Inter → -1 美学
- accent:linear 用 OKLCH 渐变文字做 hero;本设计用纯色 → -0.5 品牌识别
- metadata:linear 永久显示 BUILD · 日期;本设计无版本戳 → -0.5 时代感
- 升级路径:换 Söhne / 加 OKLCH 渐变 hero / 加 BUILD 戳 → 可达 Senior 上限
text
### 档位识别 ⭐v2.0
**[AI-Slop / Junior pass / Senior 落地 / Master 级]**
理由:[1-2 句话,引用 §二 判档信号]
### 年代信号扫描 ⭐v2.0
- 过时信号命中:[§三 #X / 无]
- 当代信号命中:[§三 当代信号 / 无]
### 总评
[一句话总结:这个设计是什么流派?档位?最大亮点?最大问题?]
### 6 维打分 ⭐v2.0
| 维度 | 分数 | 备注 |
|------|------|------|
| 美学 | X/5 | ... |
| 可用性 | X/5 | ... |
| 品牌一致 | X/5 | ... |
| 内容 | X/5 | ... |
| 实现 | X/5 | ... |
| 时代感 | X/5 | ... |
**总分:XX/30**
### 对标差距 ⭐v2.0
对标 [Master 标杆 URL]
- 维度 1:差距具体描述
- 维度 2:差距具体描述
- 升级路径:[换 X / 加 Y / 改 Z → 可达 Senior 上限 / Master 级]
### 雷达图(ASCII)
美学 5
●
时代感●─┼─● 可用性
●│●
品牌 ● ─┼─● 内容
●
实现
(用 ● 的位置表示分数,1-5 对应距离中心)
### Keep(保持)
- ...(这几点做得好,不要动)
- 命中 §三 当代信号的项放这里加分
### Fix(必改)
- P0 ...(上线前必须修,命中 §三 过时信号的优先 P0)
- P1 ...(下个迭代)
### Quick Wins(1 小时内能做)
- ...(性价比最高的小改动)
### 升级路径 ⭐v2.0
[改完 Fix P0 + Quick Wins → 预计从 X/30 到 Y/30,从 Junior 升 Senior(或 Senior 升 Master)]
[如果想到 Master,需要 [具体 1-2 个签名钩子 / 反工业范式动作]]
huo15-openclaw-frontend-design §六·阶段 4 的 Chrome MCP / Playwright 截图路线)对照 huo15-openclaw-frontend-design §四 的 15 条硬红线逐一过一遍。命中直接列入 Fix · P0。
依次给 6 个维度打分,每个维度 至少一条具体理由(不能只给分数)。
按 §六 的格式出一份完整报告。
场景归属评审 Web UI / HTML / 截图 + 档位识别 + 对标差距本技能 v2.0评审 PPT 演示稿huo15-openclaw-ppt 的 review 模式(如有)评审 Word 文档结构huo15-openclaw-office-doc生成设计后自检huo15-openclaw-frontend-design §六·阶段 5 调用本技能设计方向选型(含档位)huo15-openclaw-design-director v3.0反 AI Slop 红线huo15-openclaw-frontend-design §四 15 条硬红线
技术支持: 青岛火一五信息科技有限公司