W krainie deweloperów dzieje się teraz cała rzecz.
Mamy ewangelistów sztucznej inteligencji, którzy poprosili model o przekonwertowanie ich beznadziejnej strony WordPress na React i teraz myślą, że osiągnęli oświecenie. Tłum boomerów jest przekonany, że za 5 lat nikt nie będzie wiedział, jak kodować, a internet imploduje. Są też ciche osoby, które wykorzystują sztuczną inteligencję do wysyłania wewnętrznych narzędzi bez informowania kogokolwiek w ciągu 12 minut i wychodzą wcześniej do domu.
Nie należę do żadnego z tych obozów. Jestem w obozie: AI to narzędzie. Używaj go. To fantazyjny autouzupełniacz z urojeniami kompetencji.
W tym poście pokazuję, jak wykorzystałem sztuczną inteligencję do wibrującego kodowania nowego bloku Adobe Edge Delivery Services (EDS), a co ważniejsze, jak naprawiłem to, co było nie tak.
Ucz się od rolnika
Dorastałem na farmie. Logika farmy jest prosta:
Jeśli coś się zepsuje, napraw to.
Nie ma Amazona, tylko stare stodoły pełne tak wielu rzeczy, że się przechylają. Nie masz luksusu zamawiania zamiennika ani czasu na naukę tworzenia idealnej repliki. Bierzesz przypadkowe kawałki metalu, młotek starszy niż wojna secesyjna i może trochę taśmy klejącej. Ty sprawiasz, że to działa. Improwizuj, dostosowuj się, zwyciężaj.
To dlatego w stodołach gromadzi się 150 lat narzędzi i "potencjalnie użytecznych" przedmiotów. Mój tata powiedziałby: "Nigdy nie wiesz, kiedy możesz tego potrzebować."
Oto sedno sprawy:
Nie musisz wiedzieć, jak wykuć narzędzie od podstaw. Musisz jednak wiedzieć wystarczająco dużo, aby naprawić go, gdy się zepsuje.
To samo dotyczy kodu generowanego przez SI.
Sztuczna inteligencja może wygenerować implementację. Wystarczy zrozumieć go na tyle, by móc go naprawiać, modyfikować i ulepszać.
Czym w ogóle jest Vibe Coding?
Kodowanie wibracji to przepływ pracy, do którego wszyscy powoli się przyznajemy:
Opisz z grubsza, czego chcesz -> pozwól AI gotować -> napraw chaos -> statek.
To nie jest "szybka inżynieria." To nie jest "rozwój oparty na sztucznej inteligencji." To dosłownie wibracje + kontekst + smak + ty.
Nazywam to "vibe coding", ponieważ tak to właśnie wygląda - nie piszesz specyfikacji ani nie trzymasz się sztywnego schematu testowania. Wibrujesz ze sztuczną inteligencją, uzyskując coś 80% tam, a następnie wykorzystujesz swoją ocenę i doświadczenie, aby uczynić to naprawdę dobrym. To wspólna improwizacja z bardzo pewnym siebie, ale czasami mylącym się partnerem (oboje jesteśmy).
Moje trzy zasady kodowania wibracji
- Wyjaśnij zadanie tak, jakbyś uczył kogoś, kto zna HTML, ale ma pamięć złotej rybki.
Bądź gadatliwy. Nadmierne wyjaśnienia. Udawaj, że piszesz instrukcje IKEA. - Pozwól modelowi wykonać wstępne cięcie.
Kształt już jest, trzeba go tylko przeszlifować. - Napraw szkicowe fragmenty przy użyciu swoich rzeczywistych umiejętności.
Model w końcu zrobi coś przeklętego.
Moje doświadczenie z modelami i generowaniem kodu
Robię to wszystko w Windsurf, ponieważ promptowanie + kod w tym samym obszarze roboczym to pocałunek szefa kuchni. Istnieją inne IDE z wbudowaną sztuczną inteligencją, takie jak Cursor lub VSCode z GitHub Copilot - wybierz swoją truciznę. Windsurf ma konkurencyjne ceny i działa dla mnie nieszablonowo.
Claude Sonnet 4.5: Król dawania użytecznych pierwszych szkiców bez utraty poczucia rzeczywistości. Nie testowałem zbyt wiele Opusa, ponieważ Sonnet jest szybszy i sprawdza się w moich potrzebach.
GPT: Świetnie nadaje się do zadań w języku naturalnym, takich jak wyjaśnianie rzeczy i pisanie dokumentów, ale z mojego doświadczenia wynika, że zajmuje zbyt dużo czasu i nie podąża za podpowiedziami.
DeepSeek: Ufam mu tak samo, jak szopowi w mojej kuchni.
Grok: Obiecujący, ale nie ma jeszcze obrazu dla Windsurf, więc jest na ławce.
Gemini 2.5: Wypróbowane. Mam to na repeat: "Dodam zadanie do mojej listy TODO, aby informować Cię na bieżąco o moich postępach. Zacznę od utworzenia plików. Najpierw utworzę plik blog-featured-hero.js. Następnie utworzę plik blog-featured-hero.css.". W chwili pisania tego tekstu Gemini 3 nie był dostępny, ale wieść niesie, że pluje ogniem, więc będę musiał go wypróbować w następnej kolejności.
Jeśli naprawdę chcesz wyciągnąć swojego wewnętrznego Terry'ego Davisa, możesz pójść drogą self-hosted z przyzwoitą platformą (VRAM jest królem, ale w razie potrzeby możesz odciążyć część przetwarzania do pamięci RAM, jest to dość wolniejsze, ale działa). Polecam zacząć od Ollamy - CLI lub GUI (https://ollama.com/), wrzucając tam kilka niestandardowych modeli (miałem szczęście z gemma3:27b z zadaniami języka naturalnego - https://ollama.com/library/gemma3) i używając wtyczki w VS Code, takiej jak Continue (https://github.com/continuedev/continue). Nie będziesz mieć wszystkich funkcji wbudowanych IDE, ale przynajmniej wiesz, dokąd zmierzają twoje dane. Nie, to nie jest reklama.
Dlaczego EDS & AI pasują do siebie jak PB&J
Bloki EDS są idealne do kreślenia SI, ponieważ:
- Bloki to dosłownie HTML + CSS + waniliowy JS.
Na tym właśnie szkolą się absolwenci studiów LLM. Podawać im surowy HTML i kontekst? Idą brrrr. - EDS ma wyraźne wzorce.
Modele są dosłownie stworzone do wykrywania wzorców. To właśnie robią. - Ty (tak, TY) kontrolujesz ostateczny szlif.
AI daje ci 80%. Twój mózg daje ci ostatnie 20%, co sprawia, że nie jest to żenujące.
Dobre podpowiedzi z jasnymi przykładami = lepsza wydajność.
OK, zbudujmy ten blok bohaterów
Chcę stworzyć nowy blok z bohaterem bloga dla naszego bloga:
- Obraz tła o pełnej szerokości
- Karuzela obrazów po lewej stronie
- Niewyraźna szklana karta z tytułem + podtytułem + opisem + "Przycisk Czytaj więcej"
- Responsywność + dostępność
- Podąża za wzorcami EDS, więc Future Me nie nienawidzi Past Me.
EDS zamienia to w surowy HTML przed dekoracją, taki jak ten:
<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>
Podpowiedź
Oto oczyszczona wersja tego, co podałem Claude'owi (w tym zrzut ekranu 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.
Pierwszy projekt AI
Claude wyrzucił oba pliki. I szczerze? To było całkiem solidne.
Co było dobre
- Układ był w zasadzie poprawny
- Karuzela działała
- Logika obrazu tła: obsługiwana
- Responsywne układanie: obsługiwane
Czego potrzebują ludzkie ręce
Wciąż jednak miał problemy:
- Wizualna polszczyzna: Kolory są niedopasowane, a typografia mogłaby zostać odświeżona.
- Problemy z UX: Karuzela nie odtwarzała się automatycznie, Brak przejść po najechaniu na linki lub przyciski
- Wydajność: Obraz tła ładuje się nieprawidłowo
- Układ: Lewa kolumna wyrównana pionowo do góry elementu div
Zabrałem się więc do pracy.
Polerowanie bloku (gdzie faktycznie zarabiasz swoją wypłatę)
Zastępowanie stylów globalnych
Zauważyłem jedną rzecz: Claude nie pamięta twojej kaskady. Generuje zasady, które mają całkowity sens - dopóki nie pojawią się globalne style i ich nie zniszczą.
EDS ma globalną maksymalną szerokość + padding, które ograniczają sekcje do około 1200 pikseli. Pierwszy szkic Claude'a nie brał tego pod uwagę, więc bohater nie był w pełni wykrwawiony. Zamiast !important-ing mój sposób na wyjście z tego, zwiększyłem szczegółowość poprzez dodanie main do selektorów:
/* 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;
}
Bohater = pełne krwawienie. Kaskada = niezanieczyszczona.
Wizualna polszczyzna: Kolory, typografia, przyciski
Zamieniłem naszą zieloną markę, zaostrzyłem typografię i ponownie naprawiłem pewne problemy ze specyfiką przycisku Czytaj więcej. Chciałem, aby przycisk wyglądał nieco bardziej opływowo niż nasza opcja globalna. Dodałem również przejścia ease-in-out po najechaniu kursorem, zgodnie z zamierzeniem Boga.
/* 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);
}
Poprawka UX: Czas karuzeli
Aby naprawić karuzelę nie odtwarzającą się automatycznie, dodałem logikę:
- Automatyczne przesuwanie slajdów co 5 sekund
- Pauza po najechaniu kursorem i skupieniu na klawiaturze
- Restart po ręcznej nawigacji
- Nawigacja za pomocą strzałek
Autoodtwarzanie działa tylko wtedy, gdy istnieje wiele slajdów, a cała logika wstrzymywania/wznawiania zapewnia płynny UX bez przerywania interakcji użytkownika.
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();
Wydajność
Po zbudowaniu bloku, uruchomiłem stronę przez Lighthouse. Wynik wydajności wyniósł 99 (mówimy o EDS), ale wciąż było kilka drobnych optymalizacji do wprowadzenia.
Obraz tła musiał załadować się jako pierwszy, ale bez żadnych wskazówek dotyczących priorytetu był spychany w dół wodospadu. Rozwiązaniem było poinformowanie przeglądarki, że ten obraz jest ważny:
if (bgPicture) {
const bgImg = bgPicture.querySelector('img');
if (bgImg) {
bgImg.setAttribute('fetchpriority', 'high');
bgImg.setAttribute('loading', 'eager');
}
backgroundContainer.appendChild(bgPicture);
}
fetchpriority="high" mówi przeglądarce, aby traktowała ten obraz priorytetowo w stosunku do innych, a loading="eager" zapewnia, że ładuje się on natychmiast, a nie czeka, aż wejdzie do rzutni.
W przypadku karuzeli zrobiłem odwrotnie - tylko pierwszy slajd ładuje się z niecierpliwością, podczas gdy pozostałe są ładowane leniwie, ponieważ nie są widoczne od razu.
Układ
Naprawiono wyrównanie w pionie za pomocą align-items: center, ponieważ kontener używa flex i dzieci musiały być wyśrodkowane w pionie.
.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ą to szczegóły, które odróżniają "it works" od "it's actually good."
Wynik końcowy
Wygląda czysto.
AI dało mi 80%. Moje poprawki pozwoliły osiągnąć 100%.
Chcesz spróbować samemu?
Zacznij od małego. Wybierz prosty blok, na przykład siatkę kart lub suwak opinii. Nakarm Claude'a (lub wybrany model) tą strukturą:
- Powiedz sztucznej inteligencji, aby przyjrzała się 2-4 przykładom podobnych bloków z twojej bazy kodu
- Wklej nieprzetworzony kod HTML, z którym pracujesz
- Opis transformacji układu w prostym języku angielskim
- Poproś o waniliowy JS i CSS (bez frameworków)
Następnie otwórz konsolę przeglądarki i przetestuj ją. Szukaj:
- Problemy z synchronizacją (sprawdź, czy nie występują timeouty)
- Zmiany układu/problemy z wydajnością (Lighthouse je wychwyci)
- Niedopasowanie kolorów/odstępów (twoje oczy to wychwycą)
Napraw to, co jest zepsute. Wysyłka. Powtórz.
Uwaga dodatkowa
Nie jestem najbystrzejszym narzędziem w szopie, jeśli chodzi o Javascript, ale wiesz kto nim jest? Internet i to jest to, na czym sztuczna inteligencja została przeszkolona. Jeśli więc kiedykolwiek utkniesz lub nie masz pojęcia, co się dzieje, oprzyj się trochę na sztucznej inteligencji, aby cię nauczyła. Pamiętaj jednak, aby dokładnie sprawdzić, czy lub jak prawdziwi ludzie rozwiązali ten problem w przeszłości. Możesz po prostu przesadzić z inżynierią łopaty. Jeśli rozwiązanie AI wydaje się dziwnie skomplikowane, to prawdopodobnie tak jest.
Przemyślenia końcowe
Generowanie kodu AI nigdzie się nie wybiera, a każdy nowy model jest coraz szybszy i lepszy. To świetne rozwiązanie do rutynowej pracy związanej z wysyłką. Dogłębne zrozumienie działania systemu jest ważniejsze niż kiedykolwiek wcześniej.
Sztuczna inteligencja jest narzędziem. Nie magia. Używaj go jak jednego z nich.
Dowiedz się, jak działa ciągnik. Niech robot wykona części do naprawy.
Chcesz dowiedzieć się więcej o usługach Edge Delivery?
Dowiedz się, jak może to zmienić sposób dostarczania treści, sprawdzając nasz blog na temat tworzenia dokumentów dla Edge Delivery lub słuchając naszej dyskusji w podcastach na YouTube.
O autorze
Frank Townsend
Front End Developer & A/V Ninja w Arbory Digital
Frank ma duże doświadczenie w tworzeniu i projektowaniu stron internetowych. Przed dołączeniem do Arbory zdobył doświadczenie w InstantOrder w zakresie projektowania i rozwoju, zanim rozpoczął pracę jako freelancer. Żądny nowych możliwości, Frank przeszedł do Arbory Digital, gdzie docenia dynamiczną atmosferę współpracy. Poza pracą, hobby Franka obejmuje stolarstwo, fotografię, wideografię, rolnictwo, zarządzanie trasami koncertowymi dla Always Loretta Show i inne projekty poboczne.