Testando o GPT-5 com Nuxt e Tailwind
Veja como o GPT-5 se sai ao criar um sistema completo de agendamento com Nuxt, Tailwind e componentização extrema.
Por que isso é importante
Testando o GPT-5 com Nuxt e Tailwind. Veja como o GPT-5 se sai ao criar um sistema completo de agendamento com Nuxt, Tailwind e componentização extrema.
Primeiras Impressões com GPT-5
A interface do GPT-5 traz novidades visuais e funcionais. Os modelos anteriores foram
descontinuados e agora a promessa é de maior precisão, velocidade e capacidade de
entender tarefas complexas como programação em tempo real – tudo direto na
interface de chat.
Vamos Criar com Nuxt 4 + Tailwind
- Passo 1: Instalar o Nuxt manualmente com o comando:
npm create nuxt@latest .e seguir os prompts. - Passo 2: Acessar a seção de módulos do site Nuxt e copiar o
comando de instalação do Tailwind CSS. - Passo 3: Configurar a pasta pages e ajustar o
arquivo app.vue para carregar corretamente o roteamento. - Passo 4: Confirmar se o Tailwind está funcionando criando uma
view com classes utilitárias de estilo visual.
Componentização Extrema: Mantendo o Controle
Um dos pilares do método do Acelerador é separar tudo em componentes reutilizáveis. Isso
evita que a IA perca o controle das alterações e cria uma estrutura confiável e
escalável durante o desenvolvimento com auxílio do GPT-5.
Atenção
Enviar prompts muito grandes pode levar a implementações fora do planejado. Melhor
ir iterando de forma guiada e incremental pra manter tudo previsível.
Instruções para Montar o Agendamento
O prompt foi direto: montar uma agenda tipo Google Agenda, com dias da
semana no topo, grid de horários, cards informativos por slot, setas pra navegar entre
semanas e uma régua lateral com os horários.
Dica
Use tailwind pra alinhar grids e espaçamentos com precisão, controlando margens
na mão quando for preciso nas camadas de layout.
Organização dos Componentes
WikiHeader
Responsável por exibir os dias da semana com setas para navegação
ScheduleGrid
Renderiza o grid de horários e slots de agendamento
ScheduleItemCard
Representa visualmente cada agendamento com nome, hora inicial/final e descrição
Corrigindo Equívocos da IA
A primeira renderização mostrou desalinhamento entre colunas e horários. Corrigimos
isso pedindo realinhamento e usando imagens como referência visual pro GPT-5
entender a estrutura esperada.
Cuidado com os Detalhes
Pequenas omissões nos prompts (tipo não dizer que a imagem mostra um erro) podem fazer o
modelo interpretar errado. Seja claro sobre o que precisa ser
ajustado.
Testes Finais e Ajustes Visuais
No final, pedimos ajustes espaciais simples pra evitar que componentes ficassem colados
visualmente. Isso mostra que a IA também cuida de refinamentos estéticos, não só da
lógica de funcionamento.
Conclusão: Vale a Pena Usar o GPT-5?
A evolução do GPT-5 na geração de código tá clara, mas não elimina a necessidade de
supervisionar e manter boas práticas. Com prompts bem definidos e um processo
focado em componentes, você ganha produtividade sem perder o
controle.
Checklist de Implementação
- Instalou Nuxt e Tailwind manualmente no projeto
- Criou estrutura de componentes base como WikiHeader e ScheduleGrid
- Ensinou o GPT-5 com informações visuais (print da agenda)
- Ajustou alinhamentos e espaçamentos via feedback incremental
- Executou e testou a aplicação final via npm run dev