AI 写的前端总是同一张脸：10.7 万星的技能包先定美术方向，再用真浏览器挑错

AI 写的前端总是同一张脸：10.7 万星的技能包先定美术方向，再用真浏览器挑错

Leonxlnx/taste-skill 今天单日进账 4,975 星，总数来到 107,085。它的目标读者是所有被 AI 生成页面折磨过的人：那些结构正确、配色安全、但一眼就能看出”是模型拼的”的落地页。

它不接受”生成完就交”

Taste Skill 是一个 Agent Skill，装进编码助手后介入设计流程。README 里给的工作方式不是”一次生成”，而是一轮六步的施工：

1. 读需求简报，先列出只有这个客户才有的东西；
2. 由脚本从 20 个研究过的设计方向里发三张牌，Agent 从中挑一张；
3. 找”那个想法”——一句把客户自己的素材和这个方向绑在一起的话；
4. 用开放图库里的真实照片和影像素材搭建，并标注出处；
5. 在真实浏览器里按三个宽度检查，不合格就直接判失败；
6. 看自己截的图，修掉最严重的前三个问题，最多三轮。

第 5 步和第 6 步是它和大部分”设计提示词”的分水岭：验收不是模型自评，而是把页面真的渲染出来看。README 用的词是”fails it on slop”——不够格的直接打回。

代价也写在明处：一次构建大约 30 到 45 分钟，消耗几十万 token。

这套规则是从哪来的

作者说 v2 建立在对 247 个精选站点的研究之上，研究文档放在仓库的 skills/taste-skill/references/research.md，变更记录在 CHANGELOG。

v2.1 之后补了两块：

• 后台与 App 界面走独立路径。技能会先分辨这是页面还是应用界面，再从真实产品截图提炼的样式里发一张牌，按那套数字搭外壳、数据、图表和表格，并用 App 规则验收——安静的面板、对齐的数字、颜色只花在数据上、手机上导航要能收起来。
• 页面框架检查：首屏要有清晰标题、边距要相等、不能有某一段被挤到一边、不能出现莫名的空白带；动效参考的是最近 100 个 Awwwards Site of the Day 的做法。

图片从哪来，能不能用

这是很多人生成的页面”一眼假”的根源——配图是模型画的。Taste Skill 的做法是去找真照片：来源包括 Wikimedia Commons、Openverse、Met 这类开放馆藏，只提供公有领域、CC0、CC BY、CC BY-SA 的文件，并把署名信息放到页面上。有自己素材的，替换即可。

怎么装，需要什么

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Claude Code 用户走插件市场：

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

Codex 也有对应的 marketplace 命令写在 README 里。运行环境要求 Node 22+，以及本机装了 Chrome、Edge 或 Chromium（因为要真的打开浏览器验收）。它不安装额外依赖、不需要任何 API key，只有找图片时需要联网。

框架无关：React、Vue、Svelte、纯 HTML 都行，规则管的是设计而不是技术栈。

需要留意的是仓库结构变了。现在这个仓库只保留一个技能 design-taste-frontend，此前的 high-end-visual-design、minimalist-ui、industrial-brutalist-ui、imagegen-frontend-web、brandkit 等已迁到 Leonxlnx/taste-skill-classics 和 Leonxlnx/imagegen-skills 两个独立仓库，安装名不变，只是源地址换了；full-output-enforcement 已被移除。照旧命令安装的人如果发现拉不到，大概率是这个原因。

它解决的其实是”品味无法描述”

给 AI 提设计要求，最难的从来不是”做得好看点”，而是把”好看”拆成可检查的条件。这个项目做的事，是把设计流程拆成有输入、有抽样、有验收、有返工轮次的工序，再把这些工序固化成 Agent 能执行的脚本和规则。

它不会让所有人都变成设计师，但至少能让”AI 感”从一个玄学问题，变成几个可以在浏览器里点开看的问题。对独立开发者、接外包的前端、以及要给客户快速出方案的小团队，这是目前比较务实的一条路。

仓库地址：https://github.com/Leonxlnx/taste-skill