Im Entwicklerland läuft gerade eine ganze Sache.
Es gibt die KI-Evangelisten, die ein Modell gebeten haben, ihre chaotische WordPress-Seite auf React umzuwandeln und jetzt glauben, sie hätten Erleuchtung erreicht. Du hast die Boomer-Weltuntergangsgruppe überzeugt, dass in fünf Jahren niemand programmieren kann und das Internet implodiert. Und dann gibt es noch die stillen, die KI nutzen, um interne Werkzeuge zu verschicken, ohne es in 12 Minuten zu sagen, und früh nach Hause gehen.
Ich gehöre zu keinem dieser Lager. Ich gehöre dazu: KI ist ein Werkzeug. Nutze es. Es ist ein ausgefallenes Autocomplete mit Wahnvorstellungen von Kompetenz.
Dieser Beitrag zeigt mir, wie ich KI genutzt habe, um einen neuen Adobe Edge Delivery Services (EDS)-Block zu vibe-codieren und, noch wichtiger, wie ich das Problem behoben habe.
Lerne von einem Landwirt
Ich bin auf einem Bauernhof aufgewachsen. Die Farm-Logik ist einfach:
Wenn etwas kaputtgeht, reparierst du es.
Kein Amazonas, nur alte Scheunen voller so viel Zeug, dass sie kippen. Du hast nicht den Luxus, einen Ersatz zu bestellen, oder Zeit, um zu lernen, wie man eine perfekte Nachbildung anfertigt. Man nimmt zufällige Metallreste, einen Hammer, der älter ist als der Bürgerkrieg, und vielleicht etwas Klebeband. Du machst es zum Funktionieren. Improvisieren, anpassen, überwinden.
Deshalb sammeln Scheunen 150 Jahre an Werkzeugen und "potenziell nützlichen" Objekten an. Mein Vater sagte immer: "Man weiß nie, wann man das brauchen könnte."
Hier ist der Punkt:
Du musst nicht wissen, wie man ein Werkzeug von Grund auf schmiedet. Aber du MUSST genug wissen, um es zu reparieren, wenn es kaputtgeht.
Gleiches gilt für KI-generierten Code.
KI kann das Implement generieren. Man muss es nur genug verstehen, um es zu reparieren, anzupassen und aufzurüsten.
Was ist überhaupt Vibe-Coding?
Vibe-Coding ist der Workflow, den wir alle langsam zugeben:
Beschreibe ungefähr, was du willst – > lass die KI kochen – > das Chaos – > Schiff reparieren.
Es ist nicht "Prompt Engineering". Es ist keine "KI-gesteuerte Entwicklung". Es sind buchstäblich Vibes + Kontext + Geschmack + du.
Ich nenne es "Vibe-Coding", weil es sich so anfühlt – man schreibt keine Spezifikationen oder folgt einer starren Testgliederung. Man harmoniert mit der KI, erreicht etwas zu 80 % und nutzt dann sein Urteilsvermögen und seine Erfahrung, um es wirklich gut zu machen. Es ist kollaborative Improvisation mit einem sehr selbstbewussten, aber gelegentlich falschen Partner (wir beide sind es).
Meine drei Regeln des Vibe-Codings
- Erkläre den Job, als würdest du jemandem beibringen, der HTML kann, aber das Gedächtnis eines Goldfisches hat.
Sei ausführlich. Zu viel erklären. Stell dir vor, du schreibst IKEA-Anleitungen. - Lass das Modell den Rohschnitt machen.
Die Form ist da, du musst es nur schleifen. - Korrigiere die unsicheren Stellen mit deinen tatsächlichen Fähigkeiten.
Das Modell wird irgendwann etwas Verfluchtes tun.
Meine Erfahrungen mit Modellen und Codegenerierung
Ich mache das alles in Windsurf, weil Prompting + Code im selben Arbeitsbereich perfekt ist . Es gibt andere IDEs mit integrierter KI wie Cursor oder VSCode mit GitHub Copilot – such dir dein Gift aus. Windsurf hatte wettbewerbsfähige Preise und hat für mich direkt funktioniert.
Claude Sonnet 4.5: König darin, brauchbare erste Entwürfe zu liefern, ohne die Realität aus den Augen zu verlieren. Ich habe mit Opus nicht viel getestet, da Sonnet schneller ist und für meine Bedürfnisse funktioniert.
GPTs: Großartig für Aufgaben in natürlicher Sprache wie Erklären und Dokumentenschreiben, aber meiner Erfahrung nach dauert es zu lange und folgt den Anweisungen nicht so gut.
DeepSeek: Ich vertraue ihm genauso wie einem Waschbären in meiner Küche.
Grok: Vielversprechend, aber noch keine Bildaufnahme für Windsurf, also ist es auf die Bank gelegt.
Gemini 2.5: Habe es ausprobiert. Das habe ich immer wiederholt: "Ich werde die Aufgabe meiner TO-Do-Liste hinzufügen, damit du über meinen Fortschritt auf dem Laufenden bist. Ich beginne damit, die Dateien zu erstellen. Ich werde zuerst die blog-featured-hero.js-Datei erstellen. Danach werde ich die blog-featured-hero.css-Datei erstellen." Zum Zeitpunkt des Schreibens war Gemini 3 noch nicht verfügbar, aber man sagt, es ist richtig heiß, also muss ich das als Nächstes ausprobieren.
Wenn du wirklich deinen inneren Terry Davis herausholen willst, kannst du den selbstgehosteten Weg mit einem ordentlichen Rechner gehen (VRAM ist König, aber du kannst bei Bedarf etwas Verarbeitung auf RAM ablagern, das ist zwar etwas langsamer, aber es funktioniert). Ich empfehle, mit Ollama – CLI oder GUI (https://ollama.com/) zu beginnen, einige eigene Modelle hinzuzufügen (ich hatte Glück mit gemma3:27b bei natürlichen Sprachaufgaben – https://ollama.com/library/gemma3), und ein Plugin in VS Code wie Continue (https://github.com/continuedev/continue) zu verwenden. Du wirst nicht alle Funktionen der eingebauten IDEs haben, aber zumindest weißt du, wohin deine Daten gehen. Nein, das ist keine Anzeige.
Warum EDS und KI wie PB&J zusammengehören
EDS-Blöcke sind ideal für KI-Drafting, weil:
- Blöcke sind buchstäblich HTML + CSS + Vanilla-JS.
Darauf werden LLMs trainiert. Soll ich ihnen rohen HTML und Kontext geben? Sie machen brrrr. - EDS weist klare Muster auf.
Modelle sind buchstäblich dafür gebaut, Muster zu erkennen. Das ist es, was sie tun. - Du (ja, DU) kontrollierst die endgültige Politur.
Die KI gibt dir 80 %. Dein Gehirn gibt dir die letzten 20 %, was es nicht peinlich macht.
Gute Prompts mit klaren Beispielen = besseres Ergebnis.
Okay, lasst uns diesen Heldenblock bauen
Ich möchte einen neuen Blog-Featured-Hero-Block für unseren Blog erstellen mit:
- Vollbreitiges Hintergrundbild
- Ein Bildkarussell links
- Eine Karte mit verschwommenem Glas mit Titel + Untertitel + Beschreibung + "Mehr lesen"-Button
- Reaktionsschnell + barrierefrei
- Folgt EDS-Mustern, damit das zukünftige Ich das frühere Ich nicht hasst
EDS verwandelt das in rohes Vordekorations-HTML wie dieses:
<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>
Der Prompt
Hier ist die aufgeräumte Version dessen, was ich Claude gegeben habe (einschließlich des Screenshots von 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.
Der erste Entwurf der KI
Claude hat beide Akten rausgeworfen. Und ehrlich gesagt? Es war ziemlich solide.
Was war gut
- Das Layout war im Grunde korrekt
- Karussell funktionierte
- Hintergrundbildlogik: bearbeitet
- Responsives Stacking: gehandhabt
Was menschliche Hände brauchte
Dennoch gab es Probleme:
- Visuelle Politur: Die Farben waren ungleich und die Typografie konnte aufgefrischt werden
- UX-Probleme: Carousel wurde nicht automatisch abgespielt, keine Hover-Übergänge bei Links oder Buttons
- Leistung: Hintergrundbild lädt falsch
- Layout: Linke Spalte, vertikal an der Oberseite der Div ausgerichtet
Also machte ich mich an die Arbeit.
Den Block polieren (wo man tatsächlich sein Gehalt verdient)
Übersteuernde globale Stile
Eine Sache ist mir aufgefallen: Claude hat keine Erinnerung an deine Kaskade. Es erzeugt Regeln, die vollkommen Sinn ergeben – bis deine globalen Stile kommen und sie zerstören.
EDS hat globale Max-Breite + Polsterung, die Abschnitte auf etwa 1200 px abwürgt. Claudes erster Entwurf hat das nicht berücksichtigt, also war der Held nicht wirklich vollblutig. Anstatt mich herauszu !importanthabe ich die Spezifität erhöht, indem ich main den Selektoren vorgegeben habe:
/* 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;
}
Held = volle Blutung. Cascade = unverschmutzt.
Visuelle Feinschliff: Farben, Typografie, Knöpfe
Ich habe unsere Markengrüne eingetauscht, die Typografie verschärft und erneut einige Spezifizitätsprobleme mit dem Weiterlesen-Button behoben. Ich wollte, dass der Button etwas schlanker aussieht als unsere globale Option. Ich habe auch ease-in-out Übergänge beim Hover hinzugefügt, wie Gott es vorgesehen hat.
/* 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-Korrektur: Karussell-Timing
Um zu beheben, dass das Karussell nicht automatisch abgespielt wird, habe ich Logik hinzugefügt zu:
- Auto-Advance-Slides alle 5 Sekunden
- Pause beim Schwebe- und Tastaturfokus
- Neustart nach manueller Navigation
- Pfeiltasten-Navigation
Das Autoplay läuft nur, wenn mehrere Slides vorhanden sind, und die gesamte Pause-/Fortsetzungslogik sorgt für eine flüssige Benutzeroberfläche, ohne die Benutzerinteraktion zu unterbrechen.
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();
Leistung
Nachdem ich den Block gebaut hatte, habe ich die Seite durch Lighthouse laufen lassen. Die Performance Score lag bei 99 (wir sprechen hier von EDS), aber es gab noch einige kleinere Optimierungen zu machen.
Das Hintergrundbild musste zuerst geladen werden, aber ohne Prioritätshinweise wurde es den Wasserfall hinuntergedrückt. Die Lösung war, dem Browser mitzuteilen, dass dieses Bild wichtig ist:
if (bgPicture) {
const bgImg = bgPicture.querySelector('img');
if (bgImg) {
bgImg.setAttribute('fetchpriority', 'high');
bgImg.setAttribute('loading', 'eager');
}
backgroundContainer.appendChild(bgPicture);
}
fetchpriority="high" fordert den Browser auf, dieses Bild über andere zu priorisieren, und loading="eager" sorgt dafür, dass es sofort lädt, anstatt zu warten, bis es gerade ins Ansichtsfenster kommt.
Beim Karussell habe ich das Gegenteil gemacht – nur der erste Verschluss lädt eifrig, während die anderen faul geladen sind, da sie nicht sofort sichtbar sind.
Aufbau
Die vertikale Ausrichtung mit align-items: center korrigiert, da der Behälter flexibel ist und die Kinder vertikal zentriert werden mussten.
.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;
}
Das sind die Details, die "es funktioniert" von "es ist wirklich gut" unterscheiden.
Endergebnis
Sieht cleee aus.
KI hat mich zu 80 % erwischt. Meine Anpassungen haben es auf 100 % gebracht.
Willst du das selbst ausprobieren?
Fang klein an. Wähle einen einfachen Block, vielleicht ein Kartenraster oder einen Testimonial-Slider. Füttere Claude (oder dein bevorzugtes Modell) diese Struktur:
- Sag der KI, sie soll sich 2-4 Beispiele ähnlicher Blöcke aus deinem Codebasis ansehen
- Füge das rohe HTML ein, mit dem du arbeitest,
- Beschreiben Sie die Layout-Transformation in einfachem Englisch
- Frag nach Vanilla-JS und CSS (keine Frameworks)
Dann öffne die Browserkonsole und teste es tatsächlich. Schaue nach:
- Timing-Probleme (prüfe auf gestapelte Auszeiten)
- Layout-Shifts/Leistungsprobleme (Lighthouse erkennt diese)
- Farb-/Abstandsabstände (deine Augen werden diese wahrnehmen)
Repariere, was kaputt ist. Schick es. Wiederholen.
Nebenbemerkung
Ich bin nicht der schärfste Werkzeug, wenn es um Javascript geht, aber weißt du, wer es ist? Das Internet, und darauf wurden die KIs trainiert. Wenn du also mal stecken bleibst oder keine Ahnung hast, was los ist, verlasse dich ein wenig auf KI, um es dir beizubringen. Aber denk daran, noch einmal zu überprüfen, ob oder wie echte Menschen das Problem in der Vergangenheit gelöst haben. Du könntest einfach eine Schaufel überdimensionieren. Wenn sich die KI-Lösung seltsam komplex anfühlt, ist sie das wahrscheinlich auch.
Abschließende Gedanken
Die KI-Codegenerierung verschwindet nicht, und jedes neue Modell wird schneller und besser. Das ist großartig für routinemäßige Versandarbeiten. Ein tiefes Verständnis dafür, wie ein System funktioniert, ist wichtiger denn je.
KI ist ein Werkzeug. Keine Magie. Nutze es wie einen.
Lerne, wie der Traktor funktioniert. Lass den Roboter die Teile herstellen, um es zu reparieren.
Möchten Sie tiefer in Edge Delivery Services eintauchen?
Entdecken Sie, wie es Ihre Inhaltserstellung verändern kann, indem Sie unseren Blog über Dokumentenerstellung für Edge Delivery besuchen oder unsere Podcast-Diskussion auf YouTube hören.
Über den Autor
Frank Townsend
Frontend-Entwickler & A/V-Ninja bei Arbory Digital
Frank verfügt über einen starken Hintergrund in der Webentwicklung und -design. Bevor er zu Arbory kam, sammelte er Erfahrung bei InstantOrder im Bereich Design und Entwicklung, bevor er freiberuflich tätig wurde. Begierig auf neue Möglichkeiten wechselte Frank zu Arbory Digital, wo er die kollaborative und dynamische Atmosphäre schätzt. Außerhalb der Arbeit zählen Franks Hobbys Tischlerei, Fotografie, Videografie, Landwirtschaft, das Management von Touren für die Always Loretta Show und andere Nebenprojekte.