Nola kodetu nuen Vibe-k Pixel Icon Library webgunea kodetzen ikasi gabe (Eskerrik asko, Kurtsorea AI!)

Diseinatzaile gisa, beti liluratu nau diseinuaren eta teknologiaren arteko elkarguneak. Diseinatzaile eta garatzailearen arteko hutsuneak beti intrigatu nau; ez nuen inoiz espero laster zeharkatuko nuenik.

HackerNoon-en Pixel Icon Library diseinu-proiektu dibertigarri gisa hasi zen HackerNoon-en diseinu-lengoaiaren esentzia nostalgikoa jasotzen zuten pixelatutako ikonoak sortzeko, baina Figma Design fitxategi bat webgune guztiz funtzional batean eraldatuz? Hori ez zegoen nire txartelean 2025erako Cursor AI aurkitu nuen arte. Liburutegia GitHub, xFigma eta NPM bidez iturburu irekia izanda, ikono hauek komunitatearentzat eskuragarriago egin nahi izan ditugu beti. Ideia erraza zen: eraiki dezagun webgune bat, non diseinatzaileek eta garatzaileek beren proiektuetarako ikono hauek arakatu, bilatu eta deskargatu ahal izateko.

Erronka? Literalki zero esperientzia nuen kodeketarekin.💀

Sartu Cursor AI, AI-k bultzatutako kode-editorea, bidaia honetan zehar nire tutore eta gidari bihurtu zena. Hona hemen nola gainditu nituen nire mugak diseinutik pila osoa AI laguntzarekin eta giro-kodetze serio batekin.

Zero lurretik hasita

Lehen urratsa eraiki nahi nuena finkatzea eta lehendik neukanaren balantzea izan zen:

• Pixel ikonoen liburutegia SVG formatuan.
• Webgunerako Figma diseinua.
• Webgunean nahi nituen ezaugarrien zerrenda.
• Ez dago ideiarik nola bizia eman.

Pixel Icon Library GitHub Repository-en webguneko adar bat konfiguratzen hasi nintzen. Ondoren, Cursor AI instalatu nuen, eta hastea oso erraza izan zen.

Proiektua Kurtsore AI-rekin konfiguratzea

Kurtsorearen interfazea

Kurtsorea instalatu ondoren, hurrengo gauza hau egiaztatzea izan zen:

• GIT - bertsioak kontrolatzeko
• Node.js - NPM paketerako

Ezinbestekoak instalatuta, eskuak zikintzeko ordua iritsi zen. Repo klonatu nuen nire sisteman, proiektuaren karpeta ireki nuen Cursor AI-n eta elkarrizketa bat hasi nuen integratutako AI laguntzailearekin.

Kurtsorearen berriketa leihoa

Clauderekin esperientzia sendoa izan ondoren, Claude 3.7 Sonnet-en aldeko apustua egin nuen Agent Modean, prozesuan zehar gidatzeko.

Lehenengo gonbitarekin, laburki azaldu nuen zer eraiki nahi nuen eta beharrezko ezaugarriak zerrendatu nituen proiektuaren oinarrizko egiturarekin batera, iradokizunak eskatuz zein esparru(k) lehenetsi behar diren eraginkortasuna eta abiadura. Kurtsoreak beharrezko karpeten egituran lagundu zuen eta proiekturako HTML eta Tailwind-era atxikitzea proposatu zidan. Proiektua hasteko beharrezkoak diren fitxategiak ere sortu zituen. Hona hemen karpeta-egituraren itxura honen ondoren:

├── index.html

├── src/

│ ├── style.css

│ ├── output.css

├── assets/

├── fonts/

├── scripts/

Hurrengo urratsa Tailwind konfiguratzea eta UI-rekin hastea izan zen.

Tailwind CSS konfiguratzea eta UI eraikitzea

Nire harridurarako, Cursor-ek Tailwind instalazioa nahastu zuen eta Tailwind v3.4 eta v4.0-ko komandoak nahastu zituen. Beraz, pausoa emateko ordua zen! Tailwindcss Installation Docs -era joan nintzen eta urrats hauek jarraitu nituen:

• Tailwind instalatzeko, ireki terminala eta exekutatu:

  npm install tailwindcss @tailwindcss/cli

• Inportatu Tailwind src/style.css fitxategian:

  @import "tailwindcss";

• Eraikitze-prozesua konfiguratzeko, exekutatu:

  npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch

• Hasi Tailwind erabiltzen HTML-n:

  <link href="/src/output.css" rel="stylesheet">

Behin Tailwind instalatuta eta klaseak erabiltzeko prest zeudenean, koloreak, letra-tipoak eta beste atomo batzuk zehazten hasi nintzen AI agentearentzat, molekula, organismo eta orrialde konplexuagoak eraiki aurretik nire Figma Diseinuaren arabera.

Ondoren, Pixel Icon Library NPM Package instalatu nuen proiektuko ikonoak erabiltzeko. Hona hemen NPM paketea instalatzeko urratsak:

• Instalatu paketea:

  npm i @hackernoon/pixel-icon-library

• Inportatu CSS zure HTMLan

  (Beharrezko ikono-tipo-fitxategi guztiak / fonts karpetara eraman nituen sarbide errazteko.)

  <link href="/fonts/iconfont.css" rel="stylesheet">

• Ikono bat bistaratzeko, gehitu

  <i class="hn hn-icon-name"></i>

UI-rako, elementuz elementu ikuspegia hartu nuen gauzak antolatuta mantentzeko eta beharrezkoa izanez gero aurreko iteraziora itzultzeko.

Hona hemen ordena:

• Nabigazio taberna
• Oina
• Heroi Atala
• Bilaketa-barra
• Ikono txartelak eta sareta
• Banakako Ikono Modala

Elementu guztietarako betegarriak, marjinak, ertz-erradioa, koloreak eta dimentsioak definitzen zituztela ziurtatu nuen pasabidearen eta klikaren egoerak gehitzearekin batera. CSS propietateez gain, erantzuteko portaera eta interakzioak ere sartu ditut galdeketetan.

Zuzeneko zerbitzariaren luzapena

Ikonoen datuen erronka eta bilaketa-funtzioa ezartzea

UI Elementuak jarrita, benetako erronkarako garaia zen: ikono guztiak beren xehetasunekin bistaratzea - Ikonoaren izena, ikono motaren etiketa eta SVG kodea bilaketa funtzionaltasuna bermatuz. Hori gainditzeko, Cursor-ek ikuspegi egituratu bat proposatu zuen:

• JSON fitxategi bat sortzea ikonoen metadatuekin eta SVG kodearekin
• JSON-tik datuak kargatzea eraginkortasunez bistaratzeko.
• Ezarri bilaketa ikonoaren izenean oinarrituta.
• Gehitu bilaketa-iragazkiak ikono-motaren etiketetan oinarrituta - solidoak, erregularrak, marks/social-media-ikonoak, purrcats

Prozesu hau gehiago automatizatzeko, Kurtsoreari eskatu nion script bat sortzeko ikonoaren datu guztiak /data/icons.json fitxategira gehitzeko.

icons.json fitxategia

Orain, bilaketa funtzionatzen, bilaketa-iragazkiak jarrita eta ikono-modalak nahi bezala funtzionatzen zuenez, egin behar zena besterik ez zen geratzen gainerako interakzioak gehitzea UI-ra, proba sakonak eta hedapena!

Hedapena eta haratago

Behin UI-arekin pozik nengoela eta funtzionalitate guztiak ondo probatu ondoren, hurrengo erronkarako garaia iritsi zen - Inplementazioa!!!

Proiektua gune estatikoa zenez, azkarra, doakoa eta mantentze erraza zen ostalaritza irtenbide bat behar nuen. GitHub Pages hutsa zen! Hau eskaintzen zuen:

• GitHub repo-rekin ezin hobeto integratzea, inplementazioa ahaleginik egin gabe.
• Doakoa da erabiltzeko eta horrelako proiektu estatikoetarako egokiena.
• Eguneraketak oso errazak dira - behar duzun guztia konpromisoa da!

Baina nire kode guztia biltegira eraman eta GitHub Pages-en bidez zabaldu aurretik, kodea garbitu eta produkzio-arazoren bat egiaztatu behar nuen. Kurtsorearekin batera eta bestera azkar bat egin ondoren, eta zenbait doikuntza egin ondoren, dena prest zegoen abiarazteko!

Hona hemen zure proiektua GitHub Pages bidez zabaltzeko egin behar duzun guztia:

• Bidali kode guztia GitHub-era eta ziurtatu publikoa dela
• GitHub-eko orriak gaitzea biltegirako
  • Joan Ezarpenak atalera
  • Egin klik orrialdeetan
  • Ezarri sukurtsa " Webgunea " (zure kodea dagoen adarra. Nire kasuan, webgunearen adarrean zegoen)
  • Sakatu Gorde
• Aukerakoa:
  • Gehitu zure domeinu pertsonalizatua (erabiltzen dudan bezala: pixeliconlibrary.com)
  • Konfiguratu DNS (Eskerrik asko Richard-i honekin laguntzeagatik)
• Itxaron minutu batzuk eta zure webgunea ZUZENEAN egongo da!

PIXELICONLIBRARY

Pixel Icon Library | Open-Source Pixelated Icons By HackerNoon

HackerNoon's Pixel Icon Library is an open-source collection of meticulously designed pixelated icons. Crafted on a 24px grid for perfect alignment, inspired by HackerNoon's retro design vibes, these icons capture the essence of internet's golden days.

GitHub Pages Ezarpen orria

Harro egoteko produktua

Pixel-artearen ikonoak diseinatzetik gune guztiz funtzional batera sartzeko giroa kodetzeraino, proiektu honek nire erosotasun eremutik haratago bultzatu ninduen ahalik eta modurik onenean. Atzera begira, webgune bat sortzea baino gehiago zen: nire sormen-horizontea zabaltzea zen eta AIarekin diseinuaren eta garapenaren arteko muga inoiz baino azkarrago lausotzen ari dela konturatzea zen. Eta nire begien aurrean bide amaigabe bat ireki izana bezala da.

Webgunearen atzean dagoen kodeari begirada bat eman nahi al diozu? Begiratu GitHub repo !