前阵子我们参加了一个黑客松，做了一个 AI 狼人杀游戏 Wolfcha（猹杀）。上线之后挺多人反馈说我们的 UI 做得不错、挺成熟的，也有人不相信这是直接用 AI 设计出来的。
这期就分享一下我怎么用 AI 给游戏做 UI 设计和美术资源，分成三个点：整体 UI 的设计流程、图标库的选择、美术资源的生成方式。
整体 UI 的设计流程
先说模型选择。前阵子 Gemini 特别火，很多人用 Gemini 做出了好看的小应用。但如果你自己在 Cursor、Windsurf 这类 AI 编程工具里换上 Gemini，让它改动现有系统里的 UI，效果往往不尽如人意。
原因是 Gemini 不是一个很适合编程的模型，它的指令遵循性比较差。它是唯一一个我在 Cursor 里开 Plan 模式，还会不写文档直接改我代码的模型。但它的设计能力体现在单个文件上：让它做一个 HTML，它能设计得很好。很多博主演示的也就是写一个 HTML，跑通效果很惊艳，并没有做成一个体系化的大项目。
可以利用这个特点。我的做法是分两步：
- 先让 Gemini 像设计师一样，把设计稿生成为单个 HTML 文件。它只是一个设计存档，形式是代码，但作用是设计稿。
- 再切换到 Claude 或者 GPT 这类指令遵循性强的模型，把设计文件拖进对话，让它参考这个文件，把设计像素级同步到我的系统里。
项目里还留着两版当时生成的设计存档。这一版比较新，风格已经很精致，趋近我们现在的设计：
另外一版比较现代，我中途也考虑过做成这一版：
但狼人杀在大家的印象里还是偏童话、偏黑暗、带一点复古味道的，所以最终我选择基于深色这一版继续优化：不用那么复古，稍微清爽一些，没有那么厚重，再加上立绘。
设计稿定下来之后，就是第二步，把文件拖给指令遵循性强的模型，让它参考这个文件同步到系统里：
图标库的选择
很多人用 AI 写代码的时候不用图标库，直接拿 Emoji 表情当图标。想做出差异化，这些细节是要注意的。
我自己选的是 Phosphor，它的图标会比大部分图标库更精致一点，能从一些小细节上拉开整体 UI 设计的差距。
用 OpenCreator 批量生成角色立绘
游戏里的立绘是用图生图的方式做的，工具是 OpenCreator 的工作流。
头像的来源是 DiceBear 这个头像库，我们选了里面的 Notion 风格（Notionists）：
做法是先把一个头像拖进 OpenCreator 的项目里作为原图，然后连两条线：
- 原图连到一个 Text Generator 节点，让 AI 参考原图生成不同角色的生图提示词。我在节点里写的是：参考这张图片设计狼人杀不同角色的形象，整体风格与原图一致，以序号分割输出。这个节点我选的模型是 Gemini 3 Flash。
- Text Generator 的输出再连到 Text Splitter 节点，按序号把每个角色的提示词分割开。
- 分割后的提示词和原图一起连到 Image to Image 节点，批量生成不同角色的立绘。图生图的模型我选的是 Banana Pro。
执行之后就能一次性生成守卫、预言家、女巫、狼人、猎人这些角色的立绘，风格和原图保持一致：
这里还有一个小心得：我会在提示词里加一句「背景要绿色的」，这句提示词会和分割出来的角色提示词合并在一起。要绿色背景是为了方便把人物抠出来。
抠图我用的是鲜艺 AI 抠图，一个免费的桌面工具。之所以不用自动抠背景直接处理，是因为这些立绘接近线稿，比如狼身上的白色是要保留的，只抠掉背景，所以我自己生成绿色背景，再找现成的软件抠一下，对我来说比较方便。
其实 OpenCreator 里也有去除背景的功能，就是 Background Edit 节点里的 Remove BG。如果是产品图这类主体明确的图片，直接用 Remove BG 更方便，因为它就集成在工作流里面。
这个工具用来批量生成美术资源整体很方便：通过文本分割的方式批量生图，还可以同时选多个模型抽卡。我当时就是 Nano Banana 和 Banana Pro 两个一起抽卡，再选比较合适的留下。除了生成图片，生成视频的能力也有。
海报和 logo
我们比赛时做的海报和 logo 也是在 OpenCreator 上生成的。海报我导出的是 4K，加载有点慢，但成品确实很精致。
以上就是这期分享的全部内容，看完之后大家可以自己动手试一下。