Як дызайнера, я заўсёды быў у захапленні ад стыку дызайну і тэхналогій. Разрыў паміж дызайнерам і распрацоўшчыкам заўсёды мяне інтрыгаваў — я проста не чакаў, што так хутка яго пераадолею. ад HackerNoon пачыналася як вясёлы дызайнерскі праект па стварэнні піксельных значкоў, якія адлюстроўваюць настальгічную сутнасць мовы дызайну HackerNoon, але пераўтварыць файл Figma Design у цалкам функцыянальны вэб-сайт? Гэтага не было на маёй картцы на 2025 год, пакуль я не адкрыў для сябе Cursor AI. Маючы бібліятэку з адкрытым зыходным кодам праз GitHub, xFigma і NPM, мы заўсёды хацелі зрабіць гэтыя значкі больш даступнымі для супольнасці. Ідэя была простая: давайце створым вэб-сайт, на якім дызайнеры і распрацоўшчыкі маглі б праглядаць, шукаць і спампоўваць гэтыя значкі для сваіх праектаў. Бібліятэка піксельных значкоў Задача? У мяне практычна не было вопыту кадавання.💀 Увядзіце Cursor AI, рэдактар кода на базе штучнага інтэлекту, які хутка стаў маім настаўнікам і правадніком на працягу гэтага падарожжа. Вось як я перасягнуў свае межы ад дызайну да поўнага стэка з дапамогай штучнага інтэлекту і сур'ёзнага . кадавання Vibe Пачынаючы з Ground Zero Першым крокам было вызначыць, што я хацеў пабудаваць, і падвесці вынікі таго, што ў мяне ўжо было: Бібліятэка піксельных значкоў у фармаце SVG. Дызайн сайта figma. Спіс функцый, якія я хацеў на вэб-сайце. Абсалютна не ведаю, як гэта ўвасобіць у жыццё. Я пачаў з стварэння ў . Потым я ўсталяваў Cursor AI, і пачаць было надзіва проста. філіяла вэб-сайта рэпазітары GitHub бібліятэкі значкоў пікселяў Настройка праекта з курсорам AI Пасля ўсталявання Cursor наступнае, што трэба было праверыць: - для кантролю версій GIT - для пакета NPM Node.js Калі ўсё неабходнае ўстаноўлена, прыйшоў час выпацкаць рукі. Я кланаваў рэпазітар у сваю сістэму, адкрыў тэчку праекта ў Cursor AI і пачаў размову з убудаваным памочнікам AI. Маючы салідны досвед працы з Клодам, я выбраў Санет Клода 3.7 у рэжыме агента, які правядзе мяне праз гэты працэс. У першым запыце я коратка растлумачыў, што хачу пабудаваць, і пералічыў неабходныя функцыі разам з асноўнай структурай праекта, папрасіўшы даць прапановы аб тым, якім структурам(ам) аддаць перавагу эфектыўнасці і хуткасці. Курсор дапамог з неабходнай структурай тэчак і прапанаваў мне прытрымлівацца HTML і Tailwind для праекта. Ён нават стварыў файлы, неабходныя для запуску праекта. Вось як выглядала структура тэчак пасля гэтага: ├── index.html ├── src/ │ ├── style.css │ ├── output.css ├── assets/ ├── fonts/ ├── scripts/ Наступным крокам было наладжванне Tailwind і пачатак карыстальніцкага інтэрфейсу. Наладжванне Tailwind CSS і стварэнне карыстацкага інтэрфейсу Да майго здзіўлення, Cursor сапсаваў усталяванне Tailwind і пераблытаў каманды з Tailwind v3.4 & v4.0. Значыць, прыйшоў час для мяне, каб актывізавацца! Я перайшоў да і выканаў наступныя дзеянні: Tailwindcss Installation Docs Каб усталяваць Tailwind, адкрыйце тэрмінал і запусціце: npm install tailwindcss @tailwindcss/cli Імпарт Tailwind у файл src/style.css: @import "tailwindcss"; Каб наладзіць працэс зборкі, запусціце: npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch Пачніце выкарыстоўваць Tailwind у HTML: <link href="/src/output.css" rel="stylesheet"> Пасля таго, як Tailwind быў усталяваны і класы былі гатовыя да выкарыстання, я пачаў вызначаць колеры, шрыфты і іншыя атамы для агента штучнага інтэлекту, перш чым ствараць больш складаныя малекулы, арганізмы і старонкі ў адпаведнасці з маім дызайнам Figma. Затым я ўсталяваў пакет NPM бібліятэкі абразкоў Pixel, каб выкарыстоўваць абразкі ў праекце. Вось крокі па ўсталёўцы пакета NPM: Усталяваць пакет: npm i @hackernoon/pixel-icon-library Імпартуйце CSS у свой HTML (Я перамясціў усе неабходныя файлы шрыфтоў значкоў у тэчку /fonts для палягчэння доступу.) <link href="/fonts/iconfont.css" rel="stylesheet"> Каб адлюстраваць значок, дадайце <i class="hn hn-icon-name"></i> Што тычыцца карыстальніцкага інтэрфейсу, я выкарыстаў паэлементны падыход, каб усё было арганізавана і пры неабходнасці было лёгка вярнуцца да папярэдняй ітэрацыі. Вось парадак: Навігацыйная панэль Ніжні калонтытул Раздзел герояў Радок пошуку Значкі карты і сеткі Індывідуальны мадальны значок Я абавязкова вызначыў пракладкі, палі, радыус межаў, колеры і памеры для ўсіх гэтых элементаў, а таксама дадаў стану навядзення курсора і націску. У дадатак да ўласцівасцей CSS я таксама ўключыў адаптыўныя паводзіны і ўзаемадзеянне ў падказкі. Каб стварыць папярэдні прагляд для ўсяго кода, які я ўхваляў, я выкарыстаў пашырэнне . Гэта пашырэнне запускае лакальны сервер распрацоўкі з функцыяй жывой перазагрузкі для статычных і дынамічных старонак у адзін клік! Live Server Icon Data Challenge і ўкараненне функцыянальнасці пошуку З элементамі карыстальніцкага інтэрфейсу настаў час для сапраўднай задачы: адлюстраванне ўсіх значкоў з іх падрабязнасцямі - назва значка, тэг тыпу значка і код SVG, забяспечваючы бесперабойную працу пошуку. Каб пераадолець гэта, Cursor прапанаваў структураваны падыход: Стварэнне файла JSON з метададзенымі значкоў і кодам SVG Загрузка даных з JSON для іх эфектыўнага адлюстравання. Рэалізаваць пошук па назве значка. Дадайце фільтры пошуку на аснове тэгаў тыпу значкоў - цвёрдыя, звычайныя, брэнды/значкі ў сацыяльных сетках, purrcats Каб яшчэ больш аўтаматызаваць гэты працэс, я папрасіў Cursor стварыць скрыпт для дадання ўсіх даных значкоў у файл /data/icons.json. Цяпер, калі пошук працуе, пошукавыя фільтры на месцы і мадальныя значкі працуюць належным чынам, усё, што засталося зрабіць, гэта дадаць астатнія ўзаемадзеянні ў карыстацкі інтэрфейс, дбайнае тэсціраванне і разгортванне! Разгортванне і не толькі Пасля таго, як я быў задаволены карыстальніцкім інтэрфейсам і старанна пратэставаў усе функцыі, прыйшоў час для наступнага выкліку - Разгортванне!!! Паколькі праект быў статычным сайтам, мне патрабавалася рашэнне для хостынгу, якое было б хуткім, бясплатным і простым у абслугоўванні. Старонкі GitHub былі простай справай! Ён прапаноўваў: Поўная інтэграцыя з GitHub repo, што робіць разгортванне лёгкім. Ён бясплатны для выкарыстання і лепш за ўсё падыходзіць для такіх статычных праектаў. Абнаўляць вельмі проста - усё, што вам трэба, гэта здзейсніць! Але перш чым я змагу адправіць увесь свой код у рэпазітар і разгарнуць яго праз GitHub Pages, мне трэба было ачысціць код і праверыць, ці няма праблем з вытворчасцю. Пасля хуткага пераходу наперад і назад з курсорам і некалькіх налад усё было гатова да запуску! Вось усё, што вам трэба зрабіць, каб разгарнуць свой праект праз GitHub Pages: Адпраўце ўвесь свой код у сховішча GitHub і пераканайцеся, што ён агульнадаступны Уключэнне старонак GitHub для рэпа Перайдзіце ў Налады Націсніце на Старонкі Усталюйце на « » (галіна, у якой знаходзіцца ваш код. У маім выпадку гэта была галінка вэб-сайта) галінку Вэб-сайт Націсніце Захаваць Дадаткова: Дадайце свой уласны дамен (як я выкарыстаў: pixeliconlibrary.com) Настройка DNS (дзякуй за дапамогу) Рычарду Пачакайце некалькі хвілін, і ваш сайт запрацуе! https://pixeliconlibrary.com/?embedable=true Прадукт, якім варта ганарыцца Гэты праект найлепшым чынам вывеў мяне за межы зоны камфорту, пачынаючы ад распрацоўкі піксельных абразкоў і заканчваючы вібра-кадаваннем майго шляху да цалкам функцыянальнага сайта. Азіраючыся назад, гэта было больш, чым проста стварэнне вэб-сайта - гэта было пашырэнне маіх творчых гарызонтаў і ўсведамленне таго, што са штучным інтэлектам мяжа паміж дызайнам і распрацоўкай сціраецца хутчэй, чым калі-небудзь. А мне быццам бясконцая дарога адкрылася перад вачыма. Адзін дызайнер другому: калі я магу гэта зрабіць, вы можаце таксама. Такім чынам, што вы чакаеце? Давайце будаваць! PS: працуе! Вэб-сайт бібліятэкі значкоў пікселяў Хочаце зірнуць на код вэб-сайта? Праверце ! рэпазітар GitHub
