让它好看(二)· 认识 skills

上一节（1.5 设计基础）你用四条原则点评页面、让 Agent 去修改。还有一种更高效的方式：给 Agent 安装一个前端专长包，不必每次手把手教，它自己就带着审美能力工作。这个专长包叫 skill。

skill 是什么

把 Agent 想象成一个聪明但什么都只懂一点的新员工。skill 则是你交给它的一份专长手册，里面记录了某个领域的规范、审美标准和经验方法。它读完这份手册，处理这一领域的工作就如同换了一位经验丰富的老师傅。

一个 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 造出第一版 已经带你做过,这里照着用)。下面分系统给你目标目录,选你的系统看。

教材 tools 目录里有 taste-skill 和 abel-ux 两套前端 skill。
请把它们都装进 OpenCode 的 skills 目录,让你能调用。
装好后告诉我每个 skill 的名字。

装好后,长什么样

文件放置到位后，确认 skill 是否已被 Agent 识别。在项目文件夹里启动 OpenCode,让它列一下现在认得哪些 skill。成功的话,你会在终端看到类似下面这样的输出,列出 taste-skill、abel-ux 这些名字(下面是仿终端示意,不是真实输出,你机器上的措辞会略有不同)。

看到名字列出来,就装好了。如果列表为空，或找不到你刚才放入的 skill 文件夹，通常是文件夹未放置在正确的目录中，或者 OpenCode 尚未重新启动扫描。将情况描述给你的 Agent，它会帮你核对路径。

怎么让它真的用上

用前端 skill(taste-skill / abel-ux)把首页重做一版,
走干净、专业的极简风,要有清晰的层级和留白。
做完保留旧版,我要把新旧两版并排对比一下。

两个关键:一是明确说"用前端 skill",让它知道该调动那身本事;二是让它保留旧版,你才能把新旧两版摆一起看。觉得方向不对,再补一句,比如"换成更暖一点的风格""按钮再醒目些"。

发出后,终端大致如下（仿终端示意）：

看到新文件已生成、旧版已保留，就说明 skill 生效了。在浏览器打开两个文件对比。

同一页面:无 skill vs 有 skill

下面两块都是真实渲染的网页,都是 Steve's Repair 首屏。给的需求一字不差:"做一个维修店首屏,有店名、一句话、一个预约按钮"。左边是 Agent 没装 skill 交的活,右边是装了前端 skill 交的活。快速浏览即可发现明显差距。这也是你待会儿自己跑完该看到的那种差距。

同一句需求，未安装 skill 的结果：功能可用，但视觉上缺乏层次 同一句需求,装了前端 skill 的结果:有层级、有留白、有品牌感

动手自检:你真的装上、用上了吗

下面四项，每一项都需要你在自己的电脑上实际完成后再勾选，并非阅读理解后即可勾选。四项都勾上，这一节的目标才算拿到。

动手:你来当裁判

装 skill 的真本事,是能看出"它到底有没有变好"。下面是同一个需求("做一张维修预约卡片")交上来的两版。先选出更好的那版,再指出一处具体差别。选完有反馈。

小测

不知道 skill 文件夹该放进哪个目录、让它列却列不出来、想换风格不知道怎么说?把情况(最好连终端画面一起)发到群里问问大家,或者直接向 Abel 或助教提问。