第 40 章　前端 Skill：从 AI Slop 到有品味的界面

但有一个问题，前面几章都没正面回答：代码能跑，不代表好看。

一个 SaaS 落地页，后端接口都对、组件都渲染出来、控制台没报错，可一眼看过去就是「AI 味」。靛蓝紫主色、居中 Hero、三等分特性卡片、Inter 字体、emoji 当图标。功能上挑不出毛病，审美上一眼假。这就是 AI Slop（AI 泔水）在前端的样子。这不算代码缺陷，源头是模型的统计惯性：训练数据里这类页面最多，模型生成时自然往最大似然处收敛。光靠提示词「做得好看一点」没用，模型不知道什么是「好看」，它只知道什么是「常见」。

2026 年中，前端设计 Skill 成了 Claude Code 生态里最热闹的赛道之一。skills.sh 和 skillsmp.com 两个市场上，前端设计类的安装量动辄几十万。这一章讲其中最有代表性的六个，再讲向阳乔木（joeseesun）做的一场对比实验：10 个任务、8 个变体、80 个真实生成产物，全部可交互。

40.1 AI Slop：模型的默认审美

先看对照组。向阳乔木在实验里设了一个「无 Skill」组，明确禁止 Claude 读取任何 Skill 文件，用裸 Claude 生成页面。结果高度收敛：

• 主色：靛蓝 / 紫 / 蓝紫渐变
• 字体：Inter 或 Noto Sans SC
• Hero：居中、大标题 + 副标题 + 两个 CTA
• 特性区：三等分卡片网格
• 图标：emoji 或 lucide 默认款

这套配方不是某个模型的缺陷。所有主流模型在不加约束时都这么输出。原因在统计：训练语料里 SaaS 落地页长这样的最多，模型采样时往均值回归。换个模型、换个提示词，它换个渐变方向，骨架不变。

这就是前端需要专门 Skill 的原因。后端 Skill（第 24 章的 Go 语言技能、第 16 章的 agent-skills）解决正确性和纪律：代码能不能跑、能不能维护、安不安全。前端 Skill 解决审美：怎么打破模型往均值收敛的统计惯性。

而打破统计惯性最有效的手段，是告诉模型哪些用法不许用。教它什么是好设计反而收效有限。这是下面六个 Skill 共同的方法论核心，也是向阳乔木实验得出的第一条发现。

40.2 六个主流前端设计 Skill

截至 2026 年 7 月，skills.sh 安装量排名前六的前端设计 Skill 如下。安装量来自 skills.sh 市场（数据来源 designskill.qiaomu.ai），GitHub star 为独立核实（带 * 为聚合仓库总 star，非单个 skill；star 数随时间增长，此处为 2026 年 7 月核实值）。

六个 Skill 背后是六种不同的设计哲学。下面逐个拆。

下面是「个人作品集」测试的不使用 skill 的生成：

40.2.1 frontend-design：Anthropic 官方的视觉冒险家

frontend-design 是 Anthropic 官方插件（第 20 章讲过的 13 个之一），仓库在 anthropics/skills，skills.sh 安装量第一（620K）。SKILL.md 开宗明义：生成「distinctive, production-grade frontend interfaces that avoid generic 'AI slop' aesthetics」，避免通用 AI 泔水美学。

核心机制是 BOLD aesthetic direction：动手之前先选一个极端的审美方向。SKILL.md 里列了一长串选项：brutally minimal（极简）、maximalist chaos（极繁）、retro-futuristic（复古未来）、organic/natural（有机自然）、luxury/refined（奢华精致）、playful/toy-like（玩具感）、editorial/magazine（杂志编辑）、brutalist/raw（粗野主义）、art deco/geometric（装饰艺术/几何）、soft/pastel（柔和粉彩）、industrial/utilitarian（工业实用）。它逼 Agent 先回答四个问题：这个界面解决什么问题、给谁用、选哪个极端方向、What makes this UNFORGETTABLE? What's the one thing someone will remember?（什么让它难以忘记？别人会记住的那一件事是什么？）

最后一句是它的灵魂。frontend-design 追求的是「记忆点」，好看只是顺带。在向阳乔木的实验里，它产出了墨黑金编辑风落地页（深墨黑 + 金色 + Cormorant Garamond 衬线 + 自定义墨迹 SVG）、构成主义作品集、Art Deco 向导、玻璃故障 404。视觉个性断层领先，开放命题下最强。

代价是风格跨页跳跃。落地页是奢华编辑风，到组件面板可能变成琥珀色终端风。每页都让人记住，但三页放一起不像同一个产品。它擅长视觉冒险，不擅长搭建统一体系。

40.2.2 web-design-guidelines：Vercel 的看不见的品质

web-design-guidelines 来自 Vercel 工程团队（vercel-labs/agent-skills），435K 安装。和 frontend-design 不同，它不生成设计，审的是已有代码。

触发词是「review my UI」「check accessibility」「audit design」。机制是：从源 URL 拉取最新的 Web Interface Guidelines，读指定文件，逐条对照规则检查，输出 file:line 格式的发现。它做的是第 25 章 autoreview 在前端领域的同类工作，把审查做成可重复运行的关卡。

价值在「看不见的品质」。在向阳乔木的实验里，它在源码层面全面领先：skip-link（跳转链接）、aria-sort、tabular-nums（表格数字对齐）、text-wrap: balance（文本换行优化）、reduced-motion 兜底（动效降级）、theme-color。移动端是它的主场，44px 触控热区、inputmode、键盘导航满配，一个页面写出 59 处 aria 标注，全场纪录。它还补全了焦点陷阱、Esc 关闭、焦点返还、aria-live 播报这些手测很难发现、验收必挂的细节。

一句话：frontend-design 赢在截图，web-design-guidelines 赢在验收。生产项目里两者叠加（先设计后审计）可能是最优解。

40.2.3 ui-ux-pro-max：数据库驱动的六边形战士

ui-ux-pro-max 来自 nextlevelbuilder/ui-ux-pro-max-skill，248K 安装，GitHub 101.2K star，star 数在六个里最高。它的定位很特别：风格不是「设计」出来的，是「查」出来的。

它内置一个可执行的设计数据库：161 套配色、57 组字体搭配，存成 CSV，配搜索脚本。Agent 接到任务后，先按任务特征检索出匹配的风格（Glassmorphism 玻璃拟态 / Data-Dense 数据密集 / Motion-Driven 动效驱动等），再严格落地。它把「选风格」从模型的概率采样变成了确定性检索。

在向阳乔木的实验里，它为三个不同任务分别检索出 Glassmorphism、Data-Dense、Motion-Driven 并严格执行。上限不如自由发挥的 frontend-design，但下限最稳、可复现性最强。电商是它的准则库主场，sticky CTA、面包屑、触控热区逐条命中，商业完成度最高。它还是唯一系统考虑 404 错误恢复路径的变体（给 4 条推荐链接，不只做一个好看的 404）。

它是六边形战士，每个维度都不差，适合团队规模化使用：换个人、换个项目，检索出的风格一致，产出可预期。

40.2.4 taste-skill：最强反模板纪律

taste-skill 来自 leonxlnx/taste-skill，211K 安装，57.4K star。仓库描述一句话：gives your AI good taste. stops the AI from generating boring, generic slop（给你的 AI 好品味，阻止它生成无聊的通用泔水）。

它的核心是一份 1200 行的严格 pre-flight 检查清单，动手生成之前先过一遍。清单不只管视觉，还管文案：禁用「革命性」「颠覆性」「智能」这类 AI 惯用营销词。这是六个 Skill 里唯一把文案用词都纳入纪律的。

在向阳乔木的实验里，它用 zinc 灰 + electric blue 电光蓝，Hero 左对齐、明确拒绝居中构图。反模板执行最严格。最有意思的是它会按任务性质自动调节冒险度：功能页（向导、表单）收敛到稳健，开放命题（404、多样性挑战）主动把冒险度参数从 6 拉到 9。多样性挑战里它的「印刷编辑风播放器」（衬线斜体大字封面 + 1px 细线进度条）是全部 18 个方向里唯一跳出「播放器该有的样子」的方案。

taste-skill 的表现说明，纪律最严的 Skill 反而在开放命题下最有创造力。禁令禁掉的是统计惯性，禁完了，模型只能往别处找路。

40.2.5 impeccable：确定性 polish 抬高下限

impeccable 来自 pbakaus/impeccable，180K 安装，43.7K star。作者是 Paul Bakaus，前端领域老兵，jQuery UI 时期就成名。配套网站 impeccable.style 自称「1 skill, 23 commands, and curated anti-patterns for impeccable frontend design」，支持 Cursor、Claude Code、GitHub Copilot、Gemini CLI、Codex CLI 等。

核心机制有三个，都是六个 Skill 里独有的：

• OKLCH 色彩种子：用 OKLCH 色彩空间生成感知均匀的配色，避免 RGB 色彩空间里常见的视觉跳跃。一个种子确定一组配色，可复现。
• register 分流：把页面分成 brand（品牌页，版式自由）和 product（产品页，克制字阶）两个 register，不同场景走不同规则。和 taste-skill 的冒险度拨盘异曲同工，但更简洁。
• detect.mjs 确定性检测：一个不依赖 LLM 的检测脚本，跑 45 条规则，真实修掉违规。比「靠模型自觉」的门禁更硬。

在向阳乔木的实验里（应要求做了全量补测，覆盖全部 10 个任务），它的确定性检测是全场独有机制，detect.mjs 真实修掉了 transition: width 动画等违规。组件和流程页最稳，三页一致性最高。它的 anti-cream（反奶油色）规则直接命中本实验多个变体的暖纸底偏好，包括作者自己的融合版。这条规则值得吸收。

impeccable 的定位是「polish」。它不从零生成，是对已有页面做审计、抛光、加动效的后置工序。适合做上线前门禁：detect 找问题，polish 修问题，确定性保证每次跑结果一致。

40.2.6 emil-design-eng：动效工匠

emil-design-eng 来自 emilkowalski/skills（仓库从 emilkowalski/skill 重定向到复数），115K 安装，5.0K star。作者是 Emil Kowalski，Radix UI / shadcn 生态的知名开发者，仓库描述就一句：Skills for Design Engineers.

它的静态布局和对照组差距不大。看截图，你会觉得它不出彩。但一交互就懂。价值全在动效工艺：

• 统一的 cubic-bezier(0.23, 1, 0.32, 1) 缓动（快出慢进）
• scale(0.95) 入场
• 50-70ms 的交错（stagger）时序
• :active 按压反馈
• hover 媒体查询防触屏误触

在向阳乔木的实验里，它是交互密集任务的主场：shake 抖动校验、可中断 toggle、快出慢进 Toast。移动端手感之王：stagger 入场、灵动岛 ease-drawer、环形图绘入。

emil-design-eng 揭示了一个评估陷阱：动效类 Skill 的价值在截图之外。纯截图对比会严重低估它。这也是为什么向阳乔木的实验要求所有交互任务都过浏览器实测：向导校验拦截、危险操作弹窗解锁、Toast 消失时序，都得真实点一遍。

40.3 向阳乔木的对比实验：10 任务 × 8 变体

上面六个 Skill 各说各的好。到底好在哪、差在哪、什么场景该用哪个，光看各自的 README 看不出来。向阳乔木（GitHub: joeseesun，X: @vista8，运营「乔木推荐」tuijian.qiaomu.ai）做了一场对比实验，把六个 Skill 加上无 Skill 对照组，再加一个他自己融合六个 Skill 做的 qiaomu-design 融合版，拉到同一张擂台上。实验全文发布在 designskill.qiaomu.ai。

40.3.1 实验设计

实验的骨架是控制变量。

任务侧，10 个任务，覆盖前端设计的主要场景：

变体侧，8 个变体：无 Skill 对照组（baseline）、frontend-design、web-design-guidelines、ui-ux-pro-max、taste-skill、impeccable、emil-design-eng，加上作者自己的 qiaomu-design 融合版。

10 任务 × 8 变体 = 80 个真实生成产物，全部是可交互的单文件 HTML，发布在实验网站上，未经人工修饰。

控制变量做得相当严谨：

• 12 个独立并行 Agent，互相不可见，杜绝风格串染
• 任务简报逐字相同，技术约束逐字相同（单文件 HTML、仅允许 Google Fonts、禁用外部图片）
• Skill 组被要求先完整读取 SKILL.md 再动手；对照组被明确禁止读取任何 Skill 文件
• ui-ux-pro-max 组按其工作流实际运行了检索脚本选型
• 交互类任务（D/E）经过浏览器实测抽查：向导校验拦截、危险操作弹窗解锁均真实生效

局限性也写明了：每变体每任务仅一次采样，存在生成随机性；评分为定性判断，非多人盲评；动效类 Skill 的价值需实际交互体验，缩略图无法体现；skillsmp.com 与 skills.sh 大量重叠，参评名单以去重后的设计哲学差异为准。

把局限性写出来，是这个实验可信度的关键。很多 Skill 评测只说好话不说边界，乔木把边界摆在前面。

40.3.2 三轮评测

80 个产物分三轮评测，每轮考察不同维度。

第一轮 · 视觉表现（任务 A-C），考察视觉个性、工程规范、动效工艺、三页一致性。结论见下表（评分 ●●●●● 为满分五分制，● 为一分，摘自实验原文）：

第二轮 · 交互 / 组件 / 创造性 / 多样性（任务 D-G），这是区分 Skill 体系化程度的一轮。web-design-guidelines 在交互与组件双满分（焦点管理、aria 语义、焦点陷阱全场唯一做全）；frontend-design 在开放命题断层领先（Art Deco 向导、玻璃故障 404、三方向彻底割裂）；taste-skill 会按任务性质自动调节冒险度；emil-design-eng 在交互密集任务主场（shake 校验、可中断 toggle）。

第三轮 · 电商 / 移动端 / 数据叙事（任务 H-J），强惯例场景。结论是规则密集型 Skill 们趋于收敛，差异主要剩下氛围胆量（frontend-design）与机制可靠性（impeccable 的 detect / 融合版的两轮制）。web-design-guidelines 移动端主场（44px/inputmode/键盘导航满配，59 处 aria 全场纪录）；emil-design-eng 是移动端手感之王（stagger 入场、灵动岛 ease-drawer、环形图绘入）。

40.3.3 八个发现

三轮评测得出八个发现，这是这个实验最有价值的部分。

发现一 · Skill 的第一作用是「禁止」而非「教学」。 对照组暴露了默认输出的收敛性。效果最好的 Skill（frontend-design、taste-skill）核心手段都是负面清单，禁用 AI 惯用字体、禁用紫渐变、禁用居中构图、甚至禁用「革命性」这类词。禁令比正面示范更能打破模型的统计惯性。这是本章开头那句金句的出处，也是整个实验立论的地方。

发现二 · 「好看」和「合格」是两条赛道。 frontend-design 产出了最惊艳的视觉（墨黑金落地页、构成主义作品集），但 web-design-guidelines 在源码层面全面领先：skip-link、aria-sort、tabular-nums、reduced-motion 兜底。前者赢在截图，后者赢在验收。生产项目里两者叠加使用（先设计后审计）可能是最优解。

发现三 · 数据库检索 ≈ 稳定的中上水平。 ui-ux-pro-max 是唯一带可执行检索流程的 Skill（161 套配色、57 组字体的 CSV + 搜索脚本）。它为三个任务分别检索出 Glassmorphism / Data-Dense / Motion-Driven 并严格落地。上限不如自由发挥的 frontend-design，但下限最稳、可复现性最强，适合团队规模化使用。

发现四 · 动效类 Skill 的价值在截图之外。 emil-design-eng 的静态布局和对照组差距不大，但交互后差异显著：统一的 cubic-bezier 缓动、scale(0.95) 入场、50-70ms 交错、:active 按压反馈、hover 媒体查询防触屏误触。评估此类 Skill 必须实际交互，纯截图对比会严重低估它。

发现五 · 组件常识是模型自带的，Skill 提供的是「体系」。 任务 E 里六个变体全部正确实现了危险操作二次确认（多数带「输入名称解锁」），说明组件常识是模型基本功。差异在体系化程度：web-design-guidelines 补全了焦点陷阱、Esc 关闭、焦点返还、aria-live 播报这些手测很难发现、验收必挂的细节；ui-ux-pro-max 则每个组件行为都能对应到检索出的 UX 准则条目。

发现六 · 创造性差距在「开放命题」下才拉开。 任务 F（404 页）命题完全开放，对照组表现反而不差（星空 + 宇航员），但上限差距明显：frontend-design 做出了鼠标视差 + glitch 数字 + 纯 SVG 山脉太阳的完整叙事场景；taste-skill 检测到创意命题后主动把自己的冒险度参数从 6 拉到 9。约束型任务看纪律，开放型任务看胆量，两者是不同的能力。

发现七 · 多样性是对照组最大的短板。 任务 G 要求同一组件给出 3 个截然不同的方向。对照组的三个方向（深空霓虹 / 黑白黑胶 / 荧光终端）看似不同、实则都在「酷炫暗色」舒适区。frontend-design 和 taste-skill 的三方向做到字体家族、色彩体系、控件语言全维度割裂。没有 Skill 时模型会用表面差异冒充多样性。

发现八 · 交互任务上各 Skill 殊途同归，但理由不同。 任务 D 六个变体的校验流程全部真实可用（实测：不选航班点下一步均正确报错）。有趣的是相同行为背后的驱动不同：web-design-guidelines 出于 a11y（校验失败聚焦首个错误字段）、ui-ux-pro-max 出于检索到的 focus-management 准则、emil-design-eng 出于动效反馈（shake 抖动）。好的交互像是多条设计哲学的交汇点，这也解释了为什么此维度分差最小。

40.3.4 番外：融合版与 impeccable 全量补测

实验还有一个番外篇。作者把六个 Skill 的产物学习了一遍，做了一个 qiaomu-design 融合版（joeseesun/qiaomu-design），拉回赛场重跑全部任务。融合版的思路是「拨盘机制」：按任务自动切换冒险度（向导收敛到 5/5/6，404 拉满 10/9/2），加 preflight 门禁在生成过程中实际拦截违规（两次 transition: all、一次 Inter 字体）并强制返工。

公平性说明写得坦诚：评分者与 skill 作者同源，融合版规则来自对这批对手的学习，存在天然主场优势，仅供参考。这种主动声明利益冲突的做法，在 Skill 评测里很少见，值得记一笔。

impeccable 的全量补测也单独写了观察。三个发现：①确定性检测是全场独有机制，detect.mjs 不依赖 LLM 跑 45 条规则，真实修掉了 transition: width 动画等违规，比「靠模型自觉」的门禁更硬；②register 分流（brand 版式自由 / product 克制字阶）与融合版的拨盘异曲同工但更简洁；③它的 anti-cream 规则直接命中本实验多个变体的暖纸底偏好，包括融合版自己，这条值得吸收。

当然你也可能有不同的体验和观感，这对于前端开发来说也很正常。本章主要基于向阳乔木的测试进行介绍，欢迎你在评论区写下你的想法。

40.4 选型建议

综合三轮评测和八个发现，向阳乔木给出四条选型建议：

impeccable 的位置特殊。它是后置 polish 工序，适合做上线前门禁，和上述任意 Skill 叠加使用：先生成、再 detect 找问题、再 polish 修。

一个务实的组合：日常拿 frontend-design 或 taste-skill 做视觉生成，挂 web-design-guidelines 做无障碍审计，团队规模化场景换 ui-ux-pro-max 保下限，交互密集页面叠 emil-design-eng，上线前过一遍 impeccable 的 detect。六个 Skill 是六种工序，不必六选一。

40.5 与全书方法论的对接

• 第 2 章 Skills：这六个 Skill 是「一个 Markdown 文件定义一种行为」在前端设计领域的展开。frontend-design 的 BOLD aesthetic direction、taste-skill 的 1200 行 pre-flight 清单，都是原子 Skill 的典型实现。
• 第 6 章 superpowers：superpowers 是社区级 Skills 库的范本，这六个 Skill 是前端设计赛道的社区库，理念同源，把重复的判断固化成可复用的约束。
• 第 16 章 agent-skills：taste-skill 的 pre-flight 清单、impeccable 的 detect.mjs、ui-ux-pro-max 的检索脚本，都是 agent-skills 验证门禁和反合理化表的同类，把 Agent 最爱跳过的步骤（不查规范就动手、不检测就交付）钉成必须走的流程。「Skill 的第一作用是禁止而非教学」和第 16 章「反合理化表」是同一个哲学。
• 第 20 章 Anthropic 官方插件：frontend-design 是 13 个官方插件之一，本章把它放回它真正所属的赛道，和社区设计 Skill 同台对比，才能看清它的长板（视觉冒险）和短板（风格跨页跳跃）。
• 第 25 章 autoreview：impeccable 的 detect.mjs 和 web-design-guidelines 的审查机制，是 autoreview「收尾关卡」思想在前端领域的落地，一个审代码质量，一个审设计规范，都是把审查做成不可绕过的关卡。

40.6 本章小结

前端设计的特殊难题是 AI Slop：模型往统计均值收敛，产出功能正确但审美一眼假。本章六个 Skill 从六个不同角度破解这道题：frontend-design（Anthropic 官方，视觉冒险家，每页一个记忆点）、web-design-guidelines（Vercel，a11y 与排版规范，赢在验收）、ui-ux-pro-max（数据库驱动，下限最稳）、taste-skill（反模板纪律，连文案用词都管）、impeccable（确定性 polish，detect.mjs 全场独有）、emil-design-eng（动效工匠，价值在截图之外）。

向阳乔木的对比实验（10 任务 × 8 变体 = 80 产物）是本章最硬的证据。八个发现里最值得带走的是前两条：Skill 的第一作用是「禁止」而非「教学」，禁令比正面示范更能打破统计惯性；「好看」和「合格」是两条赛道，frontend-design 赢截图，web-design-guidelines 赢验收，生产里两者叠加。这两条不只适用于前端 Skill，放到整个 Skill 方法论里也成立：Skill 的本质是拦住 Agent，不让它往统计惯性里滑，至于该做什么，模型自己往往知道。