AI 生成界面还在用 Emoji？这套 20 万图标库让 UI 瞬间专业起来

AI 生成界面还在用 Emoji？来试试这个图标神器

你们有没有发现，AI 生成的前端代码里，图标永远是个重灾区——要么是一堆花花绿绿的 Emoji，要么就是 placeholder 的 `

`，完全没有专业感。

之前我写过一期「让 AI 有设计品味」的 Skill 合集，里面提到一个工具叫 Better Icons。最近它更新得挺勤快，今天专门拿出来了聊聊。

200,000+ 图标，一个命令搞定

Better Icons 做的事情很简单直接——给 AI 编程 agent 装一个图标搜索大脑。

它接入了 150+ 图标库，包括我们熟知的 Lucide、Heroicons、Material Design、Font Awesome 等，一次搜索就能跨库比对。CLI 敲一行：

npx better-icons search arrow --limit 10

立刻返回一堆候选，附上各库对应的图标预览。找到想要的，npx better-icons get lucide:home > icon.svg 直接下载 SVG。

最实用的是它的 MCP server 模式——接进 Cursor、Claude Code、Windsurf 等主流 AI 编程工具后，agent 在生成代码时可以直接调用图标搜索工具，不再靠脑补。

为什么这个 Skill 值得装

• 终结 AI 乱用 Emoji：现在让 AI 写 UI，告诉它「用 Better Icons 找图标」，产出的界面瞬间正经了
• 节省 token：图标直接写入项目文件，而不是每次对话里粘贴 SVG 代码
• 多框架导出：支持 React、Vue、Svelte、原始 SVG，写什么技术栈都能用
• 自动记忆偏好：用久了会记住你偏好的图标库，搜索结果越来越准

适合谁用

如果你经常用 AI 写前端页面、SaaS 工具、或者内部管理系统，这个 Skill 基本上是必装级别。尤其对于那些「让 AI 帮我做个后台管理界面」的场景，图标规范了，整个界面看起来就专业多了。

设计师如果想给自己的 workflow 加一层 AI 自动化，也可以把这个接进 Claude Code，生成代码时直接出带图标的完整 UI。

快速上手

安装只要一行：

npx skills add better-auth/better-icons

然后按文档配置一下 MCP server，2 分钟搞定。

GitHub 链接我放末尾了，感兴趣的直接去看文档——确实是一个被低估的、设计感提升效果立竿见影的小工具。

⭐ GitHub：https://github.com/better-auth/better-icons

GitHub: https://github.com/better-auth/better-icons