# 六项检查卡：让 AI 改页面，别只说「好看一点」

> 来源：https://meoeo.alonglight.com/tools/ui-check/

## 1. 主次：最先看到的，是最重要的吗？

每样东西单独看都不丑，放在一起却很吵：标题是普通黑字，作者加粗，标签亮紫，三个按钮三种颜色。先别急着放大标题，试着把其他内容的存在感降下来。主次也不是越悬殊越好，次要文字要看得清，报错和风险提示更不能被淡化。

提示词：

> 这页主要用来挑选文章。请让标题最醒目，其次是摘要。作者、日期和普通标签不要抢过标题，收藏和分享不要与阅读按钮同等突出。先改一张卡片，不改全站配色。

## 2. 分组：哪些内容应该靠在一起？

标题下空了一大块，摘要却紧贴作者；两篇文章之间的距离，比同一篇内部还近。先把内容分组，组内靠近、组间拉开。要表达的是内容关系，不是把所有空隙调成同一个数。留白也不是越空越高级，常用的后台可能需要更紧凑。

提示词：

> 先检查信息分组，再调整间距。让读者一眼看出哪些内容属于同一篇文章、哪些是操作。沿用项目已有的间距规范，不要每个地方单独设一个新数值。

## 3. 文字：是在帮助阅读，还是互相抢眼？

标题不突出就加粗，副标题不突出也加粗，最后整页都很用力。先给文字分工：标题帮助选择，正文负责解释，作者和日期补充背景。再看真实阅读：长标题会不会挤到按钮，摘要多一行卡片会不会错位。

提示词：

> 请统一同类文字的字号、字重和颜色。用一条短标题、一条长标题检查换行，避免遮挡操作。正文以实际阅读效果为准，不要为了显得精致一味缩小字号。

## 4. 颜色：每一种强调，都有理由吗？

蓝色表示主要操作，紫色给普通标签，橙色装饰数字，读者很难判断哪里真正重要。先给颜色安排用途：主要操作、选中、成功、警告、失败。次要文字变灰时看一眼是不是太淡；深色模式不只是把背景换黑。

提示词：

> 整理当前页面的颜色用途，减少没有明确作用的强调色。保留品牌风格，让主要操作和状态含义一致。错误提示除了颜色，还要有清楚的文字说明。

## 5. 装饰：这条边框、这层阴影有必要吗？

大卡片有边框，小卡片也有，里面的说明再套一层浅色框加阴影，内容没多少，线条却不少。间距已经分开了，就不一定还要边框。但别为了极简，把输入框和按钮的边界也删了。

提示词：

> 检查边框、阴影和背景色是否在重复分隔同一组内容。尝试减少多余装饰，但保留必要的操作提示。给我看改前改后，不要直接把所有边框清空。

## 6. 内容变化：换一批数据，它还成立吗？

一行标题、两行摘要、每篇都有漂亮配图，当然排得整齐。真实内容会有很长的标题、没有图的文章、窄屏手机。空状态也要分清原因：还没收藏、搜索没结果、加载失败，都写「暂无内容」，用户不知道下一步怎么办。

提示词：

> 请用不同长度的真实内容检查页面，并查看缺图、空列表、加载失败和手机窄屏。确认文字没有遮挡，按钮没有挤出屏幕，主要操作仍能完成。没有实际验证的部分直接说明。

## 动手时分四步

1. 给参考，也说明参考哪里：截出喜欢的区域，说清喜欢的是标题比例、图片排法还是留白；同时说清哪些地方已经满意、不能动。
2. 先改有代表性的一小块：先做两张卡片，一张短标题一张长标题。看得出方向，再用到别处。
3. 同样条件下比较，保留改对的：同一批内容、同样的宽度。反馈落到位置和动作：「标题够清楚了，保留；收藏按钮还抢眼，这次只改按钮。」
4. 推到同类区域，再点一遍：把对的规则用到同类卡片；最后打开真实页面点一遍，截图代替不了使用。

## 一次查完六项的提示词

```text
请按六项检查审阅当前页面，先不要修改代码。

检查主次、分组、文字、颜色、装饰和内容变化。
只列真实存在的问题，说明具体位置、原因和改法。
没有实际看到页面或测试过的部分，请明确说明。

按影响大小排序，先给出最值得修改的几处。
保留现有功能和已经明确的风格，不要默认整页重做。
```

配合 https://github.com/meo9805/refactoring-ui-skill 里的 skills/refactoring-ui/SKILL.md 使用更准。