让它好看(一)· 设计基础
本节课目标:你会拿到四把"看得见好坏"的尺子(对齐、间距、层级、留白),用它们诊断一张真实页面,指出最大的病灶,再拼出一句让 Agent 直接动手的修改指令。从"无法准确描述问题"变为"能够指出具体问题，并清晰表述修改方向"。
上一节你已经让 Agent 造出了第一版。它能运行，但你大概有一个感受：似乎不够理想，却难以准确说出问题所在。这一节给你四条最省力、最常见的原则,会了它们,你点评页面、指挥 Agent 时心里就有了准星。
本节的学习方式：你不需要自己动手调整样式。你负责用眼睛判断，将修改指令交给 Agent 执行。
四条够用的原则
绝大多数看起来混乱、不够专业的页面，其问题都可以归结为以下四条原则。一条一条来，每条配一个改前改后对照，下面的切换器里你能亲手切换看效果。
一、对齐(Alignment):让东西排在同一条线上
每行文字的左边缘忽左忽右,眼睛就会觉得乱。让该对齐的元素共用一条看不见的竖线,所有行都从左侧同一个位置起头,页面立刻就整洁了。这条改动最小、见效最快。
二、间距(Spacing):用距离表达"谁和谁是一伙的"
相关的东西凑近,不相关的东西拉开。店名和它下面的标语挨得近,营业时间和地址这两块不同的信息之间留开一点。间距其实在悄悄告诉读者谁和谁是一组的。
三、层级(Hierarchy):让重要的更显眼
如果页面上每个字都一样大、一样黑,读者就不知道该先看哪。用大小、粗细、颜色深浅拉开主次:店名最大最重,标语次一点,营业细则最轻。层级就是替读者排好"先看什么、后看什么"。
四、留白(White Space):给内容透气的余地
新手最容易犯的错误是将内容填满整个页面，唯恐留下空白。其实空白不是浪费。同样的内容,挤在一起显得廉价,留出余地就显得高级。
本节仅讲授最核心、最常用的内容：配色、字体、阴影、动效这些更深的内容不展开,都整理进了
设计参考库(尤其
层级与布局、
字体与配色),用到哪条再去查哪条。先把这四条用熟。
切换演示：四原则改前改后对比
下面是同一张"维修店小卡片"。点四个原则按钮,看它从违反原则的样子实时切到应用原则后的样子。这不是两张静态截图，而是浏览器实时渲染的效果。看的时候盯住一件事:左边那个版本,具体是哪一处坏了。
练习：诊断 + 开方
▸ 操作：先诊断病灶（选出两个），再拼一句给 Agent 的修改指令。
下面是一张尚未修正的 "Steve's Repair 营业信息" 小卡片。它是真实渲染的页面，而非文字描述的题目：店名 "steve's repair" 与下方每一行文字大小相同、粗细一致，你需要自己判断它并未被视觉识别为标题。先用四把尺子诊断，再开一句给 Agent 的方子。
steve's repair
电脑 / 手机 / 平板维修 当天可取
营业时间 周一到周六 9:00-18:00
地址 解放路 88 号一楼
电话 0571-12345678
预约
第一步. 用四把尺子量这张卡,挑出它最大的两个病灶。(选两个;选错会标红,可以重选)
已选 0 / 2
第二步. 接着你诊断出的病灶,组一句给 Agent 的修改指令
先在上一步选出两个病灶,这里会把它们接过来,你的方子要冲着它们开。
在上面两个下拉里各选一项,这里会拼出你要发给 Agent 的话。
一个页面看起来"乱、不专业",通常你该最先动手调整的是什么?
动手：把四条原则应用到自己的 v1 页面上
▸ 操作：打开你的 Steve's Repair v1 → 用四把尺子逐一诊断 → 将病灶发给 Agent 修改。
练习里你诊断的是别人的卡。现在轮到你自己那张 Steve's Repair v1。下面这张清单挂在你的真实页面上，每量一项就勾一项。
动手自检 · 对照你自己的 v1 页面
六步都做完了,你已经把诊断到开方走通了一整圈。
发给 Agent 后，终端中的对话大致如下（仿终端示意）：
终端 · steve-repair
steve-repair $ 帮我把联系方式的间距调大一点，现在四行文字都挤在一起，留白不够。
正在分析 contact 区域的样式…
当前行距为 1.4，上下内边距为 1rem。
已将联系方式区行距调整为 2.0，上下内边距增加到 2.5rem。
文件已更新。刷新浏览器即可看到效果。
看到"文件已更新"和"刷新浏览器"就说明改好了。回到浏览器刷新，对照四条尺子复看。
遇到问题？参照以下常见情况及解决方法：
·
Agent 改完反而更乱:多半是你一次提了好几处。退回去一次只让它改一条尺子(比如先只改对齐),看对了再改下一条。
·
打不开自己的 v1 页面:在项目文件夹里找到
index.html,Mac 右键用浏览器打开、Windows 双击它就行,这套找文件、用浏览器打开的方法见
0.6 第一次和 Agent 说话。
·
四把尺子量下来好像哪条都不太对：不必勉强套用。将页面中的问题用文字描述下来，发给你的 Agent，让它对照四条原则替你诊断一遍，你再核对它的判断是否准确。
诊断不出问题，或者想把"该怎么改"说得更准？把你的页面情况用文字描述下来，发到群里问问大家，或者直接向 Abel 或助教提问，大家可以对照这四条原则帮你点评一遍。