企业官网建设流程全解析

给AI装上"审美旋钮"：Taste-Skill v2 如何根治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

你一定有过这种感觉：打开一个用 Cursor 或 Claude 生成的网页，第一眼就知道它是"AI做的"。紫色渐变、居中的大标题、三张一模一样的等宽卡片、满屏的毛玻璃、正文里到处飞的破折号……这种一眼假的"AI指纹"几乎成了所有大模型前端输出的通病。Taste-Skill 就是冲着这个问题来的：它是一套可移植的 Agent Skills 前端设计框架，专门训练 AI 智能体生成有专业品味的界面，而不是复制粘贴式的样板货。最近它升级到了 v2（实验版），把"防 AI 味"这件事从口号变成了硬性规则。

先认清敌人：AI 网页为什么总是长得一样？

把责任全推给模型不太公平，真正的病灶藏在训练数据和生成机制里。大模型最擅长的是"概率最高的下一个词"，而概率最高的设计方案，恰恰就是它见过的那些：紫色光晕、黑色星空背景、三等分卡片、Inter 字体配 slate-900……这套组合拳打出来，十个网页有八个是双胞胎。

Taste-Skill 把这类特征称作AI Tells（AI 暴露信号），并在 v2 里给它们上了"硬禁令"。什么叫硬禁令？就是你没法跟它讨价还价。举几个最狠的：

• 破折号（—）全面封杀：正文、标题、按钮、图片 alt，一个都不许出现。想表达停顿？用句号、逗号或括号重写句子。
• 滚动提示禁用：什么"Scroll""↓ scroll"统统删掉。用户知道自己可以滚动，不需要页面教他。
• 版本标签禁用：Hero 区不许出现"V0.6""BETA"这种装饰，除非需求本身就是一个发布公告。
• 编号小眉题禁用：那种"00 / INDEX""001 · Capabilities"式的区块编号，一律换成大白话标题。
• 紫色渐变默认禁用：除非品牌方点名要紫色，否则默认配色走中性底 + 单个高饱和强调色。

这一刀下去，效果立竿见影。v2 测试里最常见的几个翻车模式，全在检查清单上被拦下来了。

三步装好，让AI立刻"换口味"

Taste-Skill 的安装逻辑很直接：它就是一份份可移植的 SKILL.md 指令文件，装进 Agent 就能生效。核心技能一条命令搞定：

npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill

只想装最核心的"设计品味"技能？指定 install name 即可：

npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill "design-taste-frontend"

这套 CLI 会自动扫描仓库里的skills/目录，所以后面的所有技能（代码类和图像生成类）都是同一种安装方式。老用户升级也不用改脚本：v2 沿用了design-taste-frontend这个安装名，重新跑一遍安装命令，新版 SKILL.md 会原地替换旧版。如果你依赖 v1 的确切行为，也可以显式锁定旧版design-taste-frontend-v1。

三大旋钮：把"品味"变成可量化的参数

Taste-Skill 最有意思的设计，是把抽象的"设计风格"拆成了三个 1 到 10 的旋钮。你不需要跟 AI 描述"我想要那种高级感"，直接调数字就行。默认基线是8 / 6 / 4，但需求一读就能覆盖默认值。

三旋钮还能跟需求联动。比如"极简 / Linear 风"自动映射到低变异的 5-6；"Awwwards 获奖感 / 实验风"直接拉到 9-10；而"公共部门 / 无障碍优先"这类场景会被强制压到 3 左右的保守区间，因为约束比审美优先级更高。这正是 Taste-Skill 的核心哲学：设计决策要跟着需求走，而不是跟着 AI 的默认偏好走。

v2 重写：从"建议"到"纪律"

如果说 v1 是给 AI 讲道理，v2 就是给 AI 立规矩。这次实验版重写新增了 7 个章节，把很多"你最好这样做"升级成了"做不到就不许交付"。

先读懂房间，再动手写码

v2 新增的 Brief Inference 模块要求 AI 在写任何代码之前，先读四个信号：页面类型（着陆页 / 作品集 / 改版 / 编辑页）、用户的"氛围词"、参考信号（链接、竞品、截图）、受众群体和既有品牌资产。读完必须输出一行"设计解读"声明，类似这样：

Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities + Geist + restrained motion.

一句话说清楚"给谁看、什么调性、用什么体系"。写不出来？说明需求本身没读明白。

设计系统映射：别再造轮子

需求读出来像微软企业应用？直接上官方 Fluent UI。像 Google 风格？用 Material Web 的 Material 3 令牌。像 GitHub 那种开发者工具？Primer CSS 就在那等着。v2 内置了一张"需求 → 官方设计系统"的映射表，覆盖 Fluent、Carbon、Polaris、Atlassian、Primer、GOV.UK、USWDS、Bootstrap、Radix、shadcn/ui 和 Tailwind v4。核心规则只有一条：有官方包就用官方包，不要手搓一个山寨版设计系统。同时也规定了诚实原则：玻璃拟态、Bento 网格、粗野主义这类"美学风格"没有官方库，就老实标注实现方案，绝不假装自己拿到了苹果 Liquid Glass 的官方 CSS。

动画纪律：动效必须有动机

动画不是越炫越好。v2 要求每个动画都能用一句话说清它传达什么：是强调层级？是推进叙事？是反馈操作？答案如果是"因为好看"，那这个动画就不该存在。库的选型也定了：UI 动效用Motion（原 Framer Motion 的新品牌），滚动叙事用 GSAP + ScrollTrigger，并附上了粘性堆叠和水平平移两份可直接抄的规范代码骨架。同时明令禁止window.addEventListener('scroll')这种每帧都跑的写法，所有高强度动画必须提供prefers-reduced-motion降级。

交付前的预飞行检查

这是 v2 最硬核的部分：一份几十项的检查矩阵，逐条打勾才能交付。从"全页只有一个强调色"的颜色一致性锁，到"每个 CTA 按钮对比度过 WCAG AA"；从"8 个区块至少用 4 种布局家族"的反重复规则，到"Hero 标题不超过 2 行、副文本不超过 20 词"的排版纪律。任何一项不通过，页面就不算做完。你可能觉得苛刻，但正是这种"机械式"的自检，才堵住了 AI 偷懒的所有口子。

一整套技能矩阵：按场景挑兵器

Taste-Skill 不是一个技能，而是一个技能库。每个技能只干一件事，按需取用：

选择逻辑其实很简单：默认从 taste-skill 起步；要严格规则选 gpt-taste；要改老项目用 redesign；输出老被截断就加一个 output-skill。图像类技能和 ChatGPT Images、Codex 图像模式配合，生成参考帧之后丢给 Codex、Cursor 或 Claude Code 去落地实现。

图像优先：一条值得抄的工作流

很多人不知道，Taste-Skill 的图像生成技能藏着一个大杀器：一个区块一张独立的横向参考图。一个 8 区块的着陆页，就生成 8 张图，每张只专注一个设计部分，绝不压缩成一张长图。这在工程上是合理的：分块生成的分辨率更高、细节更清晰，编码模型才能精确复刻。

配合 image-to-code-skill，推荐在提示词里显式声明工作流：follow the skill: generate images, then analyze, then code。AI 会先出图、再分析、最后照着图写代码。这样生成的页面，至少视觉上是有"设计感"的，而不是模型从零"想当然"出来的。

上面这张 Floria 就是 Taste-Skill 的实战产物：黑色底、高饱和的花卉摄影、清晰的层级、克制的留白，从品牌标题到商品展示再到服务列表，一气呵成。下面这张图展示了它的下半场：评价卡片、订阅模块、页脚导航，风格从头到尾保持统一，没有出现"滚动到一半换了家网站"的割裂感。这就是 v2 里"页面主题锁"的功劳：整页只有一种明暗主题，区块之间不许反转。

性能与无障碍：好看不是唯一标准

"好看"之外，v2 还把生产标准焊死在了规则里：LCP 小于 2.5 秒、INP 小于 200 毫秒、CLS 小于 0.1，动效只用transform和opacity，暗色模式默认双模式设计且对比度必须过 WCAG AA。另外还有一条容易忽略的细节：默认字体别用 Inter，除非用户点名；AI 最爱的两款衬线字体 Fraunces 和 Instrument Serif 也被拉进了黑名单。这些规则看似琐碎，但正是它们决定了页面是"像专业设计师的作品"还是"一眼 AI"。

有意思的是，这个仓库里还附带了一份research/目录，记录了"LLM 懒惰"的研究成果：为什么模型会产出半成品、占位符和漏掉的区块，以及对应的参数调优和提示工程方案。也就是说，Taste-Skill 的反 AI 味不止停留在规则层面，背后是有实证研究支撑的。

写在最后

有人说设计是玄学，但 Taste-Skill 告诉你，AI 的"审美"可以被拆成三个旋钮、一份禁令清单、一张检查矩阵。你不需要教会模型什么是美，只需要让它不再偷懒地复读最平庸的答案。好的设计不该看起来像 AI 生成的，而应该看起来像专业设计师的作品。现在，把这个框架装进你的 Agent，让它学会"闭嘴，先读懂房间"。

【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill