Hogyan készíts animált webhelyet Claude Code-dal egyetlen este alatt

A modellekkel való munkáról bővebben az Ailoot dokumentációjában olvashatsz.

Miért egyértelmű már az első képernyőn, ha egy webhelyet AI készített?#

Megkérsz egy ügynököt, hogy rakjon össze egy landing oldalt. Negyven perccel később már van egy működő webhelyed: a szakaszok a helyükön vannak, a tördelés reszponzív, a gombok működnek. Szinte azonnal mégis az az érzésed támad, hogy ezt már láttad valahol.

Több ezer oktatóanyag és kezdősablon másolta ezt a színt, eltorzítva a mintát, a modell pedig megtanulta, hogy a gombok lilák. Ugyanez a mechanizmus érvényes a betűtípusokra, a lekerekített sarkokra és az árnyékokra is.

Közben megváltozott az „AI-os megjelenés”. Az Anthropic a frontend-design skill dokumentációjában most más megjelenéseket ír le.

A webes elrendezésekben megjelenő „slop” alapvető problémája: akkor keletkezik, ha nincs semmi konkrét, amit másolni lehetne, ezért a modell egyszerűen átlagolja az összes webes stílust. A Qt éppen azért egységes, mert nem tud másképp kinézni.

A „slop” itt olyan gép által generált munkát jelent, amelyet a modell egy jellegzetes stílus nélküli, általános eredménnyé átlagol.

A gyakorlati tanulság az, hogy az ügynöknek szűk dizájnrendszerre van szüksége a nyitott végű feladat helyett. Ha azt mondod, „legyen szép”, az átlagot választja. Ha konkrét palettát, néhány betűtípust és egy meghatározó vizuális elemet adsz neki, azokból építkezik.

Ebben a képben a mozgás a legfeltűnőbb jel. Még egy tökéletes tipográfiájú statikus oldal is sablonosnak hat, mert az élő webhelyek lélegeznek: görgetés közben elemek jelennek meg, a kurzor változásokat vált ki, és a képernyők közötti átmenetek nem szakadnak meg hirtelen.

Mire van szükséged animált webhely készítéséhez Claude Code-ban?#

Vegyük sorra az eszközöket, mert sok a félreértés az árakkal kapcsolatban.

A GSAP az animációs könyvtár, amely számos díjnyertes webhely mögött áll. A Webflow 2024 októberében vásárolta meg, és szinte azonnal elterjedtek a hírek arról, hogy minden ingyenessé vált. Ez nem teljesen igaz: a Webflow akkor megerősítette, hogy a meglévő árak érvényben maradnak. A könyvtár csak 2025. április végén, a 3.13-as verzióval vált ingyenessé.

A 3.13-as kiadás kifejezetten kimondja, hogy a korábban fizetős bővítmények, például a SplitText és a MorphSVG is ingyenessé váltak, kereskedelmi használatra is. A jelenlegi verzió 2026 júliusában: gsap@3.15.0.

Az ingyenesség azonban nem jelent nyílt forráskódot. A licenc továbbra is saját tulajdonú, és tiltja, hogy a GSAP-re építve a Webflow-val versengő vizuális animációszerkesztőt készítsenek. A webhelyekre, ügyfélprojektekre és kereskedelmi munkára nincs korlátozás.

Az Anthropic frontend-design skillje olyan utasításgyűjtemény, amely megváltoztatja, hogyan dolgozik az ügynök a felületen. A tároló leírása szerint:

A skill egy kétlépéses módszert tartalmaz. Először az ügynök összeállít egy tokenrendszert: négy-hat elnevezett színt, legalább két szerepkörhöz betűtípust, szöveges vázlatokkal leírt elrendezési tervet és egy meghatározó vizuális elemet az oldalhoz. Ezután a feladat alapján bírálja el a saját tervét. Csak ezután ír kódot.

A bejegyzés 75 skillt említ, a tároló leírása 78-at sorol fel, a fában pedig ma 91 található. A szerző ezt nyíltan jelzi: keress rá a tárolóban, mert a leírás elavult.

Hogyan veheted rá a Claude Code-ot, hogy ne készítsen több sablont?#

Kezdjük a szabályfájllal, mert minden kérésnél érvényesül, és semmibe sem kerül.

Hasznos kiindulópont lehet egy sablonellenes korlátokat tartalmazó blokk. Az elv egyszerű: sorold fel név szerint azokat a konkrét választásokat, amelyek felé a modell alapértelmezés szerint hajlamos sodródni, és tiltsd meg őket.

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

A blokk szándékosan angolul íródott: a modell pontosabban követi a rövid műszaki utasításokat a dokumentáció nyelvén.

Nem véletlen, hogy az animációs sor a színek és az árnyékok mellett szerepel a tiltások között. Az első képernyő áttetszősége közvetlenül rontja a sebességmutatót, ahogy alább látni fogjuk.

Következzen a skill. Az Anthropic hivatalos skilljei a bővítményen keresztül telepíthetők:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Egy részlet: a dizájnskillek külön-külön nem telepíthetők; az example-skills bővítmény mind a tizenkettőt egyszerre hozza. Ha csak egyet szeretnél, másold át kézzel a mappát—a Claude Code újraindítás nélkül is felismeri:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

A gyűjtemény további hasznos skilljei: a theme-factory tíz kész témával és azok alkalmazása előtt kötelező emberi jóváhagyással; a web-artifacts-builder React-fejlesztéshez kész komponensekkel; valamint az algorithmic-art generatív grafikákhoz. Egy külön cikk részletesen elmagyarázza, hogyan válassz skillt egy feladathoz: hogyan válassz skillt Claude Code-hoz.

A szabályok és a skill együtt működnek: a szabályok tiltják a rossz választásokat, a skill pedig folyamatot ír elő—először a rendszer, utána a kritika, végül a kód.

Minden fontos dolog még a kérés előtt történik. Előre beteszed a kontextusba azokat a korlátokat, amelyek alapján az ügynök építkezni fog, így maga a prompt megfogalmazása alig számít. Ezt a megközelítést kontextusmérnökségnek hívják, a CLAUDE.md fájl pedig az első építőeleme. Az AI-klón + Második agy + Kontextusmérnökség kombinációja segít az átlagos kimeneteket gyártó Claude-ot olyan eszközzé alakítani, amely tartja magát a stílusodhoz.

Hol találsz kész vizuális irányokat és animációs promptokat?#

A benne található mozgástechnikák: animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

Ha nem vagy programozó, számodra inkább a kész vizuális irányok a fontosak. A homályos „legyen modern” helyett válassz egyet ezek közül, és add meg a modellnek azt a szűk rendszert, ami eddig hiányzott:

• clean-minimal-beige-light-mode - világos bézs minimalizmus
• dark-glass-clean-layout - sötét üveg
• documentary-brutalist-agency - dokumentarista brutalizmus
• editorial-portfolio-chapters - magazinszerűen fejezetekre osztott portfólió
• orange-clean-paper-saas - papírszerű szolgáltatási webhely narancssárga kiemeléssel
• solar-duotone-bold - merész, kétszínű megjelenés
• tech-green-dark-mode-modern - sötét, zöld technológiai stílus
• light-mode-paper-technical - világos, technikai papír

A 3D grafikához és effektekhez technikai skillek is vannak: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

A tárolóban nincs telepítőparancs—a szerző az ütemtervben egyértelműen azt írja, hogy akkor ad hozzá ilyet, ha eldőlt az integráció módja. A Claude Code-nak szóló egyetlen utasítás ez:

Az alábbiakban egy telepítési lehetőség szerepel. Ez a parancs nincs benne a tárolóban; telepítési javaslat:

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

Hogyan adj friss GSAP-dokumentációt az ügynöknek egy sorban?#

Az animációs könyvtárakkal gyakran az a probléma, hogy az ügynök elavult módon emlékszik az összekapcsolásukra. Egy régi útvonalról importál, két éve használt módon regisztrál egy bővítményt, és a kód nem fut.

A megoldás az, hogy te magad teszed a dokumentációt a kontextusba. A GSAP géppel jól feldolgozható formátumban biztosítja:

https://gsap.com/llms.txt

A fájl a mai napon körülbelül 25 kilobájtos. Minden dokumentációs oldal markdown-változatban is elérhető—csak add hozzá a .md kiterjesztést az URL-hez.

A gyakorlatban így néz ki:

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

A Motion könyvtárnak (korábban Framer Motion) is van ilyen fájlja, és az még nagyobb. A Motion MIT-licenc alatt érhető el, és valóban nyílt forráskódú marad; a jelenlegi verzió motion@12.42.2. Ha a projekt Reactet használ, és csak egyszerű felfedő animációkra van szüksége, választhatod a Motiont; összetett görgetési jelenetekhez a ScrollTrigger bővítménnyel használd a GSAP-et.

Vannak olyan, kizárólag böngészőben használható lehetőségek is, amelyekhez nem kell könyvtár. A View Transitions API-val végzett oldalállapot-átmenetek 2025. október 14-én váltak széles körben támogatottá—de csak egyetlen oldalon belül; az oldalak közötti változatot a Firefox egyáltalán nem támogatja. A CSS-es görgetési animációk még nem kaptak széles körű támogatást: a Chrome támogatja őket, a Safari nemrég tanulta meg, a Firefoxban viszont kézzel kell bekapcsolni őket a beállításokban, így átlagos olvasóknál egyszerűen nem működnek. Kérd meg az ügynököt, hogy előbb ellenőrizze a böngészőtámogatást; ha nincs támogatás, hagyja meg a szokásos átmenetet.

Hogyan alakíthatsz egy neked tetsző webhelyet prompttá?#

A leggyakoribb módja annak, hogy elmagyarázd, mit szeretnél, ha mutatsz egy példát. Egy ügynöknél ez közvetlenül nem működik: nem látja a webhelyet, csak a szöveget.

A video-to-superprompt skill áthidalja ezt a szakadékot. A tároló leírása szerint videós referenciából részletes promptot készít újraalkotáshoz vagy inspirációként. Rétegenként elemzi a felvételt: narratíva, elrendezés, mozgás, tipográfia, 3D grafika. A kimenet egy azonnal használható prompt.

A fő szabályát nyomatékosan fogalmazza meg:

A második skill, a html-to-interaction-prompts a forráskóddal dolgozik: megkeres mindent, ami mozog—kurzorreakciókat, 3D grafikát, görgetési effekteket, eltérő sebességgel mozgó rétegeket—, majd külön promptokra bontja az oldalt, szakaszonként, gombonként, hover állapotonként vagy effektusonként egyre. Elve szerint a forrás viselkedése az igazság, és ha rendelkezésre áll a kód, nem szabad képernyőképből kitalálni az effekteket.

A harmadik, a stitched-full-page-capture egy gyakorlati problémát old meg. A lusta betöltést és 3D grafikát használó webhelyek szokásos teljes oldalas képernyőképe szürke és üres lesz, mert a felvétel a renderelés előtt készül. A skill képernyőről képernyőre végiggörget az oldalon, megvárja, amíg minden elrendeződik, majd összefűzi az eredményt.

Képernyőfelvétel nélkül is van megoldás: MCP-n keresztül élő felületi példák könyvtárához kapcsolhatod az ügynököt. A Mobbin hivatalos szervere egy paranccsal telepíthető:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Ezután nyiss új munkamenetet, válaszd ki a szervert a listából, és jelentkezz be a böngészőben. Az ügynök valódi, működő alkalmazások képernyőképeihez fér hozzá: több mint 621,500 képernyő szerepel a listán. Ezek kész termékekről készült képernyőképek, nem komponensek vagy kód. Fontos megjegyzés: a Mobbin szervere az ingyenes csomagban nem működik; csak fizetős csomagokban érhető el (2026 júliusában). Egy külön cikk a Google Stitchről ugyanilyen módszerrel mutatja be, hogyan kapcsolhatsz külső szolgáltatásokat egy ügynökhöz, és hozhatsz be egy dizájnrendszert a Claude Code-ba.

Lépésről lépésre: animált webhely egyetlen este alatt#

1. Projekt beállítása

   Ha még nincs projekted, kezdd egy üres mappával. Hozd létre, nyisd meg terminálban, majd futtasd benne a claude parancsot. Első promptként kérj egy vázat: „készíts egyszerű, egyoldalas webhelyvázat a vállalkozásomhoz (írd le, mivel foglalkozik), sima HTML-lel és CSS-sel, könyvtárak nélkül.” Megjelenik néhány fájl—ez a projekt gyökérkönyvtára, innentől itt történik minden.

2. A szabályok elhelyezése a CLAUDE.md fájlban

   Másold be az Anti-Generic Guardrails blokkot a projekt gyökérkönyvtárában lévő CLAUDE.md fájlba. Ha nincs ilyen fájl, kérd meg az ügynököt, hogy hozza létre. A szabályok Tailwindhez készültek; ha a váz sima CSS-t használ, mondd az ügynöknek: „alkalmazd ezeket az elveket a hagyományos CSS-re”—a szabályok jelentése nem változik. Lásd a CLAUDE.md négy szabályának áttekintését, amely bemutatja, hogyan működik maga a fájl, és mi kerüljön még bele.

3. A frontend-design skill telepítése

   Használd az example-skills bővítményt, vagy másold át a frontend-design mappát a fent leírtak szerint. A /doctor paranccsal ellenőrizheted, hogy betöltődött-e a skill.

4. Egy vizuális irány kiválasztása

   Egyet válassz, ne kettőt vagy hármat. A dokumentarista brutalizmus bézs minimalizmussal való keverése pontosan azt az átlagolást eredményezi, amit el akarsz kerülni.

5. Statikus oldal készítése

   Egyetlen animáció nélkül. Először a tipográfia, a térközök és a rács következzen. Kérd meg az ügynököt, hogy indítson helyi előnézetet, majd nyisd meg a megadott címet. Ha telefonon szeretnéd megnézni, mondd: „úgy futtasd, hogy a hálózatom más eszközein is meg lehessen nyitni”, és az ügynök megad egy címet.

6. Egy mozgásjelenet hozzáadása

   Csak egyet. Ez általában az első képernyő: megjelenik a címsor, a háttérréteg pedig lassabban mozdul, mint az előtér. Add meg az ügynöknek a könyvtár llms.txt fájlját, és írd le pontosan a jelenetet—mi mozog, hol és hány milliszekundum alatt. Az első képernyőn hagyd érintetlenül az áttetszőséget; alább külön rész magyarázza el, miért.

7. A csökkentett mozgásra vonatkozó szabály hozzáadása

   Alkalmazd a hozzáférhetőségi rész CSS-szabályát és JavaScript reduced-motion beállítását. Közzététel előtt csökkentett mozgással is ellenőrizd az oldalt.

8. Közzététel és sebességellenőrzés

   Tedd közzé bármelyik ingyenes statikus tárhelyszolgáltatáson—Vercelen, Netlifyon vagy GitHub Pagesen. Kérd meg az ügynököt: „tedd közzé ezt a projektet Vercelen, és add meg a linket.” A kapott URL-t csak a közzététel után futtasd le a PageSpeed Insightson: a szolgáltatás nyilvános URL-ekkel működik, helyi oldalt nem lát. Nézd meg a „Largest Contentful Paint” mutatót—azt az időt, amíg a legnagyobb elem megjelenik; a zöld tartomány felső határa 2.5 másodperc. Az ügynök közzététel előtt a helyi verziót is meg tudja mérni: a Chrome DevTools MCP megnyitja Chrome-ban, és megjeleníti ugyanezt a mutatót.

A hatodik lépésben a legkönnyebb tönkretenni az előző öt munkáját.

Miért hat egy webhely még inkább AI által generáltnak, ha túl sok rajta az animáció?#

Itt hibázik szinte mindenki gondolkodása, aki a témával foglalkozik: a túl kevés animáció olcsónak hat, ezért többet kell hozzáadni.

Ez éppen abban a frontend-design skillben szerepel, amelyet a dizájn javítása érdekében telepítettél. Az Anthropic abban az eszközben figyelmeztet a túlzásba vitt animációra, amelyet az ügynök az oldal díszítésére használ.

Más sablonos megoldásokat is felsorol: egy nagy számot apró felirattal és színátmenetes kiemeléssel, mint minden feladatra adott szokásos választ; illetve a 01 / 02 / 03 jellegű számozott blokkokat, amelyek csak valódi sorrend esetén indokoltak.

A gyakorlatban a túlzás így néz ki: az ügynök azt a feladatot kapja, hogy „adj hozzá animációkat”, és minden szakaszhoz görgetésre megjelenő effektust tesz. A címsor becsúszik, három kártya egymás után felugrik, az ajánlások oldalról beúsznak, a lábléc pedig elhalványulva megjelenik. Külön-külön minden effektus rendben van. Együtt olyan oldalt alkotnak, amely sosem áll le, és semmit sem emel ki.

Egy élő webhely másképp működik: egy tudatosan kialakított jelenet—általában az első képernyőn—utána pedig visszafogottság. A mozgás olyan, mint a kiemelés: akkor van értelme, ha egyetlen szóra esik.

Ez egy szabályt ad a prompthoz. Így fogalmazz: „készíts egy jelenetet az első képernyőn, minden más maradjon statikus.” Ez csupán néhány szóval tér el az „adj hozzá animációkat” kéréstől, de az eredmény egy nagyságrenddel jobb.

Hogyan rontják az animációk a webhely sebességét?#

A Google három mutatóval értékeli az oldalt: a legnagyobb elem megjelenési ideje legfeljebb 2.5 másodperc; egy műveletre adott válasz legfeljebb 200 milliszekundum; az elrendezés elmozdulása pedig legfeljebb 0.1 lehet. Ezeket a valódi látogatások 75. percentilisén mérik.

Nézzük meg, miért számít ez itt. Az ügynök alapértelmezés szerint így készít felfedő effektust: nullára állítja egy szakasz áttetszőségét, majd eltávolítja ezt a beállítást, amikor a szakasz belép a látható területre. Ha az effektus az első képernyőn van, a kép már teljesen betöltődhetett és dekódolódhatott, a mutató mégsem számolja, amíg el nem kezdődik a renderelése. Még rosszabb, ha egy szkript a betöltés után távolítja el az áttetszőséget—ilyenkor a mutató a teljes szkriptre vár.

Kétféleképpen lehet ezt megoldani. Vagy kis, nem nulla áttetszőségről indítod a felfedő effektust, így a kezdeti renderelés is beleszámít. Vagy az első képernyőn érintetlenül hagyod az áttetszőséget, és csak az elmozdulást animálod.

A másik kérdés az, mi animálható olcsón és mi kerül sokba.

Egyszerűen fogalmazva: a böngésző rétegekből állítja össze a képet, a pozíció és az áttetszőség változása pedig az utolsó, legolcsóbb lépésben történik. Minden más arra kényszeríti, hogy újraszámolja az oldalt. Ugyanennek a dokumentációnak a mérései szerint: a top és left eltolással végzett animáció 37 milliszekundumot igényel az elrendezéshez és 79-et a rendereléshez; ugyanez a vizuális hatás transformmal mindkét esetben nullát vesz igénybe.

És itt egy fontos ellentmondás: az áttetszőség olcsón kompozitálható, de kizárja az elemet a sebességmutató méréséből. Ezért nem ugyanaz, ha egy animáció olcsó a böngészőnek, vagy biztonságos a teljesítmény szempontjából.

Még egy dolog a will-change tulajdonságról, amelyet az ügynökök előszeretettel szórnak szét „optimalizálásként”. Az MDN dokumentációja ennek ellenkezőjét mondja:

Azt is írja, hogy ezt a tulajdonságot meglévő teljesítményproblémák utolsó megoldásaként kell használni. Megelőzésre nem alkalmas. A will-change: transform, opacity sor ötven elemen tipikus árulkodó jele a generált kódnak.

Az elrendezés elmozdulása egyszerűbb eset. A Google dokumentációja nem az animációkat hibáztatja; éppen ellenkezőleg, a gondos átmenetek segítenek úgy frissíteni a tartalmat, hogy ne ijesszék meg az olvasót. Ugyanaz a recept: transzformációval változtasd a méretarányt szélesség és magasság helyett, és eltolásokkal mozgasd az elemeket koordináták helyett.

Mi a helyzet azokkal, akiknek a mozgás testi panaszokat okoz?#

Ez a rész nem csupán udvariasságból fontos. A vállalkozástulajdonos vásárlóközönsége éppen a negyvenéves és annál idősebb korosztály.

Ezt három stílussorral kezelheted:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Három dolgot érdemes észben tartani.

Az animáció legyen az alapértelmezett viselkedés, és ezen a szabályon belül kapcsold ki—így az oldal biztonságosabban működik csökkentett módban, mintha fordítva tennéd.

A specifikáció azt írja, „eltávolítja, csökkenti vagy lecseréli”—a teljes eltávolítás még csak nem is az első lehetőség. Egy éles becsúszás rövid elhalványulásra cserélése jobb, mint teljesen megszakítani: minden animáció letiltása tönkreteszi a betöltésjelzőket és a folyamatjelző sávokat.

A JavaScript-animációhoz saját preferenciakezelés kell; egy CSS-időtartam felülírása nem töröl GSAP-timeline-t. A matchMedia(...).matches változóba mentése semmit nem tesz, ha a beállítás nem ágazik el rajta. GSAP-nél az elemet a normál HTML/CSS-ben hagyd láthatónak, és csak engedélyezett mozgásnál hozz létre animációt:

// Run after GSAP and the page elements have loaded.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.

A címnek ne legyen rejtett vagy eltolást tartalmazó alapstílusa. Bekapcsolt csökkentett mozgásnál látható és statikus marad. Ha a preferencia nyitott oldal közben változik, a GSAP visszavonja az animációt, amikor a lekérdezés már nem illeszkedik. A mm.revert() eltávolításkor is törli az összegyűjtött animációt. Motionnél ugyanilyen elágazást valósíts meg annak beállításában; a CSS-szabály önmagában nem elég. Lásd a GSAP matchMedia életciklus- és takarítási dokumentációját.

Egy hivatalos hozzáférhetőségi kritériumot is érdemes figyelembe venni. A WCAG 2.2.2 A szintű kritériuma előírja, hogy ha valami automatikusan mozog, villog vagy görgetődik, öt másodpercnél tovább tart, és más tartalommal együtt jelenik meg, a felhasználónak lehetőséget kell adni a leállítására. Ez vonatkozik az automatikusan forgó körhintákra és a végtelenül futó szalagokra is, amelyeket az ügynökök szívesen illesztenek be.

Hét pont, ahol szétesik a dolog#

1. Az első képernyő rejtve marad, amíg el nem halványulva jelenik meg. A nulla áttetszőségű elem nem számít jelöltnek a renderelési mutatóban. Ez a legköltségesebb hiba, mert egy keresési rangsorolást befolyásoló mutatót ront.

2. Minden animálva van. Minden szakasz becsúszik, minden kártya felugrik. Az Anthropic egyértelműen kimondja, hogy ez erősíti a generált dizájn benyomását.

3. A görgetés eltérítése. Amikor egy webhely az egérgörgő szokásos viselkedését saját, „filmszerű” logikájával helyettesíti.

Ugyanebben a kutatásban a résztvevők többsége legalább enyhe zavartságot tapasztalt.

4. Elrendezési tulajdonságok animálása. Koordináták és méretek transzformációk helyett. 37 és 79 milliszekundum a nulla helyett.

5. Az animációk túl hosszúak. A hasznos időtartam 100 és 400 milliszekundum között van, a 400 már nagyon lassú, és csak nagy mozgásoknál megfelelő. Az ügynökök alapértelmezés szerint gyakran egy teljes másodpercet használnak.

Megállapításai szerint a hasznos tartomány 100 és 400 milliszekundum közé esik; a 400 már nagyon lassú, és csak nagy mozgásokhoz megfelelő. Az ügynökök alapértelmezés szerint egy teljes másodpercet szeretnek használni.

6. Nincs csökkentett mozgásra vonatkozó szabály. Az ügynök nem ad hozzá ilyet magától.

7. A webhely minden interakció után lassabb lesz. Ez a React sajátossága: ha egy animációt az elemre való hivatkozás és takarítás nélkül hoznak létre, minden komponensfrissítéskor új példány keletkezik belőle. Az oldal fokozatosan, látható ok nélkül kezd lelassulni.

Egy nyolcadik csapda: az a megközelítés, amelyben „az ügynök képernyőképet készít, majd kijavítja, amit lát”, statikus oldalakon nagyszerűen működik, de animált elemeknél végtelen szerkesztési ciklusba zárja az ügynököt: meglát egy köztes képkockát, hibának hiszi, kijavítja, majd meglát egy újabb köztes képkockát. Ráadásul minden képernyőkép kontextust fogyaszt.

Mennyibe kerül, és hogyan kerülheted el, hogy egyetlen webhelyre elhasználd az egész havi keretedet?#

Az angol nyelvű vibe-coding közösségek tipikus története: valaki látványos, világűrön átívelő görgetéssel ellátott oldalt készít, közzéteszi, a beszélgetésből pedig kiderül, hogy az egyetlen webhely elhasználta az egész havi keretét.

Ez várható. Az animáció egyszerre több okból kerül többe a szokásos elrendezési munkánál. Az eredményt nem lehet a kód elolvasásával ellenőrizni; több iteráció kell. Minden módosítás újraolvasást igényel. A mozgó elemeken futó képernyőképes ciklus pedig szükségtelen ellenőrzéseket ad hozzá.

Mi segít:

Egyszerre egy jelenetet építs, és rögzítsd az eredményt. Az egész webhely animálására vonatkozó egyszeri kérés garantáltan túlköltekezést okoz. Kikapcsolhatod a képernyőképes ellenőrzést az animált elemeknél, és magad nézheted meg őket. Tartsd röviden a CLAUDE.md fájlt, hogy a szabályok ne foglalják a kontextust minden kérésnél. Add meg előre az ügynöknek a könyvtár llms.txt fájlját is, különben elavult összekapcsolási módot talál ki, majd a saját találmányát próbálja hibakeresni.

A miért olvassa újra a Claude Code az egész projektet című cikk elmagyarázza, mire mennek el a tokenek projektmunka közben; a hogyan ne merítsd ki a Claude Code keretét című cikk pedig a használat kordában tartásának módjait tárgyalja.

Mi következik?#

Készítsd el az első oldaladat a nyolc lépéssel. Válassz egy vizuális irányt, hozz létre egy jelenetet az első képernyőn, és ellenőrizd a sebességet.

A következő lépésekhez—Ailoot.