这个页面 Codex 已经能做出来。
但你看截图时，可以重点看图标，粗的细的面性的...会感觉有点乱。
不指定图标库时，AI 一般会默认用 Lucide 图标库。不是说它丑，但会让页面一眼有「AI 生成」的味道，就像Ai同样喜欢生成蓝紫色渐变的页面。
同样的页面，只是统一了图标，精致感就会上一个台阶。
这件事可以分两种情况：还没生成页面时，先把图标规则写进去；页面已经生成后，再用一条 prompt 把图标统一回来。
如果你还没开始生成页面，可以把规则直接写进主 prompt 里：
图标使用要求
界面中的图标默认使用 [Hugeicons] 图标库：
[https://hugeicons.com]
请优先选择与参考图含义和视觉风格最接近的图标。
如 [Hugeicons] 中没有完全匹配的图标，可以选择语义接近、风格一致的替代图标，但需要保持整体图标线宽、圆角和视觉统一性。
这就是最常用的调用方式。
核心不是让 Codex「推荐图标」，而是提前告诉它：图标从哪里选、怎么替代、线宽圆角和颜色要怎么统一。
如果页面已经生成好了，可以直接补这一句：
请检查当前 Dashboard 页面里的所有图标。
统一改成 [Hugeicons] 图标库，请优先从 [https://hugeicons.com/] 里选择语义最接近的图标。
所有图标保持线性风格，尺寸按使用场景统一：导航图标约 20px，数据卡片图标约 24px，消息提醒图标约 16px。
图标颜色跟随文字或卡片主色，不要混用其他图标库，也不要手写 raw SVG。
这一步做完，页面的变化会更明显。
图标会被拉回同一套视觉语言里。线条、圆角、粗细都统一以后，页面会少很多临时拼的感觉。
如果企业有自己的图标库，可以这么用：
帮我安装 @our-company/icons，这个项目所有导航和按钮图标都使用公司图标库。请从包里引入 React 组件，不要临时手写 SVG。
最后小一句话：别让 AI 自己猜图标。
你给它一个图标库、一条选择规则、一组样式约束，它做出来的页面就会少很多临时拼的味道。
选图标库时，不要只看数量多不多。
如果你真的在意外观，我建议先避开两个“坑”。
选图标库时，不要只看数量多不多。
如果你真的在意外观，我建议先避开两个“坑”。
它确实轻、稳、好调用，和 Shadcn UI、Tailwind 这些 AI 常用组合也很顺，所以模型特别爱用。
但也正因为太常见，那种细线、圆角、默认尺寸组合已经很容易被识别成「AI 默认图标」。如果你想要你的图标有特色一点，我不建议选它。
它把很多流行图标库都封装在一起，选择面很大。
问题是，AI 一旦从大集合里自由挑，可能这个来自 Feather，那个来自 Material，另一个来自 Font Awesome。语义对了，视觉语言却散了。
我的建议是：先选一个主风格库，再允许 AI 在找不到时做语义接近的替代，但必须保持线宽、圆角和视觉统一。
如果你想找一个覆盖面广、视觉质量也比较稳的图标库，Hugeicons 是很适合先试的一套。
它的优势是场景覆盖比较全，风格也适合拿来做完整界面：Dashboard、SaaS、产品官网、移动端页面，都比较容易找到合适的图标。
Tabler 的优势是数量多。
做 ERP、数据平台、管理后台时，菜单经常一排十几个：订单、库存、客户、财务、权限、日志、工单……这时候大多数小型图标库会不够用，Tabler 更容易补上。
它个性不算强，但很适合「东西很多、还要整齐」的项目。
Phosphor 比较适合你想控制视觉层级的时候。
同一个图标有 Thin、Light、Regular、Bold、Fill、Duotone 等版本。比如普通状态用 Regular，重点入口用 Fill，空状态插画旁边用 Duotone，页面会有更细的层次。
这种库适合有一点设计控制欲的人。你愿意多说几句规则，它回报你的细节也更多。
Radix Icons 数量不算最多，但它在小尺寸 UI 里很舒服。
按钮、弹窗、表单、Dropdown、Toast 这种组件里，图标太花反而烦。Radix 的 15×15 网格很规整，适合做设计系统里的小图标。
如果你的项目偏组件库、B 端工具、内部系统，它会比很多大而全的库更稳。
补充选择：Remix Icon / Material Symbols / Feather
Remix Icon 很中性，适合企业工具、内容平台、通用 Web 产品，所有图标均免费供个人和商业使用。
Material Symbols 更适合 Google / Android / Material Design 体系，普通项目不要为了「看起来专业」硬上，参数太多会增加控制成本。
Feather 很经典，也很干净，但数量相对少一点。它和 Lucide 的视觉气质很接近，如果你已经觉得 Lucide 有 AI 味，Feather 也要谨慎使用。
在 Figma 社区 找个图标库，或者把自己画的图标整理成组件页，顺手把名字改成 icon-home、icon-message 这种语义名称。
把这一页要用的图标放到同一个 frame 或组件区里，别让 Codex 在一堆图层里乱找。
把 Figma 链接交给 Codex 的 Figma 插件，并补一句：
[figma链接] 请优先使用这个 Figma 图标区里的图标。如果没有完全匹配的图标，可以选择语义接近、风格一致的替代图标。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
