学习目标
一页设计约定、一份固定示例内容和一条可执行的视觉反馈。
适用场景
你让 AI 改一个资料列表，它加了大标题、渐变和许多卡片，却让正文更难读。这里用列表页练习：目标是快速找到材料，品牌和视觉方向仍由你的产品决定。
准备条件
- 一张获准使用的参考图或一个可访问的参考页面。
- 现有项目的组件库、字体和设计 token；新项目先选一种一致的基准。
操作步骤
只取与任务有关的参考特征
不要让 AI 复制参考图里所有装饰。先列主任务、主要信息和主要操作，再说明参考图中哪些结构有帮助。把希望保留的现有元素也写清，避免一次反馈触发全页重做。
弱指令与可执行约定弱：像某某网站一样高级。 可执行： 主任务：快速识别材料并打开正文。 参考结构：左侧导航、右侧单列列表；标题比时间突出。 保留：现有品牌、字体、主色和列表数据。 调整：收起次要元信息，每项先看见标题和一句说明。 本轮不做：重画 Logo、新增推荐算法。 待判断：桌面单列还是双列，用相同内容比较。固定内容，才比较得出差别
准备长标题、没有图片、只有一条、空数据等真实形态的样本。两种布局用同一组材料、同一视口截图，先比较可读性和主任务路径，再选字体和间距。不要用短而整齐的假内容掩盖挤压问题。
固定样本清单A：中文长标题 + 英文产品名 + 三行摘要 B：无封面、无摘要、来源名称很长 C：仅一条结果；D：零条结果 视口：记录团队实际支持的桌面与手机尺寸 任务：不看说明，找到某一条材料并打开 样本只用于排版测试，不伪装成真实新闻数据。把选定方向映射到已有组件与 token
参考图决定结构和密度，项目规范决定合法的颜色、字号、间距和按钮状态。先实现标题、列表、主操作三个层级，减少无助于识别的信息。检查键盘焦点、长文本、对比度和移动端，再看整体观感。
用位置、问题、期望、保留项给反馈
“不好看”无法定位原因。指向一个位置，描述可观察问题，给出期望并限制影响范围；改完重跑同一固定样本，不重新挑有利的截图。
一次只改一个问题的反馈位置：手机列表第一项的标题与日期。 问题：日期占一整行，标题只剩很窄的空间。 期望：日期放在标题下方，标题自然换行；主要操作仍能点击。 保留：桌面布局、主色、其余卡片不变。 检查：用 A/B/C/D 原样本重看，键盘焦点没有被遮挡。
常见误区
- 把截图像素值全部硬编码进去。
- 沿用设计 token；记录参考结构与 token 映射，不让后续页面出现另一套值。
- 只看第一屏默认状态就通过。
- 补长文本、空结果、手机和焦点状态；截图不能证明交互可用。
验收清单
- 参考特征能说明对主任务的帮助。
- 对比方案使用了相同内容与视口。
- 反馈能定位到具体区域，并写明保留项。
- 文字层级、控件状态和移动端检查有实际结果。
资料与版本
本文为原创方法整理，示例与提示词需按项目调整；不代表真实用户研究或账号执行结果。