Curso Básico de Codex: Crie Sites, Apps e Automações

Curso Básico de Codex completo: aprenda a usar o agente da OpenAI para criar sites, apps, banco no Supabase, skills e automações no VS Code sem programar.

O que você vai ver aqui?

Introdução

Já imaginou descrever o site, o aplicativo ou a automação que você quer e ver tudo ficar pronto na sua frente, com arquivos organizados, banco de dados conectado e testes rodando? Neste Curso Básico de Codex, você vai aprender a usar o agente de código da OpenAI para fazer exatamente isso, mesmo que nunca tenha escrito uma linha de programação.

Ao longo de 6 aulas práticas, você vai sair do zero até projetos completos: uma landing page profissional, um app de agendamento para pet shop, o site de uma imobiliária de alto padrão, um quadro de ideias com login e banco de dados no Supabase, skills próprias para automatizar tarefas repetitivas e, por fim, uma automação de relatório de vendas em Python rodando dentro do VS Code.

Mais do que copiar prompts, a ideia aqui é você entender o jeito certo de trabalhar com o Codex: como organizar projetos, como escrever pedidos que funcionam de primeira, como usar o AGENTS.md, plugins e skills e como manter o controle do que a IA faz por você. Bora?

Para fazer o download dos arquivos utilizados no curso, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é o Codex e por que aprender a usar

O Codex é o agente de código da OpenAI. Ele é open-source, foi escrito em Rust e já é usado por mais de 1 milhão de desenvolvedores. A grande vantagem é que ele já vem incluso na sua conta do ChatGPT, então você não precisa contratar nada separado para começar.

A diferença para o ChatGPT que você usa no dia a dia é que o Codex é um agente. Em vez de só responder com texto, ele trabalha de verdade nos arquivos do seu computador: cria pastas, escreve código, roda comandos, testa e corrige. Se quiser uma visão mais geral antes de começar, vale conferir este guia sobre o que é o Codex e como usar essa IA.

Descubra o que o Codex faz por você

Na prática, o Codex consegue ler e entender um projeto inteiro antes de mexer em qualquer coisa. Ele edita arquivos, roda comandos no terminal, aceita imagens e screenshots como referência, trabalha com vários agentes em paralelo, roda num ambiente seguro (sandbox) com Git integrado e pode ser personalizado com skills e com o arquivo AGENTS.md, que você vai conhecer a fundo nas próximas aulas.

Infográfico do Curso Básico de Codex com as 6 capacidades do agente da OpenAI

E o mais importante: você não precisa saber programar para tirar proveito disso. Se tiver dúvida sobre qualquer coisa, basta perguntar ao próprio Codex qual é a melhor prática para construir um site, um app de agendamento ou um dashboard, e ele monta o planejamento com você.

Escolha entre as 3 formas de usar o Codex

Existem três jeitos de usar o Codex, e todos usam a mesma conta do ChatGPT:

FormaComo funcionaQuando usar
CLIInstalado pelo terminal com npm i -g @openai/codexPara quem já está acostumado com terminal
Codex AppAplicativo desktop oficialRecomendado pela OpenAI, mais estável que o navegador. É o que você vai usar nas aulas 1 a 5
Extensão de IDEPainel dentro do VS CodeFluxo mais profissional, com código, terminal e Codex lado a lado. Tema da aula 6
Três formas de usar o Codex: CLI, Codex App e extensão de IDE

Também dá para acessar o Codex pelo navegador, dentro do ChatGPT, mas o aplicativo é mais estável e é o ponto de partida recomendado pela própria OpenAI.

Entenda os planos e modelos disponíveis

O Codex vem dentro dos planos do ChatGPT. Cada plano libera uma quantidade de uso diferente:

Tabela de planos do ChatGPT com acesso ao Codex: Free, Go, Plus e Pro
PlanoPreçoPara quem
FreeR$ 0/mêsPara experimentar, com acesso limitado ao Codex
GoR$ 39,99/mêsConversas mais longas. Já é suficiente para acompanhar todo o curso
PlusR$ 99,90/mêsTrabalho avançado, uso ampliado e modelos de raciocínio avançado
Proa partir de R$ 525/mêsPesquisa e programação, com o máximo de tarefas do Codex

Nenhum exercício deste curso exige Plus, Pro ou chave de API. O plano Go dá conta de todas as aulas e projetos.

Além do plano, você escolhe o modelo que vai trabalhar em cada tarefa. A lógica é simples: tarefa simples pede modelo leve, que gasta menos; tarefa complexa pede modelo mais robusto.

Modelos disponíveis no Codex e o perfil de cada um
ModeloPerfilDisponível em
PadrãoConjunto recomendado de modelosTodos os planos
GPT-5.6 SolMais forte, gasta maisPlus e Pro
GPT-5.6 TerraEquilíbrio, custo médioPlus
GPT-5.6 LunaMais rápido, gasta menosFree e Go
GPT-6 AstraO mais forte de todosPro no chat, Plus no Codex
GPT-5.5Geração anterior, uso legadoTodos os planos

Sempre que a OpenAI atualizar os modelos do ChatGPT, essa lista muda dentro do Codex também, então vale conferir as opções disponíveis na sua conta.

Aula 1: Instale o Codex App e crie sua primeira landing page

Na primeira aula, você vai instalar o aplicativo, entender a interface e criar uma landing page completa a partir de um único prompt bem estruturado.

Baixe e instale o Codex App

Para baixar o Codex App:

  1. Pesquise por "Codex" no Google e entre na página oficial da OpenAI, com o título "Crie qualquer coisa com o Codex".
  2. Clique em Baixar para Windows (ou na opção do seu sistema operacional).
  3. Abra o executável e avance pelas telas de instalação.
  4. Quando terminar, faça login com a mesma conta que você usa no ChatGPT.
Página oficial de download do Codex App para Windows

Conheça a interface do Codex App

Depois do login, você cai na tela inicial com a pergunta "O que vamos criar?". O aplicativo reúne o Codex e o ChatGPT no mesmo lugar, mas aqui o foco é o Codex.

Tela inicial do Codex App com a pergunta O que vamos criar

Os principais elementos da interface são:

  • Novo chat: abre uma conversa nova, onde você dá as instruções em linguagem natural.
  • Projetos: onde você organiza conversas ligadas a uma mesma pasta do computador. Você vai usar muito isso a partir da aula 3.
  • Recentes: lista das conversas, que você pode arquivar, fixar ou excluir.
  • Tarefas agendadas: permitem criar um agente que roda em horário fixo, como enviar um e-mail para o time toda segunda-feira às 9h.
  • Plugins: conexões com ferramentas como Gmail, Google Drive e Supabase.
  • Mais opções: criação de sites, pesquisa em mapas e revisão de código.

Veja o que acontece com um prompt genérico

Para entender a diferença que um bom pedido faz, vale começar com um teste simples: "Olá, me ajude a criar um aplicativo de tarefas". O Codex pensa, cria os arquivos e abre uma prévia ao lado com um app funcional, onde dá para adicionar e concluir tarefas.

App de tarefas criado pelo Codex a partir de um prompt genérico

O resultado é bom, mas repare no problema: você não disse se eram tarefas pessoais, do trabalho ou do time. Quando o pedido é genérico, o Codex preenche as lacunas com o que é mais comum. Às vezes acerta, às vezes entrega algo bem diferente do que você imaginava.

Organize as conversas para economizar créditos

Antes de partir para o prompt bem feito, guarde esta regra: uma conversa por tema. O Codex tem memória dentro da sessão, então, se você pedir um app de tarefas e depois um dashboard de vendas na mesma conversa, ele pode misturar os assuntos e criar um dashboard "dentro" do app de tarefas.

Além da bagunça, isso custa caro. Toda interação com a IA consome créditos (tokens), e quanto maior o histórico, mais o Codex precisa reler a cada resposta. O resultado é mais lentidão, mais chance de resposta errada e o limite de uso chegando rápido. Quando isso acontece, aparece um aviso pedindo para você esperar algumas horas, cerca de 5 horas, até a sessão liberar de novo.

Por isso:

  • Terminou um assunto, abra um novo chat.
  • Escreva prompts completos, com contexto e regras, em vez de ficar corrigindo em várias mensagens curtas.
  • Use modelos mais leves quando a tarefa for simples.

Ajuste permissões, modelo e esforço antes de enviar

A caixa de prompt tem controles importantes que você deve conferir antes de enviar qualquer pedido.

No botão + você anexa arquivos, ativa o modo planejamento (que faz o Codex pensar antes de agir) e chama plugins.

Menu do botão mais no Codex com modo planejamento e plugins

Logo ao lado fica o controle de permissões. Lembre que você está lidando com uma IA que tem acesso ao seu computador. Se você liberar tudo sem aprovação, ela pode acessar pastas que não deveria ou enviar informações sensíveis, como a senha de um cliente para uma planilha. O mais seguro é deixar na opção que pede sua aprovação sempre que houver uma ação com potencial de risco.

Por último, escolha o modelo e o esforço de raciocínio. Quanto maior o esforço, mais analítico e mais demorado o Codex fica, e mais ele consome da sua sessão. Para um relatório simples, um esforço baixo resolve. Para uma análise de dados ou um site complexo, vale aumentar. Uma boa configuração padrão é o GPT-5.6 Sol no esforço alto, que entrega resultado bom com velocidade e consumo equilibrados.

Seletor de modelos do Codex App com as opções GPT disponíveis

Gere uma landing page completa com um prompt estruturado

Agora sim, o primeiro projeto de verdade: a landing page do Fluxo, uma ferramenta fictícia de gestão de projetos para equipes remotas. O segredo está na estrutura do prompt, que segue os princípios de engenharia de prompt:

  • Contexto: quem o Codex deve ser. Aqui, um desenvolvedor frontend sênior especializado em landing pages de alta conversão para SaaS B2B.
  • Tarefa: o que ele vai criar e para quê.
  • Estrutura: as seções da página, nesta ordem, para ele não pular etapas.
  • Design: estilo, paleta, tipografia e acabamento.
  • Regras técnicas: tecnologias, responsividade e comportamento.
  • Não faça: os limites. É a parte mais importante, porque é ela que mantém o controle do resultado.

Este é o prompt usado no curso, em versão resumida:

Codigo
Contexto: Você é um desenvolvedor frontend sênior especializado em landing pages
de alta conversão para produtos SaaS B2B.

Tarefa: Crie uma landing page completa para o "Fluxo", uma ferramenta SaaS de
gestão de projetos e tarefas para equipes remotas.

ESTRUTURA (nesta ordem):
1. Header fixo: logo, menu (Recursos, Preços, Depoimentos) e botão "Começar grátis"
2. Hero: título com o benefício principal, subtítulo, CTA primário e secundário
3. Recursos: grid de 3 a 4 cards focados em benefício
4. Prova social: logos de clientes e 2 a 3 depoimentos fictícios
5. Preços: planos Starter, Pro e Business, com o do meio destacado
6. FAQ: 5 perguntas sobre cobrança, cancelamento, integração, suporte e segurança
7. CTA final: chamada direta para cadastro
8. Footer: links institucionais, redes sociais e copyright

DESIGN:
- Estilo clean e moderno, com bastante espaço em branco
- Fundo branco ou cinza claro, destaque em verde-esmeralda
- Fonte sans-serif do Google Fonts, cards e botões arredondados com sombra sutil

REGRAS TÉCNICAS:
- HTML, CSS e JavaScript puro, em arquivos separados
- Totalmente responsivo, com menu hamburguer no mobile
- Sem "Lorem ipsum": todo o texto deve fazer sentido
- Animação suave de fade-in ao rolar a página

NÃO FAÇA:
- Não use frameworks externos (Bootstrap, Tailwind via CDN etc.)
- Não deixe nenhuma seção incompleta

Se você não conhece esses termos técnicos, tudo bem. Você pode pedir para o próprio Codex: "Quero uma landing page para uma ferramenta de gestão de projetos chamada Fluxo. Quais perguntas você precisa me fazer para eu te instruir bem?". Ele vai perguntar sobre público, funcionalidades e estilo, e você responde do seu jeito.

Depois de alguns minutos, o Codex entrega o site completo, com todas as seções, botões funcionando, animações, menu expansível no celular e até um link público para abrir no navegador.

Landing page do Fluxo criada no Curso Básico de Codex aberta no navegador

Repare que tudo isso saiu de uma única mensagem. Se quisesse trocar o verde por azul, por exemplo, seria só um refinamento numa próxima mensagem.

Aula 2: Crie um app completo sem programar

Na aula 1 um único prompt gerou uma página inteira. Agora o desafio é diferente: um aplicativo com lógica de verdade, que cresce prompt a prompt na mesma conversa. Esse jeito de construir software conversando com a IA é o que o mercado tem chamado de vibe coding.

Entenda a diferença entre página, app e projeto

Nem todo projeto digital se constrói do mesmo jeito:

  • Página: conteúdo para ler. Uma landing page inteira pode sair de um único prompt.
  • App: lógica que reage ao usuário. Cresce em vários prompts, na mesma conversa.
  • Projeto: vários arquivos e regras fixas. Ganha um Projeto no Codex App e um AGENTS.md (tema da aula 3).

E todo app tem três partes:

Infográfico com tela, regras e dados de um app
  • Tela: o que a pessoa vê e clica, como calendário, lista de horários e formulário.
  • Regras: o que o app decide sozinho, como bloquear domingo, pular o almoço e verificar se o serviço cabe no horário.
  • Dados: o que o app guarda, como a lista de agendamentos.

Conheça o projeto Patinhas & Cia

O projeto da aula é o Patinhas & Cia, um sistema de agendamento de banho e tosa. A pessoa escolhe o serviço, o dia e o horário no calendário, e o horário agendado fica bloqueado. O app roda só no navegador, num único arquivo index.html, sem instalar nada, sem login e sem banco de dados.

ServiçoDuraçãoPreçoOcupa na agenda
Banho1hR$ 602 blocos de 30 min
Banho e tosa2hR$ 1104 blocos de 30 min
Hidratação30 minR$ 401 bloco de 30 min
Tosa higiênica30 minR$ 451 bloco de 30 min

A mesma estrutura serve para qualquer negócio com horário marcado, como barbearia, clínica, consultório ou estúdio.

Construa o app em seis prompts

O app é construído em seis etapas: base funcional, agendamento, visual, novas funcionalidades, polimento e revisão. Primeiro a lógica, depois a aparência.

Os seis prompts usados para construir o app Patinhas & Cia

Preste atenção num detalhe que faz toda a diferença: a partir do segundo prompt, a última frase é sempre algo como "Mantenha todas as funcionalidades atuais funcionando exatamente como agora". É essa frase que impede o Codex de refazer o que já estava pronto.

Prompt 1: monte a base funcional

O primeiro pedido cria o calendário e a lista de horários, sem nenhuma preocupação com visual:

Codigo
Crie um aplicativo web de agendamento para um pet shop chamado Patinhas & Cia,
em um único arquivo index.html com HTML, CSS e JavaScript puros. Mostre quatro
serviços para escolher: Banho (1h, R$ 60), Banho e tosa (2h, R$ 110), Hidratação
(30 min, R$ 40) e Tosa higiênica (30 min, R$ 45). Mostre um calendário do mês,
com botões para ir ao mês anterior e ao seguinte, onde o usuário clica em um dia
para selecioná-lo. Domingos e dias que já passaram não podem ser selecionados.
Ao selecionar um dia, mostre uma lista de horários das 9h às 18h, de 30 em 30
minutos, sem o horário de almoço das 12h às 13h. Para o dia de hoje, não mostre
horários que já passaram. Use sempre datas locais, sem toISOString, para o dia
não se deslocar por causa do fuso horário. Este é um app apenas de frontend, sem
login, sem serviços externos, sem banco de dados, sem frameworks e sem instalar
nada. Mantenha simples e funcional.

O Codex cria o arquivo e já abre a prévia com os serviços, os preços e o calendário funcionando.

Primeira versão do app de agendamento Patinhas & Cia criada pelo Codex

Antes de seguir, teste: troque de mês, clique num domingo (ele deve estar bloqueado) e escolha um horário.

Prompt 2: agende e bloqueie horários

Agora o app ganha o agendamento de verdade. O pedido inclui um formulário com nome do tutor, nome do pet e telefone, todos obrigatórios, e uma confirmação com serviço, dia, horário de início e fim e preço. Ao confirmar, o horário fica ocupado, e o agendamento bloqueia todos os blocos de 30 minutos que o serviço ocupa. Um serviço só pode ser escolhido em horários onde cabe inteiro, sem invadir o almoço, sem passar das 18h e sem encostar em outro agendamento.

Aqui entram as regras do negócio, e não só regras de tela. Se já existe um pet marcado às 16h, ninguém mais pode usar esse horário.

Formulário e confirmação de agendamento no app criado com Codex

Uma dica importante: nem sempre o Codex aplica tudo de primeira. Na construção deste app, o formulário não apareceu na primeira tentativa. A solução é simples: analise o resultado, veja o que faltou e peça de novo, apontando exatamente o que precisa ser corrigido. A IA trabalha por você, mas revisar continua sendo o seu papel.

Para testar, agende um banho e tosa e veja 4 blocos ficarem ocupados. Depois troque de serviço e confira a lista de horários mudando.

Prompt 3: aplique a identidade visual

Com a lógica pronta, é hora da aparência. O pedido descreve um tema claro e alegre de pet shop, com fundo colorido suave, destaque verde-água nos botões, cada serviço num card arredondado com sombra, dia de hoje e dia selecionado destacados no calendário, dias bloqueados em cinza e uma fonte arredondada.

Repare que o prompt não define cores exatas. Ele dá a direção e deixa o Codex pesquisar o que é comum em apps de pet shop. E, claro, termina reforçando que nenhuma funcionalidade pode ser alterada.

App Patinhas & Cia com a nova identidade visual de pet shop

Depois de aplicar, repita os testes do prompt 2: o visual mudou e o comportamento continua igual.

Prompt 4: adicione novas funcionalidades

O quarto prompt adiciona duas funcionalidades sem mexer no design:

  1. Uma seção Meus agendamentos, com todos os agendamentos futuros ordenados por data e horário, um contador com o total de agendamentos e o valor total em reais, e um botão Cancelar em cada item, com confirmação antes de apagar. Ao cancelar, o horário volta a ficar livre no calendário na hora.
  2. Seis agendamentos de exemplo com nomes fictícios, espalhados pelos próximos dias úteis, para o calendário não começar vazio.
Seção Meus agendamentos com total e botão cancelar

Olha o potencial disso: com o total de agendamentos e o faturamento do período na tela, você já consegue analisar qual serviço sai mais e comparar meses. E a mesma lógica serviria para uma loja, um restaurante ou qualquer serviço.

Prompts 5 e 6: polimento, responsividade e testes

O quinto prompt é o polimento: espaçamento consistente, elementos alinhados, fontes confortáveis e, principalmente, responsividade. Em telas menores, calendário, horários e serviços devem empilhar na vertical, as áreas de toque precisam ser grandes e nada pode transbordar ou ser cortado.

O sexto prompt é o mais interessante: você pede para o próprio Codex revisar a lógica de horários e testar os casos de borda, um por um, corrigindo o que falhar. Os casos testados são:

  • Domingo não pode ser selecionado.
  • O horário de almoço nunca aparece como livre.
  • O banho e tosa de 2h não aparece às 11h, 11h30, 17h nem 17h30.
  • A hidratação de 30 min cabe num buraco de 30 min entre dois agendamentos.
  • Dois agendamentos nunca se sobrepõem.
  • Cancelar um agendamento libera todos os blocos dele.
  • A virada de mês e de ano (31 de dezembro para 1 de janeiro) funciona.
  • O dia de hoje não mostra horários que já passaram.

No final, o Codex entrega uma lista com o resultado de cada caso, os bugs encontrados e o que foi corrigido. Você nem precisa testar tudo manualmente.

Para ver o app no celular sem sair do computador, clique com o botão direito na página, vá em Inspecionar e ative o modo dispositivo. Depois é só arrastar a largura da tela e ver o layout se adaptando.

App de agendamento testado no modo mobile do navegador

Em seis prompts, você sai de uma pasta vazia e chega a um app de agendamento com regras de verdade, sem quebrar o que já funcionava em nenhuma etapa.

Ícone ComunidadeComunidade
Impressionadora

Aprenda, em um só lugar, as habilidades mais importantes do mercado — do básico ao avançado. Desenvolva projetos práticos e se torne um profissional pronto para se destacar.

Começar agoraSeta para a direita
Fundo ComunidadeTelas Comunidade

Aula 3: Organize o trabalho com Projetos e AGENTS.md

Até aqui, cada projeto viveu numa conversa solta. Isso funciona para testes, mas não escala. Nesta aula você aprende a organizar o trabalho do jeito profissional, com Projetos e com o arquivo mais importante de qualquer aplicação no Codex: o AGENTS.md.

Entenda por que trabalhar dentro de um Projeto

Quanto mais você conversa numa mesma sessão, mais o contexto fica sobrecarregado. Chega um ponto em que o Codex começa a perder informações e pode até "alucinar", entendendo que você queria um fluxo de produtos quando pediu um fluxo de vendas. Cada sessão também tem um limite do quanto consegue armazenar.

A saída seria abrir um chat novo, mas aí você perde todo o contexto e precisa explicar tudo de novo. É exatamente esse problema que o Projeto resolve.

Infográfico de como funciona um Projeto no Codex App
  • Pasta: uma pasta do seu computador, criada vazia, onde ficam os arquivos.
  • Projeto: criado no Codex App apontando para essa pasta. Todas as conversas do site ficam dentro dele.
  • Limite: o Codex só altera arquivos dessa pasta, o que dá mais segurança.

Crie um Projeto no Codex App

O projeto desta aula é o site da Hashmoveis, uma imobiliária de alto padrão no Rio de Janeiro. Antes de abrir o Codex:

  1. Crie uma pasta vazia chamada hashmoveis.
  2. Dentro dela, crie uma subpasta para as inspirações.
  3. Coloque nessa subpasta imagens e vídeos de referência do visual que você quer. Pode ser algo que você encontrou numa pesquisa no Google.

Depois, no Codex App, clique no + ao lado de Projetos (ou em "Escolher projeto", na caixa de prompt), dê o nome do projeto, adicione a pasta do computador e clique em Criar projeto. O Codex pergunta se você confia na pasta. Como foi você quem criou, pode confirmar.

Janela Criar projeto no Codex App apontando para uma pasta

Para testar a conexão, pergunte "O que existe dentro dessa pasta?". O Codex lista a subpasta de inspirações com as imagens e o vídeo de referência.

Um aviso: mesmo usando as mesmas imagens e prompts, o seu resultado pode sair com outra cor, outra fonte ou outro arredondamento. A IA tem uma parte de aleatoriedade. O importante é ela construir um site de imobiliária, e não um site de hambúrguer.

Use o AGENTS.md como memória do projeto

O AGENTS.md é um arquivo de texto na raiz do projeto que o Codex lê automaticamente no início de toda conversa, antes mesmo do seu primeiro prompt. Ele funciona como um arquivo de configurações e regras. Se você definiu que o tema é azul, isso fica registrado ali, e o Codex respeita em todos os pedidos seguintes. O formato segue um padrão aberto chamado AGENTS.md, usado por vários agentes de código.

Comparação entre trabalhar sem e com AGENTS.md no Codex

Além de manter as regras, ele economiza tokens: em vez de reler 10 ou 20 prompts de histórico, o Codex olha direto para esse arquivo e já entende o contexto.

O que vai dentro de um bom AGENTS.md:

O que vai dentro do arquivo AGENTS.md
SeçãoO que registrar
VisãoO que é o projeto, em 2 ou 3 linhas
StackLinguagens e ferramentas usadas
EstruturaArquivos e pastas planejados
Padrão visualPaleta, tipografia, componentes e clima
Regras fixasIdioma, dados fictícios, nada de dependências sem pedir
AtualizaçãoRevisado sempre que o projeto muda de verdade

E não se preocupe se nunca escreveu um: o próprio Codex cria o arquivo para você.

Gere o AGENTS.md antes do código

Num projeto novo a ordem se inverte: primeiro as regras, depois o código. O primeiro prompt pede para o Codex analisar as inspirações e criar o AGENTS.md:

Codigo
Estou começando um projeto novo do zero: o site da Hashmoveis, uma imobiliária
de alto padrão no Rio de Janeiro. Analise os arquivos da pasta de inspirações
(imagens e vídeo de referência) e crie um arquivo AGENTS.md na raiz do projeto
documentando: a visão do site em 2 ou 3 linhas; a stack (HTML, CSS e JavaScript
puros, sem frameworks e sem instalar nada); a estrutura de arquivos planejada
(index.html, style.css, script.js e a pasta de inspirações); o padrão visual
extraído das referências (paleta de cores, tipografia, estilo dos componentes e
clima do site); e as regras fixas: textos em português do Brasil, imóveis e
clientes sempre fictícios, e nunca adicionar frameworks, bibliotecas ou
dependências sem eu pedir explicitamente. Se não conseguir abrir o vídeo, use só
as imagens e me avise. Não crie nenhum outro arquivo, apenas o AGENTS.md.
Codex confirmando a criação do AGENTS.md da Hashmoveis

Abra o arquivo gerado e leia. Não se assuste com as hashtags e barras, é só a formatação Markdown (extensão .md). Ajuste o que não bateu com o que você queria, porque tudo o que estiver ali vale para todos os prompts seguintes.

Construa o site da Hashmoveis em etapas

Com as regras definidas, o site é construído em prompts curtos, separando conteúdo de aparência. Mandar um prompt de mil linhas de uma vez dificulta encontrar e corrigir problemas. Em etapas, você revisa cada uma antes de seguir.

  1. Estrutura e conteúdo: página única com menu (Imóveis, Diferenciais, Depoimentos, Contato), seção principal com botão "Ver imóveis", 6 imóveis fictícios no Leblon, Ipanema, Barra da Tijuca, São Conrado, Jardim Botânico e Lagoa (com foto, tipo, metragem, quartos, vagas e preço entre R$ 4 milhões e R$ 30 milhões), 4 diferenciais, 3 depoimentos e rodapé. O prompt começa com "Siga o AGENTS.md" e ainda não se preocupa com o visual.
  2. Identidade visual: cara de imobiliária de alto padrão, com muito espaço em branco, tipografia elegante, paleta sóbria, fotos grandes, cards com sombra suave, hero com imagem em tela cheia e menu fixo translúcido. Tudo seguindo o padrão registrado no AGENTS.md.
  3. Funcionalidades: filtros por tipo (todos, apartamento, cobertura e casa) e por bairro, com mensagem amigável quando nada combina, e um botão "Agendar visita" em cada card, que abre uma janela com formulário de nome, e-mail, telefone e data preferida, com validação no navegador.
  4. Polimento e responsividade: espaçamento consistente, menu que vira botão no celular, cards empilhados e modal que cabe na tela.

Na primeira versão, o Codex usou as fotos da pasta de inspirações direto nos cards, repetindo as mesmas imagens. O refinamento foi pedir para usar as imagens só como referência e criar imagens próprias, além de adicionar uma animação no hero. O resultado mudou completamente:

Site da imobiliária Hashmoveis criado no Curso Básico de Codex

Com as funcionalidades, o site deixa de ser estático. Os filtros atualizam a lista sozinhos e se combinam entre si:

Filtro por tipo de imóvel no site da Hashmoveis

E o agendamento de visita abre um modal com validação. Se o telefone tiver poucos dígitos, por exemplo, o formulário avisa antes de enviar:

Modal de agendar visita com validação de formulário

Como o site ainda não tem back-end, nenhum dado é enviado de verdade. Mas a estrutura já está pronta para receber um envio real no futuro.

Mantenha o AGENTS.md atualizado

Depois de tudo isso, o AGENTS.md ainda descreve só o planejamento inicial. E um AGENTS.md desatualizado orienta o Codex com informação errada nas próximas conversas.

O último prompt pede para atualizar o arquivo com a estrutura final, as seções da página, os filtros, o formulário de visita e como adicionar um imóvel novo seguindo o padrão dos cards, sem alterar nenhum arquivo do site.

E aqui vem o pulo do gato: faça isso numa conversa nova dentro do Projeto. O Codex já abre perguntando o que vamos fazer nessa pasta e consegue ler tudo o que foi construído, sem precisar do histórico da conversa anterior.

AGENTS.md atualizado numa conversa nova dentro do Projeto

Ao clicar em "Visualizar alterações", você vê em vermelho o que saiu e em verde o que entrou no arquivo.

Para provar que funciona, abra outra conversa nova e peça só: "Adicione uma cobertura de R$ 18 milhões na Lagoa à lista de imóveis". Sem repetir nenhuma regra, o Codex entrega o imóvel no padrão do site.

O hábito que fica: toda vez que o projeto mudar de verdade, e não só numa correção pontual, atualize o AGENTS.md antes de seguir.

Aula 4: Conecte o Codex ao Supabase com plugins

Até aqui o Codex só enxergava a sua pasta. Nesta aula ele passa a operar um serviço externo, o Supabase, que vai ser o banco de dados e o sistema de login de um projeto novo, o IdeiaHash: um quadro onde a equipe publica ideias de produto e vota nas melhores.

Entenda o que é um plugin no Codex

Um plugin é um pacote instalável que junta, num só lugar, as conexões com um serviço externo (servidores MCP) e as skills que ensinam o Codex a usar esse serviço direito.

Infográfico explicando o que é um plugin no Codex
  • Conexão: a ponte que liga o Codex ao serviço e libera ações, como criar tabelas e consultar o banco.
  • Skills: o manual, com os passos e os cuidados certos.
  • 1 clique: você instala na aba Plugins e autoriza com o login da sua conta, sem copiar token nem chave.

Na prática, a diferença é enorme:

Comparação entre usar o Supabase sem e com o plugin do Codex

Sem o plugin, você cria tabelas clicando no painel, copia o SQL, cola, volta, copia a chave da API, e o Codex só escreve o código "chutando" o schema. Com o plugin, o Codex cria o projeto, aplica as migrations, lê o schema real antes de escrever o código e gera os tipos TypeScript direto do banco.

Para ver os plugins disponíveis, digite @ na caixa de mensagem ou abra a aba Plugins. São mais de 3 mil opções, como Gmail, Google Drive, Shopify, Canva e Figma.

Lista de plugins disponíveis no Codex App

O plugin do Supabase traz mais de 20 ferramentas, entre elas list_tables, execute_sql, apply_migration, get_advisors, generate_typescript_types, list_projects, create_project, get_cost e search_docs, além das skills supabase e supabase-postgres-best-practices.

Conecte o Codex ao Supabase em 5 passos

O Supabase é um backend pronto em cima do Postgres: banco de dados, login de usuários, regras de acesso por linha (RLS), API automática e um plano gratuito com 2 projetos ativos por organização. Se quiser se aprofundar na ferramenta, confira este guia sobre o que é o Supabase.

A conexão leva uns 5 minutos e não precisa de token, chave de API nem arquivo de configuração:

Passo a passo para conectar o Codex ao Supabase
  1. Crie a conta em supabase.com. De preferência, entre com o mesmo e-mail que você usa no ChatGPT, o que evita etapas extras e erros. No primeiro acesso, crie uma organização no plano Free.
  2. Instale o plugin no Codex App: aba Plugins, busque Supabase e clique no +.
  3. Autorize o acesso: o navegador abre a tela do Supabase. Faça login, escolha a organização que acabou de criar e clique em autorizar.
  4. Abra uma conversa nova dentro do Projeto. O plugin só aparece em conversas criadas depois da instalação. Se ele não aparecer, feche e abra o Codex App de novo.
  5. Teste a conexão com um pedido só de leitura.
Criação de organização no plano Free do Supabase

Para o teste, crie uma pasta vazia chamada ideario (ou ideiahash), abra como Projeto no Codex App e envie:

Codigo
@Supabase liste minhas organizações e os projetos que eu já tenho.
Apenas leitura: não crie, não altere e não apague nada.
Teste de conexão do Codex com o Supabase em modo leitura

Repare no bloco que mostra a ferramenta chamada, como list_projects, e o resultado. É o MCP funcionando: o Codex não "sabe" seus projetos, ele consulta a sua conta naquele momento. Se a conta é nova, a lista vem com a organização e nenhum projeto, e está tudo certo.

Escreva um prompt de alta qualidade

Antes de construir o IdeiaHash, vale organizar a anatomia de um bom prompt, que você vai usar daqui para frente:

Anatomia de um prompt de alta qualidade para o Codex
BlocoO que colocar
ContextoO que é o projeto e em que ponto ele está
TarefaUm objetivo claro, com verbo no imperativo
RequisitosLista numerada, específica e verificável
Não façaLimites explícitos e o que não pode mudar
TestesComo provar que funciona, incluindo casos de erro
EntregaO que o Codex deve reportar: arquivos, testes e pendências

O primeiro prompt do projeto cria o AGENTS.md seguindo essa anatomia. Ele define a visão do produto, a stack (React, Vite, TypeScript, Tailwind CSS e Supabase com Postgres e Auth), a estrutura de pastas, as regras de banco (toda tabela com RLS e políticas explícitas, toda mudança por migration versionada e nunca usar a chave service_role no frontend), as convenções de código, os comandos (npm run dev, npm run build, npm run lint) e uma seção "Como trabalhar": planejar antes de implementar, mostrar o SQL antes de aplicar e rodar build e lint ao final.

O resultado da stack pode variar de acordo com o que o Codex planejar para você. O importante é que tudo fique registrado no AGENTS.md.

Planeje o MVP antes de mexer no banco

Pedir um plano antes de implementar é o jeito mais barato de corrigir o rumo: você discute o schema quando ele ainda é texto, e não quando já está no banco.

Para ativar o modo planejamento, digite / na caixa de mensagem. Aparece a lista de comandos do Codex, como arquivar e compactar a conversa (que resume o histórico quando ele fica longo), e o modo planejamento.

Lista de comandos do Codex aberta com a barra

Com o modo ativo, envie o pedido do plano:

Codigo
Contexto: Leia o AGENTS.md. Vamos construir o MVP do Ideário.
Tarefa: Monte um plano de implementação. Não escreva código e não use nenhuma
ferramenta que altere algo.

O MVP PRECISA DE:
- Cadastro e login com e-mail e senha (Supabase Auth)
- Lista de ideias ordenada por número de votos
- Publicar ideia: título até 80 caracteres, descrição até 500
- Votar e desfazer o voto, com no máximo um voto por pessoa por ideia

ENTREGUE:
1. Tabelas com colunas, tipos e restrições
2. Políticas RLS de cada tabela, em português simples
3. Lista de migrations na ordem de aplicação
4. Estrutura de componentes e páginas
5. Decisões em aberto que dependem de mim

Espere minha aprovação antes de implementar.

Durante o planejamento, o Codex faz perguntas, como "Quem deve ver a lista de ideias e votos antes de fazer login?". Cada pergunta traz uma opção marcada como recomendada. Se você não domina o assunto, seguir a recomendação costuma ser uma boa escolha, mas leia sempre, porque você pode escrever a sua própria resposta. As perguntas podem ser diferentes para você.

Plano do MVP do IdeiaHash gerado no modo planejamento

No fim, o Codex entrega o plano completo: resumo, tabelas, colunas, restrições, políticas, migrations, telas e fluxo de verificação. Pense no trabalho que isso economiza: os relacionamentos entre tabelas costumam ser a parte que mais dá dor de cabeça num banco de dados.

Crie o banco com o plugin do Supabase

O plano mostra a opção "Implementar este plano?". Você pode simplesmente aceitar, mas, para garantir que o Codex use o plugin, é melhor responder com um prompt explícito chamando o @Supabase:

Codigo
Plano aprovado. Use o plugin do Supabase (@Supabase) para:
1. Criar um projeto chamado "ideario" na minha organização, no plano gratuito e
   na região sa-east-1. Mostre o custo e peça minha confirmação antes de criar.
2. Aplicar as migrations do plano (tabelas, restrições, RLS e políticas),
   salvando cada uma também em supabase/migrations/.
3. Rodar os advisors de segurança e de performance e corrigir o que aparecer.
4. Gerar os tipos TypeScript do banco em src/types/database.ts.

REGRAS:
- Mostre o SQL de cada migration antes de aplicar
- Não coloque a chave service_role em nenhum arquivo

Você continua no controle: o Codex consulta o custo e pede confirmação antes de criar o projeto (no plano Free, o custo é zero), espera o projeto ficar pronto, mostra o SQL de cada migration e só aplica depois da sua aprovação.

SQL de migration gerado pelo Codex para o Supabase

Se você já tem 2 projetos ativos no plano gratuito, troque o passo 1 por: "Não crie um projeto novo. Use o projeto existente 'ideario' da minha organização e siga a partir do passo 2 do plano aprovado."

Em poucos minutos, o banco aparece no painel do Supabase, em Database, com as tabelas e os relacionamentos criados: ideas, votes e profiles, além do gatilho de cadastro e de dados de exemplo.

Schema do banco com as tabelas ideas, votes e profiles

Gere o frontend em cima do banco real

Com o banco pronto, o Codex cria a interface lendo o schema e os tipos reais, em vez de adivinhar nomes de tabelas e colunas. O prompt de frontend pede para:

  1. Inicializar o projeto com Vite, React e TypeScript e configurar o Tailwind.
  2. Criar o src/lib/supabase.ts lendo VITE_SUPABASE_URL e VITE_SUPABASE_PUBLISHABLE_KEY de um arquivo .env.local, preenchido pelo próprio plugin e incluído no .gitignore.
  3. Criar as telas de login e cadastro, a lista de ideias ordenada por votos (com botão de votar e desfazer) e o formulário de nova ideia.
  4. Validar o tamanho do título e da descrição.
  5. Mostrar estados de carregamento, lista vazia e erro.
  6. Testar: build e lint sem erros, voto duplicado bloqueado pelo banco e usuário deslogado sem conseguir publicar nem votar.

Um passo manual antes de testar: no painel do Supabase, em Authentication, desative a confirmação de e-mail. Assim o cadastro funciona na hora.

O resultado é um app completo, com cadastro, login, publicação de ideias e votação:

Site IdeiaHash com as ideias mais votadas da equipe

Para confirmar que tudo está conectado, publique uma ideia no site e abra o Table Editor no Supabase. A ideia nova aparece na tabela ideas, e os votos também são atualizados em tempo real.

Table Editor do Supabase com a ideia publicada pelo site

Para fechar, siga o mesmo hábito da aula 3 e atualize o AGENTS.md: projeto Supabase (só a URL, sem nenhuma chave), tabelas, restrições, resumo das políticas RLS, como regenerar os tipos e a regra de que o .env.local nunca vai para o Git.

Resolva os problemas mais comuns

ProblemaSolução
O plugin não aparece no @Abra uma conversa nova. Se continuar, reinicie o Codex App
Sem acesso à organizaçãoDesinstale e instale o plugin de novo, escolhendo a organização certa
Limite de projetos gratuitosPause um projeto antigo no painel ou use o prompt da alternativa
O Codex não usa o pluginEscreva @Supabase no começo do prompt
Cadastro no app não entraDesative a confirmação de e-mail em Authentication
O app não conecta ao bancoConfira se o .env.local existe e reinicie o npm run dev

Um cuidado de segurança importante: o plugin age em seu nome no Supabase. Leia o SQL antes de aprovar, use um projeto só para estudo e nunca aponte o plugin para um banco de produção. E desinstalar o plugin não revoga o acesso, então revogue também nas configurações da sua conta Supabase.

Aula 5: Deixe o Codex mais poderoso com skills

O termo "skill" assusta um pouco, mas é bem mais simples do que parece. Nesta aula você vai usar skills prontas, entender como o Codex decide quando usar cada uma e criar a sua própria skill para o IdeiaHash.

Entenda o que é uma skill

Uma skill é uma pasta com um arquivo SKILL.md que ensina o Codex a fazer uma tarefa específica, passo a passo. Não é código: é um texto em linguagem natural, com o jeito de fazer algo que você já faz. Alguns exemplos:

  • Criar uma tabela: migration no padrão do projeto e RLS sempre ligado.
  • Revisar código: o que conferir em cada arquivo e como reportar o problema.
  • Escrever um e-mail: o tom, as palavras do time, como abre e como fecha.
  • Montar um relatório: as regras, os critérios e o que conferir antes de fechar.

Se quiser entender o conceito de forma mais ampla, leia também sobre skills em agentes de IA.

Neste ponto do curso, é comum confundir as peças. Esta tabela resolve:

Diferença entre Projeto, AGENTS.md, Skill e Plugin no Codex
PerguntaResposta
Onde ficam a pasta e as conversas?Projeto
Vale para tudo no projeto?AGENTS.md
Só para um tipo de tarefa?Skill
Precisa de um serviço de fora?Plugin

Saiba de onde vêm as skills

Você já usou skills sem perceber. Na aula 4, enquanto o Codex criava o banco, de vez em quando aparecia uma mensagem avisando que ele estava usando uma skill. Ninguém pediu: ela veio dentro do plugin e o Codex decidiu sozinho que era hora de usar.

De onde vêm as skills do Codex

As skills vêm de três lugares:

  • Do sistema: já vêm no Codex, como $skill-creator (a skill que cria skills), $skill-installer e $plugin-creator. Há também skills nativas para criar PDFs, imagens e sites.
  • De um plugin: chegam junto na instalação, como supabase e supabase-postgres-best-practices.
  • Suas: criadas por você, em .agents/skills dentro do projeto ou em ~/.agents/skills para uso pessoal em qualquer projeto.

O Codex lê só o nome e a descrição de cada skill e carrega o conteúdo completo apenas quando o pedido combina. Por isso uma skill pode ser longa e detalhada sem pesar no contexto.

Diferencie AGENTS.md e skill

As duas coisas guardam instruções, mas com papéis diferentes:

Comparação entre AGENTS.md e skill no Curso Básico de Codex

O AGENTS.md responde "como é este projeto". É lido em toda conversa, guarda regras gerais (stack, padrões e limites) e deve ser curto, porque ocupa contexto o tempo todo. A skill responde "como fazer esta tarefa". É carregada só quando o pedido combina, guarda um procedimento com passos e checagens e pode ser longa.

A regra prática: se é uma regra que vale sempre, vai para o AGENTS.md. Se é um passo a passo que você repete para um tipo de tarefa, vira skill.

Chame uma skill pelo nome ou de forma automática

Existem duas formas de usar uma skill:

Duas formas de usar uma skill: pelo nome e automática

Pelo nome (chamada explícita): digite $ na caixa de mensagem e escolha a skill. Sem o cifrão, o Codex não entende que você está chamando uma habilidade. No IdeiaHash, o pedido foi uma auditoria do banco criado na aula anterior:

Codigo
$supabase-postgres-best-practices Revise o schema, os índices e as políticas RLS
do banco do Ideário.
Apenas leitura: não aplique nenhuma alteração.
Entregue uma tabela com: problema, tabela afetada, impacto (alto, médio ou baixo)
e a correção sugerida em SQL.

O Codex avisa que vai usar a skill de boas práticas do Supabase, faz só consultas de leitura nas tabelas e entrega a lista de problemas encontrados, sem executar nenhum SQL de alteração.

Codex usando a skill de boas práticas do Supabase pelo nome

Automática (chamada implícita): numa conversa nova, você só descreve o pedido, sem citar skill nenhuma:

Codigo
O Ideário vai ter milhares de ideias e votos. As consultas da lista de ideias
estão preparadas para esse volume? Analise e me diga o que você mudaria, sem
aplicar nada ainda.

Ao expandir o log da conversa, dá para ver o Codex lendo a skill do Supabase e, em seguida, a mesma supabase-postgres-best-practices. Ele comparou o seu pedido com a descrição das skills disponíveis e abriu a que combinava.

Log do Codex lendo a skill automaticamente

Na análise, o Codex sugeriu paginar a lista, evitar recalcular o ranking inteiro a cada leitura e buscar só os votos do usuário na página visível. A partir daí, você pode aplicar as melhorias em etapas, aprovando o SQL de cada uma. A forma automática é ótima porque ninguém precisa decorar o nome de todas as skills que existem. Os detalhes de como o Codex escolhe e carrega skills estão na documentação oficial de skills do Codex.

Saiba quando vale criar uma skill

Com tantas skills prontas, quando faz sentido criar a sua? A pergunta-chave é: vou repetir essa tarefa 1, 10, 20 vezes neste projeto? Se sim, ela é candidata.

Quando e como criar uma skill no Codex

Vale criar quando:

  1. A tarefa se repete no projeto e é específica do seu negócio.
  2. Os passos são sempre os mesmos.
  3. Existe um padrão do projeto a seguir. Por exemplo, todo e-mail começa com "Olá, tudo bem?" e termina com a sua assinatura.
  4. Há coisas que o Codex nunca deve fazer nessa tarefa.

E uma boa skill segue cinco regras: description com as palavras que você usaria no pedido, uma tarefa por skill (e não uma skill que faz tudo), o que ela nunca deve fazer, nada repetido do AGENTS.md e, se você editar a skill, abrir uma conversa nova para a mudança valer.

Crie a skill nova-tabela com o skill-creator

No IdeiaHash, toda tabela nova segue o mesmo ritual: migration versionada, RLS, advisors, tipos e AGENTS.md atualizado. É o candidato perfeito para uma skill. E o melhor: quem escreve a skill é o próprio Codex, com o $skill-creator.

Codigo
$skill-creator Crie uma skill chamada nova-tabela e salve em .agents/skills
deste projeto.

QUANDO USAR: sempre que eu pedir uma tabela nova ou uma mudança de schema no
banco Supabase do Ideário.

PASSOS DA SKILL:
1. Ler o AGENTS.md e as migrations existentes em supabase/migrations
2. Escrever a migration no padrão AAAAMMDDHHMMSS_descricao.sql
3. Habilitar RLS e criar políticas explícitas de select, insert, update e delete
4. Mostrar o SQL e esperar minha aprovação antes de aplicar com o plugin
5. Aplicar, rodar os advisors de segurança e corrigir os alertas
6. Regenerar src/types/database.ts
7. Atualizar a seção de banco do AGENTS.md

NUNCA: aplicar sem aprovação, desabilitar RLS ou usar a chave service_role
no frontend.

Em menos de 2 minutos, a skill aparece com um ícone azul. Ao passar o mouse, você vê o caminho: .agents/skills/nova-tabela/SKILL.md.

Arquivo SKILL.md da skill nova-tabela

Repare na estrutura, que é sempre a mesma: a subpasta tem o nome da skill e, dentro dela, o arquivo se chama sempre SKILL.md (e não nova-tabela.md). O arquivo tem um cabeçalho entre três traços com name e description, e o procedimento logo abaixo:

Codigo
---
name: nova-tabela
description: Cria ou altera tabelas no banco Supabase do Ideário com migration
  versionada, RLS, advisors e tipos atualizados. Use quando o usuário pedir uma
  tabela nova, coluna nova ou qualquer mudança de schema.
---

# Nova tabela no Ideário

1. Leia o AGENTS.md e as migrations em supabase/migrations.
2. Escreva a migration em supabase/migrations/AAAAMMDDHHMMSS_descricao.sql.
3. Habilite RLS e crie políticas explícitas de select, insert, update e delete.
4. Mostre o SQL completo e espere aprovação.
5. Aplique com o plugin do Supabase e rode os advisors de segurança.
   Corrija qualquer alerta antes de continuar.
6. Regenere src/types/database.ts com o plugin.
7. Atualize a seção de banco do AGENTS.md.

Nunca aplique sem aprovação, nunca desabilite RLS e nunca use a chave
service_role no frontend.

O cabeçalho é a única parte que o Codex lê o tempo todo, então leia a description em voz alta: é ela que decide se a skill vai ser usada. O corpo só é carregado quando a skill entra em ação, e a linha "Nunca..." deixa o comportamento previsível.

Use a skill em mudanças reais no banco

Hora de usar a skill numa funcionalidade nova. Repare que o prompt descreve só o que você quer. O como já está na skill:

Codigo
$nova-tabela Quero que as pessoas comentem nas ideias.
- Comentário com texto de até 300 caracteres
- Só usuários logados comentam
- Qualquer usuário logado lê os comentários
- Cada pessoa edita ou apaga só o próprio comentário

O Codex aciona a skill, lê as migrations, prepara tudo e para antes de mexer no banco, pedindo aprovação para o SQL. Basta responder "Aplique o SQL" para seguir.

Codex pedindo aprovação do SQL antes de aplicar

Note que uma skill raramente trabalha sozinha. Para criar a tabela, o Codex também usou ferramentas e skills do próprio plugin do Supabase. No painel, a tabela comments aparece ligada a ideas e profiles:

Tabela comments criada pela skill no Supabase

E tem mais: sem você pedir, o Codex entendeu que não faria sentido ter a tabela sem interface e já criou a área de comentários no site, com autor, data, botão de editar e de apagar (com confirmação antes de excluir).

Comentários funcionando no site IdeiaHash

Agora o teste da chamada automática. Numa conversa nova, sem citar a skill:

Codigo
Preciso classificar as ideias por categoria: Produto, Marketing e Interno.
Cada ideia tem uma única categoria.

O Codex responde "Vou usar nova-tabela" e ainda percebe que, em vez de criar uma tabela nova, faz mais sentido adicionar uma coluna de categoria na tabela ideas que já existia. Ele pergunta como classificar as 4 ideias atuais (a opção recomendada é classificar pelo conteúdo), mostra o SQL, espera a aprovação e aplica.

Coluna category adicionada na tabela ideas

No site, aparece um filtro por categoria com a contagem de ideias, e os comentários antigos continuam lá, mesmo com as mudanças no banco e na interface.

Para fechar, registre a skill no AGENTS.md sem duplicar o conteúdo dela:

Codigo
Atualize o AGENTS.md: na seção de banco, acrescente que toda mudança de schema
deve passar pela skill nova-tabela. Não copie os passos da skill para o
AGENTS.md. Não altere nenhum outro arquivo.

Se algo não funcionar: se a skill não aparece no $, confira o caminho .agents/skills/nova-tabela/SKILL.md. Se você editou a skill e nada mudou, abra uma conversa nova. E se o Codex não usou a skill na chamada automática, a description está vaga: inclua palavras como "tabela", "coluna" e "schema".

Uma dica extra: se você fechar o Codex App e, ao voltar, o site não conseguir fazer login ou salvar ideias, a ponte com o Supabase pode ter ficado desatualizada. Basta pedir ao Codex, dentro do Projeto, para colocar o projeto no ar de novo. Ele diagnostica a falha, refaz a integração e publica outra vez, sem você precisar reinstalar o plugin.

Aula 6: Use o Codex no VS Code como um profissional

Na última aula, o ambiente muda: em vez do aplicativo, você vai usar o Codex dentro do VS Code, o editor de código mais usado no mercado. O projeto é uma automação de dados em Python, do CSV bruto até um dashboard interativo.

Instale e conecte a extensão do Codex

Se você nunca usou o VS Code, não tem problema. Você pode seguir esta aula inteira pelo Codex App, do mesmo jeito das aulas anteriores. Mas o VS Code deixa tudo mais profissional, porque você enxerga os arquivos que o Codex cria, edita o código à mão quando quiser e usa o terminal no mesmo lugar.

Comparação entre Codex App e extensão no VS Code

Para instalar o editor, pesquise "VS Code" no Google e baixe em code.visualstudio.com. Durante a instalação, marque as opções extras, como criar ícone na área de trabalho e abrir pastas com o VS Code pelo botão direito. Se precisar de um passo a passo detalhado, confira como baixar e configurar o VS Code.

Depois:

  1. Abra a aba de Extensões (Ctrl+Shift+X no Windows ou Cmd+Shift+X no Mac), busque "Codex" e instale a extensão Codex (OpenAI's coding agent). Confirme que o publicador é a OpenAI, porque existem extensões parecidas de terceiros.
  2. Clique no ícone do Codex na barra lateral. Se ele não aparecer, abra a Paleta de Comandos (Ctrl+Shift+P) e rode Codex: Open Codex Sidebar.
  3. Clique em Sign in with ChatGPT e autorize com a mesma conta das aulas anteriores.
  4. Crie uma pasta vazia para o projeto e abra no VS Code (File, Open Folder, ou botão direito na pasta e "Abrir com Code").
  5. Escolha Work locally para rodar na sua máquina. A outra opção, Run in the cloud, roda num ambiente isolado conectado ao GitHub.
Extensão oficial do Codex no marketplace do VS Code

Uma diferença importante: no VS Code você não precisa criar um Projeto. A pasta aberta no editor já é o projeto. E as conversas sincronizam com o Codex App, então o que você roda no VS Code aparece no aplicativo, e vice-versa.

Conheça o projeto AutoVendas

Imagine um analista de dados que recebe toda semana um CSV bruto de vendas e perde horas limpando os dados e montando o mesmo relatório. O AutoVendas automatiza isso do início ao fim.

Fluxo do projeto AutoVendas: CSV, pipeline e dashboard
  • Entrada: data/vendas_2025.csv, com 3.045 linhas de pedidos e 12 colunas (pedido, data, cliente, produto, categoria, região, vendedor, quantidade, preço unitário, desconto, valor total e forma de pagamento).
  • Pipeline: pipeline.py valida, limpa e calcula os KPIs com Pandas.
  • Interface: app.py mostra tudo num dashboard em Streamlit.
  • Saída: data/vendas_limpas.csv com os dados tratados.

Para preparar, crie a pasta AutoVendas, dentro dela uma subpasta chamada exatamente data e coloque o arquivo vendas_2025.csv (disponível no material da aula). Se usar outro nome de pasta, ajuste o prompt.

As regras de negócio do projeto são:

  • Nunca descartar linhas com quantidade negativa, porque são devoluções, um dado legítimo.
  • Valores faltantes devem ser sinalizados no relatório, nunca preenchidos por suposição.
  • Duplicatas exatas devem ser removidas e contabilizadas no relatório.

Se você quiser entender melhor como o Streamlit transforma código Python em páginas interativas, vale ler este guia sobre criar sites usando Python com Streamlit.

Planeje o projeto com o Plan mode

No painel do Codex, digite / e escolha Plan mode (ou digite /plan). A partir daí, o Codex só planeja, sem criar nada.

Comando Plan mode no painel do Codex no VS Code

O prompt é o próprio briefing do projeto: o objetivo (automação em Python que lê o CSV bruto, valida, limpa, calcula KPIs e mostra numa interface visual sem precisar abrir o Excel), a stack (Python 3.11+, Pandas e Streamlit), a estrutura de arquivos, as regras de tratamento e os comandos (python pipeline.py para a limpeza e streamlit run app.py para a interface). Você dá as informações úteis, e quem monta o planejamento e as etapas é o Codex.

Antes de planejar, o Codex faz perguntas sobre decisões que dependem de você, como quais indicadores incluir no painel, como tratar linhas com valor total ausente e onde registrar o log do pipeline.

Perguntas do Codex no modo planejamento

Em cada pergunta há uma opção recomendada. No caso do valor ausente, a recomendação é excluir a linha só do cálculo do valor, preservando-a nas contagens. Para o log, um arquivo JSON dentro da pasta data, que ajuda a rastrear o que mudar no futuro. As perguntas podem variar para você: podem ser 2, 5 ou 10.

O plano final é detalhado: valida as 12 colunas, remove só duplicatas exatas, preserva devoluções e faltantes, padroniza categorias e regiões, gera o relatorio_qualidade.json, define os KPIs (receita líquida, pedidos, ticket médio, unidades, desconto médio e taxa de devolução), filtros combináveis, testes com pytest, requirements.txt e README.md em português. Leia o plano antes de aprovar. Esse papel de revisão é seu.

Execute o plano em etapas com checkpoints

Em vez de mandar executar tudo de uma vez, peça para o Codex parar entre as etapas:

Codigo
Esse plano está aprovado. Execute-o em etapas, seguindo a ordem das seções do
plano: Pipeline e contratos, KPIs e interface Streamlit, e Arquivos de suporte.
Pare ao final de cada etapa principal para eu revisar antes de continuar para
a próxima. Ao terminar todas as etapas, rode os testes e me confirme que pytest,
python pipeline.py e a inicialização do Streamlit passaram sem erro.

Um plano detalhado reduz o risco, mas não elimina. Pedir checkpoints evita que um erro na etapa 1, como uma regra de limpeza mal aplicada, só apareça na etapa 3, quando já é mais caro de corrigir. Cada etapa tem um critério de aceite:

Etapas de execução com critério de aceite
EtapaCritério de aceite
Estrutura e entradaO CSV carrega com 3.045 linhas e erros estruturais são detectados
Limpeza e relatório3.000 linhas, 45 duplicatas removidas e devoluções preservadas
KPIsResultados batem com um cálculo independente
Dashboard StreamlitTodos os componentes respondem aos filtros
Testes e documentaçãopytest, pipeline e app funcionando sem erro

O Codex pode agrupar essas etapas de outro jeito, em 3 blocos por exemplo, e isso é normal. Ao fim da etapa 1, ele mostra o que criou: o pipeline.py, o vendas_limpas.csv e o relatorio_qualidade.json. Das 3.045 linhas de entrada, 45 duplicatas foram removidas, e as 55 linhas de devolução (53 depois de remover as duplicadas) foram preservadas.

Etapa 1 do AutoVendas concluída no VS Code

Aqui o VS Code mostra seu valor: você abre cada arquivo no explorador, lê o código Python gerado e, se quiser, edita alguma linha à mão sem pedir nada ao Codex. Para seguir, é só responder "Aprovo, pode continuar para a etapa 2".

Abra o dashboard e teste a automação

Com todas as etapas concluídas, o projeto tem a pasta de testes, o README.md com as instruções de uso e o requirements.txt com as dependências. Isso permite entregar o projeto para outros analistas da equipe rodarem do mesmo jeito.

Para abrir o dashboard, abra o terminal integrado do VS Code (Ctrl+') e rode os comandos do README:

Codigo
python -m pip install -r requirements.txt
python pipeline.py
streamlit run app.py

O navegador abre o painel em localhost:8501, com filtros na lateral, KPIs, receita por categoria e por região, ranking de vendedores e produtos, análise de devoluções, painel de qualidade dos dados e a tabela filtrável.

Dashboard AutoVendas em Streamlit criado com Codex

Os filtros se combinam: período, categorias, regiões, vendedores e forma de pagamento. Ao escolher, por exemplo, outubro de 2025, as categorias Eletrônicos e Esporte e Lazer e uma vendedora específica, tudo se atualiza, inclusive a receita líquida, o número de pedidos e o ticket médio.

Filtros e evolução mensal no dashboard AutoVendas

Agora o teste que prova que é uma automação de verdade: adicione uma linha nova no CSV, direto no VS Code, e peça ao Codex: "Atualizei uma linha no CSV de vendas. Como você faz para executar todo o fluxo para mim?". Ele roda o pipeline, confere o relatório e reabre o painel, sem você tocar no terminal.

Codex apontando erros na linha nova do CSV

E ainda faz uma revisão: aponta que a categoria da linha nova veio com erro de digitação e que a data é de 2026 num arquivo chamado vendas_2025. Ele mantém os dados como foram informados, mas avisa para você revisar. É exatamente o que um bom analista faria.

Daqui, o próximo passo natural seria criar uma skill de "atualização do fluxo", ou um botão de atualizar dentro do próprio dashboard, para rodar tudo com um comando só.

Documente o projeto com o AGENTS.md

Repare que, até aqui, o projeto não tem nenhuma regra fixa registrada. O último passo é o mesmo hábito das aulas anteriores: criar o AGENTS.md com o que já existe.

Codigo
Analise os arquivos deste projeto e crie um AGENTS.md na raiz, documentando a
stack, a estrutura de arquivos, as regras de tratamento de dados (nunca
descartar devoluções, sinalizar valores faltantes em vez de supor, remover
apenas duplicatas exatas) e os comandos disponíveis.
Não altere nenhum arquivo do projeto, apenas crie o AGENTS.md.
AGENTS.md do projeto AutoVendas no VS Code

A partir daí, toda conversa nova sobre o AutoVendas começa sabendo como o projeto funciona.

Boas práticas para usar o Codex em qualquer projeto

Depois de 6 projetos diferentes, alguns hábitos se repetem em todos eles. Guarde esta lista:

Boa práticaPor que importa
Uma conversa por temaEvita misturar contextos e gastar créditos à toa
Projeto apontando para uma pastaOrganiza as conversas e limita o que o Codex pode alterar
AGENTS.md antes do códigoO Codex já sabe as regras antes do primeiro prompt
Prompt com contexto, tarefa, requisitos, limites, testes e entregaResultado certo já na primeira tentativa
Primeiro a lógica, depois a aparênciaFica mais fácil achar e corrigir problemas
Reforçar o que não pode mudarImpede o Codex de quebrar o que já funcionava
Planejar antes de implementarVocê corrige o rumo quando ainda é texto
Executar em etapas com aprovaçãoErros aparecem cedo, quando é barato corrigir
Permissões com aprovação em ações de riscoVocê mantém o controle sobre o seu computador e os seus dados
Atualizar o AGENTS.md quando o projeto mudaAs próximas conversas não desfazem suas decisões
Skill para tarefas repetitivasMesmo passo a passo, sempre, sem repetir o pedido

Conclusão

Neste Curso Básico de Codex, você saiu da instalação do aplicativo e chegou a projetos completos: uma landing page, um app de agendamento com regras de negócio, o site de uma imobiliária, um quadro de ideias com login e banco de dados no Supabase, uma skill própria para mudanças de schema e uma automação de dados em Python com dashboard no VS Code. Tudo isso conversando com a IA, sem precisar programar.

Mais do que os projetos, o que fica é o método: organizar o trabalho em Projetos, documentar as regras no AGENTS.md, planejar antes de executar, revisar cada etapa e transformar tarefas repetitivas em skills. Se você quer ir além e dominar outras ferramentas para criar apps, automações e agentes sem programar, conheça o Curso de No Code e IA da Hashtag Treinamentos.

Caso prefira esse conteúdo no formato de videoaula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

FAQ - Perguntas Frequentes sobre o Curso Básico de Codex

1. Preciso saber programar para fazer o Curso Básico de Codex?

Não. Todos os projetos são criados com prompts em linguagem natural. Se aparecer algum termo técnico, você pode pedir para o próprio Codex explicar ou sugerir as melhores práticas.

2. Qual plano do ChatGPT eu preciso para usar o Codex no curso?

O plano Go já é suficiente para acompanhar todas as aulas. Nenhum exercício exige Plus, Pro ou chave de API.

3. Qual a diferença entre AGENTS.md e skill no Codex?

O AGENTS.md guarda as regras gerais do projeto e é lido em toda conversa. A skill guarda o passo a passo de uma tarefa específica e só é carregada quando o pedido combina com ela.

Hashtag Treinamentos

Para acessar outras publicações de No Code, clique aqui!


Quer aprender mais sobre Inteligência Artificial com um minicurso básico gratuito?

Posts mais recentes de No Code

Posts mais recentes da Hashtag Treinamentos