Taste Skill 使用教程：在 Codex 和 Claude Code 里怎么用。

Taste Skill 是最出名的「去 AI 味」设计 skill，用来让 AI 做的网站不再千篇一律。2026 年 11 月 4 日发布的 2.5 版是一次彻底重写，专门做公司官网和营销网站。这篇教程讲它需要什么环境、怎么在 Codex 和 Claude Code 里安装、一次构建是怎么进行的，以及怎么用好它。

更新于 2026年11月6日 · 阅读约 7 分钟

Taste Skill 2.5 做什么

Taste Skill 是 Leonxlnx 开发的开源 skill（MIT 协议），安装名是 design-taste-frontend。2.5 版做出来的公司官网有这些固定特点：文案朴素、只用一套设计系统、每屏一个区块、左右边距相等、用真实照片、真实品牌图标和真实的产品界面。着色器特效和滚动场景只留给软件、科技和游戏类页面。交付之前，检查器会在真实浏览器里把每个页面检查一遍。

需要的环境

Node.js 22 或更高版本。
Chrome、Edge 或 Chromium。 如果装在不常见的位置，设置 CHROME_PATH。
可选：ffmpeg，用于输出 WebP 照片和首屏照片的手机版裁切。

它不会安装任何东西，也不需要 API key。自带的照片离线可用；下载额外的照片、字体或图标需要联网。

安装

Codex：

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

装好后开一个新的 Codex 会话，skill 才会加载。

Claude Code：

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

在 Claude Code 里这个 skill 的命名空间是 taste-skill:。以后用 /plugin update 升级。

支持 npx skills 命令的其他 agent：

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

装过旧版本？再运行一次同样的安装命令就行，安装名没有变。

用它做一个页面

让 agent 做或者改版一个公司官网就行。skill 会自动加载，把自带的素材复制进你的项目，并从它的起始页面开始做。尽量给它真实的素材，因为这个 skill 的核心就是「有内容」：名字、业务是什么、真实的数字、营业时间，有照片的话也一起给。

给公司官网写需求

为[Ostra，一家里斯本只有 24 个座位的小海鲜酒吧]做官网。营业时间是[周二到周六，晚上 6 点到午夜]，菜单[每天根据早上的渔获更换]，订座通过[电话和 Instagram]。用 Taste Skill 先一屏一屏地规划页面，再写代码，交付前运行它的检查器。

每次构建都按同样的步骤进行：

判断业务类型：软件、游戏、科技、实体产品、服务或场所，然后一屏一屏地规划页面。
发配 token 和版式：脚本按页面类型发一套配色和 Google Fonts 字体搭配，再从 11 种测试过的首屏版式里发一种。
从一套系统开始：桌面端（1440×900）每屏一个区块，左右边距相等，固定导航栏，结尾是一屏的页脚。
展示真实的东西：软件和科技类页面用产品界面片段和示意图；场所、店铺和服务类页面用精选的、带署名的照片。
特效只给科技和游戏：咖啡馆、酒店、店铺、工作室和服务类页面不用 WebGL，也不用滚动特效。
在真实浏览器里检查：在 1440、1024、768 和 390 像素四种宽度下检查，找出空白的视觉区、对比度不够、列没对齐、占位文字等问题。

要改版已有的页面，也一样直接说。skill 会先在浏览器里检查当前页面，再开始修改。

自己运行它的工具

所有工具都是 skill 文件夹里的普通 Node 脚本。有两个值得知道：

# 为某类页面发一套配色和字体搭配
node scripts/start.mjs deal --page software

# 按规则检查做好的页面（网址或文件）
node scripts/consistency.mjs <url or file> --page software

检查器会对每条规则输出 PASS、WARN 或 FAIL，想知道页面为什么还是不对劲，跑一下就清楚了。

其他 Taste skill 去哪了

这个仓库现在只有一个 skill。以前的风格 skill（high-end-visual-design、minimalist-ui、industrial-brutalist-ui、gpt-taste、stitch-design-taste）移到了 Leonxlnx/taste-skill-classics；先出图的 skill（imagegen-frontend-web、imagegen-frontend-mobile、brandkit、image-to-code）移到了 Leonxlnx/imagegen-skills。安装名都没变：

npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"

什么时候该换别的工具

手机 App 和后台。 2.5 版是为网站设计的。做 App 界面，可以看 Impeccable 和 UI UX Pro Max，或者从我们设计系统库里的 App 设计系统开始。
已经有品牌规范。 Taste Skill 会自己发配色和字体。如果你的品牌已经有了，写进 DESIGN.md，并告诉 agent 保持不变。
想在几个方向之间挑。 每次构建只发一套配色、一组字体和一种首屏版式。想比较几种风格，就让它把第一屏做两三个版本，并排看一看。

常见问题

Taste Skill 收费吗？

不收费。它是 MIT 协议的开源项目。作者还推出了 TasteCode，一个免费开源的桌面应用，内置这个 skill 和一个设计 agent。

Taste Skill 支持 React 或 Next.js 吗？

支持。可以直接用它做出的纯 HTML，也可以让 agent 把同样的 token、区块版式和检查规则移植到 React、Next.js、Vue、Svelte、Astro 或 Tailwind 里。

Taste Skill 为什么需要 Chrome？

它的检查器要用无头 Chrome 在四种宽度下渲染每个页面，实际检查对比度、对齐等规则，而不是只看代码。