CODEXGUIDE / 实战案例 03
用 HIAPI 中文图标 Skill,做一套真正统一的产品图标
单独做一枚图标不算难,难的是让一组图标看起来像同一套。主体大小、视角、材质和留白只要有一项没对齐,摆在一起就容易显得散。
单独做一枚图标不算难,难的是让一组图标看起来像同一套。主体大小、视角、材质和留白只要有一项没对齐,摆在一起就容易显得散。
这篇文章用 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 推荐的是“墨线跳色”风格和“薄荷清晨”色板。前者用水墨线条收住轮廓,后者以薄荷绿、雾蓝和杏色为主,适合中文产品界面的功能图标。

三、用 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-image、gpt-image-2/image-to-image 和 nano-banana-2。前两个模型保留了搜索、消息、日历和云端,Nano-Banana-2 却生成了钟表、灯泡、齿轮和星星,图标含义已经变了。

五、放大看两个可用候选
先看 Seedream 5.0 Pro。搜索、消息、日历和云端都没有被换掉,2×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