Taste-Skill 是开发者 Leon Lin 推出的开源工具，仓库 github.com/Leonxlnx/taste-skill 累计 2 万 star。它解决的问题很具体：用 AI 写前端时，模型默认产出的页面长得像 2018 年的 Bootstrap demo——能跑、丑、平庸。
这个项目的方案不是训新模型，而是塞规则。它把一套设计规范以 Markdown + 示例代码的形式打包成可加载的 skill，让 Claude、Cursor、Codex 这些 Agent 在生成前端代码时强制遵守。
它到底是什么形态的工具
Taste-Skill 不是 npm 包也不是 VS Code 插件。它的本体是一组结构化的 prompt 和参考样例，分两类：
- 规则文件：色彩系统、间距、字号阶梯、圆角、阴影、动效曲线，每一项写明”为什么”和”什么时候不用”；
- 样例库：每条规则配 2-3 个 React + Tailwind 的实现 snippet，让模型不是在抽象描述里推理，而是在具体例子里类比。
它适配主流 Agent 工具的方式很简单——把整个目录扔到 Claude Code 的 .claude/skills、Cursor 的 .cursor/rules 或 Continue 的 config 里就行。Agent 在生成前端代码前会先检索匹配的规则。
为什么”塞规则”这个思路成立
大模型生成前端的瓶颈不是技术能力，是 taste。GPT-4 级别的模型早就能写出”语义正确”的 React 组件，但配色随机、间距随心、动画僵硬。这是训练数据决定的——网上 80% 的 HTML/CSS 教程审美就那个水平，模型从均值上回归。
Leon 在 README 里有一段说得直白：让模型变得有审美的成本远高于让它”在每次生成前看一眼参考”。后者只需要 200-300 tokens 的 prompt 注入，前者要几百万美元的微调。Taste-Skill 走的是第二条路的反面，是工程上的捷径。
实测下来的效果差距
我在 Cursor 里跑了对比：让它写一个 SaaS 仪表盘的 KPI 卡片组件，分别开关 Taste-Skill。
- 不开：默认蓝白配色、14px 字号、rounded-md 圆角、卡片之间 16px 间距，能用但毫无设计感；
- 开启：用了 stone 灰阶的微对比、10/13/16 三级字号阶梯、统一 8px 圆角、12/20/32 的间距网格，肉眼立刻像设计师手稿。
差距大概等于初级前端 vs 资深前端的产出。这种差距在 demo、营销页、内部工具上影响最大——这些场景没人配设计师，全靠工程师审美。
它的局限和我会保留的判断
Taste-Skill 不是银弹。它擅长的是”风格化的常规组件”，不擅长两种场景：
- 需要复杂交互的页面（数据可视化、3D 编辑器、白板类工具）——规则覆盖不到的地方仍然会暴露模型的平庸；
- 已有强设计语言的产品——硬塞 Taste-Skill 反而会把你的设计味道带偏。
另一个值得提的点：当所有人都用同一套 skill 时，前端会进入”千篇一律的美”。这不是 Leon 的问题，是工具普及之后必然的副作用。Bootstrap 当年也走过这条路。
所以我对 Taste-Skill 的定位是——给没有设计师的小团队、给独立开发者、给做 MVP 的人，它能把基线从难看抬到合格。但严肃做产品的团队最终还是要建立自己的设计系统，taste-skill 至多是个起点。
参考来源：
