ARTICLE · 1184481
AI 前端为什么总是一张模板脸?taste-skill v2 用 247 个获奖站点做了本设计库
Agent Skills · 设计方向 · 真实图片 · 浏览器实测 · 反模板脸 —— Leonxlnx/taste-skill 的 v2.0.0，把「让编码 agent 做出不像 AI 的页面」拆成四件能执行、能测量的 事：脚本抽设计方向、从开放式馆藏找真图、用真实浏览器逐条体检、再看着自己的截图改三处。
它面向 Claude Code、Codex、Cursor 这类编码助手。这一版不是旧文件的小修，而是一个全新的 skill：研究方法、随机抽签和浏览器检查第一次被收进同一个文件夹，安装名保持不变。
一套反套路的前端 skill
taste-skill 是一组 Agent Skills：装进编码 agent 之后，它在写落地页、营销页、作品集、 产品页时，按设计逻辑去排布，而不是按训练数据里的平均值。仓库是 Leonxlnx/taste-skill， JavaScript 编写，2026 年 2 月创建，当前 9.6 万 star、6,538 fork，MIT 许可。
它服务的是任何用 agent 生成对外网页的人。除了「做一个落地页」这种直接请求， 当用户说「这页看着很模板」「这页很 AI」「能不能做得像获奖站那样」时，它同样应当被拉起。
技术形态上，默认 skill 已经不是一个 SKILL.md，而是一个文件夹：主指令加 9 个参考文件、
一个研究出来的数据库，再加 4 个零依赖脚本，覆盖版式、字体、配色、图像、动效与批评六个主题。
仓库里还一起装着品牌工具箱、粗野主义、极简、改版、图像转代码、图像生成前端等一整套 skill，
以及被保留下来的两个历史版本。
它在生态里的位置是通用件：遵循 Agent Skills 规范，用 npx skills add 一条命令装进各种 agent，
也支持 Claude Code 与 Codex 的插件市场，默认安装名是 design-taste-frontend。
运行时不需要 API key，脚本自己什么都不安装，但要 Node 22 以上和一个已装好的
Chrome、Edge 或 Chromium。边界也写得明确：不做 dashboard、数据表、多步表单、
代码编辑器这类应用界面，它是给公共页面用的。
AI 页面的默认长相
模型生成的页面，是它见过的所有页面的平均：三行居中的大标题、标题上一枚小标签、 三张一模一样的图标卡、一层柔和渐变、几条发丝线、一句等宽小字。 没有一处是错的，也没有一处是被决定的。
• 让模型自己发明风格，它每次都返回品类默认值。 scripts/draw.mjs 的注释把这点写得很直白：
一个被要求「想一个方向」的模型，给出的永远是这一类产品的默认样子。
• 工程里没有照片时，agent 会把一切都画成 SVG。 v2 的测试记录里，不装 skill 的页面 一张真实照片都没有，装上之后是 48 张。
• 规则写进提示词只是希望。 四个测试页面里，不装 skill 产出 37 个小标签和 249 条发丝线， 装上是零。
• 检查只能靠肉眼。 标题在 1440、768、390 三档宽度下会不会变成三行、正文有没有小于 13px、 文字有没有压在图上，过去只能一屏一屏看，看完也说不清算不算通过。
这些问题的共同点是：页面不缺样式，缺的是决定。改配色、换字体、调圆角都没有用， 因为病根在于从头到尾没有人替这个页面做过一次选择。客户是餐厅、民宿还是陶瓷品牌， 最后拿到的首屏都是同一块渐变加三张图标的空地，上面没有一个字是只属于这家的。
另一类不便来自素材。给一家餐厅做页面，agent 手上没有这家店的照片， 于是用图标和装饰把首屏填满；页面看起来干净，但上面没有任何东西真的属于这家店。 同一个 brief 交给两个人做，出来的还是同一张脸。
这几条叠加起来，团队里没人能用一句话说清「这页为什么像 AI」， 也就没法把它写进评审清单，只能一次次在群里说「再调调」。
需求因此很具体：给 agent 一个不会每次都退回默认值的方向来源，一条能拿到真实素材的路， 以及一套不靠肉眼的一致性检查。
所以真正缺的不是一句更好看的提示词，而是把「好看」拆成可以执行、可以检查的步骤： 方向由谁定、素材从哪里来、规则由谁验证。v2.0.0 的改动全部围绕这三件事。
这一版能做什么
抽设计方向，不用形容词。 一条命令发三张牌，agent 从中挑一张：
node scripts/draw.mjs --sector restaurant --brief "一句话说明客户" --options 3
候选来自 20 个研究过的方向，比如「名字当纪念碑」「一句话就是版式」「颜色分章」「一个母题」。 库里备着 48 种 hero 构图、172 种分节构图、44 套免费字体、56 组配色、420 张照片和 11 种动效。 选中后发完整方向表：字体系统、配色、hero 与每一节的构图一次给全。
找真实图片，并留下致谢。
node scripts/assets.mjs "Ghent old map" --get 12
它不依赖任何 API key，检索 Openverse、Wikimedia Commons、芝加哥艺术博物馆和大都会博物馆，
默认只保留允许商用的许可（CC0、公有领域、CC BY、CC BY-SA），并逐张确认图片真能加载。
--get 下载进项目，同时把来源、作者、许可和一行致谢写进 assets/credits.json，
--credits 打印页脚用的致谢清单。
在真实浏览器里给自己判卷。 体检脚本用系统已装的浏览器，通过 DevTools 协议 在 1440、768、390 三档打开页面，测量后直接判 FAIL：
| 分类 | 判 FAIL 的例子 |
|---|---|
| 装饰 | 标题上方的小标签、01/02/03 装饰序号、发丝线、渐变、静止阴影 |
| 字体配色 | 代码块之外用等宽字；奶油配陶土、紫罗兰这类「助手配色」 |
| 版式 | 任一宽度下标题超过两行、正文小于 13px、文字被遮挡或横向溢出 |
| 首屏 | 没有视觉焦点，或整屏近乎空白 |
规则被强制，而不是被建议。 静态扫描 lint.mjs 在渲染前抓源码里的违规与套话；
动效是硬指标，真正在动的元素少于 8 个判 FAIL、少于 16 个给警告；
真实照片、档案图或影像少于 4 张也判 FAIL，SVG 绘图不计入。
升级注意点。 安装名没有变，原来的默认版保留为 design-taste-frontend-v2-experimental。
凭什么这一版做得到
第一处取舍：把随机交给脚本，而不是交给模型。 让模型「想一个风格」，它给出的是品类默认； 由脚本在符合当前 brief 的范围内抽牌，并记住已经抽出的结果，连续的项目才不会长成一张脸。
第二处取舍：用差距定义规则，而不是用品味。 那套禁则是从 247 个获奖站点的量化差异里挑出来的。 在 247 个站点里，评委打分 7.5 以上的站点用图标特性卡的只有 1%，6.5 以下的是 28%； 渐变是 22% 对 52%，静止阴影是 24% 对 48%，小号加字距的大写标签是 16% 对 57%。 这些设备被禁，不是因为难看，而是因为它们正是「不加思考就会写出来」的默认值。
第三处取舍：规则要被测量，而不是被相信。 体检把检查放进真实浏览器，
靠 DevTools 协议驱动系统里已装好的浏览器，不安装任何东西，截图落到 .taste-skill/inspect/。
通过检查只说明没有测出违规，不代表页面好看；所以最后一步是 agent 用评审标准看自己的截图，
挑出最差的三处去改，最多三轮。
还有一条经验写在主指令里：拿掉装饰只完成一半工作。一个丢掉了标签、细线和卡片、 却没有补上内容的页面，读起来只是变薄了；盲测里评审更愿意要一个内容丰富的页面， 也不要一个干净的空页面。所以 v2 把空出来的地方填成更大的字号、整块的颜色、 真实照片和完整内容，而不是再添一件装饰。
效果的边界也如实写在仓库里：五轮盲测，六个 brief，每轮由独立的模型评审看匿名截图打分。 最终一轮的三个 brief 结果是 v2 得 7.7、不使用 skill 得 7.8、另一个设计 skill 得 7.2， v2 在其中两个 brief 排第一。仓库同时注明每轮只有一位评审，单次分数约有半分噪声。 而一次完整运行要 30 到 45 分钟、几十万 token，这依旧是它最现实的代价。
