En tant que designer, j'ai toujours été fasciné par l'intersection entre design et technologie. La frontière entre designer et développeur m'a toujours intrigué ; je n'aurais jamais imaginé la franchir si tôt. La de HackerNoon a débuté comme un projet de design amusant visant à créer des icônes pixelisées reflétant l'essence nostalgique du langage de conception de HackerNoon. Mais transformer moi-même un fichier Figma Design en un site web entièrement fonctionnel ? Ce n'était pas prévu pour 2025, jusqu'à ce que je découvre Cursor AI. La bibliothèque étant open source via GitHub, xFigma et NPM, nous avons toujours voulu rendre ces icônes plus accessibles à la communauté. L'idée était simple : créer un site web où les designers et les développeurs pourraient parcourir, rechercher et télécharger ces icônes pour leurs projets. bibliothèque d'icônes Pixel Le défi ? Je n'avais aucune expérience en codage.💀 Découvrez Cursor AI, un éditeur de code basé sur l'IA qui est rapidement devenu mon mentor et mon guide tout au long de ce parcours. Voici comment j'ai repoussé mes limites, de la conception au fullstack, grâce à l'assistance de l'IA et à un rigoureux. code d'ambiance À partir de Ground Zero La première étape a été d’établir ce que je voulais construire et de faire le point sur ce que j’avais déjà : Une bibliothèque d'icônes de pixels au format SVG. Une conception Figma pour le site Web. Une liste de fonctionnalités que je souhaitais sur le site Web. Je n'ai absolument aucune idée de comment lui donner vie. J'ai commencé par créer une sur le . J'ai ensuite installé Cursor AI, et la prise en main a été étonnamment simple. branche de site web dépôt GitHub de la bibliothèque d'icônes Pixel Configuration du projet avec Cursor AI Après avoir installé Cursor, la prochaine chose à vérifier était : - pour le contrôle de version GIT - pour le package NPM Node.js Une fois les éléments essentiels installés, il était temps de passer à l'action. J'ai cloné le dépôt sur mon système, ouvert le dossier du projet dans Cursor AI et initié une conversation avec l'assistant IA intégré. Ayant eu une solide expérience avec Claude, j'ai opté pour Claude 3.7 Sonnet en mode Agent pour me guider tout au long du processus. Lors de la première invite, j'ai brièvement expliqué ce que je souhaitais créer et listé les fonctionnalités requises, ainsi qu'une structure de base pour le projet, en demandant des suggestions sur le(s) framework(s) à privilégier pour l'efficacité et la rapidité. Cursor m'a aidé à définir la structure des dossiers et m'a suggéré de m'en tenir à HTML et Tailwind pour le projet. Il a même créé les fichiers nécessaires au démarrage du projet. Voici à quoi ressemblait la structure des dossiers après cela : ├── index.html ├── src/ │ ├── style.css │ ├── output.css ├── assets/ ├── fonts/ ├── scripts/ L’étape suivante consistait à configurer Tailwind et à démarrer avec l’interface utilisateur. Configuration de Tailwind CSS et création de l'interface utilisateur À ma grande surprise, Cursor a perturbé l'installation de Tailwind et a mélangé les commandes de Tailwind v3.4 et v4.0. Il était donc temps pour moi de passer à l'action ! Je suis allé sur et j'ai suivi ces étapes : la documentation d'installation de Tailwindcss Pour installer Tailwind, ouvrez le terminal et exécutez : npm install tailwindcss @tailwindcss/cli Importer Tailwind dans le fichier src/style.css : @import "tailwindcss"; Pour configurer le processus de construction, exécutez : npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch Commencez à utiliser Tailwind dans le HTML : <link href="/src/output.css" rel="stylesheet"> Une fois Tailwind installé et les classes prêtes à être utilisées, j'ai commencé à définir les couleurs, les polices et d'autres atomes pour l'agent IA avant de créer des molécules, des organismes et des pages plus complexes selon ma conception Figma. J'ai ensuite installé le package NPM Pixel Icon Library pour utiliser les icônes du projet. Voici les étapes d'installation du package NPM : Installer le paquet : npm i @hackernoon/pixel-icon-library Importez le CSS dans votre HTML (J'ai déplacé tous les fichiers de polices d'icônes nécessaires dans le dossier /fonts pour faciliter l'accès.) <link href="/fonts/iconfont.css" rel="stylesheet"> Pour afficher une icône, ajoutez <i class="hn hn-icon-name"></i> Pour l'interface utilisateur, j'ai adopté une approche élément par élément pour garder les choses organisées et faciliter le retour à l'itération précédente si nécessaire. Voici l'ordre : Barre de navigation Pied de page Section Héros Barre de recherche Cartes d'icônes et grille Modalité d'icône individuelle J'ai veillé à définir les marges intérieures, les marges, le rayon des bordures, les couleurs et les dimensions de tous ces éléments, tout en ajoutant des états de survol et de clic. Outre les propriétés CSS, j'ai également intégré des interactions et un comportement réactif dans les invites. Pour générer un aperçu de tout le code que j'approuvais, j'ai utilisé l'extension . Cette extension lance un serveur de développement local avec une fonctionnalité de rechargement en direct des pages statiques et dynamiques en un clic ! Live Server Défi des données d'icônes et mise en œuvre de la fonctionnalité de recherche Une fois les éléments d'interface utilisateur en place, le véritable défi était de relever : afficher toutes les icônes avec leurs détails (nom, type et code SVG), tout en garantissant une recherche fluide. Pour y parvenir, Cursor a proposé une approche structurée : Création d'un fichier JSON avec métadonnées d'icône et code SVG Chargement des données depuis le JSON pour les afficher efficacement. Implémenter la recherche basée sur le nom de l'icône. Ajoutez des filtres de recherche en fonction des balises de type d'icône : solide, régulier, marques/icônes de médias sociaux, ronronnements Pour automatiser davantage ce processus, j'ai demandé à Cursor de créer un script pour ajouter toutes les données d'icône au fichier /data/icons.json. Maintenant que la recherche fonctionne, que les filtres de recherche sont en place et que le mode icône fonctionne comme prévu, il ne restait plus qu'à ajouter les interactions restantes à l'interface utilisateur, à effectuer des tests approfondis et à déployer ! Déploiement et au-delà Une fois que j'ai été satisfait de l'interface utilisateur et que j'ai testé minutieusement chaque fonctionnalité, il était temps de relever le défi suivant : le déploiement !!! Comme le projet était un site statique, j'avais besoin d'une solution d'hébergement rapide, gratuite et facile à maintenir. GitHub Pages était une évidence ! Elle offrait : Intégration transparente avec le référentiel GitHub, rendant le déploiement sans effort. Son utilisation est gratuite et convient parfaitement aux projets statiques comme celui-ci. Les mises à jour sont très simples : tout ce dont vous avez besoin est un engagement ! Mais avant de pouvoir transférer tout mon code vers le dépôt et le déployer via GitHub Pages, je devais le nettoyer et vérifier l'absence de problèmes de production. Après un rapide échange avec Cursor et quelques ajustements, tout était prêt pour le lancement ! Voici tout ce que vous devez faire pour déployer votre projet via GitHub Pages : Envoyez tout votre code vers le dépôt GitHub et assurez-vous qu'il est public Activation des pages GitHub pour le dépôt Accédez aux paramètres Cliquez sur Pages Définissez la sur « » (la branche où se trouve votre code. Dans mon cas, c'était dans la branche du site Web) branche Site Web Cliquez sur Enregistrer Facultatif: Ajoutez votre domaine personnalisé (comme je l'ai utilisé : pixeliconlibrary.com) Configurer le DNS (Merci à de m'avoir aidé avec ça) Richard Attendez quelques minutes et votre site Web sera EN LIGNE ! https://pixeliconlibrary.com/?embedable=true Un produit dont on peut être fier De la conception d'icônes en pixel art au vibe-coding pour créer un site entièrement fonctionnel, ce projet m'a poussé à sortir de ma zone de confort de la meilleure des manières. Avec le recul, il s'agissait de bien plus que de créer un site web : il s'agissait d'élargir mes horizons créatifs et de réaliser qu'avec l'IA, la frontière entre design et développement s'estompe plus rapidement que jamais. Et pour moi, c'est comme si une route sans fin s'ouvrait devant mes yeux. D'un designer à un autre : Si j'ai réussi, vous aussi. Alors, qu'attendez-vous ? C'est parti pour la construction ! PS : Le est EN LIGNE ! site Web de la bibliothèque d'icônes Pixel Envie de découvrir le code du site web ? Consultez le ! dépôt GitHub
