Il y a tout un problème en ce moment dans le monde du développement.
Il y a les évangélistes IA qui ont demandé à un modèle de convertir leur site WordPress bancal en React et qui pensent maintenant avoir atteint l’illumination. Vous avez convaincu la foule apocalyptique des boomers que personne ne saura coder dans 5 ans et qu’Internet va s’effondrer. Et puis il y a les plus discrets qui utilisent l’IA pour livrer des outils internes sans prévenir personne en 12 minutes et rentrent chez eux tôt.
Je ne fais partie d’aucun de ces camps. Je fais partie du camp : l’IA est un outil. Utilisez-le. C’est un autocomplément sophistiqué avec des illusions de compétence.
Ce post montre comment j’ai utilisé l’IA pour coder un nouveau bloc Adobe Edge Delivery Services (EDS) et, plus important encore, comment j’ai corrigé ce qui s’était trompé.
Apprenez d’un agriculteur
J’ai grandi dans une ferme. La logique de ferme est simple :
Si quelque chose casse, vous le réparez.
Pas d’Amazon, juste de vieilles granges pleines de tellement de choses qu’elles penche. Vous n’avez pas le luxe de commander un remplacement ni le temps d’apprendre à faire une réplique parfaite. Tu prends des morceaux de métal au hasard, un marteau plus vieux que la guerre de Sécession, et peut-être du ruban adhésif. Tu fais en sorte que ça marche. Improviser, s’adapter, surmonter.
C’est pourquoi les granges accumulent 150 ans d’outils et d’objets « potentiellement utiles ». Mon père disait : « On ne sait jamais quand on pourrait en avoir besoin. »
Voici le point :
Vous n’avez pas besoin de savoir forger un instrument à partir de zéro. Mais il FAUT en savoir assez pour le réparer quand il casse.
C’est pareil pour le code généré par l’IA.
L’IA peut générer l’implémentation. Il suffit de le comprendre suffisamment pour le réparer, l’ajuster et l’améliorer.
Qu’est-ce que le codage Vibe au juste ?
Le vibe coding est le flux de travail que nous admettons tous petit à petit :
Décrivez à peu près ce que vous voulez -> laissez l’IA cuisiner -> réparer le chaos -> vaisseau.
Ce n’est pas de la « technique rapide ». Ce n’est pas du « développement propulsé par l’IA ». C’est littéralement des vibrations + contexte + goût + toi.
J’appelle ça du « vibe coding » parce que c’est ce que ça donne l’impression : tu n’écris pas de spécifications ni ne suis un plan de test rigide. Tu t’entends bien avec l’IA, tu réussis à atteindre quelque chose à 80 %, puis tu utilises ton jugement et ton expérience pour que ce soit vraiment bon. C’est de l’improvisation collaborative avec un partenaire très confiant mais parfois mauvais (nous le sommes tous les deux).
Mes trois règles du codage de l’ambiance
- Expliquez le travail comme si vous enseigniez à quelqu’un qui connaît le HTML mais a la mémoire d’un poisson rouge.
Sois verbeux. Explique un peu trop. Fais comme si tu écrivais des instructions IKEA. - Laissez le modèle faire le montage brut.
La forme est là, il suffit de la poncer. - Corrigez les parties douteuses avec vos compétences réelles.
Le modèle finira par faire quelque chose de maudit.
Mon expérience avec les modèles et la génération de code
Je fais tout ça dans Windsurf, parce que les invites + le code dans le même espace de travail, c’est un vrai coup de maître. Il existe d’autres IDE avec l’IA intégrée comme Cursor ou VSCode avec GitHub Copilot – choisissez votre poison. La planche à voile a eu des prix compétitifs et a fonctionné dès le départ pour moi.
Claude Sonnet 4.5: Roi de la fourniture de premiers jets exploitables sans perdre le fil de la réalité. Je n’ai pas fait beaucoup de tests avec Opus puisque Sonnet est plus rapide et fonctionne pour mes besoins.
GPTs: Excellents pour des tâches en langage naturel comme expliquer des choses ou rédiger des documents, mais d’après mon expérience, ça prend trop de temps et ne suit pas aussi bien les consignes.
DeepSeek: Je lui fais confiance de la même façon que je fais confiance à un raton laveur dans ma cuisine.
Grok: Prometteur mais pas encore d’entrée d’image pour Windsurf, donc il est mis de côté.
Gemini 2.5: Essayé. J’ai répété ceci : « Je vais ajouter la tâche à ma liste de choses à faire pour vous tenir informé de mes progrès. Je vais commencer par créer les fichiers. Je vais d’abord créer le fichier blog-featured-hero.js. Ensuite, je créerai le fichier blog-featured-hero.css. » Au moment où j’ai écrit ceci, Gemini 3 n’était pas disponible, mais la rumeur dit qu’il crache du feu, donc je vais devoir essayer ça ensuite.
Si vous voulez vraiment sortir votre côté Terry Davis, vous pouvez opter pour l’auto-hébergement avec un bon PC (la VRAM est reine mais vous pouvez transférer un peu de traitement vers la RAM si besoin, c’est assez lent, mais ça fonctionne). Je recommande de commencer par Ollama - CLI ou interface graphique (https://ollama.com/), d’y ajouter quelques modèles personnalisés (j’ai eu du succès avec gemma3:27b pour les tâches en langage naturel - https://ollama.com/library/gemma3), et d’utiliser un plugin dans VS Code comme Continue (https://github.com/continuedev/continue). Vous n’aurez pas toutes les fonctionnalités des IDE intégrés, mais au moins vous saurez où vont vos données. Non, ce n’est pas une pub.
Pourquoi l’EDS et l’IA vont ensemble comme le PB et la confiture
Les blocs EDS sont idéaux pour le dessin IA car :
- Les blocs sont littéralement HTML + CSS + JS classique.
C’est sur cela que les LLM sont formés. Leur fournir du HTML brut et du contexte ? Ils font brrrr. - L’EDS présente des schémas clairs.
Les modèles sont littéralement conçus pour repérer les motifs. C’est ce qu’ils font. - Vous (oui, VOUS) contrôlez le vernis final.
L’IA vous donne 80 %. Ton cerveau te donne les 20 % restants qui rendent ça non embarrassant.
De bons prompts avec des exemples clairs = meilleur résultat de production.
OK, construisons ce bloc de héros
Je souhaite créer un nouveau bloc de héros mis en avant pour notre blog avec :
- Image de fond pleine largeur
- Un carrousel d’images à gauche
- Une carte en verre flouté avec titre + sous-titre + description + bouton « Lire la suite »
- Réactif + accessible
- Suit les schémas du SED pour que le moi du futur ne déteste pas le moi du passé
EDS transforme cela en HTML brut de pré-décoration comme ceci :
<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>
Le prompt
Voici la version épurée de ce que j’ai donné à Claude (y compris la capture d’écran de 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.
Le premier brouillon de l’IA
Claude expulsa les deux dossiers. Et honnêtement ? C’était plutôt solide.
Ce qui était bien
- La disposition était globalement correcte
- Le carrousel fonctionnait
- Logique de l’image de fond : traitée
- Empilement réactif : géré
Qu’est-ce qui avait besoin de mains humaines
Pourtant, il y avait des problèmes :
- Finition visuelle : les couleurs dépareillées et la typographie pourrait être rafraîchie
- Problèmes d’expérience utilisateur : Carousel ne se lisait pas automatiquement, pas de transitions de survol sur les liens ou les boutons
- Performance : Image d’arrière-plan qui se charge incorrectement
- Disposition : Colonne de gauche alignée verticalement vers le haut de la div
Alors je me suis mis au travail.
Peaufiner le bloc (où tu gagnes réellement ton salaire)
Styles mondiaux dominants
Une chose que j’ai remarquée : Claude n’a aucun souvenir de ta cascade. Cela génère des règles qui ont tout son sens – jusqu’à ce que vos styles globaux viennent les démanteler.
EDS a globalement la largeur maximale + le rembourrage qui bloque les sections à environ 1200px. Le premier jet de Claude ne prévoyait pas cela, donc le héros n’était pas vraiment en pleine saignée. Au lieu de !importantme débrouiller, j’ai augmenté la précision en préposant main aux sélectionneurs :
/* 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;
}
Héros = saignement complet. Cascade = non pollué.
Finition visuelle : couleurs, typographie, boutons
J’ai remplacé nos greens de marque, resserré la typographie et corrigé à nouveau certains problèmes de spécificité avec le bouton lire la suite. Je voulais que le bouton ait un aspect un peu plus épuré que notre option globale. J’ai aussi ajouté ease-in-out transitions en survol, comme Dieu l’a voulu.
/* 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);
}
Solution UX : Synchronisation du carrousel
Pour corriger le manège qui ne se lit pas automatiquement, j’ai ajouté la logique à :
- L’avancement automatique glisse toutes les 5 secondes
- Pause en survol et mise au point clavier
- Redémarrage après navigation manuelle
- Navigation par touches fléchées
La lecture automatique ne s’exécute que s’il y a plusieurs diapositives, et toute la logique de pause/reprise assure une interface utilisateur fluide sans interrompre l’interaction utilisateur.
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();
Performances
Après avoir construit le bloc, j’ai fait passer la page dans Lighthouse. Le score de performance était de 99 (on parle de l’EDS), mais il restait encore quelques petites optimisations à faire.
L’image d’arrière-plan devait d’abord se charger, mais sans aucun indice prioritaire, elle était poussée vers le bas de la cascade. La solution a été d’indiquer au navigateur que cette image est importante :
if (bgPicture) {
const bgImg = bgPicture.querySelector('img');
if (bgImg) {
bgImg.setAttribute('fetchpriority', 'high');
bgImg.setAttribute('loading', 'eager');
}
backgroundContainer.appendChild(bgPicture);
}
fetchpriority="high" dit au navigateur de prioriser cette image par rapport aux autres, et loading="eager" s’assure qu’elle se charge immédiatement plutôt que d’attendre qu’elle soit sur le point d’entrer dans la fenêtre d’exposition.
Pour le carrousel, j’ai fait l’inverse : seule la première glissière se charge avec enthousiasme, tandis que les autres sont chargés paresseusement car elles ne sont pas visibles immédiatement.
Disposition
J’ai corrigé l’alignement vertical avec align-items: center car le conteneur utilise de la flexion et les enfants devaient être centrés verticalement.
.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;
}
Ce sont ces détails qui distinguent « ça marche » de « c’est vraiment bien ».
Résultat final
Tu as l’air clé.
L’IA m’a donné 80 %. Mes ajustements l’ont amené à 100 %.
Vous voulez essayer vous-même ?
Commencez petit. Choisissez un bloc simple, peut-être une grille de cartes ou un curseur de témoignages. Alimentez Claude (ou votre modèle de prédilection) cette structure :
- Dites à l’IA de regarder 2 à 4 exemples de blocs similaires issus de votre base de code
- Collez le HTML brut avec lequel vous travaillez
- Décrivez la transformation de la mise en page en anglais simple
- Demandez un JS et CSS vanilla (pas de frameworks)
Ensuite, ouvre la console du navigateur et teste réellement. Chercher:
- Problèmes de timing (vérifiez les délais d’attente empilés)
- Changements de configuration/problèmes de performance (Lighthouse les détecte)
- Décalages de couleur/espacement (vos yeux les remarqueront)
Répare ce qui est cassé. Envoyez-le. Répétez.
Petite parenthèse
Je ne suis pas le plus averti en Javascript, mais vous savez qui l’est ? Internet, et c’est sur cela que les IA ont été entraînées. Donc si jamais tu bloques ou ne sais pas ce qui se passe, appuie-toi un peu sur l’IA pour t’apprendre. Mais n’oubliez pas de vérifier si ou comment de vraies personnes ont résolu le problème par le passé. Tu pourrais simplement surdimensionner une pelle. Si la solution IA vous semble étrangement complexe, elle l’est probablement.
Dernières réflexions
La génération de code par IA ne disparaîtra pas, et chaque nouveau modèle devient plus rapide et meilleur. C’est parfait pour le travail de routine de livraison. Avoir une compréhension approfondie du fonctionnement d’un système est plus important que jamais.
L’IA est un outil. Pas magique. Utilisez-le comme tel.
Apprenez comment fonctionne le tracteur. Laissez le robot fabriquer les pièces pour le réparer.
Vous souhaitez approfondir les services de livraison Edge ?
Découvrez comment il peut transformer votre diffusion de contenu en consultant notre blog sur la création de documents pour Edge Delivery ou en écoutant notre podcast sur YouTube.
À propos de l’auteur
Frank Townsend
Développeur front-end et ninja audiovisuel chez Arbory Digital
Frank possède une solide expérience en développement et design de sites web. Avant de rejoindre Arbory, il a acquis de l’expérience chez InstantOrder dans le design et le développement avant de se lancer dans un travail freelance. Désireux de nouvelles opportunités, Frank a rejoint Arbory Digital, où il apprécie l’atmosphère collaborative et dynamique. En dehors du travail, les loisirs de Frank incluent la menuiserie, la photographie, la vidéographie, l’agriculture, la gestion de tournées pour le Always Loretta Show et d’autres projets parallèles.