Voltar para o Blog
IA na Prática36 / 50
  1. 01Bem-vindo: o que você vai conseguir fazer no fim desta série
  2. 02O que é uma IA que conversa, em português claro
  3. 03O que dá e o que não dá pra fazer com IA hoje
  4. 04Claude, ChatGPT, Gemini: qual a diferença e por que vamos usar o Claude
  5. 05Os três jeitos de falar com a IA: site, app e terminal
  6. 06A mentalidade certa: você é o maestro, a IA é o instrumento
  7. 07Criando sua conta e instalando o app do Claude
  8. 08Sua primeira conversa: como pedir bem (o prompt)
  9. 09Anexando arquivos, imagens e PDFs
  10. 10Projetos no Claude: guardando contexto que não se perde
  11. 11Artifacts: quando o Claude monta um documento ou um mini-app pra você
  12. 12Memória, instruções e estilo: ensinando o Claude do seu jeito
  13. 13Planos, limites e custo: o que é grátis e quando vale pagar
  14. 14O que é o "terminal" e por que ele não dá medo
  15. 15Abrindo o terminal no Mac e no Windows (e no Linux)
  16. 16Cinco comandos de sobrevivência: pwd, ls, cd, mkdir, cat
  17. 17Como o computador organiza tudo: pastas, arquivos e caminhos
  18. 18Instalando o Node.js (e o que é isso, afinal)
  19. 19npm: a "loja de peças" gratuita do mundo dev
  20. 20Instalando o VS Code: seu editor de código (e por que precisa de um)
  21. 21O que é o Git e por que todo projeto sério usa
  22. 22Criando sua conta no GitHub (a nuvem do seu código)
  23. 23O que é o Claude Code e por que ele é diferente do app
  24. 24Instalando o Claude Code
  25. 25Primeiro login e sua primeira sessão
  26. 26Como o Claude Code "enxerga" suas pastas (e por que isso importa)
  27. 27Sua primeira tarefa real: peça pra ele criar um arquivo
  28. 28Permissões: quando ele pergunta antes de mexer
  29. 29O arquivo CLAUDE.md: ensinando o robô sobre o seu projeto
  30. 30Modo plano e revisão: deixe ele pensar antes de fazer
  31. 31Errou? Desfazendo e recomeçando sem medo
  32. 32Escolhendo um primeiro projeto pequeno e real
  33. 33Descrevendo o que você quer: o briefing
  34. 34Deixe o Claude montar o esqueleto do projeto
  35. 35Rodando o projeto na sua máquina pela primeira vez
  36. 36Mudando textos, cores e imagens só conversando
  37. 37Quando algo quebra: lendo um erro sem entrar em pânico
  38. 38Pedindo pro Claude consertar o erro (copiar, colar, descrever)
  39. 39Adicionando uma página ou funcionalidade nova
  40. 40Salvando seu progresso com Git (commits, sem decoreba)
  41. 41Subindo seu projeto pro GitHub
  42. 42Colocando seu projeto no ar de graça (deploy)
  43. 43A anatomia de um bom pedido (revisão turbinada)
  44. 44Dividir pra conquistar: por que tarefas pequenas vencem
  45. 45Revisar o que a IA fez: a responsabilidade é sua
  46. 46Segurança básica: senhas, chaves e o que NUNCA colar
  47. 47Quando a IA "alucina" e como perceber
  48. 48Aprendendo a aprender com a IA: ela é sua professora particular
  49. 49Cinco ideias de próximos projetos pra praticar
  50. 50Seu novo superpoder: pra onde ir a partir daqui (fecho)
IA na PráticaParte 36 de 50

Mudando textos, cores e imagens só conversando

3 min de leitura
Compartilhar
IA na Prática

Seu site já está rodando no navegador. Bonito? Talvez ainda não. O título está genérico, as cores não são a sua cara, e cadê a sua foto? Boa notícia: você vai arrumar tudo isso sem tocar em uma única linha de código. Vai conversar.

A ideia: você é o diretor, o Claude é a equipe

Imagine que você contratou alguém para montar sua casa. Você não precisa saber assentar tijolo. Você diz: "quero a parede da sala azul clara" e a pessoa faz. Se não gostou, você diz "mais clara ainda" e ela ajusta.

Com o Claude Code é igual. Ele é o terminal (aquela janela de texto onde você digita) com o Claude trabalhando dentro. Você descreve o que quer em português normal, e ele mexe nos arquivos do seu site para você. Você não decora comandos. Você pede.

A palavra técnica para isso é "iterar": ir melhorando aos poucos, pedido por pedido, até ficar do seu jeito.

Passo a passo: pedindo mudanças

Com o Claude Code aberto na pasta do seu site, é só escrever o pedido e apertar Enter. Veja exemplos de pedidos bem feitos:

  • "Troque o título principal do site por Ana Souza — Designer"
  • "Deixe o fundo da página em um tom claro de azul"
  • "Aumente o tamanho da fonte do meu nome para ficar bem destacado"
  • "Coloque minha foto no topo, ao lado do nome"

Repare: cada frase diz o quê e onde. Quanto mais específico, melhor o resultado.

Sobre colocar uma imagem

Para a sua foto aparecer, o arquivo da imagem precisa estar na pasta do projeto. Faça assim:

  1. Pegue a foto que você quer usar (algo como foto.jpg).
  2. Arraste o arquivo para dentro da pasta do seu site, no Finder (Mac) ou no Explorador de Arquivos (Windows).
  3. Volte ao Claude Code e peça: "Use a imagem foto.jpg que está na pasta como minha foto de perfil no topo".

Ele cuida do resto.

Vendo a mudança acontecer

Depois que o Claude faz a alteração, ela já está salva no arquivo. Mas o navegador ainda mostra a versão antiga. Para ver o novo:

  • Vá até a aba do navegador onde seu site está aberto.
  • Atualize a página: aperte Cmd + R no Mac ou Ctrl + R no Windows. (Também dá para clicar no ícone de recarregar, aquela setinha em círculo perto do endereço.)

Pronto. A mudança aparece. Essa é a parte mágica: você fala, ele faz, você atualiza e vê. Um ciclo curto e viciante.

A regra de ouro: um pedido por vez

É tentador escrever um parágrafo gigante com dez mudanças de uma vez. Resista. Peça uma coisa, atualize o navegador, veja se ficou bom. Só então peça a próxima.

Por quê? Se você pede dez mudanças juntas e o resultado fica estranho, você não sabe qual delas causou o problema. Pedindo uma de cada vez, você sempre sabe exatamente o que mudou. É mais lento? Um pouquinho. É mais seguro e você aprende mais? Muito.

Se algo der errado

  • Atualizei o navegador e nada mudou. Confira se o servidor local ainda está rodando (aquele comando que você deixou ligado nos posts anteriores). Se a janela dele fechou, o site para de responder. Reabra e rode de novo.
  • A foto não apareceu, só um ícone quebrado. Quase sempre é o nome do arquivo. Foto.JPG é diferente de foto.jpg para o computador. Diga ao Claude o nome exato, com maiúsculas e minúsculas iguais.
  • A cor ficou diferente do que imaginei. Cor é gosto. Peça o ajuste: "deixe esse azul mais escuro" ou "use um azul mais acinzentado". Vá refinando até gostar. Não existe pedir demais.

Você acabou de descobrir que moldar um site pode ser uma conversa. Sem manual, sem decoreba. Só você dizendo o que quer e vendo acontecer.

No próximo post, a gente encara o momento que assusta todo iniciante: quando algo quebra e aparece uma mensagem de erro na tela. Spoiler: não é motivo para pânico.

Curtiu como a gente pensa?

É assim que trabalhamos todo dia.

Se esse jeito de pensar é o seu, vem construir com a gente — dá uma olhada nas vagas abertas.

Ver vagas