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 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. Pixel Icon Library 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 serio batekin. giro-kodetze 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. bat konfiguratzen hasi nintzen. Ondoren, Cursor AI instalatu nuen, eta hastea oso erraza izan zen. Pixel Icon Library GitHub Repository-en webguneko adar Proiektua Kurtsore AI-rekin konfiguratzea Kurtsorea instalatu ondoren, hurrengo gauza hau egiaztatzea izan zen: - bertsioak kontrolatzeko GIT - NPM paketerako Node.js 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. 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! -era joan nintzen eta urrats hauek jarraitu nituen: Tailwindcss Installation Docs 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. Onartzen ari nintzen kode guztien aurrebista sortzeko, luzapena erabili nuen. Luzapen honek tokiko garapen zerbitzari bat abiarazten du orrialde estatiko eta dinamikoetarako zuzeneko birkargatu funtzioarekin klik bakarrean! Live Server 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. 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 atalera Ezarpenak Egin klik orrialdeetan Ezarri " " (zure kodea dagoen adarra. Nire kasuan, webgunearen adarrean zegoen) sukurtsa Webgunea Sakatu Gorde Aukerakoa: Gehitu zure domeinu pertsonalizatua (erabiltzen dudan bezala: pixeliconlibrary.com) Konfiguratu DNS (Eskerrik asko honekin laguntzeagatik) Richard-i Itxaron minutu batzuk eta zure webgunea ZUZENEAN egongo da! https://pixeliconlibrary.com/?embedable=true 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. Diseinatzaile batek beste bati: Nik egin ahal badut, zuk ere bai. Orduan, zeren zain zaude? Goazen eraikitzen! PS: ZUZENEAN dago! Pixel Icon Library webgunea Webgunearen atzean dagoen kodeari begirada bat eman nahi al diozu? Begiratu ! GitHub repo
