AI 生成的网页总带着一股模板味？Taste-Skill v2 用 5 张处方让前端设计告别“AI 味“

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 slopAI 垃圾不是不能用而是一秒钟就能被认出是 AI 生成的。Taste-Skill v2 的发布本质上就是在回答这个场景里的一个核心问题能不能给 AI 装上一套反 AI 味的免疫系统让它输出的界面看起来像专业设计师的作品而不是模板流水线的产物给AI 味做一次会诊三宗罪从哪来在开处方之前先把病看清楚。AI 生成界面之所以千篇一律可以归结为三个层面的问题不读需求直接套模板。模型拿到 brief 后的第一反应是从训练数据里挑一个看起来高级的默认审美而不是分析页面类型、受众和品牌资产。细节全是统计学签名。破折号、版本号角标、居中 hero、三卡片布局这些是模型试图装得很会设计时的本能反应被生产环境反复验证过。对技术栈的记忆是幻觉式的。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 里挂着BETAV0.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 的变化维度v1 时代v2 时代需求理解靠模型自觉强制先输出一行设计解读否则不进入编码设计系统经常手搓山寨版brief 映射到 Fluent、Material、Primer 等官方包破折号频繁出现全页零容忍硬性禁令布局三张等宽卡片反复出现8 个区块必须用至少 4 种布局家族动效凭记忆调用 API经常崩标准代码骨架 禁用模式清单改版容易被当成新项目重做三模式协议 审计先行暗色模式常常被忽略双模式默认 令牌策略声明交付检查无30 多项预飞行检查逐项打勾走查一个真实案例从模板感到工作室质感纸上谈兵没意思用 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 应当明确说不并指向正确工具而不是硬套营销页规则。三个避坑提示帮你少走弯路别急着删 v1。如果你现有的工作流依赖 v1 的确切行为v2 的安装名是design-taste-frontend而旧版锁定为design-taste-frontend-v1两者并存随时可回退。升级不用改脚本。v2 沿用了 v1 的安装名重跑一遍安装命令就会原地替换现有脚本无需任何改动。动效档位先问自己一个问题。上调 MOTION_INTENSITY 之前先回答这段动画在传达什么答不出就降到 3 分交付干净的静态页远比半成品动效体面。现在就动手五分钟让 AI 换一副审美安装只需一条命令克隆仓库地址https://gitcode.com/GitHub_Trending/ta/taste-skillnpx 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考