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   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. Pixel Icon Library  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   sul   . Poi ho installato Cursor AI e iniziare è stato sorprendentemente semplice. ramo del sito web Pixel Icon Library GitHub Repository  Impostazione del progetto con Cursor AI   Dopo aver installato Cursor, la cosa successiva da fare era controllare:    - per il controllo delle versioni GIT    - per il pacchetto NPM Node.js  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.   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   e ho seguito questi passaggi: Tailwindcss Installation Docs  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.  Per generare un'anteprima di tutto il codice che stavo approvando, ho utilizzato l'estensione   . Questa estensione avvia un server di sviluppo locale con una funzionalità di ricaricamento live per pagine statiche e dinamiche in un clic!  Live Server  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.   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   su "   " (il ramo in cui si trova il tuo codice. Nel mio caso, era nel ramo del sito Web) Branch Sito Web  Fare clic su  Salva  Opzionale:  Aggiungi il tuo dominio personalizzato (come ho usato io: pixeliconlibrary.com)  Configurare DNS (Grazie a   per avermi aiutato) Richard  Attendi qualche minuto e il tuo sito web sarà attivo!     https://pixeliconlibrary.com/?embedable=true  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.  Un designer all'altro: se ci sono riuscito io, puoi farcela anche tu. Quindi, cosa aspetti? Cominciamo a costruire!  PS: il   è ATTIVO! sito web della Pixel Icon Library   Vuoi dare un'occhiata al codice dietro il sito web? Dai un'occhiata  al   ! repository GitHub

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Check Out The Pixel Icon Library Today!

Questo audio è prodotto nella lingua originale della storia!

Troppo lungo; Leggere

Make resilience your competitive advantage

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

About Author

COMMENTI

CARTELLINI

QUESTO ARTICOLO È STATO PRESENTATO IN

Related Stories

Streamlining Network Policy Management - Interview with Startups of the Year Nominee, Otterize

Meet Dealscard, Winner of Startups of The Year 2024 in Ghaziabad/Deal Aggregator

OpenAI Has Everything Under Control 😎

Link-To-Earn Incentive Model: A Blueprint For Mass Adoption?

Streamlining Network Policy Management - Interview with Startups of the Year Nominee, Otterize

Meet Dealscard, Winner of Startups of The Year 2024 in Ghaziabad/Deal Aggregator

OpenAI Has Everything Under Control 😎

Link-To-Earn Incentive Model: A Blueprint For Mass Adoption?

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps