Come ho codificato in Vibe il sito web Pixel Icon Library senza imparare a programmare (grazie, Cursor AI!)

Come designer, sono sempre stato affascinato dall'intersezione tra design e tecnologia. Il divario tra designer e sviluppatore mi ha sempre incuriosito, ma non mi sarei mai aspettato di superarlo così presto.

La Pixel Icon Library di HackerNoon è nata come un divertente progetto di design per creare icone pixelate che catturassero l'essenza nostalgica del linguaggio di design di HackerNoon, ma trasformare un file Figma Design in un sito web completamente funzionale da solo? Non era nei miei piani per il 2025 finché non ho scoperto Cursor AI. Avendo la libreria open source tramite GitHub, xFigma e NPM, abbiamo sempre voluto rendere queste icone più accessibili alla comunità. L'idea era semplice: creiamo un sito web in cui designer e sviluppatori possano sfogliare, cercare e scaricare queste icone per i loro progetti.

La sfida? Non avevo letteralmente alcuna esperienza con la programmazione.💀

Entra in gioco Cursor AI, un editor di codice basato sull'intelligenza artificiale che è rapidamente diventato il mio mentore e la mia guida durante questo viaggio. Ecco come ho superato i miei limiti dal design al full-stack con l'assistenza dell'intelligenza artificiale e un po' di seria codifica di vibrazioni .

Partendo da Ground Zero

Il primo passo è stato stabilire cosa volevo costruire e fare il punto su ciò che avevo già:

• Una libreria di icone pixel in formato SVG.
• Un design Figma per il sito web.
• Un elenco delle funzionalità che desideravo sul sito web.
• Non ho assolutamente idea di come dargli vita.

Ho iniziato impostando un ramo del sito web sul Pixel Icon Library GitHub Repository . Poi ho installato Cursor AI e iniziare è stato sorprendentemente semplice.

Impostazione del progetto con Cursor AI

Interfaccia utente del cursore

Dopo aver installato Cursor, la cosa successiva da fare era controllare:

• GIT - per il controllo delle versioni
• Node.js - per il pacchetto NPM

Con gli elementi essenziali installati, era il momento di sporcarmi le mani. Ho clonato il repo sul mio sistema, ho aperto la cartella del progetto in Cursor AI e ho avviato una conversazione con l'assistente AI integrato.

Finestra di chat del cursore

Dopo aver avuto una solida esperienza con Claude, ho optato per Claude 3.7 Sonnet in modalità Agente per guidarmi nel processo.

Con il primo prompt, ho spiegato brevemente cosa volevo costruire e ho elencato le funzionalità richieste insieme a una struttura di base del progetto, chiedendo suggerimenti su quale framework dare priorità a efficienza e velocità. Cursor mi ha aiutato con la struttura delle cartelle necessaria e mi ha suggerito di attenermi a HTML e Tailwind per il progetto. Ha persino creato i file necessari per avviare il progetto. Ecco come appariva la struttura delle cartelle dopo questo:

├── index.html

├── src/

│ ├── style.css

│ ├── output.css

├── assets/

├── fonts/

├── scripts/

Il passo successivo è stato configurare Tailwind e iniziare a lavorare sull'interfaccia utente.

Impostazione di Tailwind CSS e creazione dell'interfaccia utente

Con mia sorpresa, Cursor ha incasinato l'installazione di Tailwind e ha confuso i comandi di Tailwind v3.4 e v4.0. Quindi, era giunto il momento per me di fare un passo avanti! Sono andato su Tailwindcss Installation Docs e ho seguito questi passaggi:

• Per installare Tailwind, apri il terminale ed esegui:

  npm install tailwindcss @tailwindcss/cli

• Importa Tailwind nel file src/style.css:

  @import "tailwindcss";

• Per impostare il processo di compilazione, eseguire:

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

• Inizia a usare Tailwind in HTML:

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

Una volta installato Tailwind e pronte le classi per essere utilizzate, ho iniziato a definire colori, font e altri atomi per l'agente AI prima di creare molecole, organismi e pagine più complessi secondo il mio design Figma.

Poi ho installato il pacchetto NPM Pixel Icon Library per usare le icone nel progetto. Ecco i passaggi per installare il pacchetto NPM:

• Installa il pacchetto:

  npm i @hackernoon/pixel-icon-library

• Importa il CSS nel tuo HTML

  (Ho spostato tutti i file dei font delle icone necessari nella cartella /fonts per facilitarne l'accesso.)

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

• Per visualizzare un'icona, aggiungi

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

Per l'interfaccia utente, ho adottato un approccio elemento per elemento per mantenere le cose organizzate e semplificare il ripristino dell'iterazione precedente in caso di necessità.

Ecco l'ordine:

• Barra di navigazione
• Piè di pagina
• Sezione Eroe
• Barra di ricerca
• Schede icona e griglia
• Icona individuale modale

Mi sono assicurato di definire padding, margini, raggio del bordo, colori e dimensioni per tutti questi elementi, aggiungendo anche stati hover e click. Oltre alle proprietà CSS, ho incluso anche interazioni e comportamento reattivo nei prompt.

Estensione del server live

Sfida dei dati delle icone e implementazione della funzionalità di ricerca

Con gli elementi UI al loro posto, era il momento della vera sfida: visualizzare tutte le icone con i loro dettagli (nome icona, tag tipo icona e codice SVG) garantendo al contempo una funzionalità di ricerca fluida. Per superare questo problema, Cursor ha suggerito un approccio strutturato:

• Creazione di un file JSON con metadati dell'icona e codice SVG
• Caricamento dei dati dal JSON per visualizzarli in modo efficiente.
• Implementa la ricerca in base al nome dell'icona.
• Aggiungi filtri di ricerca in base ai tag del tipo di icona: solido, normale, marchi/icone social media, purrcats

Per automatizzare ulteriormente questo processo, ho chiesto a Cursor di creare uno script per aggiungere tutti i dati delle icone al file /data/icons.json.

file icons.json

Ora che la ricerca è attiva, i filtri di ricerca sono a posto e la modalità icona funziona come previsto, non resta che aggiungere le interazioni rimanenti all'interfaccia utente, effettuare test approfonditi e distribuire!

Distribuzione e oltre

Una volta soddisfatto dell'interfaccia utente e dopo aver testato a fondo ogni funzionalità, è arrivato il momento della sfida successiva: l'implementazione!!!

Poiché il progetto era un sito statico, avevo bisogno di una soluzione di hosting che fosse veloce, gratuita e facile da gestire. GitHub Pages è stata una scelta ovvia! Offriva:

• Integrazione perfetta con il repository GitHub, per una distribuzione senza sforzi.
• È gratuito e particolarmente adatto a progetti statici come questo.
• Gli aggiornamenti sono semplicissimi: tutto ciò di cui hai bisogno è un commit!

Ma prima di poter caricare tutto il mio codice sul repository e distribuirlo tramite GitHub Pages, avevo bisogno di ripulire il codice e controllare eventuali problemi di produzione. Dopo un rapido avanti e indietro con Cursor e qualche ritocco, era tutto pronto per il lancio!

Ecco tutto ciò che devi fare per distribuire il tuo progetto tramite GitHub Pages:

• Carica tutto il tuo codice nel repository GitHub e assicurati che sia pubblico
• Abilitazione delle pagine GitHub per il repository
  • Vai su Impostazioni
  • Fare clic su Pagine
  • Imposta Branch su " Sito Web " (il ramo in cui si trova il tuo codice. Nel mio caso, era nel ramo del sito Web)
  • Fare clic su Salva
• Opzionale:
  • Aggiungi il tuo dominio personalizzato (come ho usato io: pixeliconlibrary.com)
  • Configurare DNS (Grazie a Richard per avermi aiutato)
• Attendi qualche minuto e il tuo sito web sarà attivo!

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.

Pagina delle impostazioni di GitHub Pages

Un prodotto di cui essere orgogliosi

Dalla progettazione di icone pixel-art al vibe-coding per arrivare a un sito completamente funzionale, questo progetto mi ha spinto oltre la mia zona di comfort nel miglior modo possibile. Guardando indietro, è stato più che costruire un sito web: si trattava di ampliare i miei orizzonti creativi e realizzare che con l'intelligenza artificiale, il confine tra design e sviluppo si sta assottigliando più velocemente che mai. E per me, è come se una strada infinita si fosse aperta davanti ai miei occhi.

Vuoi dare un'occhiata al codice dietro il sito web? Dai un'occhiata al repository GitHub !