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-skillTaste-Skill 是一个给 AI 编程助手提供设计品味的开源技能框架v2 版本已升级为默认安装专治 AI 生成页面时的千篇一律。本文适合用 Cursor、Claude Code、Codex 做前端的新手五分钟就能跑通。那天晚上朋友把 Claude 生成的落地页链接甩给我。深紫渐变背景、居中大标题、底下整整齐齐排着三张等宽卡片卡片里各放一个小图标。我说这是 AI 写的吧他默认了。这种画面在今天几乎不需要鉴定就像你一眼能认出连锁店的预制菜。问题不在模型笨而在它们共享同一套安全默认值。Taste-Skill 这个开源项目要做的就是给 AI 补一堂审美课让它们产出的页面不再千篇一律。这项目到底在做什么Taste-Skill 的完整定位是The Anti-Slop Frontend Framework for AI Agents即给 AI 智能体用的反套路前端框架。它不是一个组件库也不是一套现成模板而是一份份可以直接喂给 AI 的技能说明书Agent Skills。每个技能都是一个 SKILL.md 文件AI 读完之后会在写代码前先想清楚这个页面给谁看、走什么风格、用什么布局。适用人群很明确用 AI 生成落地页、作品集或者想把现有网站翻新一遍的人。v1 已经能用了而这次的 v2 是一次大改版把原来偏建议的规则改成了必须执行的硬规则。第一次接触五分钟跑通安装比想象中简单。在终端敲这一条命令全部技能一次装齐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连命令都懒得敲也没关系。把skills/taste-skill/SKILL.md复制进项目目录或者直接粘贴进 ChatGPT、Claude Code 的对话框效果一样。之后正常描述需求让 AI 写一个落地页就行。第一次看到输出时最直观的感受是它不会一上来就写代码。AI 会先输出一行设计解读类似我把这个页面理解为面向 B 端技术采购者的 SaaS 落地页走 Linear 式极简风倾向 Tailwind 加克制的动效。这行字不起眼却是整个改版的基石。从拿到手到交付跟着这套流程走完一程用了几轮会发现v2 的改进其实都藏在一个完整的工作流里按顺序走很难走歪。动手之前先读懂房间。v2 新增了需求推理环节页面类型、用户用的语气词极简Awwwards 风稳重些、贴的参考链接、目标受众、已有品牌资产AI 会先扫一遍这些信号再输出那句设计解读。规则里写得很清楚信息不够时只允许问一个问题不许连珠炮追问。这一步治的是老毛病AI 不管需求是什么先套自己最熟的模板。选定地基别再造轮子。如果需求读出来是微软风的企业应用技能会直接指向 Fluent UIGoogle 风指向 Material 3GitHub 风的开发工具指向 Primer。每个映射都配了官方包的安装命令规则强调一个项目只能用一个设计系统。以前 AI 会拿手写 CSS 硬仿一个四不像的 Material现在这条路被堵死了。三个数字决定整页气质。SKILL.md 文件开头躺着三个 1 到 10 的数字DESIGN_VARIANCE 管布局的实验性MOTION_INTENSITY 管动效强度VISUAL_DENSITY 管一屏里塞多少信息。想让页面干净对称就把第一个数字调低想做得大胆不对称就调高。这比在提示词里反复说要高级一点管用因为它给 AI 的是可执行的刻度不是形容词。交付之前过一遍预飞行检查。v2 附了一份几十项的检查清单从整个页面只能有一个强调色到每个按钮的对比度必须达到 WCAG AA 标准从英雄区标题不能超过两行到移动端必须有明确的单列降级方案。AI 交稿前必须逐项自检任何一项不过页面就不算完成。这份较真让输出从能看变成能直接上线。打磨阶段动效有纪律。动画库统一用 Motion原 Framer Motion 的新名字需要滚动钉住的复杂效果则用现成的 GSAP 代码骨架。规则直接点名禁止window.addEventListener(scroll)这类高开销写法同时强制为高强度动画提供减少动效支持。动画必须讲得出动机为炫技而炫技会被打回。升级前后同一道题两种答案v2 之前的生产测试暴露了一堆 AI 标志性动作满屏破折号、每个小节头上挂01 / INDEX之类的编号眉标、评论头像全是卡通蛋、用 div 拼假的软件截图。v2 把这些逐条列成了硬禁令最狠的一条是页面任何地方出现一个破折号—预飞行检查就不通过。这不再是建议是硬性要求。差距有多大看仓库里的 Floria 示例最直观。这是一个花艺工作室网站深色底配高饱和花卉摄影顶部是品牌与主视觉中部是三张构图不同的产品卡往下是服务清单和作品档案底部是评价区和行动召唤区。一个页面用到多种布局家族找不到一处三张等宽卡片的复制粘贴感。✨另一个硬规则是布局多样化页面有 8 个区块就必须用至少 4 种不同的布局家族。这直接废掉了 AI 最爱的同一套卡片排版重复八次。配合整页只允许一个强调色圆角系统全局统一成品会呈现出一种训练有素的克制感这正是AI 味和设计感的分界线。新手最容易纠结的几个问题装好后怎么用正常写提示词就行技能会自动生效。如果用 ChatGPT 或 Codex把 SKILL.md 内容贴进对话即可不需要特殊配置。❓只支持 React 吗不是。规则约束的是设计意图对比度、布局、字体不绑定框架Vue、Svelte 都能用。默认技术栈是 React 加 Tailwind v4跟着默认走最省心。我在用 v1要不要升级安装名没变重新跑一次安装命令就覆盖成 v2。如果你依赖 v1 的确切行为仓库里保留了design-taste-frontend-v1可以固定安装旧版。需要花钱吗不用MIT 协议开源个人和商用都免费。那些图像生成技能是干什么的仓库里除了写代码的技能还有 imagegen-frontend-web、imagegen-frontend-mobile、brandkit 这类只出图的技能可以让 ChatGPT Images 先生成设计参考图再交给编码 AI 落地适合先看效果再写码的工作流。下一步回到开头那位朋友。如果他下次再让 AI 写页面我会让他先把这条命令敲了npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend从装好到看见第一版输出大约只要五分钟。你未必立刻喜欢它的每一个设计决定但至少当它再次交上来一个深紫渐变加三张等宽卡片的页面时你可以理直气壮地说一句这不像 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考