上一篇说，图标不一致的根子是没有约束。这篇推荐解决它的工具：better-icons。

它的思路很简单：图标不靠 Codex 猜，靠一个统一的库去查。查得到就用，查不到就换关键词，而不是随手造一个路径。

这个 skill 管的是图标来源

better-icons 连接 Iconify 的 200 多个图标库，常用的有 lucide、mdi、heroicons、tabler 这些。它提供两件事：检索图标、拿回 SVG。

检索和获取是两个命令。一个负责“有哪些图标可用”，一个负责“把这个图标的内容取回来”。

better-icons search arrow --limit 10
better-icons get lucide:home > icon.svg

图标用 库前缀:名称 来定位，比如 lucide:home、mdi:delete。有了这个统一格式，Codex 写图标时先搜索、再取 SVG，路径就不会再靠猜。

先固定图标库，再让 Codex 动手

用这个工具之前，我建议先定一件事：项目用哪个图标库。统一用 lucide 还是 heroicons，直接影响页面整体风格。

固定图标库的意义，比选哪个库本身更大。一个页面一个库，视觉自然统一；混着用两三个库，即使每个图标都标准，风格还是花的。

给 Codex 的约束可以写成一句：图标统一从指定库检索，缺的图标换关键词找同类，不许用 emoji 替代。有了这句，它就不会在写页面时随手发挥。

和 Codex 配合的几条具体用法

检索到的图标可以批量取回。想找一个动作的多个候选，可以先搜再看结果：

better-icons search check -d ./my-icons

这条命令会把搜索结果直接下载成 SVG 文件到目录里。Codex 需要哪个就用哪个，不用一个一个手抄。

还有一个用法对存量项目很有用：盘点项目里已有的图标。

better-icons scan_project_icons

通过 MCP 提供的 scan_project_icons，可以把项目里用到的图标列出来。改图标之前先盘点，能看出当前用的什么库、命名乱不乱，而不是凭印象猜。

这几条命令组合起来，图标的来源、风格、命名都有了可查的依据，Codex 的“猜”就变成了“查”。

验收时查这几样

交付前，让 Codex 或自己对照检查：页面里有没有 emoji 当图标；图标是不是统一来自同一个库；引用的图标路径和名称是否存在；同一个动作在不同页面用的是不是同一个图标。

这几项都能静态查。路径对不对、库里有没有这个图标，better-icons 的检索结果一对照就知道。不需要打开页面猜。

使用前提和边界

用之前有一个前提：better-icons 的 CLI 要先装好，比如全局安装 npm install -g better-icons，或者每次用 npx better-icons 代替。这一步没做，命令是跑不起来的。

它的边界也要说清楚。better-icons 管图标从哪来、怎么保持一致，不管图标本身长什么样、配色怎么定。设计层面的事，还是回到项目规范和 ui-ux-pro-max 那套规则。工具解决来源，规则解决选择。

下一篇会推荐一个范围更大的辅助 skill，负责 Java 后台那一侧，让 Codex 写接口和业务代码时也有一致的结构约束。

本系列持续更新。推荐每个 skill 时，都回答同一组问题：它补哪类质量、和 Codex 怎么配合、边界在哪。