最近，身边不少学文科的朋友也在尝试用 Codex 开发自己的产品。

前面两篇讲了 Codex 怎么用，这篇就讲实战：如何用它做一个微信小程序。

先看效果。这次做的是一款叫「一页」的阅读打卡小程序，下面是它在微信开发者工具里的运行界面。

从想法到一个可以使用的小程序，整个过程可以分成这几步：

Figma 设计原型 → Codex 编写小程序 → 开发者工具模拟运行 → 手机预览 → 提交审核、发布。

Figma 负责把页面长什么样、按钮点到哪里确定下来；Codex 把设计写成代码；微信开发者工具用来运行、检查，并把小程序送到手机上预览。准备好自己的小程序账号后，再通过微信后台提交审核和发布。

1. Figma 是什么，为什么先用它？

Figma 是一款界面设计与协作工具，常用来设计 APP、网站和小程序的页面。设计师在里面排版、调颜色、做按钮；产品经理用它讨论操作流程；开发者查看设计稿的尺寸、间距和素材，再把页面实现出来。

它还可以做可点击的产品原型。例如把首页的按钮连到另一个页面，点击后就能跳转，用来提前试一遍操作是否顺手。

这正是我们这次要用到的部分。小程序还没开始写代码，就能先看到几个页面摆在一起是什么样子，讨论「这个按钮放这里好不好」「这一屏是不是太挤」。

以前，这份设计稿通常交给开发者实现。现在可以把确认好的稿子交给 Codex，让它接着写代码。会设计的人可以从自己熟悉的 Figma 出发；已经在用 Codex 的人，也可以让它先出草案，再放进 Figma 调整。

「一页」就是这样做的。先确定书架、记录、统计三个主要页面，再统一配色和排版。

这张是设计展示图。奶油白做底，深蓝用于文字和主要按钮，浅绿色突出当前操作。首页把正在读的书放在最显眼的位置，统计信息单独放到另一页，避免一打开就看到满屏数字。

这一步先看整体效果。颜色、字号和页面安排满意了，再往下做。

2. 让 Codex 出草案，在 Figma 里完成原型

不会画界面，也可以从一句清楚的需求开始。比如这次，我想要的是一本有留白的阅读手账，打开后能看到正在读的书，方便记录，能回看自己的阅读情况。

把需求和视觉方向一起告诉 Codex：

text

1
2
3
4
5
6
7
8
9
10
11
我要做一个叫「一页」的阅读打卡小程序。
请先设计书架首页、记录阅读、阅读统计三个页面，暂时不要写功能代码。

视觉像一本安静的阅读手账：
奶油白背景、深蓝文字、浅绿色重点区域，留白充足。
首页突出正在读的书和记录入口，其他页面保持同一套视觉风格。
书封使用原创几何图形，示例书籍标注为虚构内容。

先给我一张三页并排的效果图。
同时输出三个独立的 390×844 SVG 文件，保留文字、图形和按钮分组，
方便导入 Figma 后继续调整。主要按钮请单独命名。

这里让 Codex 输出 SVG，是为了把设计放进 Figma。SVG 是矢量图形文件，本例导入后能得到文字、图形和分组，可以分别选中调整。

拿到草案后，先改到自己满意。反馈尽量具体，比如「首页标题缩小一点」「主要按钮统一成深蓝色」「书封再大一些」。三个页面都满意之后，再处理原型交互。

把设计放进 Figma

打开一个 Figma Design 文件，在左侧 Pages 旁边点击「＋」，新建一个页面。

本例通过复制 SVG 内容、粘贴到 Figma 画布完成导入。把三个画板分别命名为「01-书架首页」「02-记录阅读」「03-阅读统计」，横向摆在一起。选中画板后，在右侧 Design 面板里检查宽度和高度。

第一次打开 Figma，可以先认清这几个位置：左侧 Layers 是图层列表，中间是画布，右侧 Design 调整外观，Prototype 设置交互。要改哪个文字或按钮，就先在图层列表里选中它。

导入后记得看一眼字体。不同环境可能发生字体替换，标题的换行、文字宽度也会跟着变化。这次设计稿和小程序里的字体呈现就有差异，需要分别检查。

给按钮加上跳转

以首页的「继续阅读」卡片为例，选中它，切到右上角 Prototype，点击 Interactions 旁边的「＋」。

在弹出的 Interaction 面板里，设置这三个选项：

  • Trigger 选 On click，表示点击触发。
  • Action 选 Navigate to，表示跳转页面。
  • Destination 选「02-记录阅读」，也就是目标画板。

记录页的保存按钮连回首页，首页的统计图标连到统计页。下图就是统计入口的设置。

点击右上角三角形的 Present，就能打开原型演示。从首页点进去，再返回，试一遍页面之间的路线。

Figma 原型先把跳转演示出来，真正的输入、保存和数据更新，接下来由小程序代码实现。

3. 设计稿有了，MCP 在哪里用？

MCP 用在把 Figma 设计交给 Codex 的这一步。连接之后，Codex 可以读取所选画板的设计结构、样式和素材，按设计稿继续实现。

如果你已经会用 Figma，手里有现成的稿子，就可以直接从这里开始。选中要实现的画板，复制带有该画板节点信息的链接，发给已连接 Figma 的 Codex。

text

1
2
3
4
5
6
7
请通过 Figma MCP 读取这个画板的设计上下文和截图。
先说明你读取到的页面结构、字号、颜色、间距和素材。
读取不到的部分请明确告诉我，不要猜。

接下来要做的是微信原生小程序，使用 WXML、WXSS、JavaScript 和 JSON。
请按这个技术栈实现，复用项目里已有的样式和素材。
先完成首页，确认后再继续其他页面。

要特别写上「微信原生小程序」。Figma 提供的设计信息需要按目标平台实现，不能把网页代码直接当成小程序交付。

本例的设计通过 SVG 导入 Figma，代码沿用同一份设计文件和素材；MCP 是已有 Figma 设计稿时可以采用的衔接方式。无论采用哪种方式，交给 Codex 的都应该是已经确认的设计。

4. 把设计写成小程序

在 Codex 中打开项目文件夹，放好设计文件和书封素材，就可以开始实现了。

这一步除了说明用什么技术，还要说清楚最后要拿到什么：一个能直接导入微信开发者工具的项目。

text

1
2
3
4
5
6
7
8
9
10
11
12
13
请根据已经确认的「一页」设计，完成微信原生小程序。

使用 WXML、WXSS、JavaScript 和 JSON。
代码放在 miniprogram 文件夹，提供 app.json 和 project.config.json，
保证可以直接导入微信开发者工具。

实现书架、阅读记录、统计和添加书籍页面。
沿用确认好的配色、排版和原创书封素材。
数据先使用 wx.setStorageSync 保存在本地，重新打开时读取。
补齐输入校验、空状态和保存失败提示。

完成后检查代码，并告诉我应该导入哪个目录、如何编译。
如果遇到需要我配置的项目，请单独列出来。

Codex 生成的项目里，WXML 负责页面结构，WXSS 负责样式，JavaScript 处理点击和保存，JSON 配置页面路径等信息。先认识这些文件各管什么，就能看懂它交付的目录。

看到这里不要蒙，直接让codeX帮你解决就好了，不需要看懂代码，只需要把提示词复制进去，把你的设计稿丢进去，改成你自己的名字就好了。

5. 放进微信开发者工具，看看它能不能跑

安装并登录微信开发者工具后，在「项目」菜单中选择「导入项目」，找到 Codex 生成的 miniprogram 文件夹。

项目名称可以自己填写。AppID 相当于这个小程序的身份标识：本地学习时可以使用工具提供的测试号，准备发布时则要换成自己小程序的 AppID。本例的后端服务选「不使用云服务」。

点击「创建」，进入项目并等待编译。右侧模拟器显示出页面，就能直接用鼠标操作了。Codex 修改代码后，再重新编译查看效果。

在这里主要检查三件事：页面有没有错位，按钮能不能进入正确的页面，填写的内容能不能保存。再切换一下模拟器的屏幕尺寸，看看长标题、输入框和底部导航是否挤在一起。

出现问题时，把报错文字或截图发给 Codex，加上刚才做了什么，以及原本期待看到什么。例如：

text

1
2
3
这是微信开发者工具里的报错截图。
我从首页进入记录页后，书封没有显示。
请检查图片路径和页面加载时机，修复后保持现有布局不变。

这次实际遇到过一个图片加载问题：页面数据还没准备好，就开始拼接图片地址，结果路径里少了书封名称。让代码等到数据就绪后再显示图片，问题就解决了。

类似问题不必自己从头研究代码，但要把发生的位置说清楚。修完之后回到模拟器，重复刚才的操作，确认已经恢复正常。

6. 从电脑模拟器，走到手机预览和发布

电脑里跑通之后，用手机看一遍。

使用具备相应权限的 AppID，点击开发者工具顶部的「预览」，等待打包生成二维码，再用有权限的微信扫码。重点看手机上的字号、键盘弹出后是否挡住输入区域，以及底部按钮能不能顺手点到。

本例的数据保存在本地，模拟器里的记录不会自动同步到手机。手机上需要重新输入测试内容；如果以后希望换设备也能保留数据，再补云端同步或备份功能。

准备让朋友试用时，点击开发者工具顶部的「上传」，然后到微信公众平台的小程序后台，进入版本管理，找到对应的开发版本，设置为体验版并添加体验成员。体验者需要相应权限。

确认可以使用后，在后台提交审核，审核通过再发布。账号资料、服务类目等按后台要求补齐即可，不需要让 Codex 代替你完成这些账号操作。

本例已经做到开发者工具中可运行。手机预览、上传和提交审核，读者用自己的小程序账号接着完成。

把整个过程串起来

先用 Figma 确定页面和按钮跳转，把设计看满意；再把设计文件或画板链接交给 Codex，让它写成微信小程序；然后导入开发者工具，模拟运行、检查报错；最后到手机上预览，确认后上传、审核、发布。

以后做打卡、菜谱或其他小工具，仍然可以沿着这条流程走。设计不满意，就回 Figma 调整；功能有问题，把具体操作和报错交给 Codex，再到开发者工具里确认修改结果。