让它好看（二）：认识 skills
你把一个前端 skill 放进 Agent 能读到的目录，让它生效，再用一句话指挥它把同一个页面重做一版，亲眼对比同一句需求在安装 skill 前后产出的差距。
回头一题
这道题不考这一节，考前面学过的。想不起来就回去翻一眼再答——记不住的东西，真用的时候一样会卡。
一个页面看起来「乱、不专业」，通常你该最先动手调什么？
上一节（1.5 设计基础）你用四条原则点评页面、让 Agent 去修改。还有一种更高效的方式：给 Agent 安装一个前端专长包，不必每次手把手教，它自己就带着审美能力工作。这个专长包叫 skill。
skill 是什么
把 Agent 想象成一个聪明、但什么都只懂一点的新员工。skill 就是你塞给它的一本专长手册，里面写着某个行当的规矩、审美、老经验。它读完这本，再干这一行的活，就跟换了个老师傅一样。
skill 是给 Agent 的一份专长说明书，它能读懂、能照着办。装上前端 skill,它写的页面就自带审美；装别的 skill,就多一门别的本事。
装上一个专长包，还是同一个 Agent,但多了一门老师傅级的本事。这一节要装的是前端那套。
一个 skill 到底是什么形态
别把它想复杂了。一个 skill 说白了就是你电脑上的一个文件夹。文件夹的名字就是这个 skill 的名字，里面有一个叫 SKILL.md 的文本文件(文件名全大写),那就是写给 Agent 看的说明书正文，可能还附带一些参考素材。就这么简单。
这门课已经把整套前端 skill 备好，放在教材的 tools/ 目录里，随教材一起发给你。打开看，大概长这样:
这一节要装的就是这两套:
- taste-skill 全系列:一套反 AI 平庸感(Anti-Slop)的前端框架。分了几种场景，极简风(minimalist)、粗野风(brutalist)、品牌套件(brandkit)、看图还原(image-to-code)、旧页重做(redesign),用哪个挑哪个。
- abel-ux:一本浓缩了 100 多条设计原则的设计笔记，素材来自 Refactoring UI、Apple HIG。它偏设计思维和评审，帮 Agent 把审美讲清楚、把毛病挑出来。
怎么装：把文件夹放到 Agent 能读到的地方
这一步要用到终端(打开终端、找文件夹这些基础操作，前面 0.4 安装 和 1.4 造出第一版 已经带你做过，这里照着用)。下面分系统给你目标目录，选你的系统看。
- OpenCode 在 Mac 上读这个目录:
~/.config/opencode/skills/(~是你的用户主目录；名字以.开头的是隐藏文件夹，访达里默认看不到，用命令行进最稳)。 - 把教材
tools/taste-skill/skills/里的每个 skill 文件夹，和tools/abel-ux/整个，复制进上面那个目录。不熟悉怎么复制文件夹？直接让 Agent 帮你搬（下面有原话）。 - 放好后，目标目录里应该出现一个个 skill 文件夹，每个里头都有
SKILL.md。这就算放对位置了。
- OpenCode 在 Windows 上读这个目录：你用户目录下的
.config\opencode\skills\(以.开头是隐藏文件夹；具体完整路径让你的 Agent按你的机器确认一下最稳)。 - 把教材
tools\taste-skill\skills\里的每个 skill 文件夹，和tools\abel-ux\整个，复制进上面那个目录。不熟悉怎么复制文件夹？直接让 Agent 帮你搬（下面有原话）。 - 放好后，目标目录里应该出现一个个 skill 文件夹，每个里头都有
SKILL.md。这就算放对位置了。
这门课从头到尾就是"你指挥、它执行"。装 skill 也一样，在 OpenCode 里直接跟它说:
教材 tools 目录里有 taste-skill 和 abel-ux 两套前端 skill。
请把它们都装进 OpenCode 的 skills 目录,让你能调用。
装好后告诉我每个 skill 的名字。装好后，长什么样
文件放好之后，得确认 Agent 到底认没认。在项目文件夹里启动 OpenCode,让它列一下现在认得哪些 skill。装上了的话，终端会给你类似下面这样的输出，列出 taste-skill、abel-ux 这些名字(下面是仿终端示意，不是真实输出，你机器上的措辞会略有不同)。
看到名字列出来，就装好了。如果列表是空的，或者找不到你刚搬进去的那几个，多半是文件夹没放对目录，要么就是 OpenCode 还没重启、没重新扫。把情况说给你的 Agent，它会替你核对路径。
怎么让它真的用上
用前端 skill(taste-skill / abel-ux)把首页重做一版,
走干净、专业的极简风,要有清晰的层级和留白。
做完保留旧版,我要把新旧两版并排对比一下。两个关键：一是明确说"用前端 skill",让它知道该调动那身本事；二是让它保留旧版，你才能把新旧两版摆一起看。觉得方向不对，再补一句，比如"换成更暖一点的风格""按钮再醒目些"。
发出去之后，终端大致是这样（仿真示意）：
看到新文件已生成、旧版已保留，就说明 skill 生效了。在浏览器打开两个文件对比。
同一页面：无 skill vs 有 skill
下面两块都是真实渲染的网页，都是 Steve's Repair 首屏。给的需求一字不差:"做一个维修店首屏，有店名、一句话、一个预约按钮"。左边是 Agent 没装 skill 交的活，右边是装了前端 skill 交的活。扫一眼就知道差在哪。你待会儿自己跑完，看到的也是这种差距。
同一句需求，未安装 skill 的结果：功能可用，但视觉上缺乏层次 同一句需求，装了前端 skill 的结果：有层级、有留白、有品牌感
两边信息差不多，都是店名、一句话、按钮、四项服务。差的全在怎么呈现:字号分了层级，间距留了白，配了色，按钮有了质感，服务做成了卡片。这些呈现上的讲究，就是前端 skill 给 Agent 补上的东西。你一个字没多写，只是换了个有审美的师傅来做。
动手自检：你真的装上、用上了吗
下面四项，每一项都得你在自己电脑上真做完了再勾，看懂了不算。四项都勾上，这一节才算拿到手。
1.6 · 装上前端 skill 自检卡
四项都做到了，这节的目标拿到手。
在自己机器上做完一项就勾一项，四项都勾上就过。
一、让它列 skill,列表是空的、找不到刚搬的那几个：多半是文件夹没放进对的目录，或 OpenCode 没重启没重扫。退出 OpenCode 重新启动一次，再让它列；还不行，把目录路径发给你的 Agent帮你核对。
二、它做出来的新版和旧版差不多、没变好看：八成是你没在需求里点名"用前端 skill",它就没去翻那本说明书。把那句话补上重说一遍。
三、新旧两版找不到、不知道哪个文件是新版：让 Agent 明确告诉你新版存成了哪个文件，再用浏览器打开它(怎么在文件夹里找到文件、用浏览器打开，见 1.4)。
都试过还卡着？把现在的情况用文字写清楚发给你的 Agent，它会带你一步步装好、用上。
动手：你来当裁判
装 skill 的真本事，是能看出"它到底有没有变好"。下面是同一个需求("做一张维修预约卡片")交上来的两版。先选出更好的那版,再指出一处具体差别。选完有反馈。
第一步：这两版，哪一版更好？
第二步:B 版到底好在哪？挑一处最具体的差别。
小测：装了却没效果
你装好了前端 skill,但让 Agent 重做的页面还是一样寡淡。最可能漏了哪一步？
不知道 skill 文件夹该放进哪个目录、让它列却列不出来、想换风格不知道怎么说？把情况(最好连终端画面一起)发到群里问问大家，或者直接向 Abel 或助教提问。