让 AI 改页面，别只说「好看一点」

你看得出页面不对，却不一定说得出哪里不对，只好一遍遍说「简洁一点」「高级一点」。下面六项，每项一个检查问题，一句能直接复制给 AI 的话。例子用的是一个文章收藏页：标题、摘要、作者、标签，加上阅读、收藏、分享。

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

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

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

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

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

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

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

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

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

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

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

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

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

这段交给 AI，它会先出一份问题清单，不急着改。配合 refactoring-ui-skill 用更准：让能读本地文件的 AI 先读仓库里的 skills/refactoring-ui/SKILL.md。

请按六项检查审阅当前页面，先不要修改代码。检查主次、分组、文字、颜色、装饰和内容变化。只列真实存在的问题，说明具体位置、原因和改法。没有实际看到页面或测试过的部分，请明确说明。按影响大小排序，先给出最值得修改的几处。保留现有功能和已经明确的风格，不要默认整页重做。