让 Claude Code 或 Codex 生成一个网页，十次里有好几次是这个样子：蓝色渐变按钮，居中的白卡片，灰色背景，Hero 区一个超大标题，下面三列特性介绍，底部一个 Get Started。
换个产品名、换个配色，出来的还是这一套。模型写 CSS 没有问题，问题在审美：训练数据里这种千篇一律的 landing page 太多，模型就一直照着复刻。
taste-skill 想解决的就是这件事。它是一个开源的 Agent Skill，在 GitHub 上已经超过 11 万 Star，目标是让 AI 写前端之前先想清楚设计方向，而不是直接往“居中三列”上靠。
需要注意的是，这个项目在 2026 年 10 月做了一次大调整：主仓库现在只保留一个 skill，叫 design-taste-frontend（v2），以前那十几个风格 skill 搬到了别的仓库。下面按现在的版本来讲，老版本的用法放在后面。
现在的 taste-skill 怎么工作
v2 的思路是先定方向、再写代码、最后自己验收。作者研究了 247 个网站，把流程整理成固定的几步：
- 读需求：先弄清楚这个页面是给谁看的、要传达什么。
- 发三个方向：脚本从 20 种设计方向里随机抽 3 个给 AI，避免每次都选最安全的那一个。
- 一句话定调：选定方向后，先用一句话说清楚这个页面的设计想法。
- 用真实图片：配图从开放图库里找真实照片，并标注出处，而不是放灰色占位块。
- 浏览器检查：在 3 种宽度下打开页面检查排版。
- 截图自审：AI 看截图，挑出最严重的 3 个问题修掉，最多来回 3 轮。
这套流程比直接生成慢得多。按官方说法，做一个页面大约要 30 到 45 分钟，消耗几十万 token。换来的是页面不再一眼就能认出是 AI 模板。
v2.1 又加了对仪表盘和应用界面的支持，不只是营销页。另外，原来专门给老项目改版的 redesign-existing-projects 已经并进了 design-taste-frontend，现在用同一个 skill 就能审计和改版已有页面。
安装：Claude Code 和 Codex 都能用
最通用的装法是 skills 命令：
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 的插件装法：
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill
装完新开一个 Codex 会话，skill 才会加载。
把仓库克隆到本地的话，也可以运行仓库里的 ./install.sh，它用软链接的方式装进去，加 --codex 装给 Codex，加 --all-agents 装给所有支持的 agent。
运行环境方面，需要 Node 22 以上，以及 Chrome、Edge 或 Chromium 之一（浏览器检查那一步要用）。它不需要任何 API key，只有找配图时需要联网。
想对比其他前端设计 skill 的，可以看这篇 Claude Code 的 frontend-design skill 用法；偏组件和配色规范的，可以对照 UI UX Pro Max。
怎么用才划算
既然一个页面要跑半小时以上，就不适合拿它改一个按钮颜色。比较合适的场景是：
- 新做一个产品官网、活动页，希望第一版就有辨识度；
- 已有页面看起来很“AI”，想整体审一遍再改；
- 需要做一个仪表盘或应用界面，但不想要千篇一律的后台模板。
用的时候，需求写得越具体越好：产品是什么、给谁用、希望给人什么感觉。方向是从你的需求里推出来的，需求只写“做个好看的首页”，结果大概率还是平均水平。
以前的三个旋钮还在吗
很多人第一次听说 taste-skill，是因为它的三个旋钮：
- DESIGN_VARIANCE：布局的实验程度，从居中规整到不对称；
- MOTION_INTENSITY：动效强度，从只有 hover 到滚动驱动的动画；
- VISUAL_DENSITY：信息密度，从大量留白到仪表盘式的紧凑布局。
每个旋钮 1 到 10 分，写在 skill 文件开头，AI 按分值选设计方案。这是 v2 之前的版本，现在的 design-taste-frontend 已经不用这套参数了。
老版本和那些风格 skill 都搬进了 Leonxlnx/taste-skill-classics，安装名没变，包括：
high-end-visual-design：柔和对比、大量留白、弹性动效的高端风格；minimalist-ui：克制配色、结构清晰的极简产品界面；industrial-brutalist-ui：瑞士字体、强对比、实验性布局的机械风；gpt-taste：给 GPT 和 Codex 用的更严格版本，布局变化和动效方向更强；stitch-design-taste：配合 Google Stitch 用，可导出 DESIGN.md；design-taste-frontend-v2-experimental和design-taste-frontend-v1：带三个旋钮的两个旧版。
这些 skill 都要手动点名才会运行，比如在 Claude Code 里输入 /minimalist-ui，在 Codex 里输入 $minimalist-ui。安装命令把仓库换成 classics 即可：
npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "minimalist-ui"
不带 --skill 参数会把七个一起装上。
至于先生成设计图、再照图写代码的那几个 skill（imagegen-frontend-web、imagegen-frontend-mobile、brandkit、image-to-code），现在在 Leonxlnx/imagegen-skills 仓库里。
写在最后
AI 的审美是训练数据的平均值，平均值不丑，但也记不住。taste-skill 早期用三个旋钮把审美拆成参数，现在的 v2 换成了“抽方向、定调、真图、浏览器自检”的完整流程，慢一些，但更接近设计师的做法。
日常让 Claude Code 或 Codex 写前端的，可以先装 design-taste-frontend 跑一个新页面看看效果；已经习惯旧版旋钮的，去 classics 仓库装回来就行。
这类长流程很吃 token，想稳定使用 Claude Code 和 Codex，可以到 AIGoCode 看看支持的模型和接入文档。