企业官网建设流程全解析

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 编程助手提供"设计品味"的开源技能框架，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 UI；Google 风指向 Material 3；GitHub 风的开发工具指向 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