3 个月 20.5k Star！让你的 Claude Code 不再生成烂大街风格统一的界面Skill，它开源了！
摘要：Taste Skill 是一套可移植的 Agent Skills，通过 SKILL.md 文件给 Claude Code、Codex、Cursor 等 AI coding agent 注入设计规则，解决 AI 生成界面千篇一律的问题。你把它放进项目仓库，或者在对话时粘贴进去，Claude Code、Codex、Cursor 就会自动读取，然后按照里面的设计规则来生成 UI——不再是那个所有人
你的 AI 写的界面，是不是都长一个样？
摘要：Taste Skill 是一套可移植的 Agent Skills，通过 SKILL.md 文件给 Claude Code、Codex、Cursor 等 AI coding agent 注入设计规则，解决 AI 生成界面千篇一律的问题。支持多种风格变体和三个可调旋钮，一行 npx 命令安装，MIT 开源，已获 2 万+ Star。
你有没有注意到，用 Claude Code 或者 Cursor 生成的前端页面，看着总有点……哪里不对劲？
Hero 区用的是那个经典的居中大标题加副标题加渐变按钮，Card 布局永远是三列等宽，间距统一 24px，字体层级规规矩矩。干净，整洁，对，就是这样——毫无记忆点。
这是 AI vibe coding 的通病。模型没有审美偏见，它只会生成"合格"的界面，而不是"好看"的界面。
直到我发现了这个项目：Taste Skill。
它到底是什么？
简单说：Taste Skill 是一套可以挂在 AI coding agent 上的"设计偏见包"。
技术上，它的载体是一种叫 SKILL.md 的可移植指令文件。你把它放进项目仓库，或者在对话时粘贴进去，Claude Code、Codex、Cursor 就会自动读取，然后按照里面的设计规则来生成 UI——不再是那个所有人都会写的 Tailwind 模板。
项目定语是 The Anti-Slop Frontend Framework for AI Agents，翻译过来就是"让 AI 别再生成烂大街界面的框架"。这个名字挺直接，点出了要解决的问题。
现在 GitHub 上已经有 20472 个 Star，是2026年2月才创建的，三个月多一点就涨到这个量级，说明踩中了痛点。
一行命令装完
安装极简，不需要任何配置文件：
npx skills add https://github.com/Leonxlnx/taste-skill
只想装某一个风格的话，加 --skill 参数指定：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
不用 npx 的话，直接把对应的 SKILL.md 文件复制到你的项目根目录，或者粘贴进 Claude/ChatGPT 的对话框，也一样生效。MIT 协议，随便用。
有哪些 Skill 可选？
目前仓库里有十几个 Skill，覆盖不同风格和工作流。分两类来看：
代码生成类（直接出 UI）
|
Skill |
一句话描述 |
|---|---|
design-taste-frontend
（v2，默认） |
通用核心，支持三个可调旋钮 |
design-taste-frontend-v1 |
v1 原版，兼容旧项目用 |
gpt-taste |
GPT/Codex 专用，规则更严，动画更强 |
high-end-visual-design |
高端奢华感：柔和对比、大量留白、premium 字体 |
minimalist-ui |
极简风，Notion/Linear 那种质感 |
industrial-brutalist-ui |
粗野主义：Swiss 排版、高对比、实验性布局 |
redesign-existing-projects |
专门用来改造已有项目的 UI |
full-output-enforcement |
防止 AI 半成品截断，强制完整输出 |
image-to-code |
图片→分析→代码，一条龙 |
图片生成类（出设计稿，不出代码）
|
Skill |
用途 |
|---|---|
imagegen-frontend-web |
生成网站视觉稿 |
imagegen-frontend-mobile |
生成移动端屏幕流 |
brandkit |
品牌套件：Logo 方向、配色、字体 |
图片生成类配合 ChatGPT Images 或支持图片生成的 agent 用，先出参考图，再把图丢给 Codex 或 Claude Code 实现代码。
核心 Skill 的三个旋钮
默认 Skill（design-taste-frontend v2）有个设计挺聪明的：文件顶部暴露了三个 1-10 的数字旋钮，直接改数字就能调整生成方向：
DESIGN_VARIANCE = 5 # 布局实验性：越低越居中整洁，越高越不对称/现代
MOTION_INTENSITY = 5 # 动画强度：越低只有 hover，越高加入滚动视差/磁吸效果
VISUAL_DENSITY = 5 # 信息密度：越低越宽松，越高越适合数据密集型 Dashboard
举个场景：做一个 SaaS 产品落地页，想要高端但不花哨：
DESIGN_VARIANCE = 7 # 布局稍微出格一点，不要那么中规中矩
MOTION_INTENSITY = 4 # 动画点到为止
VISUAL_DENSITY = 3 # 呼吸感要足
这三个旋钮的抽象层次很合适——不是让你直接写 CSS 参数，而是在"意图"层面控制 AI 的生成倾向。
图片优先工作流
这个是 Taste Skill 里最有意思的部分，但很多人没注意到。
完整流程是这样：
-
挂上
imagegen-frontend-web，让 ChatGPT Images 生成一批参考视觉稿 -
把这些参考图喂给 Claude Code 或 Codex，挂上
image-to-codeSkill -
在 prompt 里声明："follow the skill: generate images, then analyze, then code"
-
agent 会先分析图的设计语言，再按照它实现代码
等于是先有"视觉锚点"再写代码，减少了很多"这个界面感觉差点什么但说不清楚"的来回。
实际体验怎么样？
坦白说，效果因任务不同差异较大。
改善最明显的地方：复杂布局的节奏感、字体层级的处理、留白的分配。原来 AI 给你三列 Card，现在可能给你一个不对称的 Bento Grid。
没有魔法的地方：它本质还是指令文件，模型理解能力上限在那里。具体实现时还是会有 hallucinate 的情况，Skill 给的是方向，不是保证。
最适合的场景：独立开发者做 SaaS 落地页、个人项目、作品集网站——你不想花太多时间对着设计需求跟 AI 反复调，但也不想要一眼就认出来是"AI 生成款"的那种界面。
PS：分享两个看着不错的示例：
案例1
案例2
一点延伸思考
Taste Skill 这个项目做了一件有意思的事：把"审美偏见"打包成可复用的工件。
工程师可以给代码写文档、写规范、写 lint 规则，但"设计感"这件事以前很难标准化——它依赖个人经验，依赖设计师的眼光。SKILL.md 这种形式是一个尝试：把这些隐性知识显式化，变成 AI 可以消费的指令层。
能不能真正解决问题，还要看长期实践。但思路是对的。
如果你最近在用 Claude Code 或 Cursor 做前端，值得花10分钟试试。没效果大不了删掉，一行命令的事。
GitHub：https://github.com/Leonxlnx/taste-skill
官网：https://tasteskill.dev
你用过类似的 agent skill 方案吗？或者你对"AI 审美"这个话题有什么想法，欢迎评论区聊聊。
我是顾北，关注我，获取更多好玩有趣的 AI 工具！
谢谢你阅读我的文章~
我们下期再见！
PS：本文部分内容由AI辅助创作
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
16
0- 0
已为社区贡献9条内容
所有评论(0)