本步目标：用迭代对话优化页面的外观，让它更符合你的审美
第一版代码很少是完美的，这很正常。
还记得第三章学的"迭代对话"吗？现在就是用它的时候：
第一版 → 看看哪里不满意 → 告诉 AI → 拿到新版本 → 再看看 → ...通常 2-3 轮调整就能达到满意的效果。不要期望一次完美，也不要无限调整。
下面是一些常见调整场景的 Prompt，你可以直接复制使用，也可以根据需要修改。
整体配色太暗：
整体配色太暗了，请改成更清新明亮的风格。
建议：
- 背景用浅灰色（如 #f5f5f5）
- 主色调用亮蓝色（如 #3b82f6）
- 按钮使用渐变或更鲜艳的颜色想换一个主题色：
请把主色调从蓝色改成绿色系。
添加按钮用深绿色（#059669），完成按钮用浅绿色。按钮颜色不够醒目：
"添加"按钮的颜色太淡了，改成更醒目的蓝色（#2563eb），
文字改成白色，鼠标悬停时颜色加深。输入框和按钮的位置：
把输入框和添加按钮放在同一行。
输入框占大部分宽度，按钮在右边。
两者之间留 8px 间距。页面整体位置：
页面内容整体往上移一些，距离顶部 30px 就够了。
标题和输入区域之间的间距减小到 16px。任务列表太挤：
任务列表的每一项之间间距太小，看起来很挤。
请把每个任务项之间的间距增加到 12px，让视觉更清爽。整体太紧凑：
页面整体看起来太拥挤。请增加以下间距：
- 页面内边距增加到 24px
- 标题下方间距增加到 24px
- 输入区域和列表之间间距增加到 20px整体太松散：
页面元素之间间距太大，看起来很空。
请适当减小各部分之间的间距，让页面更紧凑。输入框太窄：
输入框太窄了，打字不方便。
请把输入框高度增加到 44px，内边距增加到 12px。按钮太小：
按钮太小，不容易点击。
请把所有按钮的最小高度设为 36px，内边距增加到 12px 16px。字体大小调整：
标题字体再大一些（28px），任务内容用 16px，按钮文字用 14px。手机上显示不正常：
页面在手机上显示有问题，内容超出屏幕边缘。
请确保：
- 在窄屏幕（宽度小于 400px）时，页面宽度自适应
- 按钮在窄屏幕时可以换行显示
- 字体大小在手机上不要太小参考特定产品风格：
请把整体风格改成类似苹果备忘录的感觉：
- 纯白背景
- 圆角更大一些（12px）
- 阴影更柔和
- 字体使用系统默认字体更现代的感觉：
风格再现代一些：
- 添加轻微的卡片阴影
- 使用圆角（8px）
- 鼠标悬停时有轻微的颜色变化
- 整体使用无衬线字体来看小李如何用迭代对话优化他的待办清单页面。
小李看到第一版后的想法：结构对了，但颜色太普通，按钮太小。
小李发送：
页面结构不错，请做以下调整：
1. 整体配色改成蓝绿色系，更清新
2. 添加按钮改成圆角，颜色更鲜艳
3. 按钮高度增加，更容易点击小李看到新版后的想法：好多了，但输入框和列表的间距还可以优化。
小李发送：
颜色好多了！再调整两个细节：
1. 输入框和任务列表之间的间距增加到 20px
2. 每个任务项加一条浅灰色的分隔线小李发送：
整体很好了。最后一个小调整：
- 任务右侧的两个按钮之间留一点间距（8px）
- "完成"按钮用绿色，"删除"按钮用红色，颜色对比更明显经过三轮调整，小李得到了一个满意的页面。
| 问题 | 快速调整 Prompt |
|---|---|
| 输入框太窄 | 输入框宽度改成 100%，减去按钮的宽度 |
| 按钮太小 | 所有按钮最小高度 36px，内边距 12px 16px |
| 列表间距太小 | 任务项之间增加 12px 的间距 |
| 颜色太暗 | 整体配色改成明亮清新的风格 |
| 没有视觉层次 | 给卡片添加轻微阴影，标题加粗加大 |
| 手机上显示错乱 | 添加响应式样式，宽度使用百分比 |
| 鼠标悬停没反馈 | 按钮添加 hover 效果，颜色变深或加阴影 |
| 输入框太靠边 | 增加页面内边距到 24px |
什么时候应该停止调整，进入下一步？用这个清单判断：
所有元素都在正确的位置
可以清楚地看到标题、输入框、按钮、任务列表
页面在手机宽度（375px）下不会变形
没有明显的视觉问题（文字溢出、元素重叠）
配色符合你的审美
鼠标悬停有交互反馈
整体风格统一
间距看起来舒适
完美的像素级对齐
动画效果
复杂的视觉效果
80 分就够了，先跑通再优化。如果你已经调整了 3-4 轮，差不多就可以停了。
记住，我们的目标是做出一个能用的待办清单，不是参加设计比赛。
调整完成后，确认：
整体布局正确（标题、输入区、列表区都在）
配色基本满意
间距和尺寸看起来舒适
手机宽度下也能正常显示