做微信小游戏运营最怕的就是节日排期。春节要红金、端午要青绿、中秋要月白。设计师在 Figma/PSD 里调一版视觉稿开发就要根据新图一张一张替换资源、调布局、盯机型适配。一套节日 UI 换下来快则两三天慢则一周提审还可能因为资源尺寸对不上被打回。这种活干一次两次还能忍干十次八次就是纯粹的重复劳动而且越急越容易出错。这类重复劳动恰恰是 AI Agent 最擅长解决的。它的核心不是美术创意而是“把设计文件里的图层信息翻译成小游戏代码里能用的资源和样式”。只要把这条翻译管线标准化节日换肤就能从“改代码”变成“改配置”。这篇文章以 OpenAI Codex 为切入点结合微信小游戏 UI 换肤场景讲清楚四件事第一怎么让 Codex 读懂你的小游戏工程第二如何从 Figma/PSD 提取图层尺寸并生成美术资源第三如何实现一套配置驱动的 UI 一键换皮肤系统第四节日运营的落地流程和常见坑。文中代码和流程可以直接复制改造。1. 这篇文章真正要解决的问题先说判断微信小游戏 UI 换肤的瓶颈从来不是“美术设计”而是“资源翻译”和“配置联动”。设计稿里一个按钮有位置、尺寸、颜色、圆角、阴影、图标、不同状态下的切图。开发拿到手要手动从 Figma/PSD 里量尺寸、导出图片、规范命名、按设计稿数值写样式。这里的工作量大小取决于两件事设计文件是否规范图层命名是否清晰代码里 UI 样式是硬编码还是配置化。大多数小游戏项目这两条都不理想。于是每次节日活动都要重新走一遍“设计 → 切图 → 手动改样式 → 预览 → 调整”的循环。Codex 这类编码 Agent 能做的就是把循环里“切图、量尺寸、写样式”的机械部分拿掉让开发者把精力留在真正需要判断的地方。什么人最适合读这篇文章微信小游戏开发者尤其是 1 到 5 人的小团队没有专职 UI 开发负责游戏日常运营、节日活动的开发同学想尝试用 Coding Agent 接入真实项目但不知道怎么让 AI 理解工程规范的人。读完后你会得到一套可以落地的方案工程规范化、设计 Token 导出、皮肤配置、换肤管理器以及一套 Codex 任务模板。2. 核心概念从设计文件到游戏皮肤的全链路在进代码之前先把概念理清楚。这个概念体系是整套方案的基石不搞清楚后面很容易做成“表面换图、代码里写死”的半吊子方案。2.1 Codex 是什么能帮你做什么Codex 是 OpenAI 推出的编码 Agent。它不是普通的代码补全或聊天窗口而是一个能直接在你的终端、工作区里执行任务的智能体读取项目文件、编写代码、执行命令、查看运行结果然后继续修改直到任务完成。和传统“复制粘贴 AI 代码”最大的区别是Codex 有“工程上下文”。它能同时看到你的项目结构、配置文件、代码规范然后针对性地改代码。这意味着你不需要把整个页面代码贴给它只需要告诉它“在 pages/index 页面把主按钮改成从皮肤配置读取颜色”它就能自己找到对应文件、改掉、运行验证。在小游戏换肤场景里Codex 可以承担三类任务批量修改代码全局替换硬编码颜色、字号、资源路径为配置引用根据设计 Token 生成资源配置和 UI 代码编写脚本比如从 Figma 导出 JSON 生成主题配置、批量检查资源尺寸。2.2 “UI 一键换皮肤”的本质是配置化所谓“一键换皮肤”不是运行时去替换图片文件而是把 UI 的可变项抽成配置。一个皮肤配置通常包含四类内容颜色主色、辅色、背景色、文字色、资源按钮图、背景图、弹窗图、图标、文本样式标题字号、颜色、字重、布局差异某些节日版本可能调整按钮位置或间距。换皮肤就是在运行时切换这套配置页面通过事件监听重新渲染。配置可以打包下发也可以走远程配置。这样节日运营就变成了“新增一份配置 新增一套资源”的动作而不是“改一遍代码”的动作。这一层理解到位了才能明白为什么 AI 生成资源之后还需要一个皮肤运行时框架来承接。2.3 图层尺寸继承最容易忽略的关键点标题里提到的“继承图层的尺寸”是很多 AI 生成 UI 方案翻车的核心点。设计稿里一个按钮宽 300px、高 88px、圆角 44px。AI 如果只生成一个“看起来像”的按钮图片尺寸和设计稿不一致放到游戏里就会变形、压扁、对齐错乱。真正的做法是从设计文件的结构化数据里读出图层的绝对尺寸和位置然后把这些数值直接映射到代码的样式配置里。这个“继承”不是运行时继承而是“生成时继承”。AI 在生成资源或代码时必须读取设计文件中的 geometry 信息。这也是为什么设计文件规范比 AI 生成能力更重要——只要 Figma/PSD 的图层名和分组清晰AI 就能准确提取尺寸产出可用的资源否则再强的模型也只能靠猜。3. 环境准备与前置条件这一章列出实践本文方案需要准备的环境。具体版本以你项目实际情况为准重点看思路。3.1 工具链清单Node.js 环境微信小游戏构建普遍依赖 Node.js建议使用 LTS 版本微信开发者工具用于预览、调试和上传小游戏Codex CLIOpenAI 的终端编码 Agent安装方式以官方 README 为准设计文件Figma 设计稿或 PSD 源文件版本管理Git用于回滚 AI 产生的改动。安装 Codex CLI 的常见方式如下具体命令以官方文档为准# 全局安装 Codex CLI npm install -g openai/codex # 在项目目录启动 cd wechat-minigame-demo codex如果你的团队已经通过环境变量接入了第三方模型注意模型标识要与 Codex 环境兼容。从社区反馈看典型报错是the gpt-5.6-sol model is not supported when using codex with a...这通常是模型名配置错误导致改回 Codex 支持的默认模型即可。3.2 小游戏工程目录约定为了让 Codex 高效工作项目目录最好有明确约定。推荐结构wechat-minigame-demo/ ├── pages/ │ ├── index/ │ ├── guide/ │ └── shop/ ├── core/ │ ├── EventEmitter.js │ └── SkinManager.js ├── config/ │ └── skins/ ├── assets/ │ ├── default/ │ └── spring_festival/ ├── tools/ ├── game.js ├── app.js └── AGENTS.md这个结构把页面、公共能力、配置、资源分开AI 在改代码时能够快速定位不会被无意义的文件结构干扰。如果你的项目是 Unity 转小游戏或者 Cocos 转小游戏目录约定会不同但“配置与资源分离”的思路是通用的。4. 让 Codex 读懂微信小游戏工程很多团队用 AI 编程工具效果不好不是因为 AI 能力不行而是因为 AI 根本不了解项目约束。解决方式是在项目根目录放一个AGENTS.md把工程规范写清楚。Codex 在启动后会读取这个文件把它作为理解项目的第一手资料。4.1 编写 AGENTS.md 工程说明AGENTS.md本质上是一个“给 AI 看的 README”。它告诉 Codex 这个项目是什么、目录怎么组织、构建命令是什么、代码规范是什么。下面是一个示例# AGENTS.md ## 项目定位 微信小游戏项目原生 JavaScript 开发无第三方 UI 框架。 支持配置驱动的皮肤系统节日换肤通过切换皮肤配置实现。 ## 目录结构 - pages/ 页面逻辑和模板 - core/ 公共能力事件总线、皮肤管理 - config/skins/ 皮肤配置每个皮肤一个 JSON 文件 - assets/ 美术资源按皮肤分类目录存放 ## 开发规范 - 页面颜色、字号、间距必须从皮肤配置读取禁止硬编码 - 新增皮肤时在 config/skins 目录添加 JSON 配置并注册到 SkinManager - 资源路径必须与配置中的 assets 字段一致 ## 常用命令 - npm run dev 本地开发 - npm run build 构建上传包 ## 注意 - 修改 UI 样式之前先确认对应页面是否已经接入皮肤系统 - 所有资源必须经过尺寸检查避免缩放变形Codex 读到这份文件后才能理解“为什么这个项目的页面代码里有 theme.xxx 这样的写法”也才能在你没有逐条解释的情况下按项目既有的方式产出代码。4.2 用 Codex 完成第一个 UI 改动假设你还没有接入皮肤系统想让 Codex 把pages/index里的主按钮颜色改为从皮肤配置读取。可以在 Codex 交互模式里输入codex然后在对话中描述任务pages/index 页面的主按钮目前使用硬编码颜色 #FF6B35。 请将它改为从皮肤配置读取 colors.primary。 如果页面还没有引入 SkinManager请先改造成使用皮肤系统的方式。 改动完成后运行构建命令验证无报错。Codex 会读取pages/index相关文件找到颜色值引入core/SkinManager.js修改模板中的样式绑定然后运行构建验证。如果发现页面还有其它硬编码颜色它通常会顺手列出来甚至直接询问是否一并处理。这些改动建议在 Git 分支上进行便于 Review 和回滚。5. 从 Figma/PSD 到游戏资源AI 生成与尺寸继承落地这一章是“AI 一键生成美术资源”的核心也是很多人最容易做成“只是生成一张图”的环节。实际上真正的关键是让 AI 从设计文件中读取结构化数据而不是让它凭空画图。5.1 设计文件的图层规范Figma 和 PSD 本质上都是图层对象的集合每个图层有名字、类型、绝对坐标、尺寸、填充色等信息。AI 能从设计文件“继承图层尺寸”的前提是图层具备可解析的命名。建议设计团队遵守以下约定图层名前缀类型用途color_颜色提取为颜色 Tokenbtn_按钮提取按钮尺寸生成切图bg_背景提取页面背景尺寸icon_图标提取图标资源button组件可复用组件提取到公共目录此外建议设计基准使用 750x1334 或 750x1624 这类常见小游戏画布方便尺寸换算。如果项目已有设计规范可以在此基础上增加一套“AI 可读”的命名规则不必推倒重来。5.2 导出设计 TokenFigma 可以通过插件或 API 导出 JSONPSD 可以通过脚本导出图层数据。导出的数据包含图层的绝对位置、尺寸、颜色值。下面是一个用 Node.js 将 Figma 导出 JSON 转换为主题 Token 的示例脚本// 文件路径tools/exportTokens.js const fs require(fs); function parseFigmaExport(filePath) { const data JSON.parse(fs.readFileSync(filePath, utf8)); const tokens { colors: {}, sizes: {}, assets: [] }; function walk(node) { if (!node || !node.name) return; const name node.name; // 颜色 Token图层名以 color_ 开头 if (node.fills node.fills.length 0) { const solidFill node.fills.find((fill) fill.type SOLID); if (solidFill name.startsWith(color_)) { const { r, g, b } solidFill.color; const alpha solidFill.opacity ! undefined ? solidFill.opacity : 1; tokens.colors[name] rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha}); } } // 尺寸 Token图层名以 btn_ 或 bg_ 开头继承图层的宽高 if (node.absoluteBoundingBox) { if (name.startsWith(btn_) || name.startsWith(bg_)) { tokens.sizes[name] { width: Math.round(node.absoluteBoundingBox.width), height: Math.round(node.absoluteBoundingBox.height) }; } } // 需要导出的资源 if ((name.startsWith(btn_) || name.startsWith(icon_)) node.type ! FRAME) { tokens.assets.push(name); } if (node.children) { node.children.forEach(walk); } } walk(data.document || data); return tokens; } const inputPath process.argv[2] || ./design/figma_export.json; const outputPath process.argv[3] || ./config/skin_tokens.json; const tokens parseFigmaExport(inputPath); fs.writeFileSync(outputPath, JSON.stringify(tokens, null, 2)); console.log(Token 已生成${outputPath});这段脚本的关键逻辑是遍历设计 JSON 的图层树凡是以color_开头的图层提取填充色凡是以btn_、bg_开头的图层提取absoluteBoundingBox中的宽高。这就是“继承图层的尺寸”在工程上的落地实现。PSD 的解析思路与 Figma 一致只是读取途径换成 Photoshop 脚本或第三方解析库最终产出的 Token 结构可以完全复用。5.3 Codex 生成资源映射与替换脚本拿到 Token JSON接下来可以让 Codex 生成资源映射和替换逻辑。例如从skin_tokens.json自动生成一份皮肤配置把btn_primary映射到assets/spring_festival/btn_primary.png。你可以给 Codex 一条这样的任务根据 config/skin_tokens.json 生成 config/skins/spring_festival.json 资源路径统一使用 assets/spring_festival/ 前缀。 颜色值直接使用 tokens 中提取的值。 生成后检查每个资源文件是否存在于 assets/spring_festival/ 目录。Codex 可以读取 Token 文件生成皮肤配置并校验资源是否存在。这一环节的价值在于不再需要人工一条条对照设计稿写配置AI 已经把“设计稿数据 → 可用配置”的翻译工作承担了。人工只需要检查配置里有没有命名