---
title: "4.2.3 调整样式与布局"
order: 4
---


![04-practice-0-to-1_4.2-build-page_4.2.3-adjust-style.png](/images/Basic/04-practice-0-to-1_4.2-build-page_4.2.3-adjust-style.png)
# 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）下不会变形
- [ ] 没有明显的视觉问题（文字溢出、元素重叠）

### 加分项（有更好，没有也行）

- [ ] 配色符合你的审美
- [ ] 鼠标悬停有交互反馈
- [ ] 整体风格统一
- [ ] 间距看起来舒适

### 不需要追求的

- [ ] 完美的像素级对齐
- [ ] 动画效果
- [ ] 复杂的视觉效果

::: warning 重要
80 分就够了，先跑通再优化。如果你已经调整了 3-4 轮，差不多就可以停了。

记住，我们的目标是做出一个**能用的**待办清单，不是参加设计比赛。
:::

## 调整建议

1. **一次只调整一类问题**：颜色、布局、间距分开调整，这样更容易控制
2. **具体描述**：不要说"好看点"，要说"按钮用 #3b82f6 蓝色"
3. **保留好的部分**：如果某些部分已经满意，在 Prompt 中提到"颜色保持不变"
4. **不超过 5 轮**：如果 5 轮还不满意，可能需要更清晰地描述你的需求

## 本步检查点

调整完成后，确认：

- [ ] 整体布局正确（标题、输入区、列表区都在）
- [ ] 配色基本满意
- [ ] 间距和尺寸看起来舒适
- [ ] 手机宽度下也能正常显示

→ [4.2.4 阶段性成果检查](./4.2.4-checkpoint.md)