Kao dizajnera, uvijek sam bio fasciniran spojem dizajna i tehnologije. Jaz između dizajnera i programera oduvijek me je intrigirao – jednostavno nisam očekivao da ću ga tako brzo preći. od HackerNoon-a započela je kao zabavan dizajnerski projekat za kreiranje pikseliziranih ikona koje su uhvatile nostalgičnu suštinu HackerNoon-ovog dizajnerskog jezika—ali sam transformirao Figma Design datoteku u potpuno funkcionalnu web stranicu? To nije bilo na mojoj kartici za 2025. dok nisam otkrio Cursor AI. Pošto je biblioteka otvorenog koda preko GitHub-a, xFigma & NPM-a, oduvek smo želeli da ove ikone učinimo dostupnijim zajednici. Ideja je bila jednostavna: napravimo web stranicu na kojoj bi dizajneri i programeri mogli pretraživati, pretraživati i preuzimati ove ikone za svoje projekte. Biblioteka ikona Pixel Izazov? Imao sam bukvalno nula iskustva sa kodiranjem.💀 Uđite u Cursor AI, uređivač kodova koji pokreće AI koji je brzo postao moj mentor i vodič kroz ovo putovanje. Evo kako sam prešao svoje granice od dizajna do full stack-a uz pomoć AI i ozbiljno . kodiranje vibracije Počevši od Ground Zero Prvi korak je bio da ustanovim šta želim da napravim i da sagledam ono što već imam: Biblioteka ikona piksela u SVG formatu. Figma dizajn za web stranicu. Lista funkcija koje želim na web stranici. Apsolutno nemam pojma kako to oživjeti. Počeo sam postavljanjem na . Zatim sam instalirao Cursor AI i početak je bio iznenađujuće jednostavan. grane web stranice GitHub spremištu Pixel Icon Library Postavljanje projekta sa kursorom AI Nakon instaliranja Cursora, sljedeća stvar je bila provjeriti: - za kontrolu verzija GIT - za NPM paket Node.js S instaliranim osnovnim potrepštinama došlo je vrijeme da zaprljam ruke. Klonirao sam repo na svoj sistem, otvorio fasciklu projekta u Cursor AI i započeo razgovor sa ugrađenim AI asistentom. Imajući solidno iskustvo sa Claudeom, odlučio sam se za Claude 3.7 Sonet u načinu rada agenta da me vodi kroz proces. Sa prvim upitom, ukratko sam objasnio šta želim da izgradim i naveo potrebne karakteristike zajedno sa osnovnom strukturom projekta, tražeći sugestije o tome koji okvir(e) da dam prioritet efikasnosti i brzini. Kursor je pomogao sa potrebnom strukturom foldera i predložio da se pridržavam HTML-a i Tailwinda za projekat. Čak je kreirao datoteke potrebne za pokretanje projekta. Evo kako je struktura foldera izgledala nakon ovoga: ├── index.html ├── src/ │ ├── style.css │ ├── output.css ├── assets/ ├── fonts/ ├── scripts/ Sljedeći korak je bilo postavljanje Tailwind-a i početak korisničkog sučelja. Postavljanje Tailwind CSS-a i izgradnja korisničkog sučelja Na moje iznenađenje, Cursor je pobrkao instalaciju Tailwinda i pomiješao komande iz Tailwind v3.4 i v4.0. Dakle, došlo je vrijeme da istupim! Prešao sam na i slijedio ove korake: Tailwindcss Installation Docs Da instalirate Tailwind, otvorite terminal i pokrenite: npm install tailwindcss @tailwindcss/cli Uvezite Tailwind u datoteku src/style.css: @import "tailwindcss"; Da biste postavili proces izgradnje, pokrenite: npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch Počnite koristiti Tailwind u HTML-u: <link href="/src/output.css" rel="stylesheet"> Nakon što je Tailwind instaliran i klase su bile spremne za korištenje, počeo sam definirati boje, fontove i druge atome za AI agenta prije nego što sam napravio složenije molekule, organizme i stranice prema mom Figma dizajnu. Zatim sam instalirao NPM paket biblioteke ikona piksela da koristim ikone u projektu. Evo koraka za instaliranje NPM paketa: Instalirajte paket: npm i @hackernoon/pixel-icon-library Uvezite CSS u svoj HTML (Premjestio sam sve potrebne datoteke fontova ikona u /fonts folder radi lakšeg pristupa.) <link href="/fonts/iconfont.css" rel="stylesheet"> Za prikaz ikone dodajte <i class="hn hn-icon-name"></i> Za korisničko sučelje, uzeo sam pristup element po element kako bi stvari bile organizirane i olakšao povratak na prethodnu iteraciju ako je potrebno. Evo redosleda: Nav Bar Podnožje Hero Section Traka za pretragu Ikone kartice i mreža Pojedinačna modalna ikona Pobrinuo sam se da definiram ispune, margine, radijus ivice, boje i dimenzije za sve ove elemente dok sam dodao i stanja hover & click. Pored CSS svojstava, uključio sam i odzivno ponašanje i interakcije u upite. Da generišem pregled za sav kod koji sam odobravao, koristio sam ekstenziju . Ovo proširenje pokreće lokalni razvojni server sa funkcijom ponovnog učitavanja uživo za statičke i dinamičke stranice jednim klikom! Live Server Ikona Data Challenge & Implementacija funkcionalnosti pretraživanja Sa postavljenim elementima korisničkog interfejsa, došlo je vreme za pravi izazov: prikazivanje svih ikona sa njihovim detaljima - naziv ikone, oznaka tipa ikone i SVG kod uz obezbeđivanje glatke funkcionalnosti pretraživanja. Da bi se ovo prevazišlo, Cursor je predložio strukturirani pristup: Kreiranje JSON datoteke sa metapodacima ikone i SVG kodom Učitavanje podataka iz JSON-a kako bi se efikasno prikazali. Implementirajte pretragu na osnovu naziva ikone. Dodajte filtere za pretragu na osnovu oznaka tipa ikona - čvrste, regularne, brendove/ikone društvenih medija, purrcats Da dodatno automatizujem ovaj proces, zamolio sam Cursor da kreira skriptu za dodavanje svih podataka o ikonama u /data/icons.json fajl. Sada, kada pretraga radi, filteri pretraživanja postavljeni i modal ikona rade kako je predviđeno, sve što je preostalo je da se dodaju preostale interakcije korisničkom sučelju, temeljito testiranje i implementacija! Implementacija i dalje Kada sam bio zadovoljan korisničkim sučeljem i temeljno testirao svaku funkcionalnost, došlo je vrijeme za sljedeći izazov - Deployment!!! Pošto je projekat bio statična stranica, trebalo mi je rješenje za hosting koje je brzo, besplatno i lako za održavanje. GitHub Pages je bio jednostavan! Nudilo je: Besprekorna integracija sa GitHub repo, čineći implementaciju bez napora. Besplatan je za korištenje i najprikladniji za statične projekte poput ovog. Ažuriranja su super jednostavna - sve što trebate je urezivanje! Ali pre nego što sam uspeo da gurnem sav svoj kod u spremište i primenim preko GitHub stranica, morao sam da očistim kod i proverim ima li problema u proizvodnji. Nakon brzog napredovanja sa kursorom i nekoliko podešavanja, sve je bilo spremno za lansiranje! Evo svega što trebate učiniti da implementirate svoj projekat putem GitHub stranica: Gurnite sav svoj kod u GitHub repo i provjerite je li javan Omogućavanje GitHub stranica za repo Idite na Postavke Kliknite na Stranice Postavite na “ ” (Filijala u kojoj se nalazi vaš kod. U mom slučaju, to je bilo u ogranku web stranice) granu Website Kliknite na Save Opciono: Dodajte svoju prilagođenu domenu (kao što sam ja koristio: pixeliconlibrary.com) Konfigurišite DNS (Hvala što mi je pomogao oko ovoga) Richardu Pričekajte nekoliko minuta i vaša web stranica će biti UŽIVO! https://pixeliconlibrary.com/?embedable=true Proizvod na koji možete biti ponosni Od dizajniranja piksel-art ikona do vibe kodiranja mog puta do potpuno funkcionalne stranice, ovaj me projekat gurnuo izvan moje zone udobnosti na najbolji mogući način. Gledajući unatrag, to je bilo više od obične izrade web stranice – radilo se o proširenju mojih kreativnih horizonata i shvatanju da se s AI granica između dizajna i razvoja brišu brže nego ikad. A meni kao da mi se pred očima otvorio beskrajni put. Jedan dizajner drugom: Ako ja to mogu, možete i vi. Pa, šta čekaš? Hajde da gradimo! PS: je UŽIVO! Web stranica biblioteke ikona Pixel Želite li zaviriti u kod iza web stranice? Pogledajte ! GitHub repo
