Codex 实战系列| 零代码微信小程序开发

事情是这样的。

我最近发现一个特别有意思的现象，身边好几个学文科的朋友，居然在尝试用AI自己做产品了。不是那种玩票性质的试试，是真的想做一个能用的东西出来。

有个朋友还专门跑来问我，说自己不会写一行代码，有没有可能做一个微信小程序。我说你等等，这个问题我最近刚好研究过，还真能。

我给你捋一遍我摸出来的完整流程，从想法到能用的小程序，中间要跨多少道坎，每道坎又是怎么用Codex绕过去的。

那条路，一共四步。

先是Figma设计原型，把页面长什么样、按钮点到哪确定下来。再让Codex把设计写成代码。然后丢进微信开发者工具跑起来，看看能不能转。最后手机预览，确认没问题了，提交审核发布。

很多人一听Figma就头大，觉得又是设计软件，门槛肯定不低。我一开始也这么想，结果发现完全不是那么回事。

Figma其实是个界面设计和协作工具，设计师在里面排版调色做按钮，产品经理用它讨论流程，开发者看尺寸间距。它最妙的地方，是能做可点击的原型，把首页的按钮连到另一个页面，点了就能跳，相当于提前把操作流程试一遍。

我一开始对设计工具有点抵触，总觉得那是另一套我学不会的复杂体系，图层、画板、组件库，听着就头大。但真上手发现，现在设计工具的入门门槛被降得很低，你不需要懂什么视觉原理，就是像用PPT一样把元素拖到画布上，摆好位置调好颜色就行。加上有AI出草案，你甚至不用从空白画布开始。

这个小程序还没开始写代码，几个页面摆在一起是什么样、这个按钮放这合不合适、这一屏是不是太挤，你都能先看见。

以前这份设计稿得交给开发者去实现，现在不一样了，稿子确认好，直接丢给Codex让它接着写。会设计的人可以从自己熟悉的Figma出发，已经在用Codex的人，也可以让它先出个草案，再丢进Figma调。

「一页」就是这么干的。先定下书架、记录、统计三个主页面，再统一配色排版。奶油白打底，深蓝做文字和主按钮，浅绿突出当前操作，首页把正在读的书放在最显眼的位置。我第一眼看这个配色就觉得舒服，安静，像个真的在陪你读书的工具，不是那种满屏弹窗的营销号风格。

说到配色我想多说一句，AI出设计稿这事，最容易被低估。我以前总觉得设计靠审美，AI再强也就那样。但这次它给的这套留白充足、色系统一的方案，我一个做了这么多年产品的人都挑不出大毛病，反而觉得它比很多新手设计师更懂「克制」。

设计方向定了，关键的一步来了，让Codex出草案。

你完全不需要会画界面，只需要说清楚你要什么。我当时的原始需求就一句话，想要一本有留白的阅读手账，打开能看到正在读的书，方便记录，能回看阅读情况。然后把需求和视觉方向一起甩给Codex，它给我出了一版三页并排的效果图。

我拿到效果图第一反应是，这配色真舒服。奶油白做底，深蓝做文字，浅绿点缀，留白充足，看着就像一本真的手账，安安静静放在那。那一刻我有点相信这套流程能成了，因为视觉这块它替我兜住了，我最没把握的审美环节，反而成了最省心的环节。

这里有个小细节值得记一下。我让它输出的不是普通的图片，而是SVG矢量文件，三个独立的390乘844。为啥要SVG，因为它是矢量格式，导入Figma之后，文字、图形、分组都能分别选中，你想把标题调小一点、把按钮换个颜色、把书封放大，都能单独改。

拿到草案先改到自己满意为止。反馈一定要具体，别说什么「感觉不对」，要说「首页标题缩小一点」「主按钮统一成深蓝色」「书封再大一些」。AI很吃这一套，越具体它改得越准。

三页都满意了，再处理交互。选中首页的「继续阅读」卡片，切到Prototype，点击Interactions旁边的加号，Trigger选On click表示点击触发，Action选Navigate to表示跳转页面，Destination选目标画板。就这么三步，一个能点的原型就出来了，点右上角三角形的Present就能演示，从首页点进去再返回，把页面之间的路线先试一遍。

我做完这套原型的时候有点恍惚，以前做这种东西，从零到能点，一个设计师加一个前端，怎么也得一两天。现在加上我自己琢磨怎么操作的时间，一个小时不到。

而且这中间还有个额外的收获，你会发现原型的价值不只是提前看效果，还能帮你理清楚产品逻辑。我在连跳转的时候，发现统计页其实可以不那么靠前，应该让用户先记一条再看到统计，这个顺序上的思考，如果不做原型，可能要等开发完才发现，那就得返工了。

设计稿有了，Codex要接盘了。

这里就是MCP发挥作用的地方。它是个协议，能让Codex直接读取Figma里选中的画板，拿到设计结构、样式和素材，按设计稿接着往下实现。如果你手里已经有现成的Figma稿子，就从这步直接开始，选中要实现的画板，复制带节点信息的链接发给Codex就行。

不过我这次走的是另一条路，设计是我从SVG导入Figma的，代码也沿用同一份设计文件和素材，所以MCP这步对我来说是锦上添花，不是必需。两种方式都行，关键在于，丢给Codex的必须是已经确认好的设计，别让它在一份半成品上瞎猜。

接下来就是重头戏，把设计写成小程序。

在Codex里打开项目文件夹，放好设计文件和书封素材，开始实现。这一步有个特别重要的点，除了说清楚用什么技术，还得说清楚最后要拿到什么，一个能直接导入微信开发者工具的项目。

我第一次做的时候就栽在这，光跟Codex说要做一个阅读小程序，没交代技术栈，结果它给我出了一版网页版的H5，压根不是小程序。后来我才反应过来，Figma提供的设计信息是要按目标平台实现的，你不能把网页代码直接当小程序交付。所以这次我学乖了，明确跟它说，用微信原生小程序，技术栈是WXML、WXSS、JavaScript和JSON。

我给的提示词大概是这样，让它用WXML、WXSS、JavaScript和JSON，代码放miniprogram文件夹，提供app.json和project.config.json，保证能直接导入开发者工具。实现书架、阅读记录、统计和添加书籍几个页面，沿用确认好的配色排版和素材，数据先用wx.setStorageSync存本地，补齐输入校验、空状态和保存失败提示。

你看，写到这里可能有人已经有点晕了，这一堆WXML、WXSS是啥啊。

我明确跟你说，不用看懂。我自己也不全懂，但这不耽误我用它做出东西来。WXML管页面结构，WXSS管样式，JavaScript处理点击和保存，JSON配页面路径。你只需要知道这四个文件各管一摊，能认识Codex交付的目录就够了。具体的，让Codex帮你去啃。

这其实是整套方法里最反直觉，但也最爽的地方。以前学编程，你得先啃几个月语法才能写出个能跑的东西，现在这些全变成Codex的活了，你要做的只是把需求说清楚，把设计稿丢给它，再把你的名字换上去。

代码有了，丢进微信开发者工具看看能不能跑。

装好登录开发者工具，项目菜单里选导入项目，找到miniprogram文件夹。项目名称自己填，AppID是身份证，本地学习可以用测试号，准备发布再换自己的。导入之后等它编译，右侧模拟器显示页面，就能用鼠标操作了。Codex改完代码，重新编译看效果。

第一次看到那个熟悉的模拟器窗口里跑起我自己要的小程序，说实话有点激动。以前这个界面是我只能远远看着程序员操作的东西，现在我自己也能把它点亮，那种「我居然也能做到」的感觉，比产品本身还让人上瘾。

这一步主要检查三件事，页面有没有错位，按钮能不能进对页面，填的内容能不能保存。再切一下模拟器的屏幕尺寸，看看长标题、输入框、底部导航是不是挤成一团。

出问题就把报错文字或截图发给Codex，说清楚刚才做了什么、原本期待看到什么。我这次真遇到一个图片加载的坑，页面数据还没准备好就去拼图片地址，结果路径里少了书封名称。让代码等数据就绪再显示图片，就解决了。

这类问题你完全不用自己从头啃代码，但要把发生的位置说清楚。就像你给同事派活，得告诉他哪个环节不对，而不是甩一句「这个坏了」让他猜。

电脑里跑通了，最后一步，走到手机预览和发布。

用有权限的AppID，点开发者工具顶部的预览，等它打包生成二维码，微信扫码。重点看手机上的字号、键盘弹出来会不会挡住输入区、底部按钮能不能顺手点到。

这里有个数据的问题我得提醒一下，因为数据存在本地，模拟器里的记录不会自动同步到手机，手机上得重新输一遍测试内容。想要换设备也能保留数据，得再补云端同步或备份。

准备让朋友试的时候，点上方的上传，到微信公众平台的小程序后台，版本管理里把开发版本设为体验版，添加体验成员。确认能用了再提交审核，审核通过再发布。账号资料、服务类目这些按后台要求补齐就行，这些账号操作不需要让Codex代劳。

我这一路走下来，最大的感慨是这么件事。

以前我做小程序，光是把微信开发工具、AppID、项目配置这一套跑通，就得折腾半天，各种认证、各种报错，劝退了多少想试试的人。现在这套流程，把最劝退的环节全被拆解成了可以一步步照做的步骤，每一步都有AI兜底。

而且你会发现，这套流程不止能做打卡小程序。菜谱、记账、计划、相册，任何你想做的小工具，都能沿着这条线走。设计不满意，回Figma调；功能有bug，把操作和报错丢给Codex，再到开发者工具里确认结果。它是个可以反复用的模板，不是一次性。

但我也得坦率讲几句不好听的。

这条流程能跑通，前提是你得有个清晰的想法，知道你要做什么，页面大概什么样，数据怎么流转。AI能帮你把设计变成代码，把代码跑通，但它没法替你想清楚，你这个小程序到底要解决什么问题，给谁用。想清楚这些，永远是你自己的事。

这就好比，你请了个特别能干的装修队，他能把你家的墙刷得又快又平，但把房子装成什么样、哪个房间用来干嘛，得你自己拿主意。AI是那个装修队，你是那个要住进去的人。

还有学习成本这回事，别指望第一次就完美。我第一版的小程序，配色是AI给的，但交互逻辑我调了好几轮，模拟器里来回跑，光报错就修了三四次。这跟学任何新工具一样，一开始会有点笨拙，花的时间可能比手动做还长。但第二次、第三次，你会明显感觉到顺手。

我自己就有个很深的体会，第一次走完这套流程，最花时间的反而不是写代码，而是理解那些概念，什么是画板，什么是节点，什么是MCP。这些东西看着陌生，但真上手用一遍，其实也就那么回事，都是纸老虎。你会发现自己被过去那些吓唬人的名词耽误了太多年。

这条路往前看，我觉得特别像早年电脑普及那会儿。最开始电脑是专业机房里的稀罕物，得穿白大褂的人才能碰，后来个人电脑飞进千家万户，会打字就能写文档做表格。现在AI正在干同样的事，把「会写代码」这个过去最高的门槛，一点点踩平，让每个有想法的人都能把手里的念头变成真东西。

我自己在这个AI圈子里泡了几年，见过太多人因为一句「我不是学这个的」就把想法掐死在摇篮里。可时代真的变了，那些你以为的硬门槛，正在被一层层拆掉。剩下的，就是你想不想做、敢不敢动手的问题。

所以如果你想试试，我给你个最朴素的建议，别想那么多，先做一个特别简单的东西，一个打卡的、记事的、记账的都行，把这条流程完整走一遍。走完你就知道，那个过去你以为是程序员专属的领域，现在到底离你有多近。

我始终觉得，AI时代最稀缺的不是技术，是敢动手的普通人。那些能把自己脑子里的想法，不管多小，真的做成一个能用的东西的人，才是真正握住时代红利的人。

会设计的人从Figma出发，会写提示词的人从Codex出发，都不会就从一句需求开始。路已经铺到脚下了，关键是你愿不愿意迈出那一步。

就像我开头那个学文科的朋友，他最后真的做出来了，一个记录家里菜谱的小程序，还乐呵呵地拿给家里人用。他没写一行代码，但他把「想给家人做个菜谱」这个念头，变成了家人手机里一个真的能用的东西。这在我看来，就是AI时代最动人的一部分。

反正我是试过了，你相信我，这感觉，真的很爽。

以上，既然看到这里了，如果觉得不错，随手点个赞、在看、转发三连吧，如果想第一时间收到推送，也可以给我个星标⭐～ 谢谢你看我的文章，我们，下次再见。

/ 作者：阿琛 / 投稿或爆料，请联系邮箱：lxclxc007@qq.com^[1]

引用链接