Kako v enem večeru izdelati animirano spletno mesto v Claude Code

Več o delu z modeli preberite v dokumentaciji Ailoot.

Zakaj je spletno mesto, ki ga je izdelala umetna inteligenca, očitno že na prvem zaslonu?#

Agenta prosite, naj sestavi pristajalno stran. Štirideset minut pozneje imate delujoče spletno mesto: razdelki so na mestu, postavitev se prilagaja zaslonu in gumbi delujejo. Skoraj takoj pa dobite občutek, da ste to že nekje videli.

Razlog je mehaničen. Model je bil naučen na ogromni zbirki dokončanih strani, ta zbirka pa je bila močno pristranska.

Na tisoče vodnikov in začetnih predlog je posnemalo to barvo, s čimer so izkrivili vzorec, model pa se je naučil, da so gumbi vijolični. Enak mehanizem velja za pisave, zaobljene vogale in sence.

Videz »umetne inteligence« se je medtem spremenil. Anthropic v dokumentaciji za svojo spretnost frontend-design zdaj opisuje drugačne sloge.

Glavni problem je, da slop nastane, ko ni ničesar konkretnega za posnemanje, zato model preprosto povpreči vse spletne sloge. Qt je videti skladen prav zato, ker ne zna biti videti drugače.

»Slop« tu pomeni strojno ustvarjeno delo, povprečeno v generičen rezultat brez prepoznavnega sloga.

Praktični nauk je, da agent namesto odprte naloge potrebuje ozko oblikovalsko slovnico. Če rečete »naredi lepo«, bo izbral povprečje. Če mu določite paleto, nekaj pisav in en značilen vizualni element, bo gradil na tej osnovi.

Gibanje je pri tem najbolj opazen signal. Tudi statična stran s popolno tipografijo je še vedno videti kot predloga, saj živa spletna mesta dihajo: elementi se pojavljajo med drsenjem, kazalec povzroča odzive, prehodi med zasloni pa se ne končajo nenadoma.

Kaj potrebujete za izdelavo animiranega spletnega mesta v Claude Code?#

Pojdimo skozi orodja po vrsti, saj je glede cen precej zmede.

GSAP je knjižnica za animacije, ki stoji za znatnim deležem nagrajenih spletnih mest. Webflow jo je kupil oktobra 2024, govorice, da je vse postalo brezplačno, pa so se pojavile skoraj takoj. To ne drži povsem: Webflow je takrat potrdil, da bodo obstoječe cene ostale nespremenjene. Knjižnica je postala brezplačna konec aprila 2025 z različico 3.13.

V izdaji 3.13 je izrecno zapisano, da so tudi prej plačljivi vtičniki, kot sta SplitText in MorphSVG, postali brezplačni, tudi za komercialno uporabo. Trenutna različica, julija 2026, je gsap@3.15.0.

Brezplačno pa ne pomeni odprtokodno. Licenca ostaja lastniška in prepoveduje izdelavo vizualnega urejevalnika animacij na GSAP, ki bi konkuriral Webflowu. Za spletna mesta, projekte za stranke ali komercialno delo ni omejitev.

Anthropicova spretnost frontend-design je nabor navodil, ki spremeni način, kako agent dela na vmesniku. V opisu repozitorija piše:

Vsebuje metodo v dveh korakih. Najprej agent sestavi sistem oblikovnih žetonov: štiri do šest poimenovanih barv, pisave za vsaj dve vlogi, besedilne skice postavitve in en značilen vizualni element strani. Nato svoj načrt kritično presodi glede na nalogo. Šele potem napiše kodo.

Objava navaja 75 spretnosti, opis repozitorija 78, v drevesu datotek pa jih je danes 91. Avtor to odkrito pove: repozitorij preverite z ukazom za iskanje, saj je opis zastarel.

Kako doseči, da Claude Code neha ustvarjati predloge?#

Začnimo z datoteko pravil, saj začne veljati pri vsaki zahtevi in nič ne stane.

Uporaben začetek je blok varoval proti predlogam. Logika je preprosta: naštejte konkretne izbire, h katerim model privzeto pogosto zaide, in jih izrecno prepovejte.

## 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).

Blok je namenoma napisan v angleščini: model natančneje sledi kratkim tehničnim navodilom v jeziku dokumentacije.

Animacija je na seznamu prepovedi ob barvah in sencah z razlogom. Prosojnost na prvem zaslonu neposredno škoduje meritvi hitrosti, kot bomo videli v nadaljevanju.

Nato namestite spretnost. Uradne Anthropicove spretnosti lahko namestite z vtičnikom:

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

Podrobnost: oblikovalskih spretnosti ni mogoče namestiti posamezno; vtičnik example-skills jih namesti vseh dvanajst hkrati. Če želite samo eno, ročno kopirajte mapo — Claude Code jo zazna brez ponovnega zagona seje:

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

Druge uporabne spretnosti v tej zbirki so theme-factory z desetimi pripravljenimi temami in zahtevo po potrditvi človeka pred uporabo, web-artifacts-builder za izdelavo v Reactu s pripravljenimi komponentami ter algorithmic-art za generativno grafiko. V ločenem članku o izbiri spretnosti za Claude Code je podrobno razloženo, kako izbrati spretnosti za nalogo.

Pravila in spretnost delujejo skupaj: pravila prepovedujejo slabe izbire, spretnost pa določa postopek — najprej sistem, nato kritika in nazadnje koda.

Vse pomembno se zgodi pred zahtevo. Omejitve, po katerih naj agent gradi, vnaprej vključite v njegov kontekst, zato besedilo samega poziva skoraj ni več pomembno. Ta pristop se imenuje kontekstno inženirstvo, datoteka CLAUDE.md pa je njegov prvi gradnik. Kombinacija klona umetne inteligence + drugega možgana + kontekstnega inženirstva pomaga Claudeu, da iz povprečnega generatorja rezultatov postane orodje, ki se drži vašega sloga.

Kje najdete pripravljene vizualne usmeritve in pozive za animacije?#

Vključene tehnike gibanja so: 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.

Če ne programirate, so vam pomembnejše pripravljene vizualne usmeritve. Namesto nejasnega »naredi moderno« izberite eno od teh in modelu ponudite ozko slovnico, ki mu je manjkala:

• clean-minimal-beige-light-mode - svetel bež minimalizem
• dark-glass-clean-layout - temno steklo
• documentary-brutalist-agency - brutalistični dokumentarni slog
• editorial-portfolio-chapters - portfelj, razdeljen na poglavja kot revija
• orange-clean-paper-saas - storitveno spletno mesto v slogu papirja z oranžnim poudarkom
• solar-duotone-bold - krepka dvobarvna obdelava
• tech-green-dark-mode-modern - temni tehnološki slog z zeleno barvo
• light-mode-paper-technical - svetel tehnični papir

Na voljo so tudi tehnične spretnosti za 3D-grafiko in učinke: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

V repozitoriju ni ukaza za namestitev — avtor v načrtu razvoja odkrito pravi, da ga bo dodal, ko bo dogovorjen način integracije. Edino navodilo za Claude Code je:

Spodaj je prikazana ena od možnosti namestitve. Tega ukaza ni v repozitoriju; gre za priporočilo za namestitev:

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

Kako agentu v eni vrstici posredujete svežo dokumentacijo GSAP?#

Pogosta težava pri knjižnicah za animacije je, da se agent spomni zastarelega načina njihove povezave. Zapiše uvoz iz stare poti, vtičnik registrira na način, ki se je uporabljal pred dvema letoma, in koda ne deluje.

Rešitev je, da dokumentacijo sami vključite v kontekst. GSAP jo ponuja v obliki, ki jo stroji zlahka obdelajo:

https://gsap.com/llms.txt

Datoteka ima danes približno 25 kilobajtov. Vsaka stran dokumentacije je na voljo tudi v obliki Markdown — URL-ju preprosto dodajte .md.

V praksi je videti tako:

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.

Knjižnica Motion (prej Framer Motion) ima enako datoteko, ki je še večja. Motion je distribuiran pod licenco MIT in ostaja resnično odprtokoden; trenutna različica je motion@12.42.2. Če je projekt v Reactu in potrebuje le preproste učinke prikaza, lahko izberete Motion; za zapletene prizore, povezane z drsenjem, uporabite GSAP z vtičnikom ScrollTrigger.

Obstajajo tudi možnosti, ki delujejo samo v brskalniku in ne uporabljajo knjižnic. Prehodi stanja strani prek API-ja View Transitions so 14. oktobra 2025 dosegli osnovno podporo, vendar samo znotraj ene strani; različica za prehode med stranmi v Firefoxu sploh ni podprta. Animacije drsenja CSS še niso dosegle osnovne podpore: Chrome jih podpira, Safari se jih je pred kratkim naučil, v Firefoxu pa jih morate ročno omogočiti v nastavitvah, zato za običajne bralce preprosto ne bodo delovale. Agenta prosite, naj najprej preveri, ali jih brskalnik sploh podpira, in naj v nasprotnem primeru pusti standardni prehod.

Kako vam je všečno spletno mesto lahko podlaga za poziv?#

Najpogostejši način, da pojasnite, kaj želite, je, da pokažete primer. Pri agentu to ne deluje neposredno: spletnega mesta ne vidi, vidi besedilo.

Spretnost video-to-superprompt premosti to vrzel. Opis repozitorija pravi, da video referenco pretvori v podroben poziv za poustvarjanje ali navdih. Posnetek analizira po plasteh: pripoved, postavitev, gibanje, tipografija in 3D-grafika. Rezultat je en poziv, pripravljen za uporabo.

Njeno glavno pravilo je zapisano odločno:

Druga spretnost, html-to-interaction-prompts, obdeluje izvorno kodo: poišče vse, kar se premika — odzive na kazalec, 3D-grafiko, učinke drsenja in plasti, ki se premikajo z različnimi hitrostmi — nato pa stran razdeli na ločene pozive, po enega za vsak razdelek, gumb, stanje ob pomiku ali učinek. Njeno načelo je, da vedenje v izvorni kodi obravnava kot resnico in ne izmišlja učinkov na podlagi posnetka zaslona, kadar je koda na voljo.

Tretja spretnost, stitched-full-page-capture, rešuje praktično težavo. Običajen posnetek zaslona celotne strani pri spletnih mestih z lenim nalaganjem in 3D-grafiko izpade siv in prazen, ker je posnetek narejen, preden je stran izrisana. Spretnost se pomika po strani zaslon za zaslonom, počaka, da se vse umiri, nato pa posnetke združi.

Obstaja tudi način brez posnetka zaslona: povežite agenta z zbirko živih primerov vmesnikov prek MCP. Mobbinov uradni strežnik lahko namestite z enim ukazom:

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

Nato odprite novo sejo, izberite strežnik na seznamu in se prijavite v brskalniku. Agent dobi dostop do posnetkov zaslona resničnih delujočih aplikacij: navedenih je več kot 621,500 zaslonov. To so posnetki zaslona dokončanih izdelkov, ne komponent ali kode. Pomembno opozorilo: Mobbinov strežnik ne deluje pri brezplačnem paketu; na voljo je v plačljivih paketih (julija 2026). V ločenem članku o Google Stitchu je opisana povezava zunanjih storitev z agentom in enak način za vključitev oblikovalskega sistema v Claude Code.

Korak za korakom: animirano spletno mesto v enem večeru#

1. Nastavite projekt

   Če projekta še nimate, začnite s prazno mapo. Ustvarite jo, odprite v terminalu in tam zaženite claude. Za prvi poziv prosite za osnovno ogrodje: »izdelaj ogrodje enostranskega spletnega mesta za moje podjetje (opišite, kaj počne), navaden HTML in CSS, brez knjižnic«. Pojavi se nabor datotek — to je korenska mapa projekta, v kateri odslej poteka vse delo.

2. Vstavite pravila v CLAUDE.md

   Blok Anti-Generic Guardrails kopirajte v datoteko CLAUDE.md v korenski mapi projekta. Če je še ni, prosite agenta, naj jo ustvari. Pravila so napisana za Tailwind; če vaše osnovno ogrodje uporablja navaden CSS, agentu povejte: »uporabi ta načela za navaden CSS« — pomen pravil se ne spremeni. V razčlenitvi štirih pravil za datoteko CLAUDE.md si oglejte, kako deluje sama datoteka in kaj lahko še vključite vanjo.

3. Namestite spretnost frontend-design

   Uporabite vtičnik example-skills ali kopirajte mapo frontend-design, kot je opisano zgoraj. Z ukazom /doctor lahko preverite, ali se je spretnost naložila.

4. Izberite eno vizualno usmeritev

   Eno, ne dveh ali treh. Mešanica brutalističnega dokumentarnega sloga in bež minimalizma prinese natanko tisto povprečenje, ki se mu poskušate izogniti.

5. Izdelajte statično stran

   Brez ene same animacije. Najprej uredite tipografijo, razmike in mrežo. Agenta prosite, naj zažene lokalni predogled, nato pa odprite naslov, ki vam ga posreduje. Če si jo želite ogledati na telefonu, recite: »zaženi jo tako, da se bo odprla tudi v drugih napravah v mojem omrežju«, in agent vam bo posredoval naslov.

6. Dodajte en prizor gibanja

   Samo enega. Običajno gre za prvi zaslon: pojavi se naslov, plast v ozadju pa se premika počasneje od ospredja. Agentu posredujte datoteko llms.txt knjižnice in konkretno opišite prizor — kaj se premika, kje in koliko milisekund traja. Na prvem zaslonu ne spreminjajte prosojnosti; spodaj je poseben razdelek o razlogih.

7. Dodajte pravilo za zmanjšano gibanje

   Uporabite pravilo CSS in nastavitev zmanjšanega gibanja JavaScript iz razdelka o dostopnosti. Pred objavo stran preverite z vklopljenim zmanjšanim gibanjem.

8. Objavite stran in preverite hitrost

   Objavite jo v kateri koli brezplačni storitvi za statično gostovanje — Vercel, Netlify ali GitHub Pages. Agenta prosite: »objavi ta projekt na Vercelu in mi posreduj povezavo«. Šele po objavi dobljeni URL preverite s storitvijo PageSpeed Insights: ta deluje z javnimi URL-ji in ne vidi lokalne strani. Oglejte si »Largest Contentful Paint« — čas do izrisa največjega elementa; zeleno območje sega do 2.5 sekunde. Agent lahko lokalno različico izmeri pred objavo: Chrome DevTools MCP jo odpre v Chromu in prikaže isto metriko.

Šesti korak najlažje pokvari delo prejšnjih petih.

Zakaj je zaradi preveč animacij spletno mesto videti še bolj ustvarjeno z umetno inteligenco?#

Tukaj se zalomi razmišljanje skoraj vseh, ki se lotijo te teme: premalo animacije je videti ceneno, zato je treba dodati še več.

To piše prav v spretnosti frontend-design, ki ste jo namestili za izboljšanje oblikovanja. Anthropic svari pred pretiravanjem v orodju, ki ga agent uporablja za okraševanje strani.

Navaja tudi druge klišejske tehnike: veliko število z majhnim napisom in barvnim prelivom kot standardni odziv na vsako nalogo; oštevilčene bloke, kot so 01 / 02 / 03, ki so primerni le, kadar gre dejansko za zaporedje.

Kako je pretiravanje videti v praksi: agent dobi nalogo »dodaj animacije« in vsakemu razdelku doda prikaz ob drsenju. Naslov zdrsne na zaslon, tri kartice se druga za drugo pojavijo, pričevanja zdrsnejo s strani, noga pa postopoma zbledi. Vsak učinek je sam zase v redu. Skupaj ustvarijo stran, ki se ne neha premikati in ničesar ne poudari.

Živo spletno mesto deluje drugače: en premišljen prizor, običajno na prvem zaslonu, zatem pa zadržanost. Gibanje deluje kot poudarek — smiselno je, dokler je osredotočeno na eno samo besedo.

Zato lahko pravilo vključite v poziv. Oblikujte ga takole: »na prvem zaslonu ustvari en prizor, vse drugo naj ostane statično«. To je le nekaj besed več kot »dodaj animacije«, rezultat pa je za velikostni red boljši.

Kako animacije uničujejo hitrost spletnega mesta?#

Tri metrike, ki jih Google uporablja za ocenjevanje strani, so: čas do izrisa največjega elementa — največ 2.5 sekunde; odzivnost na interakcijo — največ 200 milisekund; in premik postavitve — največ 0.1. Merijo se pri 75. percentilu resničnih obiskov.

Poglejmo, zakaj je to pomembno. Agent privzeto pripravi učinek prikaza tako, da razdelek nastavi na ničelno prosojnost in nato to nastavitev odstrani, ko razdelek vstopi v vidno območje. Če je učinek na prvem zaslonu, je slika morda že v celoti naložena in dekodirana, vendar je metrika ne bo štela, dokler se ne začne izrisovanje. Še slabše je, če skript odstrani prosojnost po nalaganju — takrat metrika čaka na celoten skript.

To lahko popravite na dva načina. Učinek prikaza začnite z majhno, neničelno prosojnostjo namesto z ničlo, tako da se začetni izris šteje. Ali pa na prvem zaslonu pustite prosojnost pri miru in animirajte samo premik.

Druga težava je razlika med tem, kaj je poceni animirati, in tem, kaj je drago.

Preprosto povedano: brskalnik sestavi sliko iz plasti, spremembe položaja in prosojnosti pa se zgodijo v zadnjem in najcenejšem koraku. Vse drugo ga prisili v ponovni izračun strani. Meritve iz iste dokumentacije: animacija z odmiki top in left porabi 37 milisekund za postavitev in 79 za izris; enak vizualni učinek s transformacijo za oboje porabi nič.

Zapomniti si velja še to protislovje: sestavljanje prosojnosti je poceni, vendar element zaradi nje ni upravičen do štetja v metriki hitrosti. Animacija, ki je poceni za brskalnik, in animacija, ki je varna za zmogljivost, torej nista ista stvar.

Še nekaj o lastnosti will-change, ki jo agenti radi dodajajo »za optimizacijo«. Dokumentacija MDN pravi nasprotno:

Dokumentacija še pravi, da je lastnost namenjena kot zadnja možnost pri že obstoječih težavah z zmogljivostjo. Preventivno ne deluje. Vrstica will-change: transform, opacity pri petdesetih elementih je tipičen znak strojno ustvarjene kode.

Pri premiku postavitve je zgodba preprostejša. Googlova dokumentacija ne krivi animacij; nasprotno, premišljeni prehodi pomagajo posodobiti vsebino, ne da bi bralca presenetili. Recept je enak: spreminjajte merilo s transformacijo namesto s širino in višino, premikajte pa z odmiki namesto s koordinatami.

Kaj pa ljudje, ki jim gibanje povzroča fizične težave?#

Ta razdelek je pomemben iz več razlogov kot zgolj iz vljudnosti. Ciljno občinstvo podjetnika je prav skupina ljudi, starih štirideset let in več.

Konzorcij W3C posledice opiše brez olepševanja: slabost in migrene, včasih tako hude, da se mora človek uleči.

Težavo lahko naslovite s tremi vrsticami slogov:

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

Upoštevajte tri stvari.

Animacijo zapišite kot privzeto vedenje in jo onemogočite znotraj tega pravila — tako se stran varneje prilagodi, kot če bi naredili nasprotno.

Specifikacija pravi »odstrani, zmanjša ali zamenja« — popolna odstranitev sploh ni prva možnost. Zamenjava sunkovitega zdrsa s kratkim pojemanjem je boljša kot nenadna prekinitev: izklop vseh animacij pokvari kazalnike nalaganja in vrstice napredka.

Animacije JavaScript potrebujejo lastno obravnavo nastavitve; sprememba trajanja CSS ne prekliče časovne osi GSAP. Sam zapis matchMedia(...).matches v spremenljivko ne naredi ničesar, če se nastavitev nanj ne razveji. Pri GSAP naj bo element v običajnem HTML/CSS viden, gibanje pa ustvari samo, kadar ga uporabnik dovoli:

// 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.

Naslov v osnovnem slogu ne sme biti skrit ali premaknjen. Ob zmanjšanem gibanju ostane viden in statičen. Če se nastavitev spremeni med odprto stranjo, GSAP razveljavi animacijo, ko se poizvedba neha ujemati. mm.revert() odstrani zbrane animacije tudi ob odstranitvi strani ali komponente. Pri Motion enakovredno razvejitev izvedi v nastavitvi te knjižnice; samo pravilo CSS ne zadošča. Glej dokumentacijo življenjskega cikla in čiščenja GSAP matchMedia.

Upoštevati je treba tudi formalno merilo dostopnosti. WCAG 2.2.2, merilo ravni A, zahteva, da lahko uporabnik ustavi vsebino, če se karkoli samodejno premika, utripa ali drsi, traja več kot pet sekund in je prikazano skupaj z drugo vsebino. To velja za samodejno vrteče se vrtiljake in neskončne tekoče trakove, ki jih agenti radi dodajajo.

Sedem mest, kjer se lahko zalomi#

1. Prvi zaslon je skrit, dokler postopoma ne postane viden. Element z ničelno prosojnostjo ne šteje kot kandidat za metriko izrisa. To je najdražja napaka, saj škoduje metriki, ki vpliva na uvrstitve v iskalnikih.

2. Animirano je vse. Vsak razdelek zdrsne na zaslon, vsaka kartica se pojavi. Anthropic neposredno pravi, da to okrepi vtis oblikovanja, ustvarjenega z umetno inteligenco.

3. Scrolljacking. Spletno mesto običajno vedenje koleščka miške zamenja z lastno »filmsko« logiko.

V isti raziskavi je večina udeležencev doživela vsaj blago zmedenost.

4. Animirane so lastnosti postavitve. Koordinate in mere namesto transformacij. 37 in 79 milisekund v primerjavi z nič.

5. Animacije trajajo predolgo. Uporabno trajanje je od 100 do 400 milisekund, pri čemer je 400 milisekund že zelo počasi in primerno le za večje premike. Agenti privzeto radi uporabijo celo sekundo.

Po njegovih ugotovitvah je uporabno trajanje od 100 do 400 milisekund; 400 milisekund je že zelo dolgo in primerno le za velike premike. Agenti privzeto radi uporabijo celo sekundo.

6. Ni pravila za zmanjšano gibanje. Agent ga ne bo dodal sam od sebe.

7. Spletno mesto se z vsako interakcijo upočasni. To velja posebej za React: animacija, ustvarjena brez reference na element in brez čiščenja, se ob vsaki posodobitvi komponente namnoži. Stran se postopoma začne upočasnjevati brez očitnega razloga.

Pristop, pri katerem »agent naredi posnetek zaslona in popravi, kar vidi«, odlično deluje pri statičnih straneh, pri animiranih elementih pa agenta ujame v neskončno zanko urejanja: vidi vmesni okvir, misli, da gre za napako, ga popravi, nato pa vidi nov vmesni okvir. Poleg tega vsak posnetek zaslona porablja kontekst.

Koliko stane in kako preprečiti, da bi za eno spletno mesto porabili mesečni limit?#

Značilna zgodba iz angleško govorečih skupnosti za vibe coding: nekdo izdela bleščečo stran z drsenjem skozi vesolje, objavi rezultat, v razpravi pa se izkaže, da je eno samo spletno mesto porabilo celoten mesečni limit.

To je pričakovano. Animacije porabijo več kot običajno delo s postavitvijo iz več razlogov hkrati. Rezultata ne morete preveriti z branjem kode; potrebne so ponovitve. Vsaka sprememba zahteva ponovno branje datotek. Zanka posnetkov zaslona pri premikajočih se elementih pa dodaja nepotrebne korake.

Kaj pomaga:

Gradite po en prizor naenkrat in utrdite rezultat. Zahteva »dodaj animacije po vsem spletnem mestu« zagotovo povzroči preveliko porabo. Preverjanje animiranih elementov s posnetki zaslona lahko izklopite in si jih ogledate sami. Datoteka CLAUDE.md naj bo kratka, da pravila ne porabljajo konteksta pri vsaki zahtevi. Agentu vnaprej posredujte datoteko llms.txt knjižnice, sicer si bo izmislil zastarel način povezave in nato odpravljal težave, ki jih je povzročil sam.

Članek zakaj Claude Code znova bere celoten projekt pojasnjuje, kam gredo žetoni med delom na projektu; članek kako ne porabiti vseh limitov Claude Code pa opisuje načine za nadzor porabe.

Kaj sledi?#

Izdelajte svojo prvo stran po osmih korakih. Izberite eno vizualno usmeritev, ustvarite en prizor na prvem zaslonu in preverite hitrost.

Za naslednje korake — Ailoot.