今天推荐一个专门管 AI 前端审美的开源 Skill：Taste Skill。
一句话解释：它是一份给 Codex、Claude Code、Cursor 等编程 Agent 使用的前端设计规则，让 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
一、这是什么？
Taste Skill 不是组件库，也不是新的 AI 模型。
它的核心就是一个 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 规则组成的项目，这个增长速度很夸张。
热度高不等于效果一定好，但至少说明它击中了一个普遍问题：AI 会写前端，却非常容易写出相同的视觉套路。
三、Skill 里面具体写了什么？
默认版 SKILL.md 一共有 1206 行。内容不是简单的“请设计得更好看”，而是一套比较完整的前端生成规则。
主要内容可以归成七类。
1. 先理解需求
Agent 写代码前，必须先判断页面类型、目标用户、品牌气质、参考网站和已有素材。
它还要求 Agent 先输出一句 Design Read，说明自己如何理解这次设计任务。需求有歧义时，只问一个最关键的问题，不要一次扔出一长串问题。
2. 三个设计参数
Taste Skill 用三个 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 味”
Skill 列出了大量高频问题：
- 不默认使用紫蓝渐变和发光按钮
- 不默认使用居中 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 模板”变成一份 Agent 能执行的前端规则。
它的优势是内容具体、覆盖全面、安装简单，而且已经获得 6.3 万以上 Star。它的不足也很明确：规则带有作者个人偏好，官方没有提供严格的量化评测，最终效果仍然依赖模型、需求和人工验收。
如果你经常让 Codex、Claude Code 或 Cursor 生成官网、作品集和营销页面，这个 Skill 值得装上试试。
参考链接
- 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 等数据会继续变化。