Codex en acción: Desarrollo de Mini Programas de WeChat sin código

Recientemente, muchos amigos con formación en humanidades han estado intentando usar Codex para desarrollar sus propios productos.

Los dos artículos anteriores cubrieron cómo usar Codex; este se centra en la aplicación práctica: cómo usarlo para construir un Mini Programa de WeChat.

Primero, veamos el resultado. Esta vez, creamos un Mini Programa de registro de lectura llamado "One Page". A continuación, se muestra su interfaz de ejecución en las Herramientas de Desarrollo de WeChat.

Todo el proceso, desde una idea hasta un Mini Programa utilizable, se puede dividir en estos pasos:

Diseño del prototipo en Figma → Generación de código con Codex → Simulación en Herramientas de Desarrollo → Vista previa en móvil → Envío para revisión y publicación.

Figma se encarga de determinar el aspecto de las páginas y hacia dónde llevan los botones; Codex escribe el diseño en código; las Herramientas de Desarrollo de WeChat se utilizan para ejecutar, verificar y enviar el Mini Programa a un teléfono para su vista previa. Después de preparar tu propia cuenta de Mini Programa, lo envías para su revisión y lo publicas a través del backend de WeChat.

1. ¿Qué es Figma y por qué usarlo primero?

Figma es una herramienta de diseño y colaboración de interfaces que se usa comúnmente para diseñar páginas de aplicaciones, sitios web y Mini Programas. Los diseñadores la usan para el diseño, los colores y los botones; los gestores de producto la usan para discutir los flujos de operación; los desarrolladores ven las dimensiones, los espacios y los recursos del diseño para implementar las páginas.

También puede crear prototipos de productos en los que se puede hacer clic. Por ejemplo, vincular un botón de la página de inicio a otra página para que al hacer clic se active un salto, lo que permite probar de antemano si la operación se siente fluida.

Esto es exactamente para lo que lo estamos usando esta vez. Antes de escribir cualquier código, puedes ver varias páginas juntas y discutir si un botón está bien colocado o si una pantalla está demasiado abarrotada.

Anteriormente, este borrador de diseño solía entregarse a un desarrollador. Ahora, puedes dar el borrador confirmado a Codex para que escriba el código. Los diseñadores pueden comenzar desde el Figma que conocen; aquellos que ya usan Codex pueden dejar que genere un borrador primero y luego ajustarlo en Figma.

Así es como se hizo "One Page". Primero determinamos las tres páginas principales —Estantería, Registro y Estadísticas— y luego unificamos la combinación de colores y el diseño.

Esta es la muestra del diseño. Se usa blanco crema para el fondo, azul oscuro para el texto y los botones principales, y verde claro para resaltar la operación actual. La página de inicio coloca el libro que se está leyendo en la posición más destacada, mientras que la información estadística se coloca en una página separada para no abrumar al usuario con números al abrirla.

Este paso trata sobre el efecto general. Una vez que estés satisfecho con los colores, los tamaños de fuente y la disposición de las páginas, continúas.

2. Deja que Codex genere un borrador y completa el prototipo en Figma

Incluso si no sabes dibujar interfaces, puedes comenzar con un requisito claro. Por ejemplo, esta vez, quería un diario de lectura con mucho espacio en blanco donde pudiera ver el libro que estoy leyendo, registrar el progreso fácilmente y revisar mi historial de lectura.

Dile a Codex tus requisitos y la dirección visual juntos:

1Quiero hacer un Mini Programa de WeChat llamado "One Page" para el registro de lectura.
2Primero, diseña tres páginas: Página de inicio de la estantería, Registro de lectura y Estadísticas de lectura. No escribas código funcional todavía.
3
4El estilo visual debe ser como un diario de lectura tranquilo:
5Fondo blanco crema, texto azul oscuro, áreas clave en verde claro, con mucho espacio en blanco.
6La página de inicio debe resaltar el libro que se está leyendo y el punto de entrada para el registro. Las otras páginas deben mantener el mismo estilo visual.
7Usa gráficos geométricos originales para las portadas de los libros; usa contenido ficticio para los libros de muestra.
8
9Primero, dame una imagen de vista previa de las tres páginas una al lado de la otra.
10Además, genera tres archivos SVG independientes de 390×844, manteniendo los grupos de texto, gráficos y botones intactos para su posterior ajuste en Figma. Nombra los botones principales individualmente.

Solicitar una salida SVG te permite poner el diseño en Figma. SVG es un formato de gráficos vectoriales; en este caso, importarlo proporciona texto, gráficos y grupos que se pueden seleccionar y ajustar individualmente.

Después de obtener el borrador, modifícalo hasta que estés satisfecho. Sé lo más específico posible con los comentarios, como "reduce un poco el título de la página de inicio", "unifica los botones principales a azul oscuro" o "haz la portada del libro más grande". Una vez que las tres páginas sean satisfactorias, maneja la interacción del prototipo.

Poner el diseño en Figma

Abre un archivo de diseño de Figma, haz clic en el "+" junto a Páginas a la izquierda y crea una nueva página.

En este ejemplo, la importación se completa copiando el contenido SVG y pegándolo en el lienzo de Figma. Nombra las tres mesas de trabajo "01-Página de inicio Estantería", "02-Registro de lectura" y "03-Estadísticas de lectura", y organízalas horizontalmente. Después de seleccionar una mesa de trabajo, verifica el ancho y la altura en el panel de Diseño a la derecha.

Si es la primera vez que abres Figma, identifica estas áreas: Lista de capas a la izquierda, Lienzo en el medio, panel de Diseño a la derecha para la apariencia y Prototipo para configurar las interacciones. Para cambiar cualquier texto o botón, selecciónalo primero en la Lista de capas.

Recuerda verificar las fuentes después de la importación. Las fuentes pueden ser reemplazadas dependiendo del entorno, lo que puede cambiar el ajuste del título y el ancho del texto. La representación de la fuente en el borrador del diseño y el Mini Programa difería esta vez, por lo que necesitaban verificaciones por separado.

Agregar saltos a los botones

Toma como ejemplo la tarjeta "Continuar leyendo" en la página de inicio. Selecciónala, cambia a Prototipo en la parte superior derecha y haz clic en el "+" junto a Interacciones.

En el panel de Interacción que aparece, configura estas tres opciones:

• Disparador: Selecciona "Al hacer clic".
• Acción: Selecciona "Navegar a".
• Destino: Selecciona "02-Registro de lectura" (la mesa de trabajo de destino).

El botón de guardar en la página de registro enlaza de vuelta a la página de inicio, y el icono de estadísticas en la página de inicio enlaza a la página de estadísticas. La imagen a continuación muestra la configuración para la entrada de estadísticas.

Haz clic en el icono triangular "Presentar" en la parte superior derecha para abrir la demostración del prototipo. Haz clic desde la página de inicio y vuelve para probar las rutas entre páginas.

El prototipo de Figma demuestra los saltos; la entrada real, el guardado y las actualizaciones de datos serán implementados por el código del Mini Programa a continuación.

3. El diseño está listo; ¿dónde uso MCP?

MCP se usa en el paso de entregar el diseño de Figma a Codex. Una vez conectado, Codex puede leer la estructura del diseño, los estilos y los recursos de la mesa de trabajo seleccionada y continuar la implementación basándose en el borrador del diseño.

Si ya sabes cómo usar Figma y tienes un borrador listo, puedes comenzar directamente desde aquí. Selecciona la mesa de trabajo que deseas implementar, copia el enlace que contiene la información del nodo de esa mesa de trabajo y envíalo a Codex con la conexión de Figma habilitada.

1Lee el contexto de diseño y las capturas de pantalla de esta mesa de trabajo a través de Figma MCP.
2Primero, explica la estructura de la página, los tamaños de fuente, los colores, los espacios y los recursos que has leído.
3Dime claramente si hay partes que no puedes leer; no adivines.
4
5A continuación, crearemos un Mini Programa nativo de WeChat usando WXML, WXSS, JavaScript y JSON.
6Por favor, impleméntalo según esta pila tecnológica, reutilizando los estilos y recursos existentes del proyecto.
7Completa primero la página de inicio y continúa con las otras páginas después de la confirmación.

Asegúrate de especificar "Mini Programa nativo de WeChat". La información de diseño proporcionada por Figma debe implementarse según la plataforma de destino; no puedes simplemente usar código web para un Mini Programa.

En este ejemplo, el diseño se importó a Figma a través de SVG, y el código sigue el mismo archivo de diseño y recursos; MCP es una forma de cerrar la brecha cuando ya existe un borrador de diseño de Figma. Independientemente del método, lo que se entrega a Codex debe ser un diseño confirmado.

4. Escribir el diseño en un Mini Programa

Abre la carpeta del proyecto en Codex, coloca los archivos de diseño y los recursos de la portada del libro, y puedes comenzar la implementación.

En este paso, además de especificar la tecnología, debes indicar claramente lo que deseas recibir: un proyecto que se pueda importar directamente a las Herramientas de Desarrollo de WeChat.

1Completa el Mini Programa nativo de WeChat basado en el diseño confirmado de "One Page".
2
3Usa WXML, WXSS, JavaScript y JSON.
4Coloca el código en la carpeta miniprogram y proporciona app.json y project.config.json para asegurar que se pueda importar directamente a las Herramientas de Desarrollo de WeChat.
5
6Implementa las páginas de Estantería, Registro de lectura, Estadísticas y Añadir libro.
7Sigue la combinación de colores, el diseño y los recursos de portada de libro originales confirmados.
8Guarda los datos localmente usando wx.setStorageSync por ahora, y léelos al reabrir.
9Añade validación de entrada, estados vacíos y avisos de error al guardar.
10
11Revisa el código al finalizar y dime qué directorio importar y cómo compilar.
12Si hay elementos que necesito configurar, enuméralos por separado.

En el proyecto generado por Codex, WXML maneja la estructura de la página, WXSS maneja los estilos, JavaScript maneja los clics y el guardado, y JSON configura las rutas de las páginas. Una vez que reconozcas lo que hace cada archivo, podrás entender el directorio entregado.

No te abrumes aquí; solo deja que Codex lo resuelva por ti. No necesitas entender el código; solo copia las indicaciones, coloca tu borrador de diseño y cámbialo a tu propio nombre.

5. Ponlo en las Herramientas de Desarrollo de WeChat y comprueba si funciona

Después de instalar e iniciar sesión en las Herramientas de Desarrollo de WeChat, selecciona "Importar proyecto" del menú "Proyecto" y busca la carpeta miniprogram generada por Codex.

El nombre del proyecto puede ser el que quieras. El AppID es la identidad de este Mini Programa: puedes usar la cuenta de prueba proporcionada por la herramienta para el aprendizaje local, pero debes cambiar a tu propio AppID de Mini Programa cuando te prepares para publicar. Para este ejemplo, selecciona "No usar servicios en la nube" para el backend.

Haz clic en "Crear", ingresa al proyecto y espera la compilación. Una vez que el simulador a la derecha muestre la página, puedes operarla directamente con el mouse. Después de que Codex modifique el código, recompila para ver los resultados.

Aquí, verifica principalmente tres cosas: si las páginas están desalineadas, si los botones llevan a las páginas correctas y si el contenido ingresado se puede guardar. También, cambia el tamaño de la pantalla del simulador para ver si los títulos largos, los cuadros de entrada y la navegación inferior están apretados.

Si ocurren problemas, envía el texto de error o la captura de pantalla a Codex, junto con lo que acabas de hacer y lo que esperabas ver. Por ejemplo:

1Esta es una captura de pantalla de un error en las Herramientas de Desarrollo de WeChat.
2Cuando entro a la página de registro desde la página de inicio, la portada del libro no se muestra.
3Por favor, verifica la ruta de la imagen y el momento de carga de la página. Arrégialo manteniendo el diseño existente sin cambios.

En este caso, en realidad nos encontramos con un problema de carga de imágenes: el código comenzó a unir la dirección de la imagen antes de que los datos de la página estuvieran listos, lo que resultó en un nombre de portada de libro faltante en la ruta. Decirle al código que espere a que los datos estén listos antes de mostrar la imagen resolvió el problema.

Problemas similares no requieren que estudies el código desde cero, pero debes indicar claramente dónde ocurren. Después de la corrección, regresa al simulador, repite la operación y confirma que todo ha vuelto a la normalidad.

6. Del simulador de computadora a la vista previa móvil y la publicación

Una vez que funcione en la computadora, verifícalo en tu teléfono.

Usando un AppID con los permisos adecuados, haz clic en "Vista previa" en la parte superior de las herramientas de desarrollo, espera a que se genere el código QR y luego escanéalo con una cuenta de WeChat autorizada. Concéntrate en el tamaño de fuente en el teléfono, si el teclado bloquea el área de entrada cuando aparece y si los botones inferiores son fáciles de alcanzar.

En este ejemplo, los datos se guardan localmente, por lo que los registros en el simulador no se sincronizarán automáticamente con el teléfono. Debes volver a ingresar el contenido de prueba en el teléfono; si deseas mantener los datos entre dispositivos en el futuro, puedes agregar funciones de sincronización en la nube o copia de seguridad.

Cuando estés listo para que tus amigos lo prueben, haz clic en "Subir" en la parte superior de las herramientas de desarrollo, luego ve al backend del Mini Programa en la Plataforma Oficial de WeChat. Ingresa a Gestión de versiones, encuentra la versión de desarrollo correspondiente, establécelo como Versión de prueba y agrega miembros de prueba. Los miembros de prueba necesitan permisos adecuados.

Una vez confirmado que es utilizable, envíalo para revisión en el backend y publícalo después de la aprobación. Completa la información de la cuenta y las categorías de servicio según lo requiera el backend; no necesitas a Codex para completar estas operaciones de cuenta por ti.

Este ejemplo ha llegado a la etapa de ser ejecutable en las herramientas de desarrollo. Los lectores pueden proceder con la vista previa móvil, la carga y el envío para revisión utilizando sus propias cuentas de Mini Programa.

Conectando todo el proceso

Primero, usa Figma para determinar las páginas y los saltos de botones hasta que estés satisfecho con el diseño; luego, entrega el archivo de diseño o el enlace de la mesa de trabajo a Codex para que lo escriba en un Mini Programa de WeChat; luego, impórtalo en las herramientas de desarrollo para simular, ejecutar y verificar errores; finalmente, previsualízalo en un teléfono y, después de la confirmación, cárgalo, revísalo y publícalo.

En el futuro, ya sea que estés haciendo una herramienta de registro, una aplicación de recetas u otras pequeñas utilidades, aún puedes seguir este flujo de trabajo. Si el diseño no es satisfactorio, regresa a Figma para ajustarlo; si hay un problema funcional, entrega la operación específica y el error a Codex, y luego confirma los resultados de la modificación en las herramientas de desarrollo.

Soy Miles, un experto en algoritmos de IA que pasó de una gran empresa tecnológica a ser FDE. He trabajado en I+D, optimización e implementación de algoritmos, así como en formación corporativa. Sígueme @miles_mazy para crecer juntos y ganar dinero juntos.