Taste Skill
The Anti-Slop Frontend Framework for AI Agents——AI Agent 的反模板化前端框架。
给 AI 注入好品味，阻止 AI 生成无聊、千篇一律的“视觉填充物”（slop）。
📌 这是什么
用过 Cursor、Claude Code、Codex 的人都有同感：AI 写的前端，第一眼还行，看多了全是一个模子——Hero 永远居中、下面三个等宽卡片、颜色永远是紫色渐变、字体永远是 Inter、间距永远一样。
这不是 AI 能力的问题，而是 AI 没有“审美偏好”这个维度。
AI 擅长生成“语法正确”的代码，但不擅长生成“看起来有品味”的界面。
Taste Skill 就是来解决这个问题的。
它的本质是一套可移植的 Agent Skill 文件（SKILL.md），可以被 Codex、Cursor、Claude Code、Copilot、Windsurf 等主流 AI 编码工具自动加载，指导 AI 生成有设计感的前端代码。
与 stop-slop（治理文字层面的 AI 味）不同，taste-skill 治理的是视觉层面的 AI 味。
🎯 核心特性
可调式设计三旋钮
在 SKILL.md 顶部包含可调整的参数（1–10 级），精确控制设计风格：
| 参数 | 作用 | 低值 | 高值 |
|---|---|---|---|
DESIGN_VARIANCE |
布局实验性 | 居中/简洁 | 非对称/现代 |
MOTION_INTENSITY |
动效深度 | 仅悬停效果 | 滚动/磁吸动效 |
VISUAL_DENSITY |
信息密度 | 宽松留白 | 密集仪表盘风格 |
反 Slop 规则引擎
Skill 内部定义了一系列“禁止模式”和“推荐模式”：
- 布局：禁止通用居中布局 + 最大宽度容器，推荐非对称网格与有意的留白
- 字体：除非明确要求，否则避免系统默认字体，推荐可变字体
- 视觉层级：通过字号、字重和位置强制建立视觉层级
多技能矩阵，各司其职
Taste Skill 不是一个单一规则文件，而是一个由多个专业化 Skill 组成的矩阵，每个 Skill 只做一件事，可按需组合。
代码生成类（输出代码）
| Skill | 安装名 | 用途 |
|---|---|---|
| taste-skill (v2) | 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 |
网站设计稿：英雄区、着陆页，具备出色的排版、间距和防粗糙的艺术指导 |
| imagegen-frontend-mobile | imagegen-frontend-mobile |
移动端设计：iOS、Android 及跨平台流程的特定约束 |
| imagegen-brand-kit | imagegen-brand-kit |
品牌套件：Logo 方向与色板 |
📥 安装
使用 npx skills add CLI 扫描 skills/ 文件夹，所有技能的安装方式相同：
npx skills add https://github.com/Leonxlnx/taste-skill
按安装名称安装单个技能：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
也可以直接复制任意 SKILL.md 到项目中，或粘贴到 ChatGPT / Codex 对话中使用。
从 v1 升级到 v2
重新运行安装命令即可自动升级，安装名未变，无需脚本更新：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
如需锁定 v1 版本：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
🔧 完整工作流：先视觉，后代码
Taste Skill 的核心思路是“先视觉，后代码”——让 AI 先出设计稿，确认方向后再生成代码。
第一阶段：生成设计参考图
使用 imagegen-frontend-web skill，生成网站 Landing Page 设计稿：非对称布局、Hero 全屏、配色克制、禁止居中布局和 AI 感渐变。
第二阶段：分析设计稿，提取规格
AI 从设计图中提取具体色值、字体组合和层级、间距节奏、动效逻辑——把“感觉”转化成“参数”。
第三阶段：对照设计稿写代码
使用 design-taste-frontend skill，基于提取的设计规格生成最终前端代码。
🚫 它禁止什么
Taste Skill 通过硬约束阻止 AI 走捷径：
| 维度 | 禁止内容 |
|---|---|
| 视觉 | 霓虹发光 / 纯黑（用 Zinc-950 代替）、过饱和渐变文字、强调色超过 1 个、“AI 紫/蓝”配色 |
| 排版 | Inter 字体（改用 Geist / Satoshi / Cabinet Grotesk）、居中 Hero、3 列等宽卡片布局 |
| 内容 | “Elevate”“Seamless”“Next-Gen”等 AI 营销腔、假数据“99.99%”（改用有机数据如“47.2%”）、通用占位名“John Doe” |
| 动效 | 线性过渡（改用 Spring 物理参数，stiffness: 100） |
📁 项目结构
taste-skill/
├── skills/ # 所有 SKILL.md 文件
│ ├── taste-skill/ # v2 默认 skill
│ ├── taste-skill-v1/ # v1 原版
│ ├── gpt-tasteskill/ # GPT/Codex 强化版
│ ├── image-to-code-skill/ # 图片→代码流水线
│ ├── redesign-skill/ # 项目改版
│ ├── soft-skill/ # 高端质感 UI
│ ├── output-skill/ # 强制完整输出
│ ├── minimalist-skill/ # 极简编辑风格
│ ├── brutalist-skill/ # 粗野主义风格
│ ├── stitch-skill/ # Google Stitch 兼容
│ ├── imagegen-frontend-web/ # 网页设计稿生成
│ ├── imagegen-frontend-mobile/ # 移动端设计稿生成
│ └── imagegen-brand-kit/ # 品牌套件生成
├── CHANGELOG.md # v1→v2 变更说明
├── README.md
└── LICENSE # MIT 协议
💬 反馈与贡献
我们非常欢迎你的反馈。可以通过以下方式提出建议和报告 Bug：
- 在 GitHub 上提交 Pull Request 或 Issue
- 私信 @lexnlin 或 @blueemi99
- 发送邮件至 hello@tasteskill.dev
⚠️ 免责声明
Taste Skill 没有官方代币、虚拟货币或加密项目。任何使用作者名称、形象或项目的代币均与该团队无关，也不被认可。
🔗 相关链接
| 链接 | 说明 |
|---|---|
| GitHub 仓库 | 源代码与完整文档 |
| 官网 | 项目官方网站 |
| Discord 社区 | 讨论与支持 |
Taste Skill——给 AI 装上审美大脑，让前端页面告别千篇一律。
