Mundo de IA: pedindo uma página React de verdade

Como transformar uma ideia simples em um prompt mais útil para gerar uma página pronta para publicação.

Uma das coisas mais interessantes do uso da inteligência artificial no desenvolvimento é perceber que ela pode, sim, ajudar a construir algo concreto. Não apenas explicar, sugerir ou resumir, mas participar da criação de uma interface que pode ir para o ar.

Mas existe um detalhe importante nesse processo: para a IA ajudar melhor, o pedido também precisa amadurecer.

Muita gente ainda conversa com a máquina assim:

Crie uma página em React mostrando a temperatura das cidades do Brasil.

Esse pedido não está “errado”. Ele pode até gerar alguma coisa funcional. Mas ainda é um pedido aberto demais, genérico demais, solto demais. A IA vai preencher as lacunas do jeito que conseguir. E quando isso acontece, o resultado pode parecer interessante à primeira vista, mas não necessariamente vem pronto para um cenário real.

Quais cidades devem aparecer? Quais dados precisam ser exibidos? A página deve ser responsiva? Deve mostrar erro? Deve mostrar carregamento? Vai buscar dados em tempo real? Qual é a aparência esperada? Isso será só uma demonstração ou uma página que poderá ser publicada de verdade?

Quando essas perguntas não aparecem no prompt, a IA improvisa.

E improviso, em tecnologia, nem sempre combina com publicação.

É aqui que a conversa muda de nível.

Quando o pedido deixa de ser apenas uma frase rápida e passa a carregar contexto, objetivo, restrições e expectativa de uso, o prompt deixa de ser um chute simpático e passa a funcionar quase como uma mini-especificação.

Em vez de dizer apenas “faz uma página”, você começa a conduzir a construção.

Por exemplo: se a intenção for gerar uma página React para exibir o clima das principais cidades do Brasil e depois publicar isso em um site real, o prompt pode ser muito melhor escrito assim:

Crie uma página em React funcional e responsiva para exibir a temperatura atual das principais cidades do Brasil.

Requisitos:
- Use React com componentes funcionais.
- A página deve ter visual moderno, limpo e profissional.
- Exiba as seguintes cidades: São Paulo, Rio de Janeiro, Brasília, Salvador, Fortaleza, Belo Horizonte, Manaus, Curitiba, Recife e Belém.
- Para cada cidade, mostre:
  - nome da cidade
  - temperatura atual em graus Celsius
  - condição do tempo
  - ícone representando o clima
- Organize as cidades em cards responsivos.
- Inclua um título principal no topo da página.
- Inclua um subtítulo explicando que os dados são climáticos em tempo real.
- Mostre estado de carregamento enquanto os dados estiverem sendo buscados.
- Mostre mensagem amigável em caso de erro na API.
- Use fetch ou axios para consumir uma API pública de clima.
- Crie o código de forma fácil de manter.
- Separe a lógica de busca de dados da renderização sempre que fizer sentido.
- Use boas práticas de organização.
- O resultado deve estar pronto para ser usado em um projeto React.
- Gere o código completo da página.
- No final, explique rapidamente como configurar e rodar.

Considere que essa página será publicada em um site real, então o código deve ser claro, bonito e com cara de produção.

Perceba a diferença.

Agora a máquina já sabe muito mais sobre o que precisa construir. Ela não precisa adivinhar tantas coisas. O cenário ficou mais claro. O pedido ganhou direção. E isso costuma melhorar bastante a qualidade da resposta.

Mas dá para apertar ainda mais esse parafuso.

Se você quiser um prompt mais maduro, mais preciso e com mais cara de uso real, ele pode evoluir para algo assim:

Crie uma página React pronta para produção para exibir a temperatura atual das principais cidades do Brasil.

Contexto:
Essa página será publicada em um site real e precisa ter aparência profissional, responsiva e código organizado.

Tecnologias:
- React
- JavaScript
- CSS modular ou styled-components, escolha a opção mais simples para integração
- Pode usar axios ou fetch

Cidades obrigatórias:
- São Paulo
- Rio de Janeiro
- Brasília
- Salvador
- Fortaleza
- Belo Horizonte
- Manaus
- Curitiba
- Recife
- Belém

Funcionalidades:
- Buscar dados de clima em tempo real em API pública
- Exibir temperatura atual em Celsius
- Exibir descrição do clima
- Exibir ícone do clima
- Mostrar loading durante a busca
- Mostrar mensagem de erro amigável se a API falhar
- Ter botão para atualizar os dados manualmente
- Exibir a data e hora da última atualização

Interface:
- Layout moderno e limpo
- Cards responsivos
- Boa hierarquia visual
- Cabeçalho com título e descrição
- Rodapé simples informando que os dados são obtidos por API externa

Qualidade do código:
- Código legível
- Estrutura clara
- Comentários apenas quando realmente úteis
- Evite complexidade desnecessária
- Entregue em formato pronto para copiar e colar

Saída esperada:
- arquivo principal da página React
- estilos
- breve explicação de instalação
- instruções para configurar eventual chave de API se necessário

Aqui o jogo já ficou bem mais interessante.

O prompt começa a carregar não apenas a ideia, mas também a intenção de entrega. Ele diz o que deve ser feito, como deve ser apresentado, quais dados importam, como a página deve se comportar e até qual nível de organização o código deve ter.

Isso não é detalhe. Isso é direção.

E é justamente aí que a IA começa a ser mais útil no mundo real.

Quando o pedido é raso, a resposta tende a ser genérica. Quando o pedido é melhor construído, a IA passa a ter mais chance de responder com algo que realmente economize tempo.

No fundo, esse exemplo da página React ensina uma lição maior.

Prompt bom não é apenas sobre “pedir algo”. É sobre saber traduzir uma necessidade em instrução. É sobre dizer para a máquina o que você quer construir, em que contexto aquilo será usado e o que separa uma resposta bonita de uma resposta útil.

É aí que a conversa deixa de ser brincadeira e começa a virar construção.

Porque no momento em que você diz que a página será publicada, que precisa ser responsiva, que deve consumir uma API de verdade, que precisa tratar erro e loading, que deve ter cara de produção, o prompt para de ser um rascunho preguiçoso e vira quase um briefing técnico.

E isso faz toda a diferença.

No fim, talvez essa seja uma das grandes viradas do uso de IA no desenvolvimento: perceber que a máquina pode ajudar bastante, mas ajuda muito mais quando recebe um pedido com contexto, critério e direção.

Não se trata apenas de pedir “uma página em React”.

Trata-se de pedir uma página que faça sentido.

Uma página que funcione.

Uma página que possa ser publicada.

Uma página que tenha mais cara de produto e menos cara de experimento.

No mundo da IA, um bom prompt não é só um comando.

É uma forma de pensar a construção antes dela existir.

E para que essa conversa não ficasse apenas no campo das ideias, fizemos o que todo bom experimento merece: colocamos o exemplo no ar.

A proposta era simples na aparência, mas rica no aprendizado: gerar uma página em React para exibir a temperatura atual das principais cidades do Brasil, com consumo de API pública, tratamento de loading, mensagem de erro, atualização manual e uma interface digna de publicação.

O mais interessante não foi apenas o resultado visual. Foi perceber, na prática, como um prompt mais bem construído muda a qualidade da entrega. Quando o pedido ganha contexto, objetivo, restrições e intenção de uso real, a resposta da IA deixa de ser apenas uma demonstração simpática e começa a se aproximar de algo realmente utilizável.

Em outras palavras: o prompt deixou de ser um chute e passou a funcionar como direção.

E o resultado está aí, publicado, funcionando e acessível ao mundo.

Veja a demonstração no ar:
https://c4fwheater01.vercel.app/

Mais do que uma página de clima, esse pequeno experimento mostra algo maior: quando a conversa com a máquina é melhor conduzida, a construção ganha forma mais rápido, com mais clareza e com mais valor prático.

E, claro, não rodou de primeira.

Algumas interações ainda foram necessárias até chegarmos à versão que foi para o ar. E isso também faz parte do aprendizado: mesmo com IA, construir continua exigindo ajuste, leitura de cenário, correção de rota e refinamento.

No Mundo de IA, um bom prompt não serve apenas para pedir.

Ele serve para construir.