Taste Skill — “Anti-Slop Frontend Framework for AI Agents”，一套 Agent Skill 集合，专治 AI 生成前端的”千篇一律感”（AI purple 渐变、居中 Hero、三张等宽卡片、Inter 字体、em-dash 滥用等）。63.2k stars，MIT 协议，兼容 Claude Code / Codex / Cursor 等主流编码 Agent。
核心机制
- Brief Inference（读懂需求）：生成代码前先输出一行 “Design Read”，推断页面类型/受众/氛围词/参考信号，避免一上来就套用默认审美
- 三档旋钮：
DESIGN_VARIANCE（布局实验度 1-10）、MOTION_INTENSITY（动效强度 1-10）、VISUAL_DENSITY（信息密度 1-10），依据 Brief 推断取值而非死用默认值 - 设计系统映射表：按品牌语境匹配官方组件库（Fluent/Material/Carbon/Polaris/Atlaskit/Primer/GOV.UK/USWDS/shadcn 等），拒绝手搓已有官方方案的 CSS
- AI Tells 硬性禁令：em-dash 全面禁用（唯一非负例外条款）、premium-consumer 米色+黄铜色系禁用、Fraunces/Instrument_Serif 禁用、eyebrow 标签限流（每 3 节最多 1 个）、Jane Doe/Acme 式假名假数据禁用等三十余条production-test 提炼出的反 AI 味规则
- GSAP 标准骨架：Sticky-Stack、Horizontal-Pan 等滚动动效给出可复用的规范代码片段（
start: "top top"+pin: true） - Final Pre-Flight Check：交付前需逐项核对近百条清单（对比度、CTA 唯一意图、Bento 格子数精确匹配等），任一项不过即视为未完成
- Redesign Protocol：区分 Greenfield / Preserve / Overhaul 三种改版模式，先审计现状再动手，保护 IA、SEO、埋点字段
Skill 清单
仓库 skills/ 目录下所有 Skill 共用 npx skills add 同一套安装方式，按「实现型」和「图像生成型」两类：
| Skill | 安装名 | 用途 |
|---|---|---|
| taste-skill | design-taste-frontend | 默认主 Skill，v2 实验版，综合上述所有规则 |
| taste-skill-v1 | design-taste-frontend-v1 | 旧版本，供依赖旧行为的项目锁定使用 |
| gpt-tasteskill | gpt-taste | GPT/Codex 专用更严格变体 |
| image-to-code-skill | image-to-code | 先生成参考图再实现代码的流水线 |
| redesign-skill | redesign-existing-projects | 存量项目改版，先审计再修 |
| soft-skill / minimalist-skill / brutalist-skill | 对应视觉方向已定时使用的风格化变体 | |
| output-skill | full-output-enforcement | 防止模型输出半成品 |
| stitch-skill | stitch-design-taste | 兼容 Google Stitch 规则 |
| imagegen-frontend-web / imagegen-frontend-mobile / brandkit | 图像生成型，仅输出参考图供后续编码 Agent 使用 |
安装方式
npx skills add https://github.com/Leonxlnx/taste-skill
# 或只装某个子 Skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"也可直接把某个 SKILL.md 复制进项目或粘进对话。
适用边界
明确不适用于 Dashboard/密集数据表/多步表单/代码编辑器/原生移动端/实时协同 UI —— 这些场景应直接用对应官方设计系统（Fluent/Carbon/Atlaskit 等），而不是套用本 Skill 的营销页/落地页规则。
关联
- frontend-slides — 同为 Claude Code Skill + 单文件 HTML 输出，但 frontend-slides 专注 PPT/演示文稿生成，taste-skill 专注落地页/官网前端审美纪律
- officecli — 同样内置 HTML/PNG 渲染引擎，但落点在 Office 文档而非 Web 前端