Kompletan sajt za manje od tri sata: Claude Code, Pencil i pet faza

Sajt od pet stranica na klasičan način košta između 3.500 i 8.000 evra i traje tri do četiri nedelje. Ne zato što je izrada toliko duga, nego zato što između dizajna i razvoja postoji primopredaja, a svaki krug povratnih informacija košta tri do pet dana. Alternativa je do sada bio šablon — i onda sajt izgleda kao i svaki drugi.

Ovaj video pokazuje treći put: Claude Code u integrisanom terminalu VS Code-a, uz pencil.dev za vizuelni deo. Bez Figme, bez alata za sklapanje stranica. Tekst ispod je isti tok rada za čitanje, sa ispisanim promptovima i sa mestima na kojima nije radilo.

Alati

Tok rada ima pet faza: dizajn sistem, komponente, kod, deploy i merenje, SEO analiza. Redosled je zapravo suština — svaka faza pravi materijal na koji se sledeća poziva.

Faza 1 · Dizajn sistem

Pre nego što postoji ijedna linija koda, sajtu treba vizuelni jezik: boje, tipografija, razmaci, radijusi. Ako se to preskoči, dobiješ pet stranica koje pojedinačno rade, a zajedno ne.

Put do toga: na Pinterestu potraži website design system, sačuvaj dve ili tri reference, stavi ih u folder design-system-reference/ u projektu. Onda napravi fajl design-system.pen i pokreni Claude Code u terminalu.

Pogledaj ovaj dizajn sistem kao referencu: design-system-reference/system-01.png

Napravi od njega kompletan dizajn sistem sa paletom boja, tipografskom
skalom, sistemom razmaka i tokenima za border-radius. Moderno, čisto,
suzdržano. Koristi Pencil ekstenziju za to.

Claude čita .pen fajl, razume format i postavlja sistem: primarne boje, sekundarne, neutralne, naslovi od H1 do H6, osnovni tekst, oznake, razmaci od 4 do 128 piksela. Usput pravi snimke ekrana sopstvenog rada i proverava ih u odnosu na ono što je trebalo da napravi.

Trajanje: oko petnaest minuta.

Faza 2 · Komponente

Za komponente je referenca 21st.dev: nekoliko stotina blokova koje je napravila zajednica, sortiranih po kategorijama. Hero sekcije, cenovnici, blokovi sa pozivom na akciju. Izabereš hero koji odgovara i njegov opis preneseš u prompt.

Dizajniraj ove komponente u Pencil-u, na osnovu našeg dizajn sistema:

- Hero sekcija sa naslovom, podnaslovom i dva CTA dugmeta
- Features grid sa ikonicama
- Sekcija sa preporukama
- Raspored blog kartica
- Kontakt forma
- Navigacija
- Podnožje

Još bez koda. Samo dizajn u Pencil fajlu.

Sedam komponenti, sve na istim tokenima. Zatim drugi korak: sklopiti ih u početnu stranicu. A onda korak koji nosi sve ostalo — početna stranica postaje referenca za svaku sledeću:

Napravi Features stranicu na osnovu dizajna početne stranice.

Pa ista instrukcija za rešenja, cene i o nama. Claude čak ubaci i placeholder slike u dizajn, da se vidi kako se ponaša blok sa slikom.

Trajanje: oko dvadeset minuta.

Dva kanala

To je deo ovog postavljanja koji mi je najkorisniji. Postoje dva sloja na kojima se može pratiti šta se dešava:

• Tekst. Log u terminalu kaže koji fajl se trenutno menja i zašto.
• Slika. Pencil fajl uživo pokazuje šta nastaje. Kada Claude snima sekciju, preko baš te sekcije prolazi animacija skeniranja.

Kod posla koji radi dvadeset minuta bez prekida, razlika između „čekam" i „gledam" je znatna.

Uz to ide i jedno praktično upozorenje: ako sam nešto pomeriš u Pencil fajlu, na kartici se pojavi mala tačka. Onda pritisni Ctrl + S. Bez toga je fajl prazan pri sledećem otvaranju.

Faza 3 · Kod

Tek sada projekat:

Napravi novi Next.js projekat sa TypeScript-om i Tailwind 4.
Postavi strukturu foldera za pet stranica: početna, features, rešenja,
cene, o nama.

Zatim samo prevođenje:

Napravi svih pet stranica na osnovu dizajn sistema i komponenti iz
Pencil-a. Koristi placeholder slike sa Unsplash-a. Sve potpuno
responzivno. Prati dizajn komponenti tačno.

Claude snima svaku podstranicu iz Pencil fajla, deli posao i predaje ga na pet paralelnih agenata — po jedan za svaku stranicu. Tokeni iz .pen fajla završe u globals.css kao Tailwind 4 promenljive teme, pa u markup-u stoje klase poput bg-lilac ili text-secondary.

Prvi pogled na localhost:3000 nije bio onaj kome sam se nadao.

Greška u Tailwind-u

Hero sekcija i još nekoliko blokova bili su razbijeni u rasporedu. Na tom mestu Claude dobija Playwright:

Popravi probleme sa stilovima, počni od početne stranice. Koristi
Playwright da napraviš snimke celog sajta i na osnovu njih ispravi greške.

Claude instalira Playwright, napiše skriptu koja snima sve stranice, napravi sedam snimaka — i nađe sledeće:

max-w-4xl se razrešava u 96 piksela umesto očekivanih 896. max-w-2xl se razrešava u 48 piksela.

To je ponašanje Tailwind-a 4: numerisani max-w-* alati sada čitaju iz skale razmaka, a ne više iz starih veličina imenovanih po breakpoint-ima. max-w-4xl je tamo calc(var(--spacing) * 4xl), što se razreši u nešto sasvim malo. Ispravka su bile eksplicitne vrednosti u pikselima ili rem jedinicama u svim pogođenim fajlovima.

To je najzanimljiviji trenutak u celom videu, iz dva razloga. Prvo, ja je čitanjem koda ne bih našao — kod je sintaksno bio ispravan, a imena klasa tačna. Drugo, ni Claude je nije našao čitanjem. Našao ju je tek kada je mogao da pogleda rezultat u pregledaču. Agent bez pogleda na ono što je iscrtano je agent koji piše kod ne znajući šta taj kod radi.

Posle toga još jedan prolaz za pokret:

Poboljšaj UI i UX: hover animacije, idle animacije, i šta god ti se još
čini prikladnim.

Faza 4 · Deploy

Da bi se sajt merio spolja, mora biti dostupan. Za to trebaju GitHub repozitorijum i Vercel projekat — a oboje Claude može sam da napravi, ako dobije pristupne tokene.

• GitHub: Settings → Developer Settings → Personal Access Token (classic)
• Vercel: profil → Settings → Tokens

Jedna napomena koja je važnija nego što zvuči: ti tokeni su pun pristup tvom nalogu. Ja sam oba povukao odmah nakon snimanja. Ko ih stavi u log terminala ili u snimak ekrana, treba da uradi tačno isto, bez izuzetka.

Napravi GitHub repozitorijum za ovaj projekat, deployuj ga preko Vercel-a
i sa tim linkom proveri performanse preko PageSpeed Insights ili
Lighthouse.

PageSpeed Insights nije prošao, pa je Claude sam prešao na Lighthouse. Rezultat:

Onih 100 za pristupačnost nije bilo prvo očitavanje. Lighthouse je prijavio odnos kontrasta i redosled naslova; oboje je ispravljeno i ponovo deployovano.

Faza 5 · SEO analiza

Poslednji korak je onaj koji se najčešće preskače, a to najmanje zaslužuje:

Uradi sveobuhvatnu SEO analizu sajta i analiziraj pet najjačih
konkurenata u istoj niši.

Claude i to raspoređuje na više agenata — jedan istražuje konkurente, drugi traži SEO praksu za tu nišu. Sa Ctrl + O se vidi na čemu svaki agent trenutno radi.

Šta je urađeno: metapodaci po stranici, sitemap.xml, robots.txt, strukturirani podaci, kanonske adrese, Open Graph i Twitter kartice, robots meta oznake. Uz to i petnaest pokvarenih internih linkova koje niko nije primetio.

Najkorisniji deo bio je rad na konkurentima: lista pojmova za koje slični proizvodi rangiraju, a ovaj projekat ne. To nije automatizacija, to je istraživanje — ali istraživanje koje se inače uopšte ne bi desilo.

Šta nije radilo

Dve stvari, i obe spadaju u pošten rezime.

Push na GitHub je pao u drugom prolazu jer je token istekao. Zatim je istekao i Vercel token. Oba je trebalo ponovo izdati i predati. Kod toka rada koji traje tri sata to nije rubni slučaj, nego pravilo — kratkotrajni tokeni ističu usred posla.

I tok rada ne zamenjuje odluku o tome šta sajt zapravo treba da kaže. Claude je sproveo referencu koju sam ja izabrao. Izbor je deo koji ostaje.

Zaključak

Tok rada je ponovo upotrebljiv, i to je zapravo poenta. Dizajn sistem, komponente, kod, merenje, SEO — tim redom, gde je rezultat svake faze ulaz u sledeću. Profesionalan sajt više nije pitanje budžeta. Pitanje je da li poznaješ tok rada.

Ono što i dalje jeste: pitanje da li neko gleda. Greška u Tailwind-u bi bez snimaka ekrana prošla neprimećeno, a petnaest pokvarenih linkova niko ne bi video bez analize.