Як я Vibe закадзіраваў вэб-сайт бібліятэкі піксельных абразкоў, не навучыўшыся кадзіраваць (дзякуй, Cursor AI!)

Як дызайнера, я заўсёды быў у захапленні ад стыку дызайну і тэхналогій. Разрыў паміж дызайнерам і распрацоўшчыкам заўсёды мяне інтрыгаваў — я проста не чакаў, што так хутка яго пераадолею.

Бібліятэка піксельных значкоў ад HackerNoon пачыналася як вясёлы дызайнерскі праект па стварэнні піксельных значкоў, якія адлюстроўваюць настальгічную сутнасць мовы дызайну HackerNoon, але пераўтварыць файл Figma Design у цалкам функцыянальны вэб-сайт? Гэтага не было на маёй картцы на 2025 год, пакуль я не адкрыў для сябе Cursor AI. Маючы бібліятэку з адкрытым зыходным кодам праз GitHub, xFigma і NPM, мы заўсёды хацелі зрабіць гэтыя значкі больш даступнымі для супольнасці. Ідэя была простая: давайце створым вэб-сайт, на якім дызайнеры і распрацоўшчыкі маглі б праглядаць, шукаць і спампоўваць гэтыя значкі для сваіх праектаў.

Задача? У мяне практычна не было вопыту кадавання.💀

Увядзіце Cursor AI, рэдактар кода на базе штучнага інтэлекту, які хутка стаў маім настаўнікам і правадніком на працягу гэтага падарожжа. Вось як я перасягнуў свае межы ад дызайну да поўнага стэка з дапамогай штучнага інтэлекту і сур'ёзнага кадавання Vibe .

Пачынаючы з Ground Zero

Першым крокам было вызначыць, што я хацеў пабудаваць, і падвесці вынікі таго, што ў мяне ўжо было:

• Бібліятэка піксельных значкоў у фармаце SVG.
• Дызайн сайта figma.
• Спіс функцый, якія я хацеў на вэб-сайце.
• Абсалютна не ведаю, як гэта ўвасобіць у жыццё.

Я пачаў з стварэння філіяла вэб-сайта ў рэпазітары GitHub бібліятэкі значкоў пікселяў . Потым я ўсталяваў Cursor AI, і пачаць было надзіва проста.

Настройка праекта з курсорам AI

Карыстальніцкі інтэрфейс курсора

Пасля ўсталявання Cursor наступнае, што трэба было праверыць:

• GIT - для кантролю версій
• Node.js - для пакета NPM

Калі ўсё неабходнае ўстаноўлена, прыйшоў час выпацкаць рукі. Я кланаваў рэпазітар у сваю сістэму, адкрыў тэчку праекта ў 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 Extension

Icon Data Challenge і ўкараненне функцыянальнасці пошуку

З элементамі карыстальніцкага інтэрфейсу настаў час для сапраўднай задачы: адлюстраванне ўсіх значкоў з іх падрабязнасцямі - назва значка, тэг тыпу значка і код SVG, забяспечваючы бесперабойную працу пошуку. Каб пераадолець гэта, Cursor прапанаваў структураваны падыход:

• Стварэнне файла JSON з метададзенымі значкоў і кодам SVG
• Загрузка даных з JSON для іх эфектыўнага адлюстравання.
• Рэалізаваць пошук па назве значка.
• Дадайце фільтры пошуку на аснове тэгаў тыпу значкоў - цвёрдыя, звычайныя, брэнды/значкі ў сацыяльных сетках, purrcats

Каб яшчэ больш аўтаматызаваць гэты працэс, я папрасіў Cursor стварыць скрыпт для дадання ўсіх даных значкоў у файл /data/icons.json.

файл icons.json

Цяпер, калі пошук працуе, пошукавыя фільтры на месцы і мадальныя значкі працуюць належным чынам, усё, што засталося зрабіць, гэта дадаць астатнія ўзаемадзеянні ў карыстацкі інтэрфейс, дбайнае тэсціраванне і разгортванне!

Разгортванне і не толькі

Пасля таго, як я быў задаволены карыстальніцкім інтэрфейсам і старанна пратэставаў усе функцыі, прыйшоў час для наступнага выкліку - Разгортванне!!!

Паколькі праект быў статычным сайтам, мне патрабавалася рашэнне для хостынгу, якое было б хуткім, бясплатным і простым у абслугоўванні. Старонкі GitHub былі простай справай! Ён прапаноўваў:

• Поўная інтэграцыя з GitHub repo, што робіць разгортванне лёгкім.
• Ён бясплатны для выкарыстання і лепш за ўсё падыходзіць для такіх статычных праектаў.
• Абнаўляць вельмі проста - усё, што вам трэба, гэта здзейсніць!

Але перш чым я змагу адправіць увесь свой код у рэпазітар і разгарнуць яго праз GitHub Pages, мне трэба было ачысціць код і праверыць, ці няма праблем з вытворчасцю. Пасля хуткага пераходу наперад і назад з курсорам і некалькіх налад усё было гатова да запуску!

Вось усё, што вам трэба зрабіць, каб разгарнуць свой праект праз GitHub Pages:

• Адпраўце ўвесь свой код у сховішча GitHub і пераканайцеся, што ён агульнадаступны
• Уключэнне старонак GitHub для рэпа
  • Перайдзіце ў Налады
  • Націсніце на Старонкі
  • Усталюйце галінку на « Вэб-сайт » (галіна, у якой знаходзіцца ваш код. У маім выпадку гэта была галінка вэб-сайта)
  • Націсніце Захаваць
• Дадаткова:
  • Дадайце свой уласны дамен (як я выкарыстаў: pixeliconlibrary.com)
  • Настройка DNS (дзякуй Рычарду за дапамогу)
• Пачакайце некалькі хвілін, і ваш сайт запрацуе!

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

Прадукт, якім варта ганарыцца

Гэты праект найлепшым чынам вывеў мяне за межы зоны камфорту, пачынаючы ад распрацоўкі піксельных абразкоў і заканчваючы вібра-кадаваннем майго шляху да цалкам функцыянальнага сайта. Азіраючыся назад, гэта было больш, чым проста стварэнне вэб-сайта - гэта было пашырэнне маіх творчых гарызонтаў і ўсведамленне таго, што са штучным інтэлектам мяжа паміж дызайнам і распрацоўкай сціраецца хутчэй, чым калі-небудзь. А мне быццам бясконцая дарога адкрылася перад вачыма.

Хочаце зірнуць на код вэб-сайта? Праверце рэпазітар GitHub !