Há muita coisa acontecendo no mundo do desenvolvimento neste momento.
Você tem os evangelistas da IA que pediram a um modelo para converter seu site WordPress problemático para React e agora acham que alcançaram a iluminação. Você convenceu a turma do apocalipse da geração baby boomer de que ninguém saberá programar daqui a 5 anos e a internet entrará em colapso. E depois há aqueles que, discretamente, usam IA para implementar ferramentas internas sem avisar ninguém em 12 minutos e vão para casa mais cedo.
Não pertenço a nenhum desses grupos. Eu sou do grupo que pensa: IA é uma ferramenta. Use-a. É um recurso sofisticado de autocompletar com pretensões de competência.
Neste post, mostro como usei IA para criar um novo bloco do Adobe Edge Delivery Services (EDS) por meio de programação intuitiva e, mais importante, como corrigi os erros encontrados.
Aprenda com um agricultor
Eu cresci em uma fazenda. A lógica da fazenda é simples:
Se algo quebrar, você conserta.
Nada de Amazon, apenas celeiros velhos cheios de tanta coisa que estão quase tombando. Você não tem o luxo de encomendar uma peça de reposição nem tempo para aprender a fazer uma réplica perfeita. Você pega pedaços de metal aleatórios, um martelo mais antigo que a Guerra Civil e talvez um pouco de fita adesiva. Você dá um jeito. Improvisar, adaptar, superar.
É por isso que os celeiros acumulam 150 anos de ferramentas e objetos "potencialmente úteis". Meu pai costumava dizer: "Você nunca sabe quando pode precisar disso."
Eis a questão:
Você não precisa saber como forjar uma ferramenta do zero. Mas você PRECISA saber o suficiente para consertá-lo quando quebrar.
O mesmo se aplica ao código gerado por IA.
A IA pode gerar o implemento. Você só precisa entendê-lo o suficiente para repará-lo, ajustá-lo e atualizá-lo.
O que é, afinal, a codificação Vibe?
A programação Vibe é o fluxo de trabalho que todos nós estamos lentamente admitindo que usamos:
Descreva resumidamente o que você quer -> deixe a IA processar -> resolva o problema -> envie.
Não se trata de "engenharia rápida". Não se trata de "desenvolvimento impulsionado por IA". É literalmente uma questão de vibrações + contexto + gosto + você.
Estou chamando isso de "programação intuitiva" porque é essa a sensação que dá - você não está escrevendo especificações nem seguindo um roteiro rígido de testes. Você está em sintonia com a IA, chegando a algo 80% pronto, e então usa seu julgamento e experiência para torná-lo realmente bom. É uma improvisação colaborativa com um parceiro muito confiante, mas que ocasionalmente erra (nós dois erramos).
Minhas três regras de codificação de vibe
- Explique a tarefa como se estivesse ensinando alguém que sabe HTML, mas tem memória de peixinho dourado.
Seja detalhista. Explicar em excesso. Imagine que você está escrevendo instruções para um produto da IKEA. - Deixe que a modelo faça o corte inicial.
O formato já está lá, você só precisa lixar. - Corrija as partes problemáticas usando suas habilidades reais.
O modelo acabará por fazer alguma coisa amaldiçoada.
Minha experiência com modelos e geração de código
Estou fazendo tudo isso no Windsurf, porque ter prompts e código no mesmo espaço de trabalho é simplesmente perfeito. Existem outras IDEs com IA integrada, como o Cursor ou o VSCode com GitHub Copilot — escolha a que preferir. O Windsurf tinha preços competitivos e funcionou perfeitamente para mim desde o primeiro momento.
Claude Sonnet 4.5: Rei em apresentar primeiros rascunhos utilizáveis sem perder o contato com a realidade. Não fiz muitos testes com o Opus, já que o Sonnet é mais rápido e funciona para o que preciso.
GPTs: Ótimos para tarefas de linguagem natural, como explicar coisas e escrever documentos, mas, na minha experiência, demoram muito e não seguem as instruções tão bem.
DeepSeek: Confio nele da mesma forma que confio num guaxinim na minha cozinha.
Grok: Promissor, mas ainda sem imagens para Windsurf, então está em segundo plano.
Gemini 2.5: Já experimentei. Tenho visto isso repetidamente: "Adicionarei a tarefa à minha lista de afazeres para mantê-lo(a) atualizado(a) sobre meu progresso. Começarei criando os arquivos. Primeiro, criarei o arquivo blog-featured-hero.js. Depois disso, criarei o arquivo blog-featured-hero.css." No momento em que escrevo isto, o Gemini 3 não estava disponível, mas dizem por aí que ele é excelente, então terei que experimentá-lo em seguida.
Se você realmente quer liberar o Terry Davis que existe em você, pode optar pela solução de servidor próprio com um computador decente (a VRAM é essencial, mas você pode transferir parte do processamento para a RAM, se necessário; é bem mais lento, mas funciona). Recomendo começar com Ollama - CLI ou GUI (https://ollama.com/), adicionando alguns modelos personalizados (tive sucesso com gemma3:27b com tarefas de linguagem natural - https://ollama.com/library/gemma3) e usando um plugin no VS Code como Continue (https://github.com/continuedev/continue). Você não terá todas as funcionalidades das IDEs integradas, mas pelo menos saberá para onde seus dados estão indo. Não, isto não é um anúncio.
Por que a Síndrome de Ehlers-Danlos e a Insuficiência Articular combinam tão bem quanto manteiga de amendoim e geleia
Os blocos EDS são ideais para desenho com IA porque:
- Os blocos são literalmente HTML + CSS + JavaScript puro.
É nisso que os mestres em Direito (LLMs) são treinados. Fornecê-los HTML bruto e contexto? Eles fazem brrrr. - A síndrome de Ehlers-Danlos apresenta padrões claros.
Os modelos são literalmente construídos para identificar padrões. É o que eles fazem. - Você (sim, VOCÊ) controla o acabamento final.
A IA te dá 80%. Seu cérebro lhe dá os últimos 20% que fazem com que a situação não seja constrangedora.
Boas instruções com exemplos claros = melhores resultados.
Certo, vamos construir este bloco de herói.
Quero criar um novo bloco de destaque para o nosso blog com as seguintes características:
- Imagem de fundo em largura total
- Um carrossel de imagens à esquerda.
- Um cartão com efeito de vidro fosco contendo título, subtítulo, descrição e botão "Leia Mais".
- Responsivo e acessível
- Segue os padrões da Síndrome de Ehlers-Danlos para que o meu Eu do Futuro não odeie o meu Eu do Passado.
O EDS transforma isso em HTML bruto pré-decoração, como este:
<div class="blog-featured-hero block" data-block-name="blog-featured-hero" data-block-status="loaded">
<div>
<div>
<picture>
<source type="image/webp" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=750&format=webply&optimize=medium">
<source type="image/jpeg" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=2000&format=jpg&optimize=medium" media="(min-width: 600px)">
<img loading="eager" alt="" src="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=750&format=jpg&optimize=medium" width="5464" height="3640">
</picture>
</div>
</div>
<div>
<div>
<p>
<a href="/en/blog/adaptto-2025-recap" title="">
<picture>
<source type="image/webp" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=750&format=webply&optimize=medium">
<source type="image/png" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)">
<img loading="lazy" alt="" src="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=750&format=png&optimize=medium" width="2862" height="1583">
</picture>
</a>
</p>
<h3 id="">
<picture>
<source type="image/webp" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=750&format=webply&optimize=medium">
<source type="image/jpeg" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=2000&format=jpg&optimize=medium" media="(min-width: 600px)">
<img loading="lazy" alt="" src="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=750&format=jpg&optimize=medium" width="1768" height="877">
</picture>
</h3>
<p>
<picture>
<source type="image/webp" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=750&format=webply&optimize=medium">
<source type="image/jpeg" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=2000&format=jpg&optimize=medium" media="(min-width: 600px)">
<img loading="lazy" alt="" src="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=750&format=jpg&optimize=medium" width="1776" height="1184">
</picture>
</p>
</div>
</div>
<div>
<div>
<h3 id="recap-of-adaptto-2025---the-hard-core-aem-developers-conference"><a href="/en/blog/adaptto-2025-recap" title="Recap of adaptTo() 2025 - the hard-core AEM Developers Conference">Recap of adaptTo() 2025 - the hard-core AEM Developers Conference</a></h3>
</div>
</div>
<div>
<div>
<p>Highlights, New Releases, and Takeaways</p>
</div>
</div>
<div>
<div>
<p>A recap of the top sessions of the adaptTo() 2025 Conference, with everything you should catch up on to further your AEM career. AI refactoring for cloud migrations, Edge Workers for EDS, a replacement for the Groovy console, a deep
dive on <a href="https://blog.arborydigital.com/en/blog/what-is-document-authoring-for-edge-delivery" title="Document Authoring (DA)">Document Authoring (DA)</a>, as well as a presentation from our own on the <a href="https://blog.arborydigital.com/en/podcast/solving-china-web-performance"
title="China Web Performance Problem">China Web Performance Problem</a> - what are you waiting for, let's dive in!</p>
</div>
</div>
</div>
O prompt
Aqui está a versão limpa do que eu enviei para o Claude (incluindo a captura de tela do DA):
Create an Adobe Edge Delivery Services (EDS) block using vanilla JavaScript and CSS.
## Block Requirements
**Name**: blog-featured-hero
**Purpose**: Featured blog hero with background image and content overlay
## Learn from Existing Blocks
Examine css and js file in /blocks/hero/, /blocks/columns/, /blocks/blog-post-hero/,
and /blocks/carousel/ for EDS patterns.
## Raw HTML from EDS (before our JS/CSS decoration)
[raw html here]
## Your Task
Transform this raw HTML into:
- Row 1 image becomes full-width background
- Overlay container with:
- LEFT: Row 2 images as carousel with minimal navigation icons, no background just chevrons
- RIGHT (glass card): Row 3 Title/Link, Row 4 Subtitle, Row 5 Description,
Button "Read More" linking to Row 3 URL
## JavaScript Requirements
Parse the block's child divs (rows) and reconstruct into the layout above.
Use vanilla JavaScript only - no frameworks.
Handle missing rows gracefully.
## CSS Requirements
- Mobile responsive (stack on small screens)
- glass background on card
- high contrast mode
Generate blog-featured-hero.js and blog-featured-hero.css files.
Primeiro rascunho da IA
Claude expulsou os dois arquivos. E, sinceramente? Foi bastante sólido.
O que era bom
- O layout estava basicamente correto.
- O carrossel funcionou
- Lógica da imagem de fundo: tratada
- Empilhamento responsivo: tratado
O que precisava de mãos humanas
Ainda assim, apresentava problemas:
- Acabamento visual: as cores não combinam e a tipografia poderia ser modernizada.
- Problemas de UX: O carrossel não reproduzia automaticamente, não havia transições ao passar o mouse sobre links ou botões.
- Desempenho: Carregamento incorreto da imagem de fundo
- Layout: Coluna da esquerda alinhada verticalmente ao topo da div
Então, mãos à obra!
Aprimorando o negócio (onde você realmente ganha seu salário)
Sobreposição de estilos globais
Uma coisa que notei: Claude não tem memória da sua cascata. Ele gera regras que fazem todo o sentido — até que seus estilos globais cheguem e as desmantelam.
O EDS possui uma largura máxima global + preenchimento que limita as seções a cerca de 1200px. O primeiro rascunho de Claude não levava isso em consideração, então o herói não estava realmente sangrando por completo. Em vez de usar !importantpara contornar o problema, aumentei a especificidade adicionando main antes dos seletores:
/* My fix - higher specificity wins */
main .blog-featured-hero-container {
width: 100%;
padding: 0;
margin: 0;
}
main .blog-featured-hero-wrapper {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
main .blog-featured-hero {
position: relative;
width: 100%;
min-height: 500px;
overflow: hidden;
}
Herói = sangramento total. Cascata = não poluído.
Aprimoramento visual: cores, tipografia, botões
Substituí os tons de verde da nossa marca, aprimorei a tipografia e corrigi alguns problemas de especificidade com o botão "Leia mais". Eu queria que o botão tivesse uma aparência um pouco mais simplificada do que a nossa opção global. Eu também adicionei transições ease-in-out ao passar o mouse, como Deus quis.
/* Read More button */
.featured-content-card .featured-read-more {
display: inline-block;
padding: 0.5rem 1rem;
background-color: var(--link-hover-color);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
text-transform: uppercase;
font-family: var(--heading-font-family);
letter-spacing: -1px;
font-size: var(--font-size-sm);
font-weight: 600;
transition: all 0.3s ease-in-out;
}
.featured-content-card .featured-read-more:hover {
background-color: var(--link-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
Correção de UX: Sincronização do carrossel
Para corrigir o problema do carrossel que não reproduzia automaticamente, adicionei lógica a:
- Os slides avançam automaticamente a cada 5 segundos.
- Pausar ao passar o cursor e o foco do teclado
- Reiniciar após navegação manual
- Navegação com as teclas de seta
A reprodução automática só é acionada se houver vários slides, e toda a lógica de pausa/retomada garante uma experiência de usuário fluida, sem interromper a interação do usuário.
let autoplayInterval = null;
const startAutoplay = () => {
if (autoplayInterval) return;
autoplayInterval = setInterval(() => {
const currentSlide = parseInt(carousel.dataset.activeSlide || '0', 10);
showSlide(carousel, currentSlide + 1);
}, 5000);
};
const stopAutoplay = () => {
if (autoplayInterval) {
clearInterval(autoplayInterval);
autoplayInterval = null;
}
};
// Pause on hover and focus
carousel.addEventListener('mouseenter', stopAutoplay);
carousel.addEventListener('mouseleave', startAutoplay);
carousel.addEventListener('focusin', stopAutoplay);
carousel.addEventListener('focusout', startAutoplay);
// Arrow key navigation
carousel.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') handlePrev();
if (e.key === 'ArrowRight') handleNext();
});
startAutoplay();
Desempenho
Após construir o bloco, executei a página no Lighthouse. A pontuação de desempenho foi 99 (estamos falando do EDS), mas ainda havia algumas pequenas otimizações a serem feitas.
A imagem de fundo precisava carregar primeiro, mas sem nenhuma indicação de prioridade, ela estava sendo relegada ao segundo plano. A solução foi informar ao navegador que esta imagem é importante:
if (bgPicture) {
const bgImg = bgPicture.querySelector('img');
if (bgImg) {
bgImg.setAttribute('fetchpriority', 'high');
bgImg.setAttribute('loading', 'eager');
}
backgroundContainer.appendChild(bgPicture);
}
fetchpriority="high" Indica ao navegador para priorizar esta imagem em relação às outras, e loading="eager" garante que ela seja carregada imediatamente, em vez de esperar até que esteja prestes a entrar na área visível.
Para o carrossel, fiz o oposto: apenas o primeiro slide carrega imediatamente, enquanto os demais são carregados gradualmente, já que não ficam visíveis de imediato.
Layout
Corrigi o alinhamento vertical com align-items: center , já que o contêiner usa flex e os filhos precisavam ser centralizados verticalmente.
.featured-carousel .featured-carousel-slides {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
align-items: center;
}
São esses detalhes que diferenciam "funciona" de "é realmente bom".
Resultado final
Com aparência limpa.
A IA me acertou em 80%. Meus ajustes levaram a isso os 100%.
Quer experimentar você mesmo?
Comece devagar. Escolha um bloco simples, talvez uma grade de cartões ou um carrossel de depoimentos. Forneça a Claude (ou ao modelo de sua escolha) esta estrutura:
- Peça à IA para analisar de 2 a 4 exemplos de blocos semelhantes em sua base de código.
- Cole o código HTML bruto com o qual você está trabalhando.
- Descreva a transformação do layout em linguagem simples.
- Solicite código JavaScript e CSS puros (sem frameworks).
Em seguida, abra o console do navegador e teste. Procurar:
- Problemas de sincronização (verifique se há timeouts acumulados)
- Alterações de layout/problemas de desempenho (o Lighthouse detectará esses problemas)
- Diferenças de cor/espaçamento (seus olhos perceberão isso)
Conserte o que está quebrado. Envie. Repita.
Nota lateral
Eu não sou o mais esperto em Javascript, mas sabe quem é? A internet, e é com ela que as IAs foram treinadas. Portanto, se alguma vez você ficar preso ou não tiver ideia do que está acontecendo, apoie-se um pouco na IA para lhe ensinar. Mas lembre-se de verificar se pessoas reais resolveram o problema no passado e, em caso afirmativo, como o fizeram. Você pode estar simplesmente exagerando na engenharia de uma pá. Se a solução de IA parecer estranhamente complexa, provavelmente é.
Considerações finais
A geração de código por IA veio para ficar, e cada novo modelo se torna mais rápido e melhor. Isso é ótimo para o envio de trabalhos rotineiros. Compreender profundamente o funcionamento de um sistema é mais importante do que nunca.
A IA é uma ferramenta. Não é mágica. Use-o como um.
Aprenda como o trator funciona. Deixe o robô fabricar as peças para consertá-lo.
Deseja aprofundar seus conhecimentos em Serviços de Entrega de Borda?
Descubra como isso pode transformar a sua distribuição de conteúdo, consultando o nosso blog sobre Criação de Documentos para Distribuição na Borda ou ouvindo a nossa discussão em podcast no YouTube.
Sobre o autor
Frank Townsend
Desenvolvedor Front-End e Especialista em Áudio e Vídeo na Arbory Digital
Frank possui uma sólida experiência em desenvolvimento e design de websites. Antes de ingressar na Arbory, ele adquiriu experiência trabalhando na InstantOrder nas áreas de design e desenvolvimento, antes de se dedicar ao trabalho freelance. Ansioso por novas oportunidades, Frank fez a transição para a Arbory Digital, onde aprecia o ambiente colaborativo e dinâmico. Fora do trabalho, os hobbies de Frank incluem carpintaria, fotografia, videografia, agricultura, gerenciamento de turnês para o Always Loretta Show e outros projetos paralelos.