Bir dizayner olaraq, mən həmişə dizayn və texnologiyanın kəsişməsindən valeh olmuşam. Dizayner və tərtibatçı arasındakı boşluq məni həmişə maraqlandırıb - mən heç vaxt bu qədər tez keçəcəyimi gözləmirdim. HackerNoon tərəfindən HackerNoon-un dizayn dilinin nostalji mahiyyətini əks etdirən pikselli nişanlar yaratmaq üçün əyləncəli dizayn layihəsi kimi başladı, lakin Figma Design faylını özüm tam funksional veb-sayta çevirdim? Kursor AI-ni kəşf edənə qədər bu, 2025-ci ildə kartımda deyildi. GitHub, xFigma və NPM vasitəsilə açıq mənbəli kitabxanaya sahib olmaqla biz həmişə bu nişanları cəmiyyət üçün daha əlçatan etmək istəyirdik. İdeya sadə idi: gəlin dizaynerlərin və tərtibatçıların öz layihələri üçün bu nişanları nəzərdən keçirə, axtara və yükləyə biləcəyi bir veb sayt yaradaq. Pixel Icon Library, Problem? Kodlaşdırma ilə sözün əsl mənasında sıfır təcrübəm var idi.💀 Bu səyahət boyu tez mənim mentorum və bələdçimə çevrilən AI ilə işləyən kod redaktoru olan Cursor AI-ə daxil olun. Budur, mən süni intellekt yardımı və bəzi ciddi ilə dizayndan tam staka qədər limitlərimi necə keçdim. vibe kodlaşdırması Sıfırdan başlayaraq İlk addım qurmaq istədiklərimi müəyyənləşdirmək və artıq əldə etdiklərimi hesablamaq idi: SVG formatında piksel nişanlarının kitabxanası. Veb sayt üçün Figma dizaynı. Saytda istədiyim funksiyaların siyahısı. Bunu necə həyata keçirmək barədə heç bir fikrim yoxdur. -də qurmaqla başladım. Sonra Kursor AI quraşdırdım və işə başlamaq təəccüblü dərəcədə sadə oldu. Pixel Icon Library GitHub Repository veb-sayt filialı Kursor AI ilə layihənin qurulması Kursoru quraşdırdıqdan sonra növbəti şey yoxlamaq idi: - versiyaya nəzarət üçün GIT - NPM paketi üçün Node.js Əsas əşyalar quraşdırıldıqdan sonra əllərimi çirkləndirməyin vaxtı gəldi. Repo-nu sistemimə klonladım, Kursor AI-də layihə qovluğunu açdım və daxili AI köməkçisi ilə söhbətə başladım. Claude ilə möhkəm təcrübəm olub, prosesdə mənə rəhbərlik etmək üçün Agent rejimində Claude 3.7 Sonneti seçdim. İlk sorğu ilə mən nəyi qurmaq istədiyimi qısaca izah etdim və layihənin əsas strukturu ilə birlikdə tələb olunan xüsusiyyətləri sadaladım, hansı çərçivə(lər)in səmərəlilik və sürətə üstünlük verməsi ilə bağlı təkliflər istədim. Kursor lazımi qovluq strukturunda kömək etdi və mənə layihə üçün HTML və Tailwind-dən yapışmağı təklif etdi. Hətta layihəyə başlamaq üçün lazım olan faylları yaratdı. Qovluq strukturunun bundan sonra necə göründüyü budur: ├── index.html ├── src/ │ ├── style.css │ ├── output.css ├── assets/ ├── fonts/ ├── scripts/ Növbəti addım Tailwind-i qurmaq və UI ilə başlamaq idi. Tailwind CSS-nin qurulması və UI-nin qurulması Məni təəccübləndirən odur ki, Kursor Tailwind quraşdırmasını qarışdırdı və Tailwind v3.4 və v4.0-dan əmrləri qarışdırdı. Beləliklə, mənim addım atmağım vaxtı gəldi! keçdim və bu addımları izlədim: Tailwindcss Quraşdırma Sənədlərinə Tailwind quraşdırmaq üçün terminalı açın və işə salın: npm install tailwindcss @tailwindcss/cli Tailwind-i src/style.css faylına idxal edin: @import "tailwindcss"; Quraşdırma Prosesini qurmaq üçün çalıştırın: npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch HTML-də Tailwind istifadə etməyə başlayın: <link href="/src/output.css" rel="stylesheet"> Tailwind quraşdırıldıqdan və siniflər istifadəyə hazır olduqdan sonra, Figma Dizaynıma uyğun olaraq daha mürəkkəb molekullar, orqanizmlər və səhifələr yaratmazdan əvvəl AI agenti üçün rəngləri, şriftləri və digər atomları təyin etməyə başladım. Sonra layihədəki nişanlardan istifadə etmək üçün Pixel Icon Library NPM Paketini quraşdırdım. NPM Paketini quraşdırmaq üçün addımlar bunlardır: Paketi quraşdırın: npm i @hackernoon/pixel-icon-library HTML-də CSS-i idxal edin (Mən giriş asanlığı üçün bütün lazımi ikon şrift fayllarını /fonts qovluğuna köçürdüm.) <link href="/fonts/iconfont.css" rel="stylesheet"> Simgeni göstərmək üçün əlavə edin <i class="hn hn-icon-name"></i> UI üçün hər şeyi nizamlı saxlamaq və lazım olduqda əvvəlki iterasiyaya qayıtmağı asanlaşdırmaq üçün element-element yanaşmasını tətbiq etdim. Budur sifariş: Nav bar Altbilgi Qəhrəman bölməsi Axtarış paneli Icon Cards & Grid Fərdi Nişan Modalı Mən hover və klik vəziyyətlərini əlavə edərkən bütün bu elementlər üçün paddings, haşiyələr, sərhəd radiusu, rənglər və ölçüləri müəyyən etməyə əmin oldum. CSS xassələrinə əlavə olaraq, göstərişlərə cavab verən davranış və qarşılıqlı əlaqələri də daxil etdim. Təsdiq etdiyim bütün kodlar üçün önizləmə yaratmaq üçün genişləndirməsindən istifadə etdim. Bu genişləndirmə bir kliklə statik və dinamik səhifələr üçün canlı yenidən yükləmə xüsusiyyəti ilə yerli inkişaf serverini işə salır! Live Server Icon Data Challenge & Axtarış Funksionallığının həyata keçirilməsi UI Elementləri yerində olduqda, əsl çətinliyin vaxtı gəldi: hamar axtarış funksionallığını təmin edərkən bütün nişanları onların təfərrüatları ilə - Nişan Adı, Nişan Tipi Tag və SVG Kodu ilə göstərmək. Bunun aradan qaldırılması üçün Kursor strukturlaşdırılmış yanaşma təklif etdi: Simge metadata və SVG kodu ilə JSON faylının yaradılması Effektiv şəkildə göstərmək üçün JSON-dan məlumat yüklənir. İkon adı əsasında axtarışı həyata keçirin. İkon tipli teqlərə əsaslanan axtarış filtrləri əlavə edin - möhkəm, adi, brendlər/sosial media nişanları, purrcats Bu prosesi daha da avtomatlaşdırmaq üçün Kursordan bütün ikon məlumatlarını /data/icons.json faylına əlavə etmək üçün skript yaratmağı xahiş etdim. İndi axtarış işlədiyi halda, axtarış filtrləri yerində və ikon modalı nəzərdə tutulduğu kimi işlədiyindən, yalnız UI-yə qalan qarşılıqlı əlaqələri əlavə etmək, hərtərəfli sınaqdan keçirmək və yerləşdirmək qalırdı! Yerləşdirmə və Beyond UI-dən razı qaldıqdan və hər bir funksionallığı hərtərəfli sınaqdan keçirdikdən sonra növbəti çağırışın vaxtı gəldi - Yerləşdirmə!!! Layihə statik bir sayt olduğu üçün mənə sürətli, pulsuz və asan saxlanılan hosting həllinə ehtiyacım var idi. GitHub Səhifələri ağılsız idi! Təklif etdi: GitHub repo ilə problemsiz inteqrasiya, yerləşdirməni asanlaşdırır. İstifadəsi pulsuzdur və bu kimi statik layihələr üçün ən uyğundur. Yeniləmələr çox asandır - sizə lazım olan tək şey öhdəlikdir! Ancaq bütün kodumu depoya itələmədən və GitHub Səhifələri vasitəsilə yerləşdirmədən əvvəl kodu təmizləməli və istehsal problemlərini yoxlamalıydım. Kursor ilə sürətlə irəli-geri hərəkət etdikdən və bir neçə düzəlişdən sonra hər şey işə salınmağa hazır idi! Layihənizi GitHub Səhifələri vasitəsilə yerləşdirmək üçün etməli olduğunuz hər şey budur: Bütün kodunuzu GitHub repo-ya köçürün və onun ictimai olduğundan əmin olun Repo üçün GitHub səhifələrinin aktivləşdirilməsi keçin Parametrlərə üzərinə klikləyin Səhifələr “ ” olaraq təyin edin (Kodunuzun olduğu filial. Mənim vəziyyətimdə o, vebsayt filialında idi) Filialı Vebsayt klikləyin Saxla Könüllü: Fərdi domeninizi əlavə edin (istifadə etdiyim kimi: pixeliconlibrary.com) DNS-i konfiqurasiya edin (Bununla bağlı mənə kömək etdiyi üçün təşəkkürlər) Riçarda Bir neçə dəqiqə gözləyin və veb saytınız CANLI olacaq! https://pixeliconlibrary.com/?embedable=true Qürur Ediləcək Məhsul Piksel-art ikonlarının dizaynından tutmuş tam funksional sayta daxil olmaq üçün vibe-kodlaşdırmaya qədər bu layihə məni rahatlıq zonamdan ən yaxşı şəkildə kənara çıxardı. Geriyə nəzər saldıqda, bu, sadəcə veb-sayt yaratmaqdan daha çox şey idi - bu, mənim yaradıcı üfüqlərimi genişləndirmək və süni intellekt ilə dizayn və inkişaf arasındakı xəttin həmişəkindən daha tez bulandığını başa düşməkdən ibarət idi. Və mənə elə gəlir ki, gözümün önündə sonsuz bir yol açılıb. Bir dizayner digərinə: Mən bunu bacarıramsa, siz də edə bilərsiniz. Yaxşı, nəyi gözləyirsiniz? Gəlin tikintiyə başlayaq! PS: CANLIDIR! Pixel Icon Library Veb saytı Veb saytın arxasındakı koda nəzər salmaq istəyirsiniz? yoxlayın! GitHub repo-nu
