Kako sam Vibe kodirao web stranicu biblioteke Pixel ikona bez učenja kodiranja (Hvala, kursor AI!)

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.

Biblioteka ikona Pixel 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.

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 grane web stranice na GitHub spremištu Pixel Icon Library . Zatim sam instalirao Cursor AI i početak je bio iznenađujuće jednostavan.

Postavljanje projekta sa kursorom AI

Nakon instaliranja Cursora, sljedeća stvar je bila provjeriti:

• GIT - za kontrolu verzija
• Node.js - za NPM paket

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 Tailwindcss Installation Docs i slijedio ove korake:

• 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.

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 granu na “ Website ” (Filijala u kojoj se nalazi vaš kod. U mom slučaju, to je bilo u ogranku web stranice)
  • Kliknite na Save
• Opciono:
  • Dodajte svoju prilagođenu domenu (kao što sam ja koristio: pixeliconlibrary.com)
  • Konfigurišite DNS (Hvala Richardu što mi je pomogao oko ovoga)
• Pričekajte nekoliko minuta i vaša web stranica će biti UŽIVO!

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.

Želite li zaviriti u kod iza web stranice? Pogledajte GitHub repo !