Leonxlnx 怎么安装：taste-skill 的 3 种装法
Leonxlnx 的 taste-skill 可让 AI 编程代理生成更有设计感的界面。
先厘清名称：Leonxlnx 是作者的用户名，不是单独下载的软件；与它关联、可直接安装的是 taste-skill，一套给 AI 编程代理使用的前端设计规则。截至 2026-11-01 抓取，Leonxlnx 的 GitHub 赞助页显示，taste-skill 已超过 10 万颗星；这也是现在值得安装的原因：它已经形成独立生态，并提供 Claude Code、Codex 和通用 Agent Skills 三条安装路径。
3 种装法怎么选
taste-skill 可以理解为“给 AI 编程代理增加审美检查表”：它不是前端框架，也不是新的模型，而是在代理生成页面前加入美术指导、参考图和浏览器检查。
| 安装方式 | 适合谁 | 运行前提 | 后续更新 |
|---|---|---|---|
| 通用 Skills CLI | 想在多个支持 Agent Skills 的工具中使用 | Node.js 22+、Chrome、Edge 或 Chromium | 再次运行安装命令 |
| Claude Code 插件 | 日常主要使用 Claude Code | Claude Code 可执行 /plugin 命令 |
/plugin update |
| Codex 插件 | 日常主要使用 Codex | Codex 支持插件市场命令 | 重新执行插件安装命令 |
选择原则很简单：只装一个工具就选对应插件；准备在多个工具里复用，选通用 Skills CLI。Claude Code 方案会把技能命名为 taste-skill:，Codex 方案则直接安装 taste-skill@taste-skill。
需要注意，一份 2026 年 7 月发布的上手指南称默认安装的是 v2 experimental，并提供旧版 design-taste-frontend-v1；但 2026 年 10 月捕获的安装页已经改用更短的安装名 design-taste-frontend。这里应按安装入口给出的名称操作，不要自行把旧版名称套到新版目录上。
通用 Skills CLI：一次装到支持的工具
通用安装命令来自仓库的 Skills CLI 安装入口。运行前准备 Node.js 22 或更高版本，并安装 Chrome、Edge 或 Chromium；该技能运行脚本时需要浏览器，但不需要 API Key。只有查找参考图片时需要网络连接。
在终端执行：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"这条命令只安装 design-taste-frontend，不会把仓库中的全部技能都塞进配置目录，适合先试用单个前端设计技能。若你确实想安装仓库提供的全部技能，可以改为：
npx skills add https://github.com/Leonxlnx/taste-skill这里不要把“全量安装”和“指定技能”当成两条不同的安装机制：前者不限制技能名，后者明确指定 design-taste-frontend。已经安装过也可以重新执行安装命令；安装名没有变化时，它用于补装或更新现有技能。
Claude Code 插件：在会话内完成安装
Claude Code 用户不需要先执行通用 CLI 命令，直接在 Claude Code 会话中依次运行：
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill第一条命令把 Leonxlnx 的 taste-skill 仓库添加为插件市场来源，第二条命令从该市场中安装技能。安装后，技能名称带有 taste-skill: 命名空间，因此不会覆盖 Claude Code 中已有的其他技能。
以后更新时，在 Claude Code 中执行：
/plugin update这条路径适合已经把 Claude Code 当作主力开发环境的人。需要注意，插件命令必须在 Claude Code 会话里输入，不是普通系统终端命令；这也是它与通用 npx skills add 最容易混淆的地方。
Codex 插件：安装后新开会话
Codex 用户在 Codex 环境中依次执行：
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill这与 Claude Code 的操作结构相同，区别只是调用 Codex 自己的插件市场命令。不要把 codex plugin ... 粘贴到 Claude Code，也不要把 /plugin ... 粘贴到普通终端。
安装完成后，需要新开一个 Codex 会话，让 Codex 重新加载技能。仅仅回到旧会话继续操作，不应作为插件已经加载成功的判断依据。
如果同时使用 Claude Code 和 Codex，通用 Skills CLI 更省事：先执行一次完整安装，再分别确认两个工具能否识别技能。若某个工具未识别，再针对该工具补装插件，不必一开始就把仓库全部内容复制进多个目录。
安装前后的实际卡点
卡点一：/plugin 装不上。 官方 README 的顺序是先加市场、再装技能——先单独执行 /plugin marketplace add Leonxlnx/taste-skill 看输出是否成功，成功后再跑 /plugin install。技能的命名空间是 taste-skill:，不会与你已有的 skills 撞名；装完要新开会话才会加载。若提示找不到技能，多半是市场没加成功，而不是技能包缺失——重跑 add、看它的回显，比反复 install 有用。
卡点二：浏览器检测跑不起来。 该技能的检查要求系统已安装 Chrome、Edge 或 Chromium 之一（官方 README 原话：it needs an installed Chrome, Edge or Chromium），找参考图还需要联网。它不安装任何东西、也不需要 API Key——所以报”找不到浏览器”时，解法是装浏览器，而不是在技能里翻配置项；离线环境则会卡在取图那一步。
卡点三：检测多轮仍判不合格。 浏览器检查会在三种宽度下看页面，把”俗气”的布局判失败，并读取自己的截图、最多自动修三轮。多轮之后仍失败时，先逐条看它列出的截图问题（间距、对比、字体层级），针对性改一条再跑，比整体重跑效率高得多。
卡点四：GitHub 登录态提示（与安装无关）。 若你在 Sponsors 页看到 You must be logged in... 或 signed in with another tab...，那是浏览器会话问题——刷新或换个标签页登录即可，别把它当成 taste-skill 安装失败。
怎么确认已经装好
通用 Skills CLI 装完后，在支持它的工具里列一次技能列表，确认 出现；Claude Code 插件装完则新开会话，输入 前缀看补全是否弹出——两条路的验证动作不同，别拿插件的验证方式去检查 CLI 装的那份。
通用 CLI 和插件方案的成功标志不同：
- 通用 Skills CLI：安装命令正常结束，目标工具重新启动后能够识别
design-taste-frontend。 - Claude Code：插件安装完成，后续执行
/plugin update时能够更新taste-skill。 - Codex：安装后新开会话，Codex 能够加载
taste-skill@taste-skill。
再做一个低风险验证：让代理创建一个简单的前端页面，并要求它在生成过程中执行 taste-skill 的设计检查。浏览器自检需要 Chrome、Edge 或 Chromium；如果生成正常但图片检索失败，优先检查网络，因为图片查找是明确需要联网的功能。
来源与官方入口
本文的安装命令和版本要求以实际捕获的安装页为准，项目仓库、作者主页及登录入口如下：
评论区
登录后可评论。