Taste Skill
Taste Skill 是一套给 AI 编程工具用的设计技能包，把布局变化、排版层次、动效规则等设计决策写成指令文件，让 AI 按规则做决策，而不是按训练数据的默认模式生成界面。
AI 生成界面的"AI 味"是什么
用 Claude Code 或 Cursor 写前端，描述了半天想要的效果，生成出来的界面大概是这样的：大标题居中，副标题跟着，下面一个 CTA 按钮。
配色要么蓝白，要么深灰。卡片四等分，间距均匀，圆角适中。
整体看起来干净，但也说不出哪里不对 -- 就是感觉像模板。
换一个项目再生成，出来的东西和上次高度相似。再换，还是差不多。
不是代码有问题，跑起来完全没毛病。就是视觉上太"AI 味"了，一眼就能认出来是机器生成的。
为什么 AI 总是生成"AI 味"界面
AI 生成界面的方式是从训练数据里提取模式，写出来的东西自然倾向于出现频率最高的那种。
开发者教程、组件库示例、GitHub 上的开源项目 -- 这些数据里最多的是功能正确、布局中规中矩的界面。
AI 学到的是"怎么写出一个没有问题的界面"，而不是"怎么写出一个有设计感的界面"。
结果是：生成出来的东西功能完好，视觉上却普通。每个决定都是最保险的那个：居中布局风险最低，标准间距最省事，主流配色最不容易出错。
这个问题靠提示词很难根本上解决。你可以描述"现代感""高端感""设计感"，但这些词对 AI 来说太模糊，出来的结果通常还是那套东西加了点渐变。
Taste Skill 的解决思路
Taste Skill 的做法很直接：把布局变化、排版层次、动效规则、间距逻辑这些具体的设计决策写成 AI 可以读懂的指令文件（SKILL.md）。
让 AI 在生成界面之前先加载这套规则，按照规则做决策，而不是按训练数据里最常见的模式来。
它相当于给 AI 配了一套设计偏好，让生成结果从"功能正确"往"视觉有意思"推一把。
| 项目 | 信息 |
|---|---|
| GitHub 仓库 | https://github.com/Leonxlnx/taste-skill |
| 许可证 | MIT |
| 支持工具 | Claude Code、Cursor、Codex、ChatGPT |
安装
一条命令安装全部技能包。
# 安装全部技能包 npx skills add https://github.com/Leonxlnx/taste-skill
只需要某一个技能包的话，加 --skill 参数指定。
# 只安装默认主技能 npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
安装完成后，AI 工具在生成界面时会自动加载对应的 SKILL.md 文件。不需要修改项目配置，也不需要写额外的提示词。
快速上手
装好之后，照常让 AI 生成界面，不需要改提示词。
# 像平时一样描述需求即可 做一个 SaaS 产品的落地页，有导航、Hero 区域、功能介绍和定价表
这时 AI 会先读取 Taste Skill 的规则，再生成代码。
和没装之前生成出来的对比，布局的变化幅度、排版层次、动效处理方式都会有所不同。
技能包分类与选用
Taste Skill 拆成了几个独立的技能包，每个只做一件事，按需选用，不需要全部安装。
界面生成类
这类技能包直接影响 AI 生成界面时的设计决策，是最常用的。
| 技能包 | 安装参数 | 风格特征 | 适用场景 |
|---|---|---|---|
| design-taste-frontend | --skill "design-taste-frontend" | 自动推断设计语言，按布局变化、动效深度、信息密度三个维度生成 | 大部分项目，默认首选 |
| high-end-visual-design | --skill "high-end-visual-design" | 克制对比度、大量留白、高级字体、弹性动效 | 品牌感强的产品落地页、营销页 |
| minimalist-ui | --skill "minimalist-ui" | 节制配色、清晰结构、无多余装饰，接近 Notion / Linear 风格 | 内部工具、管理后台 |
| industrial-brutalist-ui | --skill "industrial-brutalist-ui" | 瑞士字体风格、高对比度、硬朗版式、非常规布局 | 创意类项目 |
默认主技能 design-taste-frontend 是 v2 版本，最通用。会自动读取你的需求，推断适合的设计语言，然后按三个维度生成代码。大部分项目从这个开始就够了。
# 安装默认主技能（推荐先装这个试试） npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
流程辅助类
这类技能包解决的是 AI 工作流程中的问题，不直接控制视觉风格。
| 技能包 | 解决的问题 | 使用方式 |
|---|---|---|
| redesign-existing-projects | 改造现有项目的界面，先审计再修改，而不是盲目改 | 装好后告诉 AI："按照 skill 审计一下当前的界面，找出问题再修改" |
| full-output-enforcement | AI 生成到一半停下来、留下 // TODO 注释的问题 | 安装后自动生效，强制 AI 输出完整代码 |
# 安装改造现有项目的技能包 npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-existing-projects"
装好之后告诉 AI "按照 skill 审计一下当前的界面，找出问题再修改"，它会先分析再动手，不会乱改。
图片生成类
这三个技能包用于生成设计参考图，不输出代码，配合 ChatGPT Images 等工具使用，生成后再交给编程 AI 实现。
| 技能包 | 输出内容 | 配合工具 |
|---|---|---|
| imagegen-frontend-web | 网页设计稿参考图 | ChatGPT Images 等 |
| imagegen-frontend-mobile | 移动端界面参考图 | ChatGPT Images 等 |
| brandkit | 品牌视觉板（Logo 方向、配色、字体） | ChatGPT Images 等 |
三个可调参数
默认主技能 design-taste-frontend 里有三个数值参数，范围 1-10，可以直接编辑 SKILL.md 文件调整。
| 参数 | 控制什么 | 低值（1-3） | 高值（7-10） | 调整建议 |
|---|---|---|---|---|
| DESIGN_VARIANCE | 布局变化幅度 | 居中对称、规整 | 不对称、现代感 | 落地页可调高，表单页保持低值 |
| MOTION_INTENSITY | 动效深度 | 仅 hover 效果 | 滚动动效、磁性动效 | 需要动感强的页面往上推 |
| VISUAL_DENSITY | 信息密度 | 大留白、呼吸感 | 密集信息展示 | 内容展示类调低，数据后台调高 |
# 编辑 SKILL.md 调整参数（找到以下三行修改数值即可） DESIGN_VARIANCE 7 # 布局变化幅度，1-10，想更现代就调高 MOTION_INTENSITY 5 # 动效深度，1-10，落地页可以推到 8 VISUAL_DENSITY 3 # 信息密度，1-10，内容展示页保持低值
改完保存，AI 下次生成时会按新的参数来。
使用前需要了解的几点
v2 还在迭代中
默认主技能目前是 v2 实验版，官方说明是"actively iterating toward v2.0.0 stable"，行为偶尔会有变化。
如果需要稳定可预期的结果，用 v1。
# 安装 v1 稳定版 npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
它影响的是设计决策，不是代码质量
Taste Skill 改变的是 AI 在布局、排版、动效上的倾向，不处理功能逻辑或代码结构的问题。
如果生成的代码有 bug，这不是它能解决的。
效果依赖 AI 工具对 SKILL.md 的理解
不同的 AI 工具对技能文件的遵循程度有差异。
Claude Code 和 Cursor 通常执行得比较忠实，ChatGPT 可以直接把 SKILL.md 贴进对话里使用。
框架无关
规则针对的是设计意图，不绑定特定框架，React、Vue、Svelte 都可以用。
| 注意点 | 说明 | 应对方式 |
|---|---|---|
| v2 还在迭代 | 行为偶尔变化，不够稳定 | 需要稳定结果时用 v1 |
| 只影响设计决策 | 不处理功能逻辑和代码结构问题 | 代码 bug 需要其他手段解决 |
| 工具有差异 | 不同 AI 工具遵循程度不同 | ChatGPT 可直接贴 SKILL.md 到对话中 |
| 框架无关 | 规则针对设计意图，不绑定框架 | React / Vue / Svelte 均可使用 |
快速上手建议
如果你用 Claude Code 或 Cursor 做前端，可以先装默认主技能试一下。
# 第一步：安装默认主技能 npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
然后让 AI 生成一个你之前做过的页面，和原来的结果对比一下，看看差别在哪里。
如果有改造现有项目的需求，试试 redesign-existing-projects，让 AI 先分析再动手，比直接说"帮我改好看点"要可控很多。