Taste Skill 是什么：让 Claude Code 做出不像 AI 的前端页面，2.5 版怎么装、旧版去哪了

Taste Skill 是一个开源的 Agent 技能，目标是让 Claude Code、Codex 这类编程 AI 做出来的网页不再千篇一律。 它在 GitHub 上是 Leonxlnx/taste-skill，MIT 协议，2026-11-08 查看时约 11 万星，官网是 tasteskill.dev。

先说最容易踩的坑：网上大部分视频和教程讲的是旧版，也就是一个带三个 1–10 档调节项的 SKILL.md 文件。现在仓库默认装的是 2.5 版（11-07 发布的 2.5.1），已经是一整套脚本加真实浏览器检查，用法和旧版很不一样。旧版没有删，搬到了另一个仓库。

先分清版本

旧版的三个调节项是 DESIGN_VARIANCE（版式从居中规整到不对称）、MOTION_INTENSITY（动效从只有悬停到滚动驱动）和 VISUAL_DENSITY（从宽松到密集），写在文件开头，改数字就能调。

安装当前版本（2.5）

Claude Code 插件方式，在 Claude Code 里分两条发送：

/plugin marketplace add Leonxlnx/taste-skill

/plugin install taste-skill@taste-skill

技能会挂在 taste-skill: 命名空间下，不会和你已有的技能撞名。以后用 /plugin update 升级。

用 skills 命令行安装（安装时会问你装给哪个 AI 工具）：

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

已经装过旧的 design-taste-frontend？重新运行这条命令就会升级到 2.5，安装名没变。

Codex：

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

装完开一个新的 Codex 会话才会加载。

运行要求

• Node.js 22 或更高版本：技能里的工具都是 Node 脚本。
• Chrome、Edge 或 Chromium：检查脚本要在无头浏览器里打开页面。装在非标准位置的话，设置环境变量 CHROME_PATH。
• ffmpeg（可选）：用来输出 WebP 图片和裁手机版主图。
• 不需要任何 API Key，也不会往系统里装东西。自带的图片可以离线用；下载更多图片、Google Fonts 字体或品牌图标时要联网。

还要知道一点：2.5 版会在你的项目里运行脚本，并在 Claude Code 里注册一个 Stop 钩子（AI 想结束时先跑检查，没通过就继续改，最多三轮）。这和旧版纯文字规则不一样，用在重要项目上之前，最好先看一遍仓库里的脚本。

2.5 怎么用

直接让 AI 新建或改版一个公司网站就行，比如「给一家精品咖啡店做官网」。技能大致按这几步走：

1. 先给生意分类：软件、游戏、科技、实体产品、服务或场所，后面的配色、字体和效果都看这个分类。
2. 发配色、字体和首屏版式：脚本从素材库里按行业挑一套配色和 Google Fonts 字体组合，再从 11 种首屏版式里挑一种。
3. 用同一套样式起稿：每屏一个区块，左右边距一致，固定导航栏。
4. 放真实素材：软件和科技类用真实的产品界面片段和图标；咖啡店、酒店、商店这类用整理好的实拍照片（来自 Wikimedia Commons 等开放图库，并在页脚注明出处）。着色器和滚动特效只给软件、科技、游戏类页面。
5. 在真实浏览器里检查：按 1440、1024、768、390 等宽度渲染页面，查空白画面、对比度不足、列没对齐、占位文字、编造的门牌号等问题，有能修的问题就继续修，最多三轮。

它也能在已有的 React、Vue、Svelte、Astro 或 Tailwind 项目里按原技术栈做；Next.js 项目会做成静态导出。

想用旧版怎么装

旧版和各个风格变体都在 Leonxlnx/taste-skill-classics：

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

把 --skill 后面换成上面表格里的任意安装名；不带 --skill 就是全部七个都装。也可以用插件方式：/plugin marketplace add Leonxlnx/taste-skill-classics，再 /plugin install taste-skill-classics@taste-skill-classics。

旧版技能不会自动触发，要点名调用，比如在 Claude Code 里输入 /high-end-visual-design。

和官方 frontend-design 插件怎么选

Claude Code 官方插件市场里也有一个做前端设计的 frontend-design 插件（Anthropic 出品）。两者区别很明显：

只是想让 AI 写界面时少点「AI 味」，官方插件或 Taste Skill 旧版就够了，轻、不跑脚本。要一次做出能直接上线的完整官网，并且愿意多花时间让它在浏览器里反复检查，再用 2.5 版。

费用：会多用 Token 吗

会。2.5 版在交付前要跑检查、按结果修改，最多三轮，比直接写一版页面多出不少来回。具体多多少和页面复杂度有关，最准的办法是看自己的账单：用按 Token 计费的服务时，记下开始和结束时间，到账单里按时间段把这次建站的请求加起来。以 CCSub 为例，控制台「使用记录」里每条请求都有 Token 数和扣费。

和 API 服务的关系

Taste Skill 只改变 AI 怎么做页面，不碰你的 API 配置。不管 Claude Code 接的是官方账号还是第三方服务，装法和效果都一样。

还没配置好 Claude Code 的话，可以先看 Claude Code 接入教程；用 Codex 的看 Codex CLI 接入教程。