返回案例目录

CODEXGUIDE / 实战案例 03

用 HIAPI 中文图标 Skill,做一套真正统一的产品图标

单独做一枚图标不算难,难的是让一组图标看起来像同一套。主体大小、视角、材质和留白只要有一项没对齐,摆在一起就容易显得散。

codx编辑组发布于 最后验证 1,0894 分钟

单独做一枚图标不算难,难的是让一组图标看起来像同一套。主体大小、视角、材质和留白只要有一项没对齐,摆在一起就容易显得散。

这篇文章用 HIAPI 中文图标 Skill 走一遍完整流程:先确定风格和色板,再做 2×2 试稿,接着把同一张参照图交给三个模型,比较它们对图标语义、材质和体积感的处理。文中的提示词可以直接复制,再按你的产品改图标名称和颜色。

一、安装 Skill

在 Codex 终端中运行:

npx -y github:HiAPIAI/hiapi-icon-skills -y --codex

安装完成后重启 Codex,确认技能列表里已经出现 hiapi-icon-skills。如果没有看到,先检查安装命令是否报错,再确认 Skill 是否安装到了当前 Codex 使用的技能目录。

截图时不要带上 API Key、个人目录或账号信息。

二、先选方向,不急着出图

第一次对话没有直接生成图片,只让 Codex 从 Skill 中推荐风格和色板。

HIAPI 中文图标技能,我准备制作一套功能图标。帮我推荐一个适合中文风格的,顺便说明选择理由。

Codex 推荐的是“墨线跳色”风格和“薄荷清晨”色板。前者用水墨线条收住轮廓,后者以薄荷绿、雾蓝和杏色为主,适合中文产品界面的功能图标。

图一:Codex 推荐“墨线跳色”风格和“薄荷清晨”色板
图一:Codex 推荐“墨线跳色”风格和“薄荷清晨”色板

三、用 2×2 试稿验证整套风格

方向确定后,我让 Codex 先做搜索、消息、日历和云端四枚图标,并排成一张 2×2 的图。四个主体的轮廓差别很大,用来检查整套风格是否统一很合适。

就按这个方向来。先做搜索、消息、日历、云端这 4 个图标,排成一张 2×2 的图。四个图标要像同一套产品里的,主体大小、视角、材质、光线和留白统一。不要文字、字母、Logo、复杂背景。
图二:第一版已经保留了四个功能的语义,风格以线稿和浅色填充为主
图二:第一版已经保留了四个功能的语义,风格以线稿和浅色填充为主

四、同一张参照图,同时比较三个模型

第一版的内容和配色已经确定。接下来,我把这张图作为参照,同时调用三个模型生成更立体的 Q 版图标。三次生成使用同一张参照图和同一组要求,结果更方便比较。

参考这张图,把四个图标改成更 Q、更立体的 3D 风格,保持原来的 2×2 排版和薄荷绿配色。使用本地 HIAPI_API_KEY 调用 Nano-Banana-2、Seedream 5.0、GPT Image 2.0 生成模型,各生成一版方便选择。

截图中的实际模型 ID 是 seedream-5.0-pro/image-to-imagegpt-image-2/image-to-imagenano-banana-2。前两个模型保留了搜索、消息、日历和云端,Nano-Banana-2 却生成了钟表、灯泡、齿轮和星星,图标含义已经变了。

图三:同一张参照图、同一组要求下三个模型的结果,从上到下依次是 Seedream 5.0 Pro、GPT Image 2 和 Nano-Banana-2
图三:同一张参照图、同一组要求下三个模型的结果,从上到下依次是 Seedream 5.0 Pro、GPT Image 2 和 Nano-Banana-2

五、放大看两个可用候选

先看 Seedream 5.0 Pro。搜索、消息、日历和云端都没有被换掉,2×2 排版也与参照图一致。画面使用薄荷绿、白色和浅蓝色,四枚图标都有清晰的立体厚度和投影。

图四:Seedream 5.0 Pro 的单独结果,四个主体和原来的排版都保留下来了
图四:Seedream 5.0 Pro 的单独结果,四个主体和原来的排版都保留下来了

图五是 GPT Image 2 基于同一张参照图独立生成的结果,不是对图四的二次修改。它同样保留了四个图标的含义和位置,不过主体更大,圆角更明显,投影也更重。

图五:GPT Image 2 的单独结果,主体尺寸和投影与图四不同
图五:GPT Image 2 的单独结果,主体尺寸和投影与图四不同

这次对比最先要看的不是哪张更漂亮,而是模型有没有保留原来的四个功能。Nano-Banana-2 的画面也有 3D 效果,但内容已经不是搜索、消息、日历和云端,不能作为这一轮的候选,这也是用HIAPI的好处,一次性多模型多产出,选择更多不怕废片。

六、环境变量要这样处理

项目约定的环境变量名是 HIAPI_API_KEY,中间有下划线,不是 HIAPIAPIKEY

如果本地已经配置过 Key,可以让 Codex 只检查它是否存在:

我本地应该已经配置了 HIAPI_API_KEY。你只检查这个环境变量是否存在,不要输出 Key 的值,也不要创建付费任务。告诉我检查结果即可。

Windows PowerShell 临时设置示例:

$env:HIAPI_API_KEY = "你的 Key"

不要把真实 Key 截进图片、写进文章、提交到仓库,或放进公开的 .env 文件。环境变量存在,也不等于已经授权 Codex 调用付费接口。涉及外部计费时,先确认模型、预算和调用次数,再开始生成。

七、这套流程为什么更稳

这次测试的步骤很简单:先用 2×2 试稿确定图标内容,再把同一张参照图交给三个模型。因为输入条件相同,主体大小、投影和材质上的差别一眼就能看出来。挑选结果时先核对图标含义,确认没有跑题,再比较视觉效果。

如果你也想用这套流程做产品图标,可以先去 HIAPI 注册账号,再安装上面的中文图标 Skill。

HIAPI 中文图标 Skill 开源仓库:https://github.com/HiAPIAI/hiapi-icon-skills

相关链接

本文由 codx编辑组整理,最后验证于 2026-08-12。涉及模型、接口和产品能力的细节请以对应服务的最新说明为准。