近期帮团队梳理小游戏节日运营方案时发现很多同学都在问同一个问题主界面美术资源能不能像换主题皮肤一样一键切换春节一套图、中秋一套图、周年庆再来一套图如果每次都要开发手工替换图片、重新调坐标不仅效率低还容易改出 bug。这篇文章把整套思路整理出来从 Figma/PSD 原文件读取图层尺寸用 AI 辅助生成节日资源再配合 Codex 编写换肤管理器让微信小游戏在运行期动态加载皮肤配置实现“继承图层尺寸”的数据驱动换肤。内容偏工程实践适合已经能跑通小游戏项目、想做运营提效的开发者。1. 背景与核心概念1.1 为什么“UI 一键换肤”会成为小游戏运营刚需小游戏和 App 有一个明显区别生命周期更短、运营节点更密。春节、五一、暑期、中秋、国庆、双十一几乎每个节点都要换一套主界面视觉。传统做法是美术按节日重新设计主界面导出 PNG。开发手动替换图片资源。再次人工核对尺寸、位置、对齐。提审发布等审核。这套流程最大的问题是“开发被 UI 绑定”。只要美术图变代码就要动。遇到跨部门协作时设计师、开发、运营三方还要反复对齐“这张图放哪、多大”。真正高效的方案是把视觉资源变成一份份“主题配置”让游戏运行期根据节日加载对应配置自动完成图片替换、尺寸调整和坐标定位。1.2 Codex 与 AI 在游戏 UI 链路中的位置Codex 是 OpenAI 推出的 AI 编程助手可以理解为“能帮你写代码、改代码、解释代码”的终端级编程搭档。近几年 AI 编程工具发展很快Codex 在不同版本里的安装方式、配置方式都有调整但核心工作流基本相同用自然语言描述需求让 AI 生成完整代码再把 AI 输出和人工 review 结合。在我们这条链路里Codex 可以承担三类工作写 Figma API 导出脚本。写 PSD 图层解析脚本。写小游戏换肤管理器。AI 图像生成则负责美术资源侧把原始设计稿作为参考生成节日版本的背景、按钮皮肤、ICON 变体再通过脚本自动对齐到设计稿里的图层尺寸最终输出到小游戏资源目录。1.3 什么是“继承图层的尺寸”这里先解释一个容易混淆的概念“继承图层尺寸”不是面向对象里的继承而是指设计稿里某个图层的宽度、高度、位置信息通过脚本自动传递到游戏运行时环境中。举个例子设计师在 Figma 里画了一个开始按钮按钮宽 320、高 120中心点距离画布左侧 507px、顶部 560px。传统开发流程里开发要肉眼读出这些数字再手写到代码里。换成“继承图层尺寸”的流程后脚本会直接读取absoluteBoundingBox字段生成一份 JSON 配置游戏运行时读取 JSON 后自动setContentSize(320, 120)和setPosition(507, 560)。这样做的好处很明显设计稿只要更新导出配置跟着更新游戏端代码不需要跟着改。2. 环境准备与版本说明2.1 微信小游戏开发环境先明确环境基础微信开发者工具建议使用最新稳定版老版本可能缺少新接口。小游戏项目不是小程序的 Page/Component 结构而是从game.js启动。游戏引擎本文代码示例以 Cocos Creator 3.x TypeScript 为例。逻辑同样可以迁移到 Laya、Unity 导出项目或原生 Canvas 渲染。版本方面需要说明一下微信小游戏的小程序基础库版本更新很快Cocos Creator 3.x 的 API 在不同小版本里也有差异。本文不会把某一版本写死每次使用 API 时会提醒“以你当前项目版本的 API 文档为准”。2.2 Codex 安装与模型配置Codex 的安装方式在不同阶段不一样。常见的方式是使用 npm 全局安装npm install -g openai/codex安装后检查版本codex --version第一次使用时需要登录或配置 API Key。具体流程以官方说明为准。如果你使用的是支持自定义模型提供方的 Codex 版本可以在配置里指定base_url、api_key、model等字段。不同版本配置字段不完全一致可以使用下面的命令查看当前支持的配置项codex --help如果你看到类似cc switch local proxy failed while handling codex endpoint /responses. provider...的报错通常和本地网络代理、请求出口配置有关可以先关闭多余代理、检查系统环境变量后再重试。这个问题会在第 8 章详细展开。2.3 设计文件导出环境Figma 侧需要准备Figma 文件地址中的FILE_KEY。个人访问 Token在 Figma 账号设置里生成。Node.js 18 运行导出脚本。PSD 侧需要准备Node.js 环境。psd.js解析库。或 Photoshop 自带脚本扩展。AI 图像生成侧你只需要准备接入的 API Client具体品牌本文不绑定思路通用。3. 换肤数据契约让设计稿尺寸直接进入游戏3.1 主题配置 JSON 设计“一键换肤”的关键不是写一段替换图片的代码而是先定义一套稳定的数据协议。协议稳定后设计稿导出、AI 生成资源、游戏端加载这三件事就能解耦。下面是一份主题配置示例{ theme: spring-festival, version: 2025.01.0, designWidth: 1334, designHeight: 750, assets: [ { slot: main_menu_bg, url: https://cdn.example.com/minigame/skins/spring/bg_main.png, width: 1334, height: 750, x: 0, y: 0 }, { slot: btn_start, url: https://cdn.example.com/minigame/skins/spring/btn_start.png, width: 320, height: 120, x: 507, y: 560 }, { slot: title_logo, url: https://cdn.example.com/minigame/skins/spring/title_logo.png, width: 600, height: 180, x: 367, y: 120 } ] }字段设计说明字段含义是否必须theme主题名称对应皮肤目录是version主题版本号用于缓存刷新是designWidth / designHeight设计稿尺寸用于适配换算是slot游戏内的挂载点标识是url资源地址是width / height从设计稿继承的图层尺寸是x / y从设计稿继承的绝对坐标是3.2 运行时换肤的三个关键动作换肤在运行期只做三件事拉取并校验主题配置。预加载所有图片资源。遍历挂载点替换图片、设置尺寸与坐标。如果某一张图片加载失败应该回滚到默认主题而不是让界面“缺图白屏”。这套逻辑可以封装成SkinManager后续不管你接的是 Figma 导出配置还是 PSD 导出配置只要最终生成的是同一份 JSON游戏端代码完全不需要改。4. Figma 原文件导出图层信息与资源4.1 读取图层节点信息Figma 提供了官方 REST API。先拿到文件里的某个节点 ID然后请求节点信息curl https://api.figma.com/v1/files/$FIGMA_FILE_KEY/nodes?ids$NODE_ID \ -H X-Figma-Token: $FIGMA_TOKEN返回数据里的absoluteBoundingBox就是图层在画布中的绝对包围盒包含x、y、width、height。如果你想把整个设计稿里指定名称的图层全部找出来可以让 Codex 先写一个递归遍历函数。大体的逻辑是获取文件所有页面。深度优先遍历子节点。命中需要导出的命名规则后记录节点 ID、名称、包围盒信息。写脚本时要注意Figma 文件里 Group、Frame、Component 这些节点类型的包围盒口径不一样。最简单的做法是只导出RECTANGLE、ELLIPSE、COMPONENT、FRAME这类具备可视化内容的节点。4.2 导出指定图层图片拿到节点 ID 后调用图片导出接口curl https://api.figma.com/v1/images/$FIGMA_FILE_KEY?ids$NODE_IDformatPNGscale2 \ -H X-Figma-Token: $FIGMA_TOKEN参数说明ids多个节点 ID 用逗号分隔。formatPNG / JPEG一般 UI 资源选 PNG。scale1、2、3表示导出倍数。移动端 UI 建议导出 2 倍或 3 倍图避免在小游戏 Canvas 里放大后发虚。接口返回的images对象里是节点 ID 对应的临时图片 URL。这个 URL 是有时效的正式项目里要把资源转存到自己的 CDN生成稳定的长期地址。4.3 自动化导出脚本下面是一个基于 Node.js 的完整脚本示例用来读取指定节点的尺寸并导出图片// scripts/export_figma.js const FIGMA_TOKEN process.env.FIGMA_TOKEN; const FILE_KEY process.env.FIGMA_FILE_KEY; const NODE_IDS process.env.FIGMA_NODE_IDS; // 逗号分隔 async function getNodeInfo() { const url https://api.figma.com/v1/files/${FILE_KEY}/nodes?ids${NODE_IDS}; const resp await fetch(url, { headers: { X-Figma-Token: FIGMA_TOKEN }, }); const data await resp.json(); return data.nodes; } async function exportImages() { const url https://api.figma.com/v1/images/${FILE_KEY}?ids${NODE_IDS}formatPNGscale2; const resp await fetch(url, { headers: { X-Figma-Token: FIGMA_TOKEN }, }); const data await resp.json(); return data.images; } (async () { const nodes await getNodeInfo(); const images await exportImages(); for (const [id, url] of Object.entries(images)) { console.log(节点, id, 导出地址, url); } })();运行前设置环境变量export FIGMA_TOKEN你的token export FIGMA_FILE_KEY你的文件key export FIGMA_NODE_IDS123:456,123:789 node scripts/export_figma.js脚本输出的是节点 ID 和临时图片地址。结合getNodeInfo()得到的absoluteBoundingBox你可以把这些字段合并输出成上一章的主题 JSON。比较推荐的做法是导出一张图的同时把该节点的slot、width、height、x、y写到同一行配置里。5. PSD 原文件导出图层信息5.1 使用 psd.js 解析图层如果你和设计师的协作流程还在用 PSD可以用 Node.js 的psd.js库读取图层树。先在项目目录安装npm install psd --save然后写一个解析脚本// scripts/export_psd.js const fs require(fs); const PSD require(psd); const file PSD.fromFile(./design/main.psd); file.parse(); const tree file.tree(); tree.descendants().forEach((node) { console.log(图层名, node.name); console.log(位置, node.left, node.top); console.log(尺寸, node.width, node.height); // 按图层名导出 PNG文件名可以按命名规则处理 if (node.visible) { const outputPath ./output/${node.name}.png; node.saveAsPng(outputPath); } });这段脚本可以做到读取每个图层的left、top。读取图层的width、height。把可见图层导出为 PNG。图层尺寸和位置信息会直接进入后续的theme.json这就是“继承图层尺寸”的落地方式。5.2 Photoshop 脚本导出思路对于复杂 PSD建议在 Photoshop 内用脚本扩展做导出因为 Photoshop 可以调用更底层的图层 API对图层样式、智能对象、混合选项的处理更准确。Photoshop 脚本思路如下遍历doc.layers。获取每个图层的bounds。保留图层位置和尺寸。导出为 PNG 到指定目录。不同 Photoshop 版本的脚本 API 有一定差异你在实现时以当前版本 API 为准。导出结果应该和 psd.js 方案一致一个图层一张 PNG外加一份记录坐标和尺寸的 JSON。这里补充一个工程建议如果团队真的想做“一键换肤”尽量让设计师输出规范命名的 PSD图层名称不要包含表情符号、空格和重复名称否则导出脚本没法生成稳定的slot。6. 用 AI 批量生成节日美术资源6.1 AI 生成资源的工作流很多同学直接丢一句“帮我生成春节 UI”给 AI 绘图工具结果生成的图尺寸不对、构图不对根本没法直接用。想让 AI 一键生成节日美术资源核心不是提示词写得多花哨而是建立从原始资源到节日版本的风格转换流程。推荐工作流把原设计稿某个按钮或背景图作为参考图。使用“图生图”或“风格化重绘”能力而不是从零文生图。提示词里约束配色、材质、节日氛围并明确“保持原构图”。输出的图片经过脚本自动裁剪到和目标图层相同的尺寸。最终写回skins/{主题名}/images/目录。例如一个默认风格按钮要变成春节风提示词可以这样设计参考图中的游戏 UI 按钮改为春节主题 红色和金色主色调轻微光泽质感 保持按钮形状和圆角角度保持原构图 不要出现任何文字透明背景 PNG。注意AI 生成的图片直接作为 UI 素材时要确认模型服务商的版权规则确认可以用于商业项目。涉及具体品牌和人物形象时也要避开。6.2 生成脚本骨架下面是一个生成脚本的骨架接入你自己的图像生成 API# scripts/generate_skin.py import os def generate_asset(client, prompt, output_path): 调用图像生成能力生成图片并保存 image client.generate(prompt) image.save(output_path) def build_prompts(theme: str): return { main_menu_bg: f{theme} 风格游戏主界面背景节日氛围保持原设计稿构图无文字, btn_start: f{theme} 风格游戏开始按钮配色与主题一致无文字透明背景, title_logo: f{theme} 风格游戏标题 LOGO保留原文字排布, } def main(): theme spring_festival prompts build_prompts(theme) os.makedirs(fskins/{theme}/images, exist_okTrue) for slot, prompt in prompts.items(): output_path fskins/{theme}/images/{slot}.png generate_asset(client, prompt, output_path) print(生成完成, output_path) if __name__ __main__: main()这个脚本是可扩展的。你想换一个节日只需要修改theme参数和提示词表。6.3 哪些场景适合一键生成AI 生成在资源生产阶段很擅长做这几类事情背景氛围图。按钮纹理与边框。标题 LOGO 的配色变体。粒子、光效、装饰素材。但是包含复杂文字排版的 UI、需要精确对齐的图表、多角色互动插画AI 一键生成很容易翻车。运营侧如果强依赖文字信息建议让设计师在 AI 生成基础上二次加工而不是直接上线。7. 完整实战微信小游戏一键换肤7.1 项目结构与文件划分假设你正在用 Cocos Creator 3.x 开发微信小游戏项目里可以这样组织换肤相关文件wechat-minigame/ ├── assets/ │ └── skins/ │ ├── default/ │ │ └── theme.json │ └── spring_festival/ │ ├── theme.json │ └── images/ ├── scripts/ │ ├── export_figma.js │ ├── export_psd.js │ └── generate_skin.py ├── tools/ │ └── fetch_remote_theme.ts └── src/ ├── manager/ │ └── SkinManager.ts └── scene/ └── MainMenu.ts工程上建议把theme.json同时支持本地和远程。开发阶段用本地配置上线阶段用 CDN 配置。7.2 皮肤管理器核心代码直接看核心代码。先定义皮肤相关的类型// src/manager/SkinManager.ts import { Node, Sprite, SpriteFrame, UITransform, assetManager, ImageAsset, Texture2D } from cc; export interface SkinAsset { slot: string; url: string; width: number; height: number; x: number; y: number; } export interface SkinTheme { theme: string; version: string; designWidth: number; designHeight: number; assets: SkinAsset[]; }然后封装一个远程图片加载函数function loadRemoteSpriteFrame(url: string): PromiseSpriteFrame { return new Promise((resolve, reject) { // 不同 Cocos Creator 3.x 小版本 API 略有差异以你当前项目为准 assetManager.loadRemoteImageAsset(url, (err, imageAsset) { if (err) { reject(err); return; } const texture new Texture2D(); texture.image imageAsset; const spriteFrame new SpriteFrame(); spriteFrame.texture texture; resolve(spriteFrame); }); }); }再实现SkinManagerexport class SkinManager { private nodes: Mapstring, Node new Map(); register(slot: string, node: Node) { this.nodes.set(slot, node); } async applyTheme(theme: SkinTheme) { for (const item of theme.assets) { const node this.nodes.get(item.slot); if (!node) continue; const spriteFrame await loadRemoteSpriteFrame(item.url); if (!spriteFrame) continue; const sprite node.getComponent(Sprite) || node.addComponent(Sprite); sprite.spriteFrame spriteFrame; const uiTransform node.getComponent(UITransform) || node.addComponent(UITransform); uiTransform.setContentSize(item.width, item.height); node.setPosition(item.x, item.y); } } }这段代码的关键点有三个register把游戏场景里的节点和逻辑槽位绑定。applyTheme遍历主题配置逐项设置图片、尺寸、坐标。配置里的width、height就是设计稿图层尺寸运行时直接调用setContentSize完成“尺寸继承”。7.3 运行与验证在启动场景里先注册默认节点const skinManager new SkinManager(); skinManager.register(main_menu_bg, bgNode); skinManager.register(btn_start, startBtnNode); skinManager.register(title_logo, titleNode);然后从远程拉取主题配置fetch(https://cdn.example.com/minigame/skins/spring_festival/theme.json) .then((res) res.json()) .then((theme) skinManager.applyTheme(theme)) .catch((err) console.error(换肤失败走默认皮肤, err));验证要点按钮位置是否和 Figma 设计稿一致。按钮尺寸是否未变形。图片是否清晰有没有被 Canvas 拉伸模糊。切换后是否出现短时间白屏。7.4 用 Codex 辅助实现换肤逻辑如果你不想从零手写可以直接用 Codex 生成这段逻辑。下面是一个可以直接复制到 Codex 对话框的提示词请帮我实现一个微信小游戏皮肤管理器要求如下 1. 使用 Cocos Creator 3.x TypeScript。 2. 支持从远程 JSON 读取主题配置。 3. 根据配置里的 assets 列表替换 Sprite 图片。 4. 根据配置里的 width 和 height设置 UITransform 尺寸和节点位置。 5. 图片资源加载失败时回滚到默认皮肤。 6. 输出完整代码并解释每个方法的用途。Codex 生成的代码通常比较完整但你要重点 review 三个点图片加载 API 是否符合当前引擎版本。是否处理了非法 URL 和网络异常。是否在换肤前清理了上一套主题的图片引用。8. 常见问题与排查思路8.1 常见报错排查表问题现象常见原因解决思路图片加载失败微信小游戏未配置 downloadFile 合法域名登录小程序后台在开发设置中配置合法域名图片 404 或临时链接过期使用了 Figma API 返回的临时图片地址把资源转存到 CDN线上环境不要直接用临时链接切换皮肤后按钮尺寸漂移运行时没有从 theme.json 设置尺寸每次 apply 时统一调用 setContentSize图片模糊设计稿导出分辨率不足导出时使用 scale2 或 scale3切换皮肤时黑屏图片资源未预加载先预加载所有图片再执行 UI 替换AI 生成图片底色不对输出格式不是透明 PNG生成时明确要求透明背景必要时做去底处理图层坐标错位绝对坐标没有做设计稿到游戏坐标系换算根据 designWidth/designHeight 做适配换算8.2 Codex 相关报错处理Codex 本身也可能出现一些启动或网络报错。比如搜索里出现的cc switch local proxy failed while handling codex endpoint /responses. provider...这类报错通常和本地网络代理、终端代理环境变量有关。排查思路检查系统代理或终端代理是否开启。查看HTTP_PROXY、HTTPS_PROXY环境变量。关闭不必要代理后重新运行codex。升级 Codex 到最新版本再试。另外还有一个常见提示The xxx model is not supported when using Codex with a ...这说明当前模型标识和 Codex 版本支持范围不一致。解决方法很简单查看当前 Codex 支持的模型列表把model字段改成可用的模型标识。不要在原错误模型上反复重试。8.3 安全与合规提醒这里必须强调一点不要尝试反编译其他小游戏提取素材不要做二次打包外挂更不要往小游戏代码里注入恶意 JavaScript。这些行为违反微信平台规范轻则素材被判侵权重则账号封禁甚至带来法律风险。我们在文章中讲到的 PSD 解析和 Figma 导出只服务于你自己团队的设计稿和已授权素材。换肤是运营提效工具不是越权和侵权的工具。9. 最佳实践与工程建议9.1 数据与资源管理推荐把主题配置当成“运营配置”来管理而不是“代码配置”。也就是说theme.json放在 CDN 而不是打包进小游戏包体。每次发版不要改客户端代码而是改 CDN 上的配置。配置必须带版本号CDN URL 也建议带版本参数例如theme.json?v20250115。默认主题要打包进小游戏包体防止 CDN 不可用时游戏没法玩。资源命名建议统一为{模块}_{部件}_{状态}.png例如btn_start_normal.png btn_start_pressed.png bg_main_menu.png title_logo_happy.png命名规范直接决定导出脚本的稳定性也决定slot的映射是否简单。9.2 AI 辅助开发提效技巧用 Codex 做这类项目管理时可以按“数据契约 → 核心逻辑 → 边界处理 → 测试”的顺序推进先让 Codex 根据你的 JSON 例子生成 TypeScript 类型定义。再让它生成加载、替换、回滚逻辑。然后补充异常处理和缓存策略。最后写几个 mock 用例做验证。不要一开始就要求 AI “写一个完整项目”过于宽泛的提示词生成出来的代码大概率需要大改。正确做法是把需求拆小每个提示词只解决一个问题。9.3 运营节点上线前的检查清单一个节日皮肤上线前建议按以下清单检查[ ] theme.json 和图片资源都已上传到 CDN。[ ] CDN 已开启 HTTPS并配置了正确的文件类型。[ ] 微信后台 downloadFile 域名已添加。[ ] 默认主题资源仍打包在本地。[ ] 资源预加载完成后再切换 UI。[ ] 低端机切换流畅度通过测试。[ ] AI 生成素材版权已确认。[ ] 已安排真机截图对比设计稿比例。10. 总结与扩展建议这套“Codex Figma/PSD AI 微信小游戏”的组合本质上是在做三件事用脚本把设计稿的图层尺寸、坐标、资源地址固化成数据协议。用 AI 辅助快速生产节日美术资源。用代码在运行期动态加载、替换、回滚 UI 皮肤。换肤功能做到后面真正值钱的不是“刷新的那一瞬间”而是前端的图层规范、数据契约和资源管理机制。把这些沉淀成基础设施运营同学拿到一份新的设计稿后才能在很短时间里完成一套可上线的节日 UI。如果你刚接触这条链路建议先拿一个小型主界面试试一个背景、一个按钮、一个标题先跑通 Figma/PSD 导出到小游戏换肤的完整流程再逐步增加复杂组件。等你把默认主题、远程配置、回滚机制都跑通再把 AI 资源生成接入进来整个运营提效闭环就形成了。