taste-skill 使用教程

📖 项目简介

taste-skill 是开发者 Leonxlnx 开源的一套「给 AI 装审美」的技能包，作者给它的定位是 The Anti-Slop Frontend Framework for AI Agents——专治 AI 生成前端时那股千篇一律的「模板味」。项目 2026 年 2 月上线，目前已拿下 68,402 Star、4,726 Fork，采用 MIT 协议完全开源商用无忧。

它既不是组件库，也不是模板站，而是一组可移植的 SKILL.md 规则文件——写给模型看的硬性设计规范。默认技能已重写为 v2（实验版）：模型先读需求推断设计语言，再通过三档旋钮（DESIGN_VARIANCE 布局实验度 / MOTION_INTENSITY 动效强度 / VISUAL_DENSITY 信息密度）定调，最后按内置的「反套路清单」逐条自查：禁用 Inter 这类烂大街字体、禁止拿 emoji 当图标、禁止「SECTION 01」这种廉价标签、禁止破折号堆砌，并强制走 GSAP 动效骨架和发布前 pre-flight 检查。

对 Codex 用户尤其友好：仓库里专门放了一个 gpt-tasteskill 变体（安装名 gpt-taste），针对 GPT / Codex 做了更严格的调校——布局变化更大、GSAP 指令更强、反套路更激进。规则只约束设计意图、不绑定框架 API，所以 React、Vue、Svelte 都能用， Cursor、Claude Code、Codex、Gemini CLI 等支持 SKILL.md 的工具都能直接加载。

📎 相关链接与完整安装命令（点击展开）

GitHub 项目： github.com/Leonxlnx/taste-skill
官网： tasteskill.dev
安装全部技能（完整命令）： npx skills add https://github.com/Leonxlnx/taste-skill
只装 Codex 专用变体： npx skills add https://github.com/Leonxlnx/taste-skill --skill "gpt-taste"
skills CLI 项目： github.com/vercel-labs/agent-skills
更多教程：关注公众号 / 抖音 / 视频号「IT小圈」

✨ 核心亮点

🎨

13 个技能按需装

通用审美、极简、粗野、高级感、重设计、图生代码等，一个技能只干一件事

🎛️

三档旋钮可调

布局实验度、动效强度、信息密度各 1-10 级，改数字就换风格

🤖

Codex 专用变体

gpt-taste 针对 GPT / Codex 调校，反套路规则更激进

🆓

MIT + 框架无关

React / Vue / Svelte 通吃，纯文本规则文件，零依赖零成本

🧩 它能做什么、输出什么

项目	说明
输入	自然语言需求（如「做一个日志工具的落地页」）；重设计场景可输入现有代码库
适用类型	落地页、产品官网、后台仪表盘、移动端界面、品牌视觉板
输出	实现类技能输出可运行前端代码；图像类技能只输出参考设计图，不出代码
语言 / 兼容	规则文件为英文，但对中文需求同样生效；框架无关，React / Vue / Svelte 均可
加载方式	支持 SKILL.md 的工具自动加载；也可直接复制文件内容粘进对话

🖥️ 环境要求

环境	建议配置
操作系统	Windows / macOS / Linux 均可，无差异
运行环境	Node.js 18 及以上（仅安装环节需要，用于跑 `npx`）
硬件	无特殊要求。它是纯文本规则文件，本地不跑任何模型，不吃 CPU / 内存
显卡 / 显存	完全不需要 GPU。算力消耗全在你原本用的 AI 编程工具那边
关键依赖	① skills CLI（由 `npx` 临时拉取，无需预装）；② 一个支持 SKILL.md 的 AI 编程工具

💡

装不上 Node 也不影响使用：直接把技能里的 SKILL.md 全文复制，粘贴进 Codex / ChatGPT 对话开头即可生效。

🚀 如何使用

💡

最省事的路径：装 Node → 一条命令装全部技能 → 写需求时点名用哪个技能，全程约 2 分钟。

确认 Node.js 环境

先检查本机 Node 版本，低于 18 或提示命令不存在，就去 Node.js 官网下载 LTS 版安装。

一条命令装全部技能

在你的项目根目录执行下面的命令，把仓库地址替换成 taste-skill 的 GitHub 地址即可（完整可复制命令见本页顶部「相关链接」折叠区，或在 GitHub 搜索 taste-skill 取地址）。 CLI 会扫描仓库 skills/ 目录，把 13 个技能一次性装好。

                        bash
                        npx skills add <taste-skill 仓库地址>
                    

✅

装完后技能会落到项目的技能目录里，支持 SKILL.md 的工具下次对话就会自动加载。

只装其中一个技能

不想全装，可以用 --skill 指定。注意这里要填的是安装名 （SKILL 文件头里的 name 字段），不是文件夹名，两者经常不一样。

                        bash
                        npx skills add <仓库地址> --skill "design-taste-frontend"
                    

常用技能与安装名对照：

安装名	作用
`design-taste-frontend`	默认主技能（v2 实验版），通用最稳，拿不准就用它
`design-taste-frontend-v1`	原版 v1，v2 改坏了你的效果时回退用
`gpt-taste`	GPT / Codex 专用，布局变化更大、动效更强、反套路更狠
`redesign-existing-projects`	改造已有项目：先审计 UI，再修布局、间距、层级
`high-end-visual-design`	高级感路线：柔和对比、大留白、高级字体、弹性动效
`minimalist-ui`	极简编辑风（Notion / Linear 那味）
`industrial-brutalist-ui`	粗野工业风：瑞士字体、硬对比、实验性排版
`full-output-enforcement`	治「写一半就偷懒」：强制完整输出，不留占位注释
`image-to-code`	图生代码：先出参考图，再分析，最后照着实现
`imagegen-frontend-web`	只出网页设计参考图，不出代码

调三档旋钮换风格

打开主技能的 SKILL.md，文件顶部有三个 1-10 的数值，直接改数字就能换风格，改完下次对话立刻生效。

参数	调低 ← → 调高
`DESIGN_VARIANCE`	布局实验度：低＝居中规整、安全；高＝非对称、现代、有设计感
`MOTION_INTENSITY`	动效强度：低＝仅悬停微交互；高＝滚动叙事、磁吸跟随
`VISUAL_DENSITY`	信息密度：低＝大留白展示页；高＝仪表盘式密集信息

⚠️

三档不是越高越好。落地页建议「变化高 / 动效中 / 密度低」，后台仪表盘反过来「变化低 / 动效低 / 密度高」。

结合 Codex 使用

Codex 用户建议直接上 gpt-taste 变体。装好之后，正常提需求即可， 在提示词里点名让它遵循这个技能，效果最稳定：

                        prompt
                        follow the gpt-taste skill：帮我做一个日志分析工具的落地页，
包含 Hero、核心能力、定价三个板块，深色主题
                    

如果你的工具不支持自动加载 SKILL.md（比如网页版 ChatGPT），就把 gpt-tasteskill/SKILL.md 全文复制，粘在对话最开头当系统提示用，效果一样。

✅

同一句提示词，装前是紫色渐变加 emoji 图标的模板脸，装后就是排版讲究、留白到位的作品集级页面。

🎯 典型应用场景

🌐

产品落地页

独立开发者做官网，不请设计师也能出发布级视觉

🔧

旧项目翻新

用 redesign 技能审计现有 UI，逐项修布局与间距

📊

后台仪表盘

密度调高，做信息密集但不杂乱的管理界面

🖼️

图生代码

先生成参考图确认方向，再让 AI 照着实现

🎭

品牌视觉板

brandkit 出 Logo 方向、配色、字体的整套识别板

📱

移动端界面

iOS / Android 页面与流程图，成套输出风格统一

📈 与同类方案对比

它不是模型也不跑推理，没有跑分可比，真正的差异在「约束方式」上：

方案	做法	局限
UI 组件库	提供现成组件直接拼	所有人拼出来长得一样，风格锁死
网页模板	套现成模板改文案	结构改不动，二次开发受限
手写提示词	每次对话临时描述审美要求	写不全、记不住，换个对话就打回原形
taste-skill	把设计规范固化成规则文件，模型每次自动加载并自查	规则为英文；v2 仍在实验迭代中

🧠

核心原理其实很朴素：AI 之所以生成「一眼 AI」的页面，是因为训练数据里那类套路化写法权重最高。这个技能做的事，就是把这些高频套路逐条列成黑名单显式禁掉，再给出字体、间距、动效的正向标准，把模型从默认路径上推开。

❓ 常见问题

Q: 它和 UI 组件库、网页模板到底什么区别？

组件库和模板给的是「成品零件」，谁用都一个样；它给的是「设计规范」，约束的是 AI 的决策过程，产出的代码结构完全由需求决定，每次都不重样。

Q: 支持哪些 AI 编程工具？

凡是支持 SKILL.md 机制的都行，包括 Codex、Cursor、Claude Code、Gemini CLI、OpenCode 等。不支持自动加载的工具（如网页版 ChatGPT），手动复制 SKILL.md 内容粘进对话也能用。

Q: 支持 React 以外的框架吗？

支持。作者明确说明规则针对的是设计意图而非某个框架的 API，React、Vue、Svelte 都适用。

Q: 中文项目能直接用吗？（最容易踩的坑，务必看完）

能用，但必须改一处，照抄默认规则做中文站会翻车。原因是它指定的 Satoshi、Cabinet Grotesk、Outfit、Geist 全是纯拉丁字体，压根没有中文字形。中文字符会掉进回退字体，然后连锁触发三个问题：

假粗：回退字体多半只有常规一档字重，规则里的 font-weight: 900 会被浏览器「合成加粗」，笔画糊成一团，小字号下尤其明显。
假斜：font-style: italic 同样被合成，把方块字整体切变一个角度——中文排版本来就没有斜体这回事，看着非常别扭。
字挤成坨：规则里的负字距（约 -0.045em）和 0.94 的紧凑行高都是拉丁排版惯例，套到等宽方块字上会直接粘连、上下行打架。

解法是在它的规则之上覆盖这一段，四个点缺一不可：

                css
                /* 1. 字体栈补一个有真实 200-900 字重的中文字体 */
font-family: Outfit, 'Noto Sans SC', sans-serif;

/* 2. 禁掉浏览器合成的假粗、假斜 */
font-synthesis: none;

/* 3. 中文标题行高放宽，别用拉丁那套 0.94 */
line-height: 1.16;

/* 4. 负字距收到 -0.01em 以内 */
letter-spacing: -0.01em;
            

⚠️

还有一条：需要视觉层次时改用「字重对比」，不要用斜体。比如副标题用 font-weight: 200 配合降低透明度，效果比假斜好得多。本页配套视频里的演示页面就是这么修的。

Q: 装完没效果 / AI 好像没读到怎么办？

三步排查：① 确认命令在项目根目录执行、技能文件确实生成了；② 重开一个对话（技能通常在会话开始时加载）；③ 在提示词里显式点名「follow the xxx skill」，这是最可靠的兜底做法。

Q: `--skill` 填了名字却报找不到？

大概率是填成了文件夹名。要填的是 SKILL 文件头里的 name 字段，比如文件夹叫 gpt-tasteskill，安装名却是 gpt-taste，两者不一致。对照上面的技能表填即可。

Q: 13 个技能该选哪个？

拿不准就用默认的 design-taste-frontend；用 Codex 换 gpt-taste；改老项目用 redesign-existing-projects；风格方向已经定了，再叠加极简 / 粗野 / 高级感那几个。不建议一次全塞，规则会互相打架。

Q: v2 是实验版，会不会不稳定？

作者标注 v2 为 experimental，仍在向 2.0 稳定版迭代。如果 v2 的结果不如原来，安装 design-taste-frontend-v1 回退到 v1 即可，安装名不冲突。

Q: 需要显卡吗？会不会很吃配置？

完全不需要。它只是几个文本规则文件，本地不做任何推理，算力开销全在你原本用的 AI 服务上，等于零额外成本。

Q: 会不会把我的代码传到外部？

不会。安装过程只是从 GitHub 拉取文本文件到本地，之后规则随对话一起交给你自己的 AI 工具，项目本身没有任何服务端。