Web Screenshot Tool

Pregled projekta

Hteo sam da proučavam dobro napravljene sajtove, kako strukturišu stranice, koliko je duboka navigacija, i da to prenesem u AI agente. Plaćeni alati su bili spori ili skupi. Ručno kliktanje kroz svaku stranicu ne skalira. Napravio sam nešto što to radi odjednom.

Unesi URL. Pronađe stranice preko sitemap.xml. Dobiješ organizovane PNG fajlove u folderima koji prate strukturu sajta. Koristim ga redovno.

Lični alat koji snima svaku stranicu sajta odjednom, napravljen da proučavam kako su dobri sajtovi strukturirani.

Industrija

Lični projekat

Usluge

UX/UI Design
Web Development
Product Strategy

Ključni rezultati

Responsive Design
Custom Development
User Experience Improvements

Tip platforme

Web Platform

Tehnologije

TypeScript
Hono
Puppeteer

Izazov

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

Bez organizovanog izlaza, folder od 200 random PNG-ova je beskoristan za bilo kakvo proučavanje.

Pristup

Tri koraka: nađi stranice, renderuj ih, sačuvaj po redu. Hono za mali server. Puppeteer za headless screenshotove. Parsiranje sitemap.xml za automatsko otkrivanje stranica.

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

Napravljen za moj workflow. Planiram open source kad doteram par grubih ivica da me neće sramota.

Rešenje

Ubaciš URL, alat pročita sitemap, izlista svaku stranicu, stavi ih u red. Gledaš napredak: koja stranica je na redu, koliko je gotovo, otprilike koliko još traje.

Svaka stranica dobije full-page screenshot. Sticky headeri, lazy-load sadržaj, čudni layouti, koliko Puppeteer dozvoljava.

Na kraju imaš file tree koji možeš da pregledaš, sa thumbnailima koji odgovaraju stvarnoj strukturi sajta.

Ključni izazovi

full-page snimci na sajtovima sa lazy-load sadržajem ili beskonačnim skrolovanjem, ne svaki layout sarađuje
sitemapi koji ne postoje, loše formatirani ili podeljeni na više indeks fajlova
da ne ponestane memorije ili strpljenja na sajtovima sa stotinama stranica

Rezultat

Koristim ga kad hoću da proučim strukturu sajta ili ubacim snimke u AI rad. URL, organizovani screenshotovi, dalje.

Open source dolazi kad bude dovoljno doterano za deljenje.

Kontekst

Lični projekat. Napravio sam jer mi je trebalo. Bez pitch decka, bez ambicija za landing page. Sitemap, render, sačuvaj. Namerno dosadno, sajt već govori kako je organizovan, alat samo sluša.