Síntese e didática com IA · Capítulo 21 de 23 · 10 min
Peça ao agente de código para enxugar uma página sem quebrá-la
Use Claude Code, Codex ou outro agente para reorganizar uma página longa: plano antes da edição, forma visual pelo defeito e preservação de links, âncoras e fatos.
Este capítulo faz parte do curso gratuito Síntese e didática com IA.
Ao final desta aula, você vai pedir a um agente de código, como Claude Code ou Codex, que enxugue uma página do seu site e a deixe mais didática, sem quebrar links, sem inventar dados e sem instalar nada. Em vibecoding, o pedido vira mudança de arquivo; um pedido vago vira uma página diferente da que você queria, às vezes com o preço errado.
A diferença em relação a revisar um texto colado é que o agente lê e altera o código. Ele pode trocar um parágrafo por uma tabela, mover a seção de preço para o topo e converter uma lista de passos num componente que já existe no projeto. Pode também apagar uma âncora usada por outra página ou reescrever um fato. O pedido precisa dizer as duas coisas: o que melhorar e o que proteger.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
- Etapa 1 de 5: Inventário
Seções, palavras e defeitos de cada uma
- Etapa 2 de 5: Plano
O que muda, o que fica e por quê
- Etapa 3 de 5: Seu ok
Você aprova ou corrige o plano
- Etapa 4 de 5: Edição
Mudanças pequenas, com componentes existentes
- Etapa 5 de 5: Recibo
Palavras antes e depois, fatos e links conferidos
Defeito de leitura e o elemento visual que o resolve
| Defeito na página | Elemento | Pedido ao agente |
|---|---|---|
| Opções comparadas em parágrafo | Tabela | Uma linha por opção, as mesmas colunas |
| Procedimento em texto corrido | Passos numerados | Um verbo por passo e o resultado esperado |
| Regras com exceções | Fluxo de decisão | Pergunta verificável em cada bifurcação |
| Bloco importante perdido no meio | Destaque ou ícone com rótulo | Ícone da família do projeto, ao lado do texto |
| Termo técnico sem explicação | Explicação curta entre vírgulas | Explicação na primeira aparição |
O plano antes da edição é a proteção mais barata. Ele aplica ao código a mesma técnica que o curso de escrita ensina para textos, pedir a ordem do raciocínio antes do texto, e transforma uma reescrita imprevisível em duas mensagens que você confere. Peça a forma visual pelo defeito de leitura, nunca "deixe mais visual", como na aula pedir a forma visual que ensina.
Quando o agente propõe ícones, use o critério do guia de ícones do portal: o símbolo reforça o texto ao lado e não o substitui, e a página mantém uma família só. Um ícone sem rótulo numa seção de preço vira enfeite sem função.
Exemplo hipotético: Oficina Lume, a página do Plano Anual
Antes
Antes
- 2.400 palavras, preço na sexta rolagem
- Comparação entre planos em três parágrafos
- Política de cancelamento em três versões
Depois
Depois
- 980 palavras, preço e prazo na primeira tela
- Tabela com três planos e as mesmas cinco colunas
- Uma política, a vigente, e o link para o regulamento completo
Perguntas frequentes deste capítulo
E se o agente editar antes de mostrar o plano?
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Escrever bem com IAPedir a forma visual pelo defeito de leituraExaminar conexões de Pedir a forma visual pelo defeito de leitura
- Segundo cérebro com IAEscrever um arquivo que todo assistente de IA entendeExaminar conexões de Escrever um arquivo que todo assistente de IA entende
- Frontends com VibecodingDirigir o prompt e avaliar a entrega do agenteExaminar conexões de Dirigir o prompt e avaliar a entrega do agente
- Astra profundoAdaptar a experiência ao espaço disponívelExaminar conexões de Adaptar a experiência ao espaço disponível
Terminou a leitura?
Marque como concluído para o capítulo contar no seu painel e no certificado.
Voltar ao capítulo anterior: Corrija um texto longo com um pedido de síntese verificável
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
Capítulos vizinhos em Síntese e didática com IA
- 19Diagnostique o excesso antes de pedir a correção
- 20Corrija um texto longo com um pedido de síntese verificável
- 21Peça ao agente de código para enxugar uma página sem quebrá-la
- 22Confira a correção da IA e itere sem inflar o texto
- 23Monte sua biblioteca de prompts de síntese e revisão