AI 修改页面的三种方法：选中元素、可视化调整与截图标注
训练营里，同学们经常用一句“把页面优化得好看一点”让 AI 自由修改。结果可能是颜色变了、卡片变多了，但原本要解决的问题仍然存在。
更高效的做法，是把视觉问题定位到真实元素，并明确保持不变的部分。
前置条件
- 项目能够在浏览器真实运行。
- 已提交当前可用版本，便于比较和回退。
- 准备桌面端与移动端两个验证尺寸。
- 修改前先写出具体目标，例如“标题在手机上被截断”，而不是“页面不好看”。
方法一：选中元素后交给 AI 修改
如果工具支持浏览器选取元素，先打开目标页面，选择具体标题、按钮或卡片，再提交任务：
调整当前选中的文章标题，使其在 390px 宽度下最多显示三行，不截断、不溢出。保留字号层级、颜色和桌面布局，只修改与标题换行相关的样式。
元素代码自动进入上下文后，AI 不必从整个项目猜测对应组件，修改范围会明显缩小。
适合场景
- 已经知道哪个元素有问题。
- 组件在页面上可以稳定定位。
- 只需修改一处布局、文案或交互。
成功标准
- 修改发生在正确组件。
- 桌面端原有表现保持不变。
- 移动端问题可以通过截图复核。
方法二：可视化调整确定参数
圆角、间距、颜色、宽度和对齐方式等确定性样式，可以先在可视化面板或浏览器开发者工具中试出结果，再让 AI 把参数写回代码。
例如先把卡片间距从 32px 调到 24px，确认信息密度更合适后，再要求：
将刚才确认的卡片间距应用到文章网格，保持现有断点和卡片宽度，不修改其他页面。
这种方式的优势是先看结果再写代码，避免 AI 在多个参数上同时试错。
适合场景
- 问题是可量化的样式参数。
- 需要快速比较两三个数值。
- 不涉及复杂业务状态。
方法三：截图标注问题
当元素无法直接选中，或问题涉及整体层级时，使用截图最有效。
截图时要同时提供：
- 页面完整范围，帮助判断上下文。
- 框选或箭头，标出要改的位置。
- 当前尺寸和设备。
- 期望结果与保持不变项。
示例：
截图来自 1024px 宽度。红框内顶部导航已经换行，请让 1024px 使用折叠菜单；1440px 继续显示桌面导航。不要删除任何导航项，也不要缩小品牌标识。
适合场景
- 响应式溢出、层级混乱或整体留白问题。
- 问题无法用单个 DOM 元素表达。
- 需要让 AI 理解“视觉上哪里不对”。
修改后的验证流程
无论使用哪种方法，都不要停在“代码已修改”：
- 重新加载真实页面。
- 检查目标尺寸的截图。
- 再检查一个相邻尺寸，防止只对单点生效。
- 点击相关交互，确认没有破坏行为。
- 检查浅色和深色模式的对比度。
- 查看 Git diff，确认没有无关改动。
常见问题与处理
AI 找错组件
提供页面 URL、选中元素和组件路径，不要继续用自然语言描述外观让它猜。
修好手机端却破坏桌面端
在提示中写明两个尺寸的保持条件，并同时提供修改前后的桌面、移动截图。
“优化设计”后出现大量装饰
把问题改写成具体信息目标，例如“减少卡片边框、提升标题可扫描性”，并明确不增加图标、渐变和包装层。
截图看起来正确，但按钮不能点
视觉检查不能替代交互测试。真实点击按钮、链接和表单，必要时用浏览器控制台查看覆盖层或指针事件。
课后练习
在同一页面各选一个局部样式问题、一个响应式问题和一个整体层级问题，分别使用三种方法解决。记录每种方法的提示词、修改文件和验证截图，形成自己的页面修改案例库。