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 em 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 lançamento através do backend do WeChat.
1. O que é Figma e por que usá-lo primeiro?
Figma é uma ferramenta de design de interface e colaboração, comumente usada para projetar páginas de aplicativos, sites e Mini Programas. Designers a usam para layout, cores e botões; gerentes de produto a usam para discutir fluxos de operação; desenvolvedores consultam dimensões de design, espaçamentos e assets para implementar as páginas.
Ela também pode criar protótipos de produtos clicáveis. Por exemplo, vincular 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 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 "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 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.
Esta etapa trata do efeito geral. Depois de 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-ins 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 sendo lido e o ponto de entrada para 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, gere 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 em 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 no Figma, clique no "+" ao lado de Páginas à 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 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 Design à direita para aparência e Protótipo para definir 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ítulos e a largura do texto. A renderização da fonte no rascunho do design e no Mini Programa diferiu desta vez, então foi necessário verificar separadamente.
Adicionando saltos aos botões
Pegue o cartão "Continuar Lendo" na página inicial como exemplo. Selecione-o, mude para Protótipo no canto superior direito e clique no "+" ao lado de Interações.
No painel de Interação que aparece, defina estas três opções:
- Gatilho: Selecione "Ao clicar".
- Ação: Selecione "Navegar para".
- Destino: Selecione "02-Registro de Leitura" (a prancheta de destino).
O botão salvar na página de registro volta para a 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 "Apresentar" no canto superior direito para abrir a demonstração do protótipo. Navegue pela 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 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.6Implemente 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 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 assets de capa de livro, 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 "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 com os estilos, o JavaScript 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 sinta sobrecarregado aqui; apenas deixe o Codex resolver para você. Você não precisa entender o código; basta copiar os prompts, inserir seu rascunho de design e mudar para 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 "Importar Projeto" no menu "Projeto" 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 seu próprio AppID de Mini Programa ao se preparar para publicar. Para este exemplo, selecione "Não usar serviços em nuvem" para o backend.
Clique em "Criar", 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, mude o tamanho da tela do simulador para ver se títulos longos, caixas de entrada e navegação inferior ficam apertados.
Se ocorrerem problemas, envie o texto do 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.3Verifique 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 dos 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 que funcionar no computador, verifique no seu celular.
Usando um AppID com as permissões apropriadas, clique em "Visualizar" no topo das ferramentas de desenvolvedor, aguarde a geração do QR code e escaneie-o com uma conta do WeChat autorizada. Foco 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 "Enviar" no topo das ferramentas de desenvolvedor, depois vá para o backend do Mini Programa na Plataforma Oficial do WeChat. Entre em Gerenciamento de Versões, encontre a versão de desenvolvimento correspondente, defina-a como Versão de Teste e adicione membros de teste. Membros de teste precisam de permissões apropriadas.
Depois de confirmar que está utilizável, submeta para auditoria no backend e publique após aprovação. Preencha informações da conta e categorias de serviço conforme exigido pelo backend; você não precisa do Codex para completar essas operações de conta.
Este exemplo chegou ao estágio de ser executável nas ferramentas de desenvolvedor. Os leitores podem prosseguir com a visualização no celular, envio e submissão 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 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 envie, audite e publique após confirmação.
No futuro, seja fazendo uma ferramenta de check-in, um aplicativo de receitas ou outros utilitários pequenos, 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.
