AI 生成的网页总带着一股模板味？Taste-Skill v2 用 5 张处方让前端设计告别"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 编程工具（Cursor、Claude Code、Codex 里的任何一款）每次生成的着陆页都长一个样，紫色渐变、居中大标题、三张等宽卡片，那不是你的提示词写得不够好，而是缺了一样东西：设计品味。Taste-Skill 正是为 AI 智能体补上"品味"的开源技能框架，而它刚刚完成了从 v1 到 v2 的跨代重写，把"建议"变成了"硬规则"。

先还原一个现场：新版发布那天，群里炸了

上周，一位做独立开发的朋友把 AI 生成的页面截图丢进群里，配文是："我改了七次提示词，它还是给我紫色渐变加三张卡片。"

群里瞬间热闹起来。有人说这是模型问题，有人劝他换工具，还有人把自家 AI 做的作品集翻出来对比，发现连错都错得一模一样：标题下方挂着"V0.6"的版本角标，段落里塞满破折号，页面底部躺着一行"Scroll ↓"的滚动提示，头像清一色是灰底圆形剪影。

这就是社区里常说的"AI slop"（AI 垃圾）：不是不能用，而是一秒钟就能被认出是 AI 生成的。

Taste-Skill v2 的发布，本质上就是在回答这个场景里的一个核心问题：能不能给 AI 装上一套"反 AI 味"的免疫系统，让它输出的界面看起来像专业设计师的作品，而不是模板流水线的产物？

给"AI 味"做一次会诊：三宗罪从哪来

在开处方之前，先把病看清楚。AI 生成界面之所以千篇一律，可以归结为三个层面的问题：

1. 不读需求，直接套模板。模型拿到 brief 后的第一反应是从训练数据里挑一个"看起来高级"的默认审美，而不是分析页面类型、受众和品牌资产。
2. 细节全是统计学签名。破折号、版本号角标、居中 hero、三卡片布局，这些是模型"试图装得很会设计"时的本能反应，被生产环境反复验证过。
3. 对技术栈的记忆是幻觉式的。AI 对 GSAP、动画库 API 的调用经常凭想象，滚动触发点算错、动画库没装就 import，交付时一堆半成品动效。

v2 的思路很直接：把这三宗罪逐条变成可执行的硬规则，而不是停留在"请注意不要这样做"的软建议。

诊所开张：五个症状，五张处方

症状一：AI 不看需求就动手

诊断：你给了它一个"公共部门服务网站"的需求，它交出来一个霓虹渐变黑科技风首页。问题不在审美，在于它跳过了"理解需求"这一步，直接进入了默认输出。

处方：v2 把"读懂房间"变成了强制前置步骤（SKILL 文档的 §0）。AI 在写第一行代码之前，必须先读取六类信号：页面类型、用户语气词、参考链接、目标受众、已有品牌资产、隐性约束（无障碍优先、受监管行业等），然后输出一句一行式的"设计解读"声明，例如"我将此理解为：面向技术买家的 B2B SaaS 着陆页，采用 Linear 式极简语言，偏向 Tailwind 工具类 + 克制动效"。声明不通过，不许动手。

更进一步，v2 内置了一张brief 到设计系统的映射表：需求读起来像微软企业应用，就去用官方 Fluent UI；像 Google 风格，就上 Material 3；像 GitHub 式开发者工具，就选 Primer。这解决了以前"AI 手搓一套山寨设计系统"的顽疾，也堵住了"把苹果 Liquid Glass 当成官方 CSS 包"这类幻觉。

症状二：满屏都是"AI 标志"

诊断：破折号（—）几乎出现在每一个 AI 生成的标题、引言和按钮文案里；hero 里挂着"BETA""V0.6"的版本角标；图片上叠着"Field study no. 12"式的伪摄影图注。这些都是模型最容易露馅的统计学签名。

处方：v2 推出了一份"AI 标志禁用清单"，其中最狠的一条是破折号零容忍：整页任何可见位置（标题、正文、按钮、alt 文本、图片说明）都不允许出现破折号字符，想分隔就用连字符或改写句式。原因很简单，这是生产测试中被违反次数最多的单一风格标志，软性的"请少用"不管用，必须写成二元的"零个"。

同时上线的还有一组"一致性锁定"规则：整个页面只允许一个强调色，不允许第七个区块突然冒出一个蓝色按钮；每页只能有一套圆角体系，不允许方卡片配胶囊按钮；每个 CTA 按钮都必须通过 WCAG AA 对比度检查，白底白字这类低级错误直接判不合格。

症状三：动效全靠现场编

诊断：AI 想做个"卡片堆叠"的滚动效果，结果触发点算错，页面滚到一半卡片才开始缩放；或者用window.addEventListener('scroll')这种每帧都触发、在手机上直接卡爆的写法。

处方：v2 把动画纪律做成了"标准骨架 + 禁用清单"的双保险。动画库统一收敛到Motion（原 Framer Motion 的重新品牌），所有简单滚动显现走whileInView的轻量方案；真正的滚动钉住效果则给出可直接复制的 GSAP 标准代码骨架，包括粘性堆叠和水平平移两个模板，关键参数（start: "top top"、pin: true、scrub）都标好了注释。禁用清单同样不客气：window.addEventListener('scroll')、用 React state 跟踪滚动进度、requestAnimationFrame循环触碰 state，全部禁止。

最值得玩味的一条规则叫"声明的动效必须真的出现"：如果页面声称自己动效强度 7 分，那它就必须真的有动画；做不到就老实把档位降到 3，交付一个干净的静态页，而不是半截子动效。而任何动效强度超过 3 的页面，都必须提供减少动效（reduced motion）支持。

症状四：改版需求被当成新项目重做

诊断：你想让 AI 改版现有官网，它把 URL 结构、导航标签、表单字段名全改了，SEO 直接崩盘。问题在于模型分不清"从零新建"和"在旧地基上翻新"。

处方：v2 定义了三阶段改版协议：绿场（全新项目）、保留（在不动品牌资产的前提下现代化）、彻底改造（视觉语言推倒重来，但内容与信息架构保留）。AI 动手前必须先做 UI 审计，提取品牌令牌、梳理信息架构，然后按优先级顺序施加"现代化杠杆"：先换字体排版（性价比最高），再调间距节奏、校准颜色，最后才轮到动效和区块重构。协议里还列了一份"绝不静默修改"的黑名单：URL 结构、主导航标签、表单字段名、品牌 Logo、法律文案，未经明确许可一律不许碰。

症状五：暗色模式被选择性遗忘，交付前没有检查

诊断：AI 只在亮色模式下调试页面，交付后用户切到暗色模式，按钮和背景糊成一片，对比度全线崩坏。

处方：v2 强制双模式默认。每个项目必须在一开始就声明令牌策略（Tailwinddark:变体或 CSS 变量二选一），并保证两种模式下的对比度（WCAG AA 起步）和视觉层级一致。更关键的是，v2 在交付前加了一道30 多项的预飞行检查清单：从颜色一致性、按钮对比度、眼球标签（eyebrow）数量上限，到布局家族是否重复、移动端是否显式折叠、核心网页指标是否达标，每一格都必须诚实打勾，任何一项不通过，输出都不算完成。

一张表看懂 v1 到 v2 的变化

走查一个真实案例：从"模板感"到"工作室质感"

纸上谈兵没意思，用 v2 官方示例 Floria（一个花卉工作室网站）走一遍流程，你就能直观感受到差异。

第一步，AI 读取 brief，声明设计解读："这是面向高端消费者的花艺工作室着陆页，采用深色电影感语言，强调图片的叙事性。"随即设定三个旋钮：设计变异度 7、动效强度 6、视觉密度 3。

第二步，布局纪律开始起作用。页面上下半部分虽然都展示花卉作品，但上半部分用非对称分割 hero 加精选组合卡片，下半部分用评价卡片、订阅表单和品牌信息，没有两个区块使用同一套布局家族，避免了"三个等宽卡片"的惯性。

第三步，颜色与暗色模式协议。整页锁定深色主题，强调色全程一致，白色文字在近黑背景上对比度达标，图片的明暗过渡与背景色无缝衔接。

第四步，预飞行检查。导航单行、高度未超标，hero 标题两行以内，CTA 不换行，评价区无破折号，滚动动效有减少动效兜底。全部通过，交付。

三个旋钮：让 AI 的"品味"可调节

Taste-Skill 的核心从 v1 延续到 v2，是一套 1 到 10 的三旋钮调节体系，v2 为它们补上了从设计解读到旋钮取值的推断矩阵和常用场景预设：

• DESIGN_VARIANCE（设计变异度）：1 是完美对称，10 是艺术性混乱。政务网站取 3，创意工作室作品集取 9。
• MOTION_INTENSITY（动效强度）：1 是纯静态，10 是电影级物理效果。SaaS 着陆页通常取 6 左右。
• VISUAL_DENSITY（视觉密度）：1 是画廊式空旷，10 是驾驶舱式密集。数据仪表盘可以拉到 8 以上，但那样的页面本就不该用这个技能来做。

值得一提的是，v2 还明确划定了技能边界：仪表盘、数据表格、多步骤表单、代码编辑器、原生移动端、实时协作界面都不在本技能的服务范围内，遇到这类需求 AI 应当明确说"不"并指向正确工具，而不是硬套营销页规则。

三个避坑提示，帮你少走弯路

1. 别急着删 v1。如果你现有的工作流依赖 v1 的确切行为，v2 的安装名是design-taste-frontend，而旧版锁定为design-taste-frontend-v1，两者并存，随时可回退。
2. 升级不用改脚本。v2 沿用了 v1 的安装名，重跑一遍安装命令就会原地替换，现有脚本无需任何改动。
3. 动效档位先问自己一个问题。上调 MOTION_INTENSITY 之前，先回答"这段动画在传达什么"，答不出就降到 3 分，交付干净的静态页远比半成品动效体面。

现在就动手：五分钟让 AI 换一副审美

安装只需一条命令（克隆仓库地址：https://gitcode.com/GitHub_Trending/ta/taste-skill）：

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"

这套框架还附带了一组配套技能：专门做现有项目改版的redesign-existing-projects、强调高端视觉的high-end-visual-design、极简主义与粗野主义风格变体，以及三个图像生成技能（网页、移动端、品牌工具包），配合 ChatGPT 图像生成器先出参考图，再交给编码智能体实现。

最后提醒一句：v2 目前是实验版，仍在活跃迭代，API（安装名、旋钮名、章节结构）会在 2.0 稳定版发布时冻结。所以现在入场是最佳时机：一方面能第一时间用上更严格的反 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