你让AI写个Landing Page，它给你三个等宽卡片 + 居中Hero + 紫色渐变。再让它写一个，还是一样。taste-skill 就是来治这个病的。

一、AI前端的"审美塌方"

用过 AI 编程工具（Cursor、Claude Code、Codex）的人大概都有同感：AI 写的前端，第一眼还行，看多了全是一个模子。

典型症状：

  • Hero 永远居中，下面三个等宽 feature card
  • 颜色永远是紫色渐变（AI 对"科技感"的理解 = 紫色）
  • 字体永远是 Inter，间距永远一样
  • 布局永远对称，没有意外，没有惊喜
  • 动效要么没有，要么过度——没有中间态
  • 破折号（em dash）满天飞，section 编号到处都是

这不是 AI 的能力问题，是它没有"审美偏好"这个维度。AI 擅长生成"语法正确"的代码，但不擅长生成"看起来有品味"的界面。

taste-skill 要解决的就是这个问题：给 AI Agent 注入设计品味。

二、taste-skill 是什么？

taste-skill 是由 Leonxlnx 开发的开源项目（MIT 协议，Copyright 2026），定位是 “The Anti-Slop Frontend Framework for AI Agents”——AI Agent 的反模板化前端框架。

它的本质是一套可移植的 Agent Skill 文件（SKILL.md），可以被 Codex、Cursor、Claude Code 等 AI 编程工具自动加载，指导 AI 生成有设计感的前端代码。

与 stop-slop（治理文字层面的 AI 味）不同，taste-skill 治理的是视觉层面的 AI 味：

项目 治理对象 治理方式
stop-slop AI 写的文字（措辞、结构） 禁用短语清单 + 写作规则
taste-skill AI 写的前端（布局、配色、动效） 设计规则 + 三旋钮调参 + 预检清单

三、项目结构：13个 Skill 各司其职

taste-skill 不是一个单一规则文件，而是一个Skill 矩阵。每个 Skill 负责一个具体的设计任务，按需组合：

代码生成类（输出代码）

Skill 安装名 用途
taste-skill design-taste-frontend 🆕 v2 实验版——默认推荐，含 Brief 推断、设计系统映射、GSAP 代码骨架、预检清单
taste-skill-v1 design-taste-frontend-v1 v1 原版，供依赖旧行为的项目使用
gpt-tasteskill gpt-taste GPT/Codex 专用强化版，更高的布局方差、更强的 GSAP 约束
image-to-code-skill image-to-code 图片优先流程：生成参考图 → 分析 → 实现代码
redesign-skill redesign-existing-projects 改版现有项目：先审计 UI，再修复布局/间距/层级
soft-skill high-end-visual-design 高端质感 UI：柔和对比、留白、高级字体、弹簧动效
output-skill full-output-enforcement 强制完整输出，禁止 // ... 占位符
minimalist-skill minimalist-ui 编辑风格产品 UI（Notion/Linear 感），克制配色
brutalist-skill industrial-brutalist-ui 瑞士字体、锐利对比、实验性布局
stitch-skill stitch-design-taste 兼容 Google Stitch 的规则集

图片生成类（输出设计稿，不输出代码）

Skill 安装名 用途
imagegen-frontend-web imagegen-frontend-web 网站设计稿：Hero、Landing、多段落排版
imagegen-frontend-mobile imagegen-frontend-mobile 移动端界面和流程设计
brandkit brandkit 品牌套件：Logo 方向、配色、字体、视觉识别

关键设计：这些 Skill 框架无关。 规则针对的是设计意图（排版、配色、动效），不绑定 React/Vue/Svelte 的具体 API。

四、核心机制：三旋钮调参系统

taste-skill 的核心机制是三个可调旋钮（1-10 分），用于控制 AI 的设计行为。v1 已有此设计，v2 扩展了预设矩阵和自动推断规则，使旋钮从"手动配置"升级为"AI 自动推断"：

DESIGN_VARIANCE: 8    # 布局实验度（1=完美对称，10=艺术混沌）
MOTION_INTENSITY: 6   # 动效深度（1=静态，10=电影级/物理动效）
VISUAL_DENSITY: 4     # 信息密度（1=美术馆/留白，10=仪表盘/紧凑）

旋钮如何驱动设计？

这三个旋钮不是摆设，它们会级联影响所有设计决策：

你的描述 VARIANCE MOTION DENSITY
“极简/干净/Linear风格” 5-6 3-4 2-3
“高端消费/苹果感/奢华” 7-8 5-7 3-4
“狂野/Dribbble/Awwwards” 9-10 8-10 3-4
“Landing/营销页（默认）” 7-9 6-8 3-5
“政务/无障碍优先” 3-4 2-3 4-5
“改版-保留” 匹配现有 +1 匹配现有
“改版-大改” +2 +2 匹配现有

不需要手动编辑文件。 你只需要在对话中告诉 AI 你想要什么风格，它会自动推断旋钮值。比如：

“做一个类似 Linear 的极简 SaaS 落地页”

AI 会自动读取信号，推断为 DESIGN_VARIANCE: 5, MOTION_INTENSITY: 3, VISUAL_DENSITY: 3，然后基于这组参数生成代码。

五、v2 的"硬规则"：AI 的设计禁区

taste-skill v2（实验版）相比 v1 最大的升级是从"建议"变成了"禁令"。CHANGELOG.md 中明确记录了 v2 的核心变化：

1. Brief 推断优先（§0）

在写任何代码之前，AI 必须先"读懂房间"——页面类型、受众、氛围词、参考信号、已有品牌资产。然后输出一行设计解读：

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

禁止直接跳到默认紫色渐变 + 居中 Hero。

2. 设计系统映射（§2）

当 Brief 指向一个已知设计系统（Material、Fluent、Carbon、Polaris、shadcn/ui 等），AI 必须使用官方包，禁止手写 CSS 模仿：

Brief 指向 必须使用
微软/企业 SaaS @fluentui/react-components
Google/Material @material/web + Material 3 tokens
IBM/数据分析 @carbon/react
Shopify Polaris
政务（英国） govuk-frontend
现代 SaaS 组件 shadcn/ui

当 Brief 是一种美学风格（毛玻璃、Bento、粗野主义）而非设计系统时，AI 必须诚实标注"这是近似实现，非官方包"。特别是 Apple Liquid Glass——不存在官方 liquid-glass.css，Web 实现都是近似。

3. AI 设计特征禁令（§9）

这是 taste-skill 最"暴力"的部分——直接列出 AI 的设计坏习惯并全部禁止：

破折号全面禁令： 页面上零个 em dash（—）。标题、正文、引言、按钮文字、alt 文本全部禁止。用连字符（-）或重组句子。CHANGELOG 记录：“这是 v2 前测试中被违反最多的单一风格规则。”

其他禁令清单：

  • ❌ Section 编号眉标（00 / INDEX、06 · how it works）
  • ❌ Hero 中的版本标签（V0.6、INVITE-ONLY PREVIEW、BETA）
  • ❌ 装饰性照片署名（Field study no. 12 · Ines Caetano）
  • ❌ Hero 底部的装饰文字条（BRAND. MOTION. SPATIAL.）
  • ❌ 图片上的 Pill/标签叠加
  • ❌ 营销页的版本页脚（v1.4.2、Build 0048）
  • ❌ 地点/时间/天气条（Lisbon, working with founders）
  • ❌ 滚动提示（Scroll、↓ scroll、Scroll to explore）
  • ❌ 每行都加 border-t + border-b 的长列表
  • ❌ 用 div 模拟的假产品 UI（假任务列表/假仪表盘/假终端）
  • ❌ 手写 SVG 图标（必须用 Phosphor / HugeIcons / Radix / Tabler）

4. Hero 硬约束

✅ 标题最多 2 行（桌面端）
✅ 副标题最多 20 词、最多 4 行
✅ CTA 不需要滚动就能看到
✅ 字号与图片尺寸一起规划
❌ 4 行以上的标题 = 字号错误，不是文案太长

5. Bento 网格零空洞规则

✅ N 个内容 = 恰好 N 个格子
✅ 使用 grid-flow-dense 填满空隙
❌ 网格中间或末尾有空白格子 = 规划失败

6. 颜色/形状一致性锁定

✅ 全页一个强调色
✅ 全页一套圆角体系
✅ 按钮文字对比度 WCAG AA（4.5:1 正文，3:1 大字）
❌ 第 7 节突然冒出一个蓝色 CTA = 设计事故
❌ 圆角按钮 + 方形卡片 = 设计体系破碎

7. Section 布局不重复规则

8 个 section 至少使用 4 种不同的布局族。“Selected commissions” 不能长得像 “What we do”。

8. GSAP 动效代码骨架

v2 提供了规范化的 GSAP 代码模板，避免 AI 写出残废的 ScrollTrigger：

  • §5.A Sticky-Stack： 左侧标题 pin 住，右侧内容滚动
  • §5.B Horizontal-Pan： 水平滚动 + pin
  • §5.C Scroll-Reveal Stagger： Motion 的 whileInView 做轻量级渐显
  • §5.D 禁止的动效模式： window.addEventListener('scroll')、在 React state 中做滚动计算——全部禁止

9. 暗色模式协议（§8）

默认双模式（light/dark），每个项目声明 token 策略，对比度和层级保持一致。

10. 改版协议（§11）

对已有项目的改版必须：

  • 先审计，再动手
  • 识别模式：Greenfield / Preserve / Overhaul
  • 不可静默修改：URL 结构、导航标签、表单字段名、品牌标识、法律文本

11. 最终预检清单（§14）

每个 checkbox 必须诚实通过才能交付。

六、Redesign Skill：改版专用审计清单

taste-skill 的 redesign-skill 提供了一份极其详细的 UI 审计清单，适用于改进现有项目。这份清单本身就是一份高质量的前端设计知识库：

排版审计

  • ❌ 浏览器默认字体或 Inter 无处不在 → 换 Geist、Outfit、Cabinet Grotesk、Satoshi
  • ❌ 标题缺乏存在感 → 加大字号、收紧字距、降低行高
  • ❌ 正文太宽 → 限制在约 65 字符
  • ❌ 只用 Regular(400) 和 Bold(700) → 引入 Medium(500) 和 SemiBold(600)
  • ❌ 全大写子标题 → 改为小写斜体、sentence case 或 small-caps

配色审计

  • ❌ 纯黑 #000000 背景 → 换成 #0a0a0a 或 #121212
  • ❌ 过饱和强调色 → 饱和度控制在 80% 以下
  • ❌ 多个强调色 → 只留一个
  • ❌ 混用冷暖灰 → 统一一个灰阶体系
  • ❌ 紫蓝"AI 渐变"审美 → 这是最常见的 AI 设计指纹，换成中性底色 + 单一深思熟虑的强调色

布局审计

  • ❌ 一切居中对称 → 用偏移、混合宽高比、左对齐打破
  • ❌ 三等分 feature card → 这是最泛滥的 AI 布局，换成 2 列交错、不对称网格、水平滚动
  • ❌ height: 100vh → 换成 min-height: 100dvh（修复 iOS Safari 视口跳动）
  • ❌ 复杂 flex 百分比计算 → 换成 CSS Grid
  • ❌ 缺少最大宽度容器 → 加 max-w-[1400px]

交互状态审计

  • ❌ 按钮没有 hover 状态 → 加背景变化、微缩放
  • ❌ 没有 active/pressed 反馈 → 加 scale(0.98) 或 translateY(1px)
  • ❌ 瞬间切换无过渡 → 加 200-300ms transition
  • ❌ 缺少 focus ring → 键盘导航的无障碍要求
  • ❌ 用 window.alert() 做错误提示 → 改为行内错误信息

内容审计

  • ❌ “John Doe”、“Jane Smith” → 用真实感的多样化姓名
  • ❌ 99.99%、$100.00 假整数 → 用有机数据：47.2%、$99.00
  • ❌ “Acme Corp”、“Nexus” → 创造有上下文感的品牌名
  • ❌ AI 文案陈词滥调（“Elevate”、“Seamless”、“Unleash”、“Next-Gen”、“Game-changer”）→ 用平实、具体的语言

七、output-skill：治 AI 的"半途而废"

AI 写代码有个恼人的习惯：写到一半就开始 // ... rest of code、// implement here、"Let me know if you want me to continue"。

output-skill 就是治这个的。它定义了一套禁止的输出模式：

❌ // ...                    ❌ // rest of code
❌ // implement here          ❌ // TODO
❌ /* ... */                  ❌ // similar to above
❌ // continue pattern        ❌ // add more as needed
❌ "Let me know if you want me to continue"
❌ "for brevity"
❌ "the rest follows the same pattern"

规则：如果用户要 5 个组件，就输出 5 个完整组件。 接近 token 限制时，在干净断点暂停，标注 [PAUSED — X of Y complete]，用户说 “continue” 就从断点继续。

八、安装与使用

一键安装全部 Skill

npx skills add https://github.com/Leonxlnx/taste-skill

npx skills add 来自 Vercel Labs 的 agent-skills CLI，它会扫描仓库的 skills/ 目录，自动发现所有 Skill。

安装单个 Skill

# 只安装默认的 taste-skill v2
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

# 只安装 GPT 专用版
npx skills add https://github.com/Leonxlnx/taste-skill --skill "gpt-taste"

# 只安装改版专用 Skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-existing-projects"

手动使用

也可以直接复制 SKILL.md 到项目中，或粘贴到 ChatGPT/Codex 对话里。

九、该选哪个 Skill？

项目 README 提供了清晰的选择指南：

场景 推荐 Skill
通用默认（最安全） taste-skill（v2 实验版）
依赖 v1 精确行为 taste-skill-v1
用 GPT/Codex，要更强约束 gpt-taste
图片→分析→代码 全流程 image-to-code-skill
改进已有项目 redesign-skill
已确定视觉方向 soft-skill / minimalist-skill / brutalist-skill
AI 总是截断输出 output-skill
交付物是设计图 imagegen-frontend-web / mobile / brandkit

十、深度思考：这项目解决了什么根本问题？

问题1：AI 的"审美均值回归"

AI 模型在海量 UI 数据上训练，学到的是统计意义上的"平均审美"——最常见的布局、最安全的配色、最大公约数的间距。结果就是所有 AI 生成的界面都长得像同一个模板。

taste-skill 的解法是用规则打破统计偏差。三旋钮系统本质上是在告诉 AI：“你默认选的那个方案，我不让你选。”

问题2：设计系统 vs 设计品味

很多 AI 设计工具的思路是"套模板"——给 AI 一个设计系统，让它按规范输出。这能保证一致性，但不能保证品味。

taste-skill 区分了两个层次：

  • 设计系统（Material、Fluent、shadcn/ui）→ 解决"规范性"问题
  • 设计品味（布局方差、动效深度、信息密度）→ 解决"审美"问题

v2 的 §2 明确要求：当 Brief 指向已知设计系统时用官方包，当 Brief 是一种美学风格时用原生 CSS 并诚实标注。不混淆"用 shadcn/ui"和"有品味"。

问题3：Anti-Slop 的工程化

stop-slop 用"禁用清单"治理文字层面的 AI 味，taste-skill 用"禁令 + 旋钮 + 预检"治理视觉层面的 AI 味。两者的共同思路是：AI 的问题不是能力不足，而是默认行为太保守。 需要外部规则来强制打破默认。

taste-skill 的工程化程度更高——它不仅告诉你"不要做什么"，还提供了可调参数、代码骨架、审计清单、预检流程。这已经不是一份"设计指南"，而是一个设计行为控制系统。

十一、局限性与注意事项

  1. v2 仍在实验阶段：CHANGELOG 明确标注 “v2 (experimental)”，API（安装名、旋钮名、section 结构）要到 v2.0.0 stable 才锁定。可能随时迭代。
  2. 规则量巨大：v2 的 SKILL.md 内容非常多（从 v1 大幅扩展），对 AI 的上下文窗口消耗较大。
  3. 偏 Landing Page/Portfolio：项目明确声明不适用于仪表盘、数据表格、多步表单、代码编辑器、原生移动端、实时协作 UI。
  4. GSAP 依赖较重：动效部分重度依赖 GSAP 和 Motion（原 Framer Motion），轻量级项目可能过重。
  5. 英文原生：所有规则和示例都是英文的，中文场景需自行适配（比如中文字体选择、中文排版的标点避头尾规则等）。
  6. 图片生成 Skill 需要外部工具：imagegen-* 系列 Skill 本身不包含图片生成能力，需要配合 ChatGPT Images 或其他图片生成工具使用。

十二、与同类项目对比

维度 taste-skill stop-slop 通用设计系统（shadcn/ui）
治理对象 前端视觉设计 文字写作质量 组件规范
治理方式 规则 + 旋钮 + 预检 禁用清单 + 评分 组件库 + 主题
可调参数 3 个旋钮（Variance/Motion/Density） 5 个评分维度 主题 token
适用场景 Landing/Portfolio/改版 任何文本 任何 UI
框架绑定 无（框架无关） 无 React 为主
Agent 集成 npx skills add 一键安装 复制 SKILL.md npm install

十三、总结

taste-skill 做了一件其他项目没做过的事：把"设计品味"编码成了 AI 可执行的规则。

它不是设计系统（不提供组件），不是设计工具（不提供 GUI），而是一份给 AI Agent 看的设计行为规范——什么该做、什么禁做、怎么调参、怎么自检。

在 AI 编程工具快速普及的 2026 年，这类"AI 行为矫正"项目的价值会越来越大。当所有人都用 AI 写代码时，你的产品看起来不一样，就是竞争力。

项目地址： https://github.com/Leonxlnx/taste-skill

官网： https://tasteskill.dev

告别“AI味“！stop-slop：一个让AI写作回归人类质感的开源Skill

2026 年最值得关注的两个开源项目：从金融终端到 AI Agent 框架的架构启示

FinceptTerminal 深度拆解：23k Star 的开源金融终端，到底做对了什么？

# 人工智能 # 前端 # 状态模式 # 开源
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

一个GitHub Issue就能投毒Claude Code？我拆解了整条供应链攻击链

上周Claude Code刚被AMD AI负责人用23万次调用记录实锤"越更新越差"[1]，这周它的GitHub Actions又被安全研究者扒出了一个供应链级别的漏洞——一个恶意GitHub Issue，就能让Claude Code帮你把仓库Secret全偷走，甚至往你的代码里投毒[2]。这个漏洞有多严重？CVSS v4.0评分7.8，Anthropic为此支付了4800美元赏金。更可怕的是，A

avatar AtomGit开源社区
cover

掌控机器人行为的核心密码：深入解析状态空间及其在机器人开发中的实践

avatar AtomGit开源社区
cover

SFT 微调实战：LoRA / QLoRA / 全参微调对比

avatar AtomGit开源社区