Sta succedendo tutta una situazione nel mondo degli sviluppatori in questo momento.
Ci sono gli evangelisti dell'IA che hanno chiesto a un modello di convertire il loro sito WordPress malfunzionante in React e ora pensano di aver raggiunto l'illuminazione. Hai convinto la folla dei boomer apocalittici che nessuno saprà programmare tra 5 anni e internet imploderà. E poi ci sono quelli più silenziosi che usano l'IA per inviare strumenti interni senza avvisare nessuno in 12 minuti e che vanno a casa presto.
Non faccio parte di nessuno di quei gruppi. Faccio parte del gruppo di: l'IA è uno strumento. Usalo. È un autocompletamento elegante con illusioni di competenza.
Questo post è per mostrare come ho usato l'IA per creare vibe code su un nuovo blocco Adobe Edge Delivery Services (EDS) e, cosa più importante, come ho corretto ciò che aveva sbagliato.
Impara da un contadino
Sono cresciuto in una fattoria. La logica della farm è semplice:
Se qualcosa si rompe, lo ripari.
Niente Amazon, solo vecchi fienili pieni di così tante cose che stanno inclinando. Non hai il lusso di ordinare una sostituzione né il tempo di imparare a realizzare una replica perfetta. Prendi pezzi di metallo a caso, un martello più vecchio della Guerra Civile e magari del nastro adesivo. Fai funzionare le cose. Improvvisa, adattati, supera.
Ecco perché i fienili accumulano 150 anni di strumenti e oggetti "potenzialmente utili". Mio padre diceva: "Non si sa mai quando potresti averne bisogno."
Ecco il punto:
Non è necessario sapere come forgiare un pezzo di attrezzo da zero. Ma DEVI sapere abbastanza per aggiustarla quando si rompe.
Lo stesso vale per il codice generato dall'IA.
L'IA può generare l'implement. Devi solo capirlo abbastanza da poterlo riparare, modificare e potenziare.
Che cos'è esattamente il Vibe Coding?
Il vibe coding è il flusso di lavoro che stiamo tutti lentamente ammettendo di fare:
Descrivi più o meno cosa vuoi -> lascia che l'IA cucini -> risolva il caos -> nave.
Non è "ingegneria prompt". Non è "sviluppo basato sull'IA." È letteralmente vibrazioni + contesto + gusto + te.
Lo chiamo "vibe coding" perché è quello che si sembra: non stai scrivendo specifiche o seguendo una scaletta rigida per i test. Ti trovi in sintonia con l'IA, ottieni qualcosa all'80%, poi usi il tuo giudizio ed esperienza per renderla davvero buona. È improvvisazione collaborativa con un partner molto sicuro di sé ma a volte sbagliato (lo siamo entrambi).
Le mie tre regole della programmazione dell'atmosfera
- Spiega il lavoro come se stessi insegnando a qualcuno che conosce HTML ma ha la memoria di un pesce rosso.
Sii prolisso. Spiega troppo. Fai finta di scrivere istruzioni IKEA. - Lascia che il modello faccia il montaggio grezzo.
La forma c'è, basta carteggiarla. - Correggi le parti losche usando le tue abilità reali.
Il modello farà qualcosa di maledetto, prima o poi.
La mia esperienza con modelli e generazione di codice
Sto facendo tutto questo in Windsurf, perché prompting + codice nello stesso spazio di lavoro è un bacio da chef. Ci sono altri IDE con IA integrata come Cursor o VSCode con GitHub Copilot - scegli il tuo veleno. Il windsurf ha avuto prezzi competitivi e ha funzionato all'inizio per me.
Claude Sonnet 4.5: Re nel fornire prime bozze utilizzabili senza perdere di vista la realtà. Non ho fatto molti test con Opus perché Sonnet è più veloce e funziona per quello che mi serve.
GPT: Ottimi per compiti di linguaggio naturale come spiegare le cose e scrivere documenti, ma per esperienza richiede troppo tempo e non segue bene i prompt.
DeepSeek: Mi fido di esso come mi fido di un procione in cucina.
Grok: Promettente ma ancora nessun input immagine per Windsurf, quindi è messo in panchina.
Gemini 2.5: Provato. Ho questo in loop: "Aggiungerò il compito alla mia lista di cose da fare per tenervi aggiornati sui miei progressi. Inizierò creando i file. Creerò prima il file blog-featured-hero.js. Dopodiché creerò il file blog-featured-hero.css.". Al momento della stesura di questo Gemini 3 non era disponibile, ma si dice in giro che sia a disposizione, quindi dovrò provarlo la prossima volta.
Se vuoi davvero tirare fuori il tuo Terry Davis interiore, puoi optare per l'auto-hosting con un setup decente (la VRAM è la regina ma puoi scaricare un po' di elaborazione sulla RAM se necessario, è abbastanza lento, ma funziona). Consiglio di iniziare con Ollama - CLI o GUI (https://ollama.com/), aggiungere qualche modello personalizzato (ho avuto successo con gemma3:27b con compiti in linguaggio naturale - https://ollama.com/library/gemma3), e usare un plugin in VS Code come Continue (https://github.com/continuedev/continue). Non avrai tutte le funzionalità degli IDE integrati, ma almeno sai dove vanno i tuoi dati. No, questa non è una pubblicità.
Perché EDS e IA vanno insieme come PB e Jam
I blocchi EDS sono ideali per il disegno AI perché:
- I blocchi sono letteralmente HTML + CSS + JS vanilla.
Su questo vengono addestrati gli LLM. Fornire loro HTML grezzo e contesto? Fanno brrrr. - L'EDS ha schemi chiari.
I modelli sono letteralmente costruiti per individuare i motivi. È quello che fanno. - Tu (sì, TU) controlli la lucidatura finale.
L'IA ti dà l'80%. Il tuo cervello ti dà l'ultimo 20% che rende tutto meno imbarazzante.
Buoni prompt con esempi chiari = miglior risultato.
OK, costruiamo questo blocco da eroe
Voglio creare un nuovo blocco di eroi in evidenza per il nostro blog con:
- Immagine di sfondo a tutta larghezza
- Una giostra di immagini a sinistra
- Una carta in vetro sfocato con titolo + sottotitoli + descrizione + pulsante "Leggi di più"
- Responsive + accessibile
- Segue i modelli dell'EDS così che il me del futuro non odiasse il me passato
EDS trasforma tutto questo in HTML pre-decorazione grezzo così:
<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>
Il prompt
Ecco la versione ripulita di ciò che ho dato a Claude (incluso lo screenshot di 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.
La prima bozza dell'IA
Claude ha calciato entrambi i fascicoli. E onestamente? Era piuttosto solido.
Cosa Era Buono
- La disposizione era praticamente corretta
- Funzionava la giostra
- Logica dell'immagine di sfondo: gestita
- Stacking responsivo: gestito
Cosa Aveva Bisogno di Mani Umane
Tuttavia, aveva dei problemi:
- Lucidatura visiva: i colori non corrispondevano e la tipografia poteva essere rinfrescata
- Problemi UX: Carousel non si riproduceva automaticamente, nessuna transizione di passaggio su link o pulsanti
- Prestazioni: Caricamento improprio dell'immagine di sfondo
- Layout: Colonna sinistra allineata verticalmente verso la parte superiore del div
Così mi sono messo al lavoro.
Rifinendo il blocco (dove effettivamente guadagni lo stipendio)
Stili globali predominanti
Una cosa che ho notato: Claude non ricorda la tua cascata. Genera regole che hanno perfettamente senso - finché i tuoi stili globali non arrivano e le smantellano.
EDS ha larghezza massima globale + imbottitura che blocca le sezioni a circa 1200px. La prima bozza di Claude non prevedeva questo, quindi l'eroe non era davvero completamente sanguinato. Invece di uscirne !important, ho aumentato la specificità inserendo main ai selezionatori:
/* 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;
}
Eroe = sanguinamento completo. Cascata = non inquinato.
Lucidatura visiva: Colori, Tipografia, Bottoni
Ho sostituito i nostri green di marca, ho stretto la tipografia e ho risolto di nuovo alcuni problemi di specificità con il pulsante leggi altro. Volevo che il pulsante avesse un aspetto un po' più snello rispetto alla nostra opzione globale. Ho anche aggiunto ease-in-out transizioni in hover, come Dio ha previsto.
/* 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);
}
UX Fix: Tempismo per la giostra
Per risolvere il fatto che la giostra non si riprodusse automaticamente, ho aggiunto la logica a:
- Avanzamento automatico ogni 5 secondi
- Pausa al passaggio del mouse e messa a fuoco tastiera
- Riavvio dopo la navigazione manuale
- Navigazione con tasti freccia
L'autoplay si attiva solo se ci sono più slide, e tutta la logica di pausa/riprenda garantisce una UX fluida senza interrompere l'interazione dell'utente.
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();
Prestazione
Dopo aver costruito il blocco, ho fatto passare la pagina attraverso Lighthouse. Il punteggio di prestazione era 99 (stiamo parlando di EDS), ma c'erano comunque alcune ottimizzazioni minori da fare.
L'immagine di sfondo doveva caricare prima, ma senza alcun suggerimento di priorità, veniva spinta giù per la cascata. La soluzione è stata dire al browser che questa immagine è importante:
if (bgPicture) {
const bgImg = bgPicture.querySelector('img');
if (bgImg) {
bgImg.setAttribute('fetchpriority', 'high');
bgImg.setAttribute('loading', 'eager');
}
backgroundContainer.appendChild(bgPicture);
}
fetchpriority="high" Dice al browser di dare priorità a questa immagine rispetto alle altre, e loading="eager" assicura che si carichi immediatamente invece di aspettare che stia per entrare nella viewport.
Per la giostra, ho fatto il contrario: solo la prima scivola si carica con entusiasmo, mentre le altre sono caricate con pigra, visto che non sono visibili immediatamente.
Disposizione
Ho corretto l'allineamento verticale con align-items: center perché il contenitore usa flessibilità e i bambini dovevano essere centrati 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;
}
Questi sono i dettagli che distinguono "funziona" da "è davvero buono".
Risultato finale
Sembra molto cleee.
L'IA mi ha dato l'80%. Le mie modifiche l'hanno portata al 100%.
Vuoi provare tu stesso?
Inizia in piccolo. Scegli un blocco semplice, magari una griglia di carte o un cursore per testimonianze. Alimenta Claude (o il tuo modello preferito) questa struttura:
- Dì all'IA di esaminare 2-4 esempi di blocchi simili dal tuo codice
- Incolla l'HTML grezzo con cui stai lavorando
- Descrivi la trasformazione della disposizione in inglese semplice
- Chiedi JS e CSS vanilla (senza framework)
Poi apri la console del browser e testa effettivamente. Cercare:
- Problemi di tempistica (controlla i timeout accumulati)
- Spostamenti di layout/problemi di prestazione (Lighthouse li rileva)
- Disaccordi di colore/spaziatura (i tuoi occhi li coglieranno)
Riparare ciò che è rotto. Spedilo. Ripeti.
Nota a margine
Non sono il più abile in Javascript, ma sai chi lo è? Internet ed è su questo che sono state addestrate le IA. Quindi, se mai ti blocchi o non hai idea di cosa stia succedendo, affidati un po' all'IA per insegnarti. Ma ricorda di ricontrollare se e come persone reali hanno risolto il problema in passato. Potresti semplicemente esagerare con una pala. Se la soluzione AI sembra stranamente complessa, probabilmente lo è.
Considerazioni finali
La generazione di codice tramite IA non scompare, e ogni nuovo modello diventa più veloce e migliore. È ottimo per il lavoro di spedizione di routine. Avere una comprensione profonda di come funziona un sistema è più importante che mai.
L'IA è uno strumento. Non magia. Usalo come tale.
Scopri come funziona il trattore. Lascia che il robot produca i pezzi per ripararlo.
Vuoi approfondire i servizi di consegna Edge?
Scopri come può trasformare la tua erogazione dei contenuti visitando il nostro blog su Document Authoring per Edge Delivery o ascolta la nostra discussione in podcast su YouTube.
Informazioni sull'autore
Frank Townsend
Sviluppatore Front End e Ninja A/V presso Arbory Digital
Frank ha una solida esperienza nello sviluppo e nel design di siti web. Prima di entrare in Arbory, ha acquisito esperienza lavorando in InstantOrder nel design e sviluppo prima di intraprendere lavori freelance. Desideroso di nuove opportunità, Frank è passato ad Arbory Digital, dove apprezza l'atmosfera collaborativa e dinamica. Al di fuori del lavoro, gli hobby di Frank includono la falegnameria, la fotografia, la videografia, l'agricoltura, la gestione di tour per il Always Loretta Show e altri progetti paralleli.