用 ai 给UI 页面打分 （提示词）

用 ai 给UI 页面打分

---

怎么让 ai 判断 你的ui 是否美观 ，交给 AI 判断

。

有一个需求 ，UI 设计师，设计了3个App 首页，3个页面只有 细微的变化。怎么判断那个图片更好？

下面给你一份**“微调点速查清单”**（你可以边看图边核对，基本覆盖 90% UI 细微差异）：

1. Header / 顶部栏
   状态栏图标顺序与对比度（电量/Wi-Fi/时间是否一致）
   标题字号/字重与 Logo 相对位置、左右内边距
   搜索 / 通知 / 消息图标的尺寸与点按区域是否统一
   公告条是否出现、颜色/高度/图标是否一致

2. Hero / Banner 区
   Banner 数量、排序是否有变；图像裁切与对焦是否变化
   CTA 文案（动词、语气）、按钮形状/对比度/阴影
   角标（如 NEW/TOP/限时）有无与颜色、位置是否统一

3. 快捷入口 / 功能栈
   快捷入口个数与顺序、图标填充/线性风格是否混用
   入口标签大小写（Sentence/Title）、字重、字距、图标与文案间距
   触达尺寸是否≥44px，点击态/选中态是否一致

4. Feed 卡片
   卡片四边内边距与卡间距；缩略图圆角半径是否统一
   标题行数限制（line clamp）/ 省略号出没
   元信息（浏览/评论/参与人数）的位置、灰度、Icon 尺寸
   标签/话题 # 的颜色、位置、是否加描边或底色

5. 字体与排版
   主/副文字的字号、字重（600 vs 500）、行高与段间距
   左右对齐、网格对齐是否有 1–2px 的偏差
   数字/单位对齐（尤其统计数据）

6. 颜色 / 对比
   主色是否轻微偏移（H/S/B 变化），中性色等级（灰 600/700）
   背景分区对比是否一致（白 / 浅灰）、分割线/投影强度是否统一
   暗黑模式适配（若有）色值是否一致

7. CTA / 转化线索
   主 CTA 的显著性（大小/对比/文案动词强度）
   二级 CTA（“了解更多 / 加入讨论”）是否存在或位置变化
   引导性微文案（空态提示、首登指引、滚动提示）是否增减

8. 交互可用性
   轮播/横滑是否有手势暗示（渐隐/指示点）
   骨架屏 / 占位符样式是否统一
   Toast/Badge 的位置与层级是否改动

9. 底部 Tab Bar
   Tab 个数、顺序、激活态颜色/粗细
   文案是否显示/隐藏、与 Safe Area 关系

10. Brand 一致性
    插画/图标语系是否混用（线性 vs 扁平 vs 拟物）
    统一的圆角系统（8/12/16）与阴影高度 Token是否一致

总结结论

**三张都看到了（11.png / 33.png / 44.png）。它们的版式整体一致，只在若干“微调点”上有差异。按你给的 10 个检查维度，我把可见差异与优劣判断逐项列出来，并给出最终选择。

总结结论
更好的一版：11.png（小幅领先）
层级最稳定，公告条—双 Banner—快捷入口三段的视觉节奏最均衡；
CTA 对比与品牌灰阶关系最稳，整体最“耐看”；
33.png：第二名
与 11.png 基本一致，但在 Banner 与角标的对比更强，更“跳”更促转化；
44.png：第三名
快捷入口与信息卡片出现多处样式偏差（灰度/描边/间距），一致性略弱。
11 与 33 的中部区（快捷入口与首条 Feed）几乎一致；44在这些区域与前两者差异最大。**

逐项微差异对比

1. Header / 顶部栏

状态栏：三者一致（时间/信号/电量布局一致）。 右上角“首页”图标：三者形态略有差别，11/33 的对比更清晰；
44的紫底更“重”，与公告条竞争注意力。
公告条：三者文案一致；
11/33 的图标与文案基线对齐更自然，44的图标饱和度更高、看上去更抢眼但略显“跳”。
👉 判定：11≈33 优于 44（一致性与对比更平衡）

2. Hero / Banner 区（双卡）

Banner 构图：主体一致；33 左侧 Banner 的CTA 与底边描边更实，对比最强；11 次之；44 的 CTA 边界与阴影最弱。
角标/标签：三者都有；33 的“#话题# 群聊”色块更醒目（橙底饱和度微高），44 最弱。
👉 判定：33 ＞ 11 ＞ 44（33 的转化信号更强）

3. 快捷入口 / 功能栈（4 个圆角胶囊）

数量/顺序：一致。
样式一致性：11/33 完全一致（填充、描边、阴影、内外距一致）；44 的绿胶囊（#TOP）描边/发光与其他三个不完全一致，整排看轻微破版。
点击面积：三者均满足。
👉 判定：11=33 ＞ 44

4. Feed 卡片（首条）

内边距与行距：11/33 一致；44 的元信息（头像圆点+小贴纸）样式与灰度有变化，看起来更淡，与正文的层级对比略不足。

话题标签：44 的标签底色/描边略不同，识别度稍弱。

👉 判定：11=33 ＞ 44

5. 字体与排版

标题/副文：11/33 的副文灰度与字重一致；44 的副文灰度略浅，在浅底上可读性略降。

网格/对齐：11/33 更稳定；44 某些元素（如角标、元信息）相对参考线略有 1–2px 偏差感（视觉观感上）。

👉 判定：11=33 ＞ 44

6. 颜色 / 对比

品牌主色与中性灰：11/33 最接近同一套 Token；44 的绿色与蓝色饱和度更“发光”，与品牌灰阶关系稍“跳”。
分区背景/投影：11/33 一致；44 的投影与描边在个别组件上不完全一致。
👉 判定：11=33 ＞ 44

7. CTA / 转化线索

主 CTA（Banner 上）：33 最突出（按钮外形与对比更强），11 次之，44 最弱。
二级 CTA（引导语/讨论入口）：三者相当。
👉 判定：33 ＞ 11 ＞ 44

8. 交互可用性

轮播/滚动提示、点击区、空态提示均一致；无明显改动。
👉 判定：三者≈一致

9. 底部 Tab Bar

完全一致（Icon、激活态、Safe Area 处理一致）。
👉 判定：三者一致

10. Brand 一致性

11/33 更统一（图标语系、圆角与阴影高度 Token 更稳定）；
44 出现少量“发光/描边”不一致，品牌调性略不如前两者统一。
👉 判定：11=33 ＞ 44

结论 & 推荐

第一名：11.png（综合最稳）
适合“长期主版”与大部分场景；

第二名：33.png（促转化版）
如果你做应用商店截图或活动期，33 的 CTA 强度更合适；

第三名：44.png
建议回收其“发光/描边”做法，使其与其余组件 token 对齐。

可落地的微调建议（把最好的一版再优化 10%） 采用 11.png 的整体框架 + 33.png 的 Banner CTA 强度（把 33的橙色 CTA 与角标样式迁移到 11）。

统一快捷入口四枚胶囊的描边/阴影参数，锁定一个 token（比如：r=16、border=1、shadow=dp2）。
Feed 元信息（“24 人在讨论”）统一灰度为灰 700，保证弱光场景可读性。

UI Token 差异表模板

A. 加权总分 & 排名

1. 标准权重（信息30 / 视觉25 / 品牌15 / 可用性15 / 转化10 / 记忆5）
   排名：11.png ＞ 33.png ＞ 44.png
   11.png：信息、视觉、品牌、可用性全面领先，转化略低于 33.png
   33.png：CTA 更强，转化项更高，但整体秩序略逊于 11.png
   44.png：快捷入口与 Feed 灰度/描边不一致，拉低整体一致性与可读性

2. 应用商店优先（把转化提到 20%，视觉降到 20%，品牌降到 10%）
   排名仍为：11.png ＞ 33.png ＞ 44.png（33 与 11 差距缩小）

解释：即便提高转化权重，11.png 在信息/视觉/可用性上仍有稳定的领先优势；33.png 适合“促转化场景”，可做活动期或商店截图版本。

B. 维度打分（1–7，供你回查）

11.png：信息6｜视觉6｜品牌6｜可用性6｜转化5｜记忆4
33.png：信息5｜视觉5｜品牌6｜可用性5｜转化6｜记忆4
44.png：信息5｜视觉4｜品牌5｜可用性5｜转化4｜记忆3
雷达图展示了三者在 6 维上的轮廓，便于你在汇报中直接截图使用。

C. 选择建议（怎么落地更强）

主版用 11.png（稳定、耐看、风险低）。
把 33.png 的 CTA 强度迁移到 11.png（保留 11 的秩序与灰度，引用 33的橙色 CTA/角标对比）。
回收 44.png 的“发光/描边”做法，统一到同一份阴影/描边 token。

D. UI Token 合并建议（模板已给）

在 ui_token_diff_template.csv 里我预置了字段，你们只需填入规范值即可。参考建议：
color.brand.primary：紫色主色保持 11/33 的 Hue/Sat，不要用 44 的更高饱和版本
color.accent.orange：沿用 33 的 CTA 强度
color.accent.green：话题 #TOP 胶囊去发光，统一border=1
radius.card / radius.pill：统一到同一半径（例如 16）
elevation.card /elevation.pill：锁定 1–2 个 dp 等级，Feed 与胶囊不要混用
typography.body.color：用11/33 的灰700；避免 44 的偏浅灰