4.2.3 调整样式与布局
本步目标：用迭代对话优化页面的外观，让它更符合你的审美
迭代调整的心态
第一版代码很少是完美的，这很正常。
还记得第三章学的"迭代对话"吗？现在就是用它的时候：
第一版 → 看看哪里不满意 → 告诉 AI → 拿到新版本 → 再看看 → ...通常 2-3 轮调整就能达到满意的效果。不要期望一次完美，也不要无限调整。
分场景的调整 Prompt 库
下面是一些常见调整场景的 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 轮，差不多就可以停了。
记住，我们的目标是做出一个能用的待办清单，不是参加设计比赛。
调整建议
- 一次只调整一类问题：颜色、布局、间距分开调整，这样更容易控制
- 具体描述：不要说"好看点"，要说"按钮用 #3b82f6 蓝色"
- 保留好的部分：如果某些部分已经满意，在 Prompt 中提到"颜色保持不变"
- 不超过 5 轮：如果 5 轮还不满意，可能需要更清晰地描述你的需求
本步检查点
调整完成后，确认：
- [ ] 整体布局正确（标题、输入区、列表区都在）
- [ ] 配色基本满意
- [ ] 间距和尺寸看起来舒适
- [ ] 手机宽度下也能正常显示