最近整理个人网站，又撞上那个老毛病：功能都齐了，页面却像从同一个模板里倒出来的。紫蓝渐变、居中大标题、往下三栏卡片–单看每一项都挑不出错，凑到一起就是看不出这是谁做的站。
Taste Skill 管的就是这件事。它给 Codex、Claude Code、Cursor 这类编程 Agent 塞一份前端设计约束，把那些默认套路挡在外面，让生成结果多少跟内容对得上。
先看资料：
- GitHub：https://github.com/Leonxlnx/taste-skill
- 默认 Skill：
design-taste-frontend - 当前版本：v2 experimental
- 规则文件：1206 行，85.2 KB
- 最终检查项：62 项
- 开源协议：MIT
- 截至 2026 年 7 月 15 日：63.8k Star、4.5k Fork、244 Watch
一、这是什么？
它不是组件库，也没训练什么模型，整个东西就是一个 SKILL.md 文件。Agent 把它读进上下文之后，会照着里面的规则先理解需求、定设计方向，然后写页面，交付前再自查一遍。
默认版主要用于：
- 产品官网和 Landing Page
- 品牌网站
- 设计师、开发者作品集
- 编辑型页面
- 已有网站的视觉重设计
高密度 Dashboard、数据表格、多步骤表单、代码编辑器、原生移动应用这几类它管不了，作者自己也在文档里划了线–这些得靠专门的产品交互和设计系统来做。
仓库里还有几个细分 Skill：
gpt-tasteskill：面向 GPT、Codex 的强约束版本redesign-skill：专门改造已有网站image-to-code-skill：先生成参考图，再分析并写代码minimalist-skill：极简风格brutalist-skill：粗野主义风格imagegen-frontend-web：只生成网页视觉参考图
第一次用不用挑，装默认的 design-taste-frontend 就行。
二、它有多火？
仓库创建于 2026 年 2 月 19 日，到现在不到五个月，攒了大约 63.8k Star 和 4.5k Fork。
GitHub 页面上还显示：
- 244 人 Watch
- 8 位贡献者
- 134 次提交
- MIT 开源协议
一个几乎全是 Markdown 规则、没有一行运行时代码的项目能涨成这样，挺少见的。
Star 多不代表好用。不过这个数字至少说明被同一件事烦到的人不少：AI 写前端没什么问题，问题是写出来的都长一个样。
三、Skill 里面具体写了什么？
默认版 SKILL.md 一共 1206 行，拆得相当细，不是一句“请设计得更好看”能概括的东西。
我按自己的理解归成七块。
1. 先理解需求
Agent 动手写代码之前，得先把页面类型、目标用户、品牌气质、参考网站、已有素材这几项弄清楚，还要先输出一句 Design Read，把自己对这次任务的理解讲出来。需求含糊的时候，规则要求只挑一个最关键的问题去问，不许一次甩出一长串问卷–这条我觉得挺对，反复追问最容易把人问烦。
2. 三个设计参数
页面风格由三个 1 到 10 的参数控制：
| 参数 | 控制什么 | 默认值 |
|---|---|---|
DESIGN_VARIANCE |
布局从规整到非对称的变化程度 | 8 |
MOTION_INTENSITY |
动画和交互强度 | 6 |
VISUAL_DENSITY |
每屏展示的信息密度 | 4 |
文档给的例子是：公共服务网站压到 3 / 2 / 5，创意机构官网可以拉到 9 / 8 / 3。这三个数字是我觉得最实用的设计，因为它把“高级一点”这种没法执行的形容词变成了可以调的旋钮。
3. 选择合适的设计系统
它会按需求点名具体的设计系统：
- Microsoft 风格：Fluent UI
- Google 风格：Material 3
- IBM 企业产品：Carbon
- Shopify App：Polaris
- Atlassian 产品：Atlaskit
- GitHub 风格：Primer
- 英美公共服务：GOV.UK Frontend 或 USWDS
- 自有现代 SaaS：Radix Themes、shadcn/ui 或 Tailwind
并且要求一个项目只用一套，别把 Material、Carbon 和 shadcn/ui 混着上。
4. 禁止常见的“AI 味”
这部分列的是高频翻车点：
- 不默认使用紫蓝渐变和发光按钮
- 不默认使用居中 Hero
- 不连续复用相同的左右图文结构
- 不用三张等宽卡片介绍所有功能
- 不在每个标题上方都加大写标签
- 不编造假数据和假客户
- 不用
div拼一个假的产品 Dashboard - 不在页面里塞多个跑马灯
- 不用“Scroll to explore”当装饰
- 不允许一个页面中途突然切换明暗主题
5. 图片和动效怎么处理
页面需要产品图时，取材的优先级是：
- 使用图像生成工具生成符合页面比例的素材；
- 使用真实品牌图片或真实产品截图；
- 使用可以实际运行的组件预览；
- 暂时没有图片时，明确写出需要补什么图。
用一堆灰矩形加假数据拼出“看起来像产品”的截图，这条是明令禁止的。
动效那边要求动画得承担点职责–表达层级、讲清流程、给操作反馈或者提示状态变化，纯粹为了炫的不要。强度调高的时候必须支持 prefers-reduced-motion，监听器和动画实例也得清理干净。
6. 改老网站要先审计
改已有网站的时候，Agent 不许上来就重写，得先把品牌色、字体、页面结构、导航、SEO、埋点、已有交互过一遍。路由、导航名称、表单字段、品牌 Logo 和法律文案属于不许悄悄改的部分。
7. 最后跑 62 项检查
文件末尾是一张很长的 Pre-Flight Check，62 项。
检查的东西包括：
- 页面主题、强调色和圆角是否统一
- Hero 是否能在首屏完整显示
- 按钮和表单对比度是否达到 WCAG AA
- 移动端布局是否明确处理
- 动画是否支持减少动态效果
- 图片是否为真实素材
- 是否出现假数据和假产品截图
- 是否重复使用相同区块
- 是否又写出了紫蓝渐变、三栏卡片等默认套路
四、效果如何？
先看仓库自己放的页面示例。
对着示例和规则看，能改善的大概是这几处：
- 布局不再只会居中和三栏卡片。 Skill 会主动使用非对称网格、不同区块节奏和更明显的留白。
- 字体、颜色和圆角更统一。 它要求锁定一套字体、一个强调色和一套圆角规则。
- 图片更像真实项目素材。 它不接受纯文字页面和假 Dashboard 冒充完整设计。
- 交付更完整。 移动端、深色模式、加载状态、错误状态、动效降级和性能都进入检查范围。
但别把它当成“装上就自动变好看”的插件。
仓库里没有同模型、同需求下的严格前后对比，也没有任何量化的成功率。放出来的示例是作者自己挑的，挑出来的当然好看，不代表你每次生成都是这个水平。
实际效果还是要看：
- 使用的模型能力
- 你提供的需求是否具体
- 有没有品牌素材和参考图
- Agent 是否真的完整读取并执行了规则
- 最后有没有在浏览器中检查和修改
我的判断：模板感确实会少很多，但设计师该干的活它干不了，最后还是得自己在浏览器里把页面翻一遍。
五、怎么用？
装完之后，在任务里点名 design-taste-frontend，然后把页面信息交代清楚。
下面这个模板可以直接抄：
使用 design-taste-frontend 设计并实现产品官网首页。
页面类型：B2B SaaS Landing Page目标用户：工程负责人和技术采购人员品牌气质：克制、可信、技术化参考网站：Linear、Vercel，但不要照搬配色技术栈：Next.js + Tailwind v4已有素材：Logo、品牌绿色、产品截图必须保留：现有路由、导航名称和埋点参数建议：DESIGN_VARIANCE 7，MOTION_INTENSITY 4，VISUAL_DENSITY 4交付要求：桌面端、移动端、真实浏览器截图、最终检查结果真正决定结果的是这六项信息给没给全：
- 页面类型
- 目标用户
- 品牌气质
- 参考网站或截图
- 技术栈和已有素材
- 不能修改的内容
只丢一句“做得高级一点”，出来的东西基本还是碰运气。
六、怎么给 Agent 安装？
仓库推荐用 Vercel 的 Agent Skills CLI。
先看看这个仓库里有哪些 Skill：
npx skills add https://github.com/Leonxlnx/taste-skill --list给当前项目中的 Agent 安装
在项目目录执行：
npx skills add https://github.com/Leonxlnx/taste-skill \ --skill design-taste-frontend \ --agent '*' \ --yesCLI 会把默认 Skill 装给它在当前环境里检测到的 Agent。
全局安装给本机 Agent
想在所有项目里都用上，加 --global：
npx skills add https://github.com/Leonxlnx/taste-skill \ --skill design-taste-frontend \ --agent '*' \ --global \ --yes
检查是否安装成功
查看全局 Skill：
npx skills list --global装在当前项目里的话，去掉参数就行：
npx skills list我给 Codex 装完之后翻了一下，文件落在这里：
~/.codex/skills/taste-skill/SKILL.md安装目录里只有 SKILL.md 这一个文件，仓库根目录那些图片处理脚本既没被复制过来，也没有执行–想用得自己从仓库拉。
更新 Skill
后面要更新就跑：
npx skills update design-taste-frontend --global默认版现在还挂着 v2 experimental 的标签。要上正式项目，最好把版本固定住，或者每次更新完重新翻一遍规则，别让它悄悄改了你依赖的某条约束。
最后总结
Taste Skill 干的事说白了就一件：把“别写得像 AI 模板”这句谁都会说的话，翻译成 1206 行 Agent 真能照着执行的规则。
好用的地方是规则够具体、覆盖面广、装起来一条命令的事。要认的短板也清楚–这套规则带着作者本人的审美偏好，官方没做过任何量化评测，最后页面成什么样，还是取决于模型、你给的需求，以及你自己愿不愿意在浏览器里逐屏看一遍。
经常拿 Codex、Claude Code、Cursor 生成官网、作品集、营销页的，这个装上试试没什么成本。
参考链接
- GitHub 仓库：https://github.com/Leonxlnx/taste-skill
- 默认 Skill：https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md
- 更新记录：https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md
- Agent Skills CLI：https://github.com/vercel-labs/agent-skills
数据和截图采集于 2026 年 7 月 15 日，Star、Fork 等数据会继续变化。