Taste-Skill v2 新版本发布:一篇看懂 AI 界面告别“AI 味“的终极方案
Taste-Skill v2 新版本发布:一篇看懂 AI 界面告别"AI 味"的终极方案
【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill
Taste-Skill 是给 AI 智能体装上"设计品味"的开源技能框架,专门治 AI 生成前端界面千篇一律的老毛病。全新发布的 v2 版本(实验版)把整套规则彻底重写,并成为默认安装项,这也是它面世以来最大的一次升级。
AI 生成的界面,为什么总是一个模子刻出来的
用 ChatGPT、Cursor、Claude Code 写过页面的人,多半见过这套"标配脸":紫到发亮的渐变、居中大标题、三张一模一样的卡片、到处贴玻璃拟态、字体永远 Inter。英文圈管这叫AI slop,大白话就是"AI 垃圾"——不是不能用,是看着就出戏。
Taste-Skill 就是来治这个病的。它的载体是SKILL.md,一份可移植的指令文件,AI 加载之后等于背后多了一位"设计总监"把关。而新发布的 v2 版本,把这位设计总监从"建议你"升级成了"必须做到"。
这张横幅来自项目主页,一句话点明定位:The Anti-Slop Frontend Framework for AI Agents。下面我们看看,v2 是靠什么把这句话落地的。
三件同类工具做不好的事,v2 逐个破解
第一件:不读题就交卷,v2 逼 AI 先"读懂房间"
大多数工具的问题在于:AI 拿到需求不分析,直接套默认审美。你说"要一个高端花艺品牌官网",它十有八九交给你奶油底、衬线体、烫金按钮的模板。
v2 的解法是加了一个强制环节——需求推理(Brief Inference)。动手写代码前,AI 必须先读六个信号:页面类型、用户提到的风格词、参考链接、目标受众、已有品牌资产、隐性约束(比如无障碍优先)。读完还得输出一句"设计解读",例如"把这里理解为:面向技术买家的 B2B 落地页,走 Linear 式极简风"。设计决策从哪来,一清二楚。
在此基础上,v2 内置了设计系统映射:需求读起来像微软企业应用,就推荐官方 Fluent UI;像 Google 风格就上 Material 3;像 GitHub 开发者工具就用 Primer。AI 不再"手搓"山寨设计系统,省心也省事。
第二件:规则靠自觉必失效,v2 把禁令写进硬清单
"要有品味"这种话说一百遍,AI 照样犯同样的错:满页破折号、Hero 区挂"V0.6 BETA"角标、用 div 拼假截图、每张图下加一句故作深沉的说明文字。
v2 的做法很直接:把这些"AI 标志"全部拉进禁令清单。破折号整个页面一个都不许出现,想用就改成连字符或改写句子;版本角标、滚动提示、装饰性图片说明全部禁止。最后还有一份 30 多项的预飞检查清单,交付前逐项打勾,有一项不过就不算完成。规则从"建议遵守"变成了"机器可检查的硬约束"。
第三件:动效好看与流畅不能二选一,v2 给了标准答案
AI 写动效常有两个毛病:要么用window.addEventListener('scroll')这种逐帧卡顿的老写法,要么号称有滚动动画,结果根本不触发。
v2 直接给标准答案:动效库统一用Motion(原 Framer Motion 的新名字),GSAP 的粘性堆叠、水平平移都提供了现成代码骨架,照着填就能用;高强度动画必须支持"减少动效"偏好。性能也有硬指标——LCP 小于 2.5 秒、INP 小于 200 毫秒、CLS 小于 0.1,还要求"宣称有动效就必须真的能动"。
上手:两条命令,把"品味"装进 AI
安装很简单,一条命令装全部技能:
npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只想要核心设计品味技能,加个参数即可:
npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill "design-taste-frontend"想锁定旧版 v1 的行为,把技能名换成design-taste-frontend-v1。装过 v1 的老用户也不用担心,安装名没变,重新跑一次命令就自动升级成 v2。懒得敲命令也行,直接把项目里skills/目录下的 SKILL.md 复制进项目,或粘贴给 ChatGPT 对话。
三个旋钮,一句话告诉 AI 你想要多大胆
v2 保留了上一代最受欢迎的"三个旋钮"设定,每个取值 1 到 10:
| 旋钮 | 作用 | 1 分表现 | 10 分表现 |
|---|---|---|---|
| DESIGN_VARIANCE 设计变异度 | 布局实验性 | 完美对称 | 艺术性混乱 |
| MOTION_INTENSITY 动效强度 | 动画深度 | 纯静态 | 电影级物理效果 |
| VISUAL_DENSITY 视觉密度 | 每屏信息量 | 画廊般空旷 | 驾驶舱般密集 |
官方预设也帮你排好了:SaaS 着陆页用 7 / 6 / 4,创意机构作品集用 9 / 8 / 3,公共部门网站用 3 / 2 / 5——可信度优先,越稳越好。
效果说话:v2 出来的页面长这样
项目仓库里附带了真实示例,是一个叫 Floria 的高端花艺品牌网站,深色基调、大标题、图片密集但层次分明:
注意几个细节:全站只有一个强调方向,颜色不乱跳;几个区块用了不同的布局方式,没有复制粘贴的卡片墙;Hero 区标题克制、按钮一眼可见。这正是 v2 的核心目标——像专业设计师出手,而不是像 AI 套模板。
别一次装一堆,按需组合更高效
技能不是装得越多越好,按场景选:
- 默认首选
taste-skill,最通用最稳妥; - GPT/Codex 想要更严格约束,用gpt-taste;
- 改版老项目,用redesign-skill,先审计再动手;
- 想先出参考图再写代码,用image-to-code-skill,配合imagegen-frontend-web等出图技能;
- 风格已定,再叠加minimalist-skill、brutalist-skill或soft-skill。
常见疑问速答
它支持 React、Vue、Svelte 吗?都支持。规则管的是设计意图,不绑定任何框架 API。
SKILL.md 到底是什么?一份 AI 能自动加载的指令文件,相当于给 AI 的一本工作手册,跟代码库无关,可以随身携带。
v2 还在迭代,会不会不稳定?它是实验版但已是默认安装,团队正朝 2.0.0 稳定版收敛。完整的 v1 到 v2 差异可以翻项目里的 CHANGELOG.md。
写在最后
下一次你让 AI 做页面时,不妨先花一分钟装上它,再对比一下输出。你会发现"设计品味"这东西,原来真的可以被写进规则里。好的界面不该长得像 AI 生成的,而该像专业设计师的作品——Taste-Skill v2 就是奔着这个目标去的,现在去安装,马上就能验证。
【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
