Taste-Skill 味觉技能｜给 AI 前端装上设计审美，反 AI slop

Cursor、Claude Code、Codex 用久了大家都有同感：AI 生成的页面代码逻辑没问题，但视觉高度同质化——统一的紫蓝渐变、三栏卡片布局、居中大标题，像套同一套模板，社区叫它『AI slop』（模板化、廉价感的生成界面）。

Taste-Skill 正是为解决这个痛点而生，定位为面向 AI Agent 的『反模板』前端技能框架（Anti-Slop Frontend Framework for AI Agents）。它不是组件库、也不是新的前端框架，而是一套可移植的 SKILL.md 指令集合，给 AI 编码代理注入专业设计约束，让输出页面的布局、排版、动效、留白更考究、完成度更高。

项目核心原理

不绑定任何前端技术栈，规则聚焦设计意图，React、Vue、Svelte 等都能正常使用。它不修改模型本身，而是在 AI 生成代码前，强制 AI 执行一套设计校验流程：解读需求 → 推导设计语言 → 校验排版、动效、间距，同时禁止 AI 产出烂大街的模板式写法。

内置 3 个可调节参数旋钮（1-10 档），可按项目风格自由调校：

1. DESIGN_VARIANCE（布局变化度）：低值居中规整，高值启用非对称/实验性版式。
2. MOTION_INTENSITY（动效强度）：从简单 hover 到滚动动画、磁吸动效。
3. VISUAL_DENSITY（信息密度）：从极简官网到高密度后台仪表盘。

技能包（按需选用，不用全装）

代码实现类：

• design-taste-frontend（默认 v2 实验版）：通用全能，自动解读需求推导设计语言，内置完整预检查流程。
• design-taste-frontend-v1：旧版本，给依赖旧行为的项目做兼容。
• gpt-taste：针对 GPT/Codex 强化版，更强的布局变化与动效约束，严格反模板。
• image-to-code：图片驱动工作流，先生成设计参考图、分析后还原实现前端代码。
• redesign-existing-projects：针对存量项目，先做 UI 审计、修复布局间距层级后再改版。
• high-end-visual-design：柔和高级 UI，大留白、低对比度、弹簧动效。
• minimalist-ui：极简产品风，类似 Notion、Linear 的克制干净界面。
• industrial-brutalist-ui：粗野工业风，锐利对比、瑞士印刷排版。
• full-output-enforcement：解决 AI 输出截断，强制输出完整代码、禁止占位注释。

图像生成类（只输出设计稿，不输出代码）：

• imagegen-frontend-web：网页版 UI 设计稿（落地页、多区块页面）。
• imagegen-frontend-mobile：移动端界面、APP 流程 mock。
• brandkit：品牌设计套件，logo、色板、字体规范等品牌物料。

安装使用

支持 npx skills add 一键安装，也可以直接复制仓库里的 SKILL.md 粘贴到对话上下文使用。

• 安装全部技能：npx skills add https://github.com/Leonxlnx/taste-skill
• 仅装单个技能：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

提示：image-to-code 图像转代码技能，在 prompt 中补充指令 follow the skill: generate images, then analyze, then code，即可完整跑通『生成参考图-分析-写代码』流程。

项目信息

• 项目地址 GitHub Leonxlnx/taste-skill，官网 tasteskill.dev，MIT 开源。
• research 目录存放背后的设计研究文档，规则不是主观经验，而是针对 LLM 高频输出偏差做的约束。
• 核心价值：不是期待大模型原生拥有审美，而是把设计师的设计准则翻译成 AI 能读懂的约束规则，从根本上降低 AI 生成界面的『模板感』。