让它好看（一）：设计基础
你会拿到四把"看得见好坏"的尺子(对齐、间距、层级、留白),用它们诊断一张真实页面，指出最大的病灶，再拼出一句让 Agent 直接动手的修改指令。从"说不出哪不对"变成"指得出哪不对、也说得清要往哪改"。
回头一题
这道题不考这一节，考前面学过的。想不起来就回去翻一眼再答——记不住的东西，真用的时候一样会卡。
页面上有三处你想改，最该怎么跟 Agent 说？
上一节你已经让 Agent 造出了第一版。它能跑，但你多半有个说不出口的感觉：好像哪儿不对，又指不出来是哪儿。这一节给你四条最省力、最常见的原则，会了它们，你点评页面、指挥 Agent 时心里就有了准星。
你不用自己动手调样式。你只管用眼睛看出哪不对，动手的活交给 Agent。
四条够用的原则
绝大多数看着乱、显得不专业的页面，毛病都逃不出下面这四条。一条一条来，每条配一组改前改后，下面的切换器你能亲手点着看。
一、对齐(Alignment):让东西排在同一条线上
每行文字的左边缘忽左忽右，眼睛就会觉得乱。让该对齐的元素共用一条看不见的竖线,所有行都从左侧同一个位置起头，页面立刻就整洁了。这条改动最小、见效最快。
二、间距(Spacing):用距离表达"谁和谁是一伙的"
相关的东西凑近，不相关的东西拉开。店名和它下面的标语挨得近，营业时间和地址这两块不同的信息之间留开一点。间距其实在悄悄告诉读者谁和谁是一组的。
三、层级(Hierarchy):让重要的更显眼
如果页面上每个字都一样大、一样黑，读者就不知道该先看哪。用大小、粗细、颜色深浅拉开主次：店名最大最重，标语次一点，营业细则最轻。层级就是替读者排好"先看什么、后看什么"。
四、留白(White Space):给内容透气的余地
新手最爱犯的毛病，是把页面塞满，生怕留出空地。其实空白不是浪费。同样的内容，挤在一起显得廉价，留出余地就显得高级。
切换演示：四原则改前改后对比
下面是同一张"维修店小卡片"。点四个原则按钮，看它从违反原则的样子实时切到应用原则后的样子。这不是两张截图，是浏览器当场渲染出来的。看的时候盯住一件事：标着「改前」的那个版本，具体是哪一处坏了。
练习：诊断 + 开方
下面是一张还没修过的 "Steve's Repair 营业信息" 小卡片。它是真渲染出来的页面，不是文字描述的题目：店名 "steve's repair" 跟下面每一行一样大、一样粗，得你自己看出来它压根没被当成标题。先用四把尺子诊断，再开一句给 Agent 的方子。
第一步. 用四把尺子量这张卡，挑出它最大的两个病灶。(选两个；选错会标红，可以重选)
已选 0 / 2
第二步. 接着你诊断出的病灶，组一句给 Agent 的修改指令
一个页面看起来"乱、不专业",通常你该最先动手调整的是什么？
动手：把四条原则应用到自己的 v1 页面上
练习里你诊断的是别人的卡。现在轮到你自己那张 Steve's Repair v1。下面这张清单挂在你的真实页面上，每量一项就勾一项。
动手自检 · 对照你自己的 v1 页面
六步都做完了，你已经把诊断到开方走通了一整圈。
发给 Agent 之后，终端里大致是这样（仿真示意）：
看到"文件已更新"和"刷新浏览器"就说明改好了。回到浏览器刷新，对照四条尺子复看。
· Agent 改完反而更乱:多半是你一次提了好几处。退回去一次只让它改一条尺子(比如先只改对齐),看对了再改下一条。
· 打不开自己的 v1 页面:在项目文件夹里找到 index.html,Mac 右键用浏览器打开、Windows 双击它就行，这套找文件、用浏览器打开的方法见 0.6 第一次和 Agent 说话。
· 四把尺子量下来好像哪条都不太对：别硬套。把页面上你觉得别扭的地方用文字写下来发给 Agent，让它对照这四条替你诊断一遍，你再看它说得对不对。
诊断不出问题，或者想把"该怎么改"说得更准？把你的页面情况写清楚，发到群里问问大家，或者直接向 Abel 或助教提问，大家可以对照这四条原则帮你点评一遍。