---
title: "Kompletan sajt za manje od tri sata: Claude Code, Pencil i pet faza"
date: 2026-03-18
author: "Damjan Savić"
canonical: https://damjan-savic.com/sr/znanje/full-website-with-claude-code
language: sr
keywords: "Claude Code, Prompting, Next.js, Tailwind CSS, Dizajn sistem, Web performanse"
video: https://www.youtube.com/watch?v=3JL0cdHMsHY
---
# Kompletan sajt za manje od tri sata: Claude Code, Pencil i pet faza

**Ukratko** — Pet stranica, dizajn sistem, Lighthouse od 95 do 100 — za manje od tri sata, kroz pet faza: dizajn sistem, komponente, kod, deploy i merenje, SEO analiza. Redosled je sadržaj, jer svaka faza pravi materijal na koji se sledeća poziva. Najskuplja greška je bila ona koju je našao samo snimak ekrana.

---

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

| Alat | Uloga |
| --- | --- |
| Claude Code | Agent. Radi u VS Code terminalu, traži Claude Pro ili Max pretplatu. |
| pencil.dev | VS Code ekstenzija za vizuelni dizajn. Claude piše direktno u `.pen` fajl. |
| Pinterest, 21st.dev | Referentni materijal za dizajn sistem i komponente. |
| Next.js, TypeScript, Tailwind | Stek. Sve otvorenog koda. |

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](/sr/znanje/brand-identity-in-one-conversation): 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.

```text
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.

```text
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:

```text
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.

![Dijagram · Terminal levo, Pencil fajl desno — isti posao, prijavljen dvaput](/media/website/article/figures/full-website-with-claude-code-channels.avif)

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:

```text
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:

```text
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:

```text
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.

![Dijagram · max-w-2xl i max-w-4xl: očekivano naspram stvarno razrešenog](/media/website/article/figures/full-website-with-claude-code-maxwidth.avif)

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:

```text
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.

```text
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:

| Kategorija | Mobilni | Desktop |
| --- | --- | --- |
| Performanse | 95 | 99 |
| Pristupačnost | 100 | 100 |
| Best practices | 100 | 100 |
| SEO | 100 | 100 |

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:

```text
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.

## Poglavlja snimka

- [0:47 — Alati i tok rada](https://youtu.be/3JL0cdHMsHY?t=47)
- [1:36 — Faza 1: dizajn sistem](https://youtu.be/3JL0cdHMsHY?t=96)
- [4:45 — Faza 2: komponente](https://youtu.be/3JL0cdHMsHY?t=285)
- [12:39 — Faza 3: kod](https://youtu.be/3JL0cdHMsHY?t=759)
- [15:53 — Playwright i greška u Tailwind-u](https://youtu.be/3JL0cdHMsHY?t=953)
- [19:53 — Faza 4: deploy i Lighthouse](https://youtu.be/3JL0cdHMsHY?t=1193)
- [23:53 — Faza 5: SEO analiza](https://youtu.be/3JL0cdHMsHY?t=1433)

## Česta pitanja

### Zašto dizajn sistem dobija posebnu fazu pre koda?

Zato što inače dobiješ pet stranica koje pojedinačno rade, a zajedno ne. Boje, tipografska skala, razmaci i radijusi postoje pre prvog reda koda, a gotova početna stranica posle toga postaje referenca za sve ostale. „Napravi stranicu Features na osnovu dizajna početne stranice" je prompt koji nosi ostatak.

### Šta je bila greška u Tailwind-u 4 i zašto je čitanje koda nije našlo?

max-w-4xl se razrešavao u 96 piksela umesto u 896, a max-w-2xl u 48. U Tailwind-u 4 numeričke max-w klase čitaju skalu razmaka, a ne više stare veličine vezane za breakpoint-e. Kod je bio sintaksno ispravan i imena klasa tačna — našao je tek Playwright, kroz sedam snimaka ekrana.

### Šta ovaj tok rada ne zamenjuje?

Odluku o tome šta sajt treba da kaže. Claude je sproveo referencu koju sam ja izabrao, a izbor je deo koji ostaje. Treba računati i na ovo: kod toka rada koji traje tri sata, tokeni za GitHub i Vercel isteknu usred posla. To je pravilo, a ne rubni slučaj.

---

Kompletan sajt za manje od tri sata: Claude Code, Pencil i pet faza — https://damjan-savic.com/sr/znanje/full-website-with-claude-code
Sadržaj generisan veštačkom inteligencijom: https://damjan-savic.com/sr/transparentnost-vi
© 2026 Damjan Savić. https://damjan-savic.com