Pregled projekta

Hteo sam da proučavam dobro napravljene sajtove — kako strukturiraju stranice, koliko je duboka navigacija — i da to ubacim u AI agente. Plaćeni alati su bili spori ili skupi. Ručno kliktanje kroz svaku stranicu ne skalira. Zato sam napravio full-stack aplikaciju koja to radi odjednom.

Nalepi URL. Pronalazi stranice kroz parsiranje sitemape i organizuje generisane screenshot-ove u strukturisanu hijerarhiju foldera. Koristim je redovno.

Full-stack alat za snimanje celostraničnih screenshot-ova sa jednog URL-a, sa automatskim otkrivanjem stranica kroz parsiranje sitemape.

Industrija

Alati za developere

Usluge

UX/UI dizajn
Web razvoj
Produkt strategija

Ključni rezultati

Responzivan dizajn
Prilagođeni razvoj
Poboljšanja korisničkog iskustva

Tip platforme

Web platforma

Tehnologije

TypeScript
Hono
Vite
Puppeteer

Izazov

Dobri sajtovi već izlažu svoju strukturu kroz sitemape i URL obrasce. Trebalo mi je nešto što to čita i snima svaku stranicu bez nadgledanja browser taba sat vremena.

Bez organizovanog outputa, folder od 200 nasumičnih PNG-ova je beskoristan za bilo kakvo proučavanje.

Pristup

Tri koraka: pronađi stranice, renderuj ih, sačuvaj po redu. Hono za backend generisanja screenshot-ova. Vite za lagan frontend. Puppeteer za headless celostranične snimke. Parsiranje sitemap.xml za automatsko otkrivanje stranica.

Output prati sajt — `/about/team` postaje putanja foldera sa PNG-om unutra. Bez preimenovanja, bez ručnog sortiranja.

Napravljeno za sopstveni workflow. AI alati su mi pomogli da idem brže, ali sam ja vlasnik arhitekture i produkt odluka.

Rešenje

Uneseš URL, alat čita sitemapu, listuje svaku stranicu, stavlja ih u red. Pratiš napredak: koja stranica je na redu, koliko je gotovo, otprilike koliko još traje.

Svaka stranica dobija celostranični screenshot. Sticky headeri, lazy-load sadržaj, čudni layouti — rešava se koliko Puppeteer dozvoljava.

Na kraju imaš file tree koji možeš da pregledaš, sa thumbnail-ovima koji prate stvarnu strukturu sajta.

Ključni izazovi

celostranični snimci na sajtovima sa lazy-load sadržajem ili beskonačnim skrolovanjem — ne svaki layout saraduje
sitemape koje ne postoje, su neispravne ili podeljene kroz više index fajlova
ne ostati bez memorije ili strpljenja na sajtovima sa stotinama stranica

Rezultat

Koristim je kad god hoću da proučim strukturu sajta ili ubacim snimke u AI rad. Nalepi URL, dobij organizovane screenshot-ove, nastavi dalje.

Open source dolazi kad bude dovoljno doterana da je podelim.

Kontekst

Lični projekat. Napravio sam je jer mi je trebala. Backend servisi, frontend interfejs, otkrivanje kroz sitemapu — dosadno namerno. Sajt već govori kako je organizovan, alat samo sluša.

Web Screenshot Tool