Recently, many friends from liberal arts backgrounds have been trying to use Codex to develop their own products.
The previous two articles covered how to use Codex; this one focuses on practical application: how to use it to build a WeChat Mini Program.
First, let's look at the result. This time, we built a reading check-in Mini Program called "One Page." Below is its running interface in the WeChat Developer Tools.
The entire process from an idea to a usable Mini Program can be divided into these steps:
Figma Prototype Design → Codex Code Generation → Developer Tools Simulation → Mobile Preview → Submission for Audit & Publishing.
Figma is responsible for determining what the pages look like and where buttons lead; Codex writes the design into code; WeChat Developer Tools is used to run, check, and send the Mini Program to a phone for preview. After preparing your own Mini Program account, you submit it for audit and release through the WeChat backend.
1. What is Figma, and why use it first?
Figma is an interface design and collaboration tool commonly used to design pages for apps, websites, and Mini Programs. Designers use it for layout, colors, and buttons; product managers use it to discuss operation flows; developers view design dimensions, spacing, and assets to implement the pages.
It can also create clickable product prototypes. For example, linking a button on the homepage to another page so that clicking it triggers a jump, allowing you to test if the operation feels smooth in advance.
This is exactly what we are using it for this time. Before writing any code, you can see several pages together and discuss whether a button is well-placed or if a screen is too crowded.
Previously, this design draft was usually handed over to a developer. Now, you can give the confirmed draft to Codex to write the code. Designers can start from the Figma they are familiar with; those already using Codex can let it generate a draft first and then adjust it in Figma.
This is how "One Page" was made. We first determined the three main pages—Bookshelf, Record, and Statistics—and then unified the color scheme and layout.
This is the design showcase. Cream white is used for the background, dark blue for text and main buttons, and light green to highlight the current operation. The homepage puts the book currently being read in the most prominent position, while statistical information is placed on a separate page to avoid overwhelming the user with numbers upon opening.
This step is about the overall effect. Once you are satisfied with the colors, font sizes, and page arrangements, you move forward.
2. Let Codex generate a draft and complete the prototype in Figma
Even if you can't draw interfaces, you can start with a clear requirement. For example, this time, I wanted a reading journal with plenty of white space where I could see the book I'm reading, record progress easily, and review my reading history.
Tell Codex your requirements and visual direction together:
1I want to make a WeChat Mini Program called "One Page" for reading check-ins.2Please first design three pages: Bookshelf Homepage, Reading Record, and Reading Statistics. Do not write functional code yet.34The visual style should be like a quiet reading journal:5Cream white background, dark blue text, light green key areas, with plenty of white space.6The homepage should highlight the book being read and the entry point for recording. Other pages should maintain the same visual style.7Use original geometric graphics for book covers; use fictional content for sample books.89First, give me a preview image of the three pages side-by-side.10Also, output three independent 390×844 SVG files, keeping text, graphics, and button groupings intact for further adjustment in Figma. Please name the main buttons individually.
Requesting SVG output allows you to put the design into Figma. SVG is a vector graphic format; in this case, importing it provides text, graphics, and groups that can be selected and adjusted individually.
After getting the draft, modify it until you are satisfied. Be as specific as possible with feedback, such as "shrink the homepage title a bit," "unify main buttons to dark blue," or "make the book cover larger." Once all three pages are satisfactory, handle the prototype interaction.
Putting the design into Figma
Open a Figma Design file, click the "+" next to Pages on the left, and create a new page.
In this example, the import is completed by copying the SVG content and pasting it onto the Figma canvas. Name the three artboards "01-Bookshelf Homepage," "02-Reading Record," and "03-Reading Statistics," and arrange them horizontally. After selecting an artboard, check the width and height in the Design panel on the right.
If it's your first time opening Figma, identify these areas: Layers list on the left, Canvas in the middle, Design panel on the right for appearance, and Prototype for setting interactions. To change any text or button, select it in the Layers list first.
Remember to check the fonts after importing. Fonts may be replaced depending on the environment, which can change title wrapping and text width. The font rendering in the design draft and the Mini Program differed this time, so they needed separate checks.
Adding jumps to buttons
Take the "Continue Reading" card on the homepage as an example. Select it, switch to Prototype in the top right, and click the "+" next to Interactions.
In the pop-up Interaction panel, set these three options:
- Trigger: Select "On click."
- Action: Select "Navigate to."
- Destination: Select "02-Reading Record" (the target artboard).
The save button on the record page links back to the homepage, and the statistics icon on the homepage links to the statistics page. The image below shows the setup for the statistics entry.
Click the triangle "Present" icon in the top right to open the prototype demo. Click through from the homepage and back to test the routes between pages.
The Figma prototype demonstrates the jumps; the actual input, saving, and data updates will be implemented by the Mini Program code next.
3. The design is ready; where do I use MCP?
MCP is used at the step of handing the Figma design to Codex. Once connected, Codex can read the design structure, styles, and assets of the selected artboard and continue implementation based on the design draft.
If you already know how to use Figma and have a draft ready, you can start directly from here. Select the artboard you want to implement, copy the link containing that artboard's node information, and send it to Codex with the Figma connection enabled.
1Please read the design context and screenshots of this artboard via Figma MCP.2First, explain the page structure, font sizes, colors, spacing, and assets you have read.3Tell me clearly if there are parts you cannot read; do not guess.45Next, we will create a native WeChat Mini Program using WXML, WXSS, JavaScript, and JSON.6Please implement it according to this tech stack, reusing existing styles and assets from the project.7Complete the homepage first, and continue with other pages after confirmation.
Be sure to specify "native WeChat Mini Program." The design information provided by Figma needs to be implemented according to the target platform; you cannot simply use web code for a Mini Program.
In this example, the design was imported into Figma via SVG, and the code follows the same design file and assets; MCP is a way to bridge the gap when a Figma design draft already exists. Regardless of the method, what is handed to Codex should be a confirmed design.
4. Writing the design into a Mini Program
Open the project folder in Codex, place the design files and book cover assets, and you can start implementation.
In this step, besides specifying the technology, you must clearly state what you want to receive: a project that can be directly imported into the WeChat Developer Tools.
1Please complete the native WeChat Mini Program based on the confirmed "One Page" design.23Use WXML, WXSS, JavaScript, and JSON.4Place the code in the miniprogram folder and provide app.json and project.config.json to ensure it can be directly imported into WeChat Developer Tools.56Implement the Bookshelf, Reading Record, Statistics, and Add Book pages.7Follow the confirmed color scheme, layout, and original book cover assets.8Save data locally using wx.setStorageSync for now, and read it when reopening.9Add input validation, empty states, and save failure prompts.1011Check the code upon completion and tell me which directory to import and how to compile.12If there are items I need to configure, please list them separately.
In the project generated by Codex, WXML handles page structure, WXSS handles styles, JavaScript handles clicks and saving, and JSON configures page paths. Once you recognize what each file does, you can understand the delivered directory.
Don't be overwhelmed here; just let Codex solve it for you. You don't need to understand the code; just copy the prompts, drop in your design draft, and change it to your own name.
5. Put it in WeChat Developer Tools and see if it runs
After installing and logging into the WeChat Developer Tools, select "Import Project" from the "Project" menu and find the miniprogram folder generated by Codex.
The project name can be anything you like. The AppID is the identity of this Mini Program: you can use the test account provided by the tool for local learning, but you must switch to your own Mini Program AppID when preparing to publish. For this example, select "Do not use cloud services" for the backend.
Click "Create," enter the project, and wait for compilation. Once the simulator on the right displays the page, you can operate it directly with your mouse. After Codex modifies the code, recompile to see the results.
Here, mainly check three things: whether the pages are misaligned, whether buttons lead to the correct pages, and whether the entered content can be saved. Also, switch the simulator's screen size to see if long titles, input boxes, and bottom navigation are cramped.
If problems occur, send the error text or screenshot to Codex, along with what you just did and what you expected to see. For example:
1This is a screenshot of an error in the WeChat Developer Tools.2When I enter the record page from the homepage, the book cover does not display.3Please check the image path and page loading timing. Fix it while keeping the existing layout unchanged.
In this case, we actually encountered an image loading issue: the code started splicing the image address before the page data was ready, resulting in a missing book cover name in the path. Telling the code to wait for the data to be ready before displaying the image solved the problem.
Similar issues don't require you to study the code from scratch, but you must clearly state where they occur. After the fix, return to the simulator, repeat the operation, and confirm it is back to normal.
6. From the computer simulator to mobile preview and publishing
Once it runs on the computer, check it on your phone.
Using an AppID with the appropriate permissions, click "Preview" at the top of the developer tools, wait for the QR code to be generated, and then scan it with a permitted WeChat account. Focus on the font size on the phone, whether the keyboard blocks the input area when it pops up, and whether the bottom buttons are easy to reach.
In this example, data is saved locally, so records in the simulator will not automatically sync to the phone. You need to re-enter test content on the phone; if you want to keep data across devices in the future, you can add cloud synchronization or backup functions.
When you are ready for friends to try it, click "Upload" at the top of the developer tools, then go to the WeChat Official Accounts Platform's Mini Program backend. Enter Version Management, find the corresponding development version, set it as the Trial Version, and add trial members. Trial members need appropriate permissions.
Once confirmed usable, submit for audit in the backend, and publish after approval. Fill in account information and service categories as required by the backend; you don't need Codex to complete these account operations for you.
This example has reached the stage of being runnable in the developer tools. Readers can proceed with mobile preview, uploading, and submitting for audit using their own Mini Program accounts.
Connecting the whole process
First, use Figma to determine pages and button jumps until you are satisfied with the design; then hand the design file or artboard link to Codex to write it into a WeChat Mini Program; then import it into the developer tools to simulate, run, and check for errors; finally, preview it on a phone and upload, audit, and publish after confirmation.
In the future, whether you are making a check-in tool, a recipe app, or other small utilities, you can still follow this workflow. If the design is unsatisfactory, go back to Figma to adjust; if there's a functional issue, hand the specific operation and error to Codex, and then confirm the modification results in the developer tools.
I am Miles, an AI algorithm expert who transitioned from a big tech company to an FDE. I have worked on algorithm R&D, optimization, and deployment, as well as corporate training. Follow me @miles_mazy to grow together and make money together.
