Recentemente, muitos amigos de formação em humanas têm tentado usar o Codex para desenvolver seus próprios produtos.
Os dois artigos anteriores abordaram como usar o Codex; este foca na aplicação prática: como usá-lo para construir um Mini Programa do WeChat.
Primeiro, vamos ver o resultado. Desta vez, construímos um Mini Programa de check-in de leitura chamado "One Page". Abaixo está sua interface de execução nas Ferramentas de Desenvolvedor do WeChat.
Todo o processo, desde a ideia até um Mini Programa utilizável, pode ser dividido nestas etapas:
Prototipagem no Figma → Geração de Código com Codex → Simulação nas Ferramentas de Desenvolvedor → Visualização no Celular → Envio para Auditoria e Publicação.
O Figma é responsável por definir a aparência das páginas e para onde os botões levam; o Codex transforma o design em código; as Ferramentas de Desenvolvedor do WeChat são usadas para executar, verificar e enviar o Mini Programa para visualização no celular. Após preparar sua própria conta de Mini Programa, você o submete para auditoria e o publica através do backend do WeChat.
1. O que é o Figma e por que usá-lo primeiro?
O Figma é uma ferramenta de design de interface e colaboração, comumente usada para projetar páginas de aplicativos, sites e Mini Programas. Designers o usam para layout, cores e botões; gerentes de produto o usam para discutir fluxos de operação; desenvolvedores visualizam dimensões de design, espaçamentos e assets para implementar as páginas.
Ele também pode criar protótipos de produto clicáveis. Por exemplo, vinculando um botão na página inicial a outra página para que, ao clicar, ocorra um salto, permitindo testar se a operação flui bem antecipadamente.
É exatamente para isso que o estamos usando desta vez. Antes de escrever qualquer código, você pode ver várias páginas juntas e discutir se um botão está bem posicionado ou se uma tela está muito cheia.
Anteriormente, esse rascunho de design era geralmente entregue a um desenvolvedor. Agora, você pode dar o rascunho confirmado ao Codex para escrever o código. Designers podem começar pelo Figma que já conhecem; aqueles que já usam o Codex podem deixá-lo gerar um rascunho primeiro e depois ajustá-lo no Figma.
Foi assim que o "One Page" foi feito. Primeiro, determinamos as três páginas principais — Estante, Registro e Estatísticas — e depois unificamos o esquema de cores e o layout.
Esta é a demonstração do design. O fundo é branco creme, o texto e os botões principais são azul escuro, e o verde claro destaca a operação atual. A página inicial coloca o livro que está sendo lido na posição mais proeminente, enquanto as informações estatísticas são colocadas em uma página separada para não sobrecarregar o usuário com números ao abrir o aplicativo.
Esta etapa é sobre o efeito geral. Depois de estar satisfeito com as cores, tamanhos de fonte e disposições das páginas, você avança.
2. Deixe o Codex gerar um rascunho e complete o protótipo no Figma
Mesmo que você não saiba desenhar interfaces, pode começar com um requisito claro. Por exemplo, desta vez, eu queria um diário de leitura com bastante espaço em branco, onde pudesse ver o livro que estou lendo, registrar o progresso facilmente e revisar meu histórico de leitura.
Conte ao Codex seus requisitos e direção visual juntos:
1Quero fazer um Mini Programa do WeChat chamado "One Page" para check-in de leitura.2Primeiro, projete três páginas: Página Inicial da Estante, Registro de Leitura e Estatísticas de Leitura. Ainda não escreva código funcional.34O estilo visual deve ser como um diário de leitura tranquilo:5Fundo branco creme, texto azul escuro, áreas-chave em verde claro, com bastante espaço em branco.6A página inicial deve destacar o livro que está sendo lido e o ponto de entrada para o registro. As outras páginas devem manter o mesmo estilo visual.7Use gráficos geométricos originais para as capas dos livros; use conteúdo fictício para os livros de exemplo.89Primeiro, me dê uma imagem de pré-visualização das três páginas lado a lado.10Além disso, produza três arquivos SVG independentes de 390×844, mantendo texto, gráficos e agrupamentos de botões intactos para ajustes posteriores no Figma. Nomeie os botões principais individualmente.
Solicitar a saída em SVG permite colocar o design no Figma. SVG é um formato de gráfico vetorial; neste caso, importá-lo fornece texto, gráficos e grupos que podem ser selecionados e ajustados individualmente.
Após obter o rascunho, modifique-o até ficar satisfeito. Seja o mais específico possível com o feedback, como "reduza um pouco o título da página inicial", "unifique os botões principais para azul escuro" ou "aumente a capa do livro". Depois que todas as três páginas estiverem satisfatórias, cuide da interação do protótipo.
Colocando o design no Figma
Abra um arquivo de Design do Figma, clique no "+" ao lado de "Pages" à esquerda e crie uma nova página.
Neste exemplo, a importação é concluída copiando o conteúdo SVG e colando-o na tela do Figma. Nomeie as três pranchetas como "01-Página Inicial da Estante", "02-Registro de Leitura" e "03-Estatísticas de Leitura" e organize-as horizontalmente. Após selecionar uma prancheta, verifique a largura e a altura no painel "Design" à direita.
Se for a primeira vez que abre o Figma, identifique estas áreas: Lista de camadas à esquerda, Tela no meio, Painel de Design à direita para aparência e Protótipo para configurar interações. Para alterar qualquer texto ou botão, selecione-o primeiro na Lista de camadas.
Lembre-se de verificar as fontes após a importação. As fontes podem ser substituídas dependendo do ambiente, o que pode alterar a quebra de título e a largura do texto. A renderização da fonte no rascunho do design e no Mini Programa foi diferente desta vez, então elas precisaram de verificações separadas.
Adicionando saltos aos botões
Pegue o cartão "Continuar Lendo" na página inicial como exemplo. Selecione-o, mude para "Prototype" no canto superior direito e clique no "+" ao lado de "Interactions".
No painel de interação que aparece, defina estas três opções:
- Trigger: Selecione "On click".
- Action: Selecione "Navigate to".
- Destination: Selecione "02-Registro de Leitura" (a prancheta de destino).
O botão salvar na página de registro leva de volta à página inicial, e o ícone de estatísticas na página inicial leva à página de estatísticas. A imagem abaixo mostra a configuração para a entrada de estatísticas.
Clique no ícone triangular "Present" no canto superior direito para abrir a demonstração do protótipo. Navegue da página inicial e volte para testar as rotas entre as páginas.
O protótipo do Figma demonstra os saltos; a entrada real, salvamento e atualizações de dados serão implementados pelo código do Mini Programa a seguir.
3. O design está pronto; onde uso o MCP?
O MCP é usado na etapa de entregar o design do Figma ao Codex. Uma vez conectado, o Codex pode ler a estrutura do design, estilos e assets da prancheta selecionada e continuar a implementação com base no rascunho do design.
Se você já sabe usar o Figma e tem um rascunho pronto, pode começar diretamente daqui. Selecione a prancheta que deseja implementar, copie o link contendo as informações do nó dessa prancheta e envie-o ao Codex com a conexão Figma ativada.
1Por favor, leia o contexto do design e as capturas de tela desta prancheta via Figma MCP.2Primeiro, explique a estrutura da página, tamanhos de fonte, cores, espaçamentos e assets que você leu.3Diga-me claramente se há partes que você não consegue ler; não adivinhe.45Em seguida, criaremos um Mini Programa nativo do WeChat usando WXML, WXSS, JavaScript e JSON.6Por favor, implemente de acordo com esta pilha de tecnologia, reutilizando estilos e assets existentes do projeto.7Complete primeiro a página inicial e continue com as outras páginas após a confirmação.
Certifique-se de especificar "Mini Programa nativo do WeChat". As informações de design fornecidas pelo Figma precisam ser implementadas de acordo com a plataforma de destino; você não pode simplesmente usar código web para um Mini Programa.
Neste exemplo, o design foi importado para o Figma via SVG, e o código segue o mesmo arquivo de design e assets; o MCP é uma forma de preencher a lacuna quando um rascunho de design do Figma já existe. Independentemente do método, o que é entregue ao Codex deve ser um design confirmado.
4. Escrevendo o design em um Mini Programa
Abra a pasta do projeto no Codex, coloque os arquivos de design e os assets das capas dos livros, e você pode começar a implementação.
Nesta etapa, além de especificar a tecnologia, você deve declarar claramente o que deseja receber: um projeto que possa ser importado diretamente nas Ferramentas de Desenvolvedor do WeChat.
1Por favor, complete o Mini Programa nativo do WeChat com base no design confirmado do "One Page".23Use WXML, WXSS, JavaScript e JSON.4Coloque o código na pasta miniprogram e forneça app.json e project.config.json para garantir que possa ser importado diretamente nas Ferramentas de Desenvolvedor do WeChat.56Implemente as páginas Estante, Registro de Leitura, Estatísticas e Adicionar Livro.7Siga o esquema de cores, layout e assets de capa de livro originais confirmados.8Salve os dados localmente usando wx.setStorageSync por enquanto e leia-os ao reabrir.9Adicione validação de entrada, estados vazios e avisos de falha ao salvar.1011Verifique o código após a conclusão e me diga qual diretório importar e como compilar.12Se houver itens que preciso configurar, liste-os separadamente.
No projeto gerado pelo Codex, o WXML lida com a estrutura da página, o WXSS lida com os estilos, o JavaScript lida com cliques e salvamento, e o JSON configura os caminhos das páginas. Depois de reconhecer o que cada arquivo faz, você pode entender o diretório entregue.
Não se assuste aqui; apenas deixe o Codex resolver para você. Você não precisa entender o código; basta copiar os prompts, colocar seu rascunho de design e mudar para o seu próprio nome.
5. Coloque nas Ferramentas de Desenvolvedor do WeChat e veja se funciona
Após instalar e fazer login nas Ferramentas de Desenvolvedor do WeChat, selecione "Import Project" no menu "Project" e encontre a pasta miniprogram gerada pelo Codex.
O nome do projeto pode ser o que você quiser. O AppID é a identidade deste Mini Programa: você pode usar a conta de teste fornecida pela ferramenta para aprendizado local, mas deve mudar para o AppID do seu próprio Mini Programa ao se preparar para publicar. Para este exemplo, selecione "Do not use cloud services" para o backend.
Clique em "Create", entre no projeto e aguarde a compilação. Assim que o simulador à direita exibir a página, você pode operá-la diretamente com o mouse. Após o Codex modificar o código, recompile para ver os resultados.
Aqui, verifique principalmente três coisas: se as páginas estão desalinhadas, se os botões levam às páginas corretas e se o conteúdo inserido pode ser salvo. Além disso, alterne o tamanho da tela do simulador para ver se títulos longos, caixas de entrada e navegação inferior estão apertados.
Se ocorrerem problemas, envie o texto de erro ou a captura de tela para o Codex, junto com o que você acabou de fazer e o que esperava ver. Por exemplo:
1Esta é uma captura de tela de um erro nas Ferramentas de Desenvolvedor do WeChat.2Quando entro na página de registro a partir da página inicial, a capa do livro não aparece.3Por favor, verifique o caminho da imagem e o tempo de carregamento da página. Corrija mantendo o layout existente inalterado.
Neste caso, encontramos um problema de carregamento de imagem: o código começou a concatenar o endereço da imagem antes de os dados da página estarem prontos, resultando em um nome de capa de livro ausente no caminho. Dizer ao código para esperar os dados ficarem prontos antes de exibir a imagem resolveu o problema.
Problemas semelhantes não exigem que você estude o código do zero, mas você deve declarar claramente onde eles ocorrem. Após a correção, volte ao simulador, repita a operação e confirme que está normal.
6. Do simulador do computador à visualização no celular e publicação
Depois de funcionar no computador, verifique no seu celular.
Usando um AppID com as permissões apropriadas, clique em "Preview" no topo das ferramentas de desenvolvedor, aguarde a geração do QR code e escaneie-o com uma conta do WeChat autorizada. Concentre-se no tamanho da fonte no celular, se o teclado bloqueia a área de entrada quando aparece e se os botões inferiores são fáceis de alcançar.
Neste exemplo, os dados são salvos localmente, então os registros no simulador não serão sincronizados automaticamente com o celular. Você precisa reinserir o conteúdo de teste no celular; se quiser manter dados entre dispositivos no futuro, pode adicionar funções de sincronização em nuvem ou backup.
Quando estiver pronto para amigos testarem, clique em "Upload" no topo das ferramentas de desenvolvedor e vá para o backend do Mini Programa na Plataforma Oficial do WeChat. Entre em "Version Management", encontre a versão de desenvolvimento correspondente, defina-a como "Trial Version" e adicione membros de teste. Os membros de teste precisam de permissões apropriadas.
Depois de confirmar que está utilizável, submeta para auditoria no backend e publique após a aprovação. Preencha as informações da conta e categorias de serviço conforme exigido pelo backend; você não precisa do Codex para concluir essas operações de conta para você.
Este exemplo chegou ao estágio de ser executável nas ferramentas de desenvolvedor. Os leitores podem prosseguir com a visualização no celular, upload e envio para auditoria usando suas próprias contas de Mini Programa.
Conectando todo o processo
Primeiro, use o Figma para determinar páginas e saltos de botões até ficar satisfeito com o design; depois, entregue o arquivo de design ou o link da prancheta ao Codex para escrevê-lo em um Mini Programa do WeChat; em seguida, importe-o nas ferramentas de desenvolvedor para simular, executar e verificar erros; finalmente, visualize no celular e faça upload, auditoria e publicação após a confirmação.
No futuro, seja fazendo uma ferramenta de check-in, um aplicativo de receitas ou outros pequenos utilitários, você ainda pode seguir este fluxo de trabalho. Se o design não estiver satisfatório, volte ao Figma para ajustar; se houver um problema funcional, entregue a operação específica e o erro ao Codex e confirme os resultados da modificação nas ferramentas de desenvolvedor.
Eu sou Miles, um especialista em algoritmos de IA que fez a transição de uma grande empresa de tecnologia para FDE. Trabalhei em P&D, otimização e implantação de algoritmos, bem como treinamento corporativo. Siga-me @miles_mazy para crescer juntos e ganhar dinheiro juntos.
