As a designer, I've always been fascinated by the intersection of design and tech. The gap between designer and developer has always intrigued me—I just never expected to cross it this soon. The Pixel Icon Library by HackerNoon started as a fun design project to create pixelated icons that captured the nostalgic essence of HackerNoon’s design language—but transforming a Figma Design file into a fully functional website myself? That was not on my card for 2025 until I discovered Cursor AI. Having the library open-sourced via GitHub, xFigma & NPM, we always wanted to make these icons more accessible to the community. The idea was simple: let’s build a website where designers and developers could browse, search, and download these icons for their projects. The challenge? I had literally zero experience with coding.💀 Enter Cursor AI, an AI-powered code editor that quickly became my mentor and guide throughout this journey. Here's how I pushed past my limits from design to full-stack with AI assistance and some serious vibe coding. Starting from Ground Zero The first step was to establish what I wanted to build and take stock of what I already had: A library of pixel icons in SVG format. A Figma design for the website. A list of features I wanted on the website. Absolutely no idea how to bring it to life. I started by setting up a website branch on the Pixel Icon Library GitHub Repository. Then I installed Cursor AI, and getting started was surprisingly straightforward. Setting Up the Project with Cursor AI After installing Cursor, the next thing was to check for: GIT - for version control Node.js - for the NPM package With the essentials installed, it was time to get my hands dirty. I cloned the repo to my system, opened the project folder in Cursor AI, and initiated a conversation with the built-in AI assistant. Having had a solid experience with Claude, I opted for Claude 3.7 Sonnet in Agent Mode to guide me through the process. With the first prompt, I briefly explained what I wanted to build and listed the required features along with a basic structure of the project, asking for suggestions on which framework(s) to prioritize efficiency and speed. Cursor helped with the necessary folder structure and suggested I stick to HTML & Tailwind for the project. It even created the files required for starting the project. Here’s how the folder structure looked after this: ├── index.html ├── src/ │ ├── style.css │ ├── output.css ├── assets/ ├── fonts/ ├── scripts/ The next step was setting up Tailwind & starting with the UI. Setting Up Tailwind CSS & Building The UI To my surprise, Cursor messed up the Tailwind installation and mixed up commands from Tailwind v3.4 & v4.0. So, it was time for me to step up! I went over to Tailwindcss Installation Docs and followed these steps: To install Tailwind, open the terminal & run: npm install tailwindcss @tailwindcss/cli Import Tailwind in src/style.css file: @import "tailwindcss"; To set up the Build Process, run: npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch Start using Tailwind in the HTML: <link href="/src/output.css" rel="stylesheet"> Once Tailwind was installed and the classes were ready to be used, I started defining colors, fonts, and other atoms for the AI agent before building out more complex molecules, organisms, and pages as per my Figma Design. Then, I installed the Pixel Icon Library NPM Package to use the icons in the project. Here are the steps for installing the NPM Package: Install the package: npm i @hackernoon/pixel-icon-library Import the CSS in your HTML (I moved all the necessary icon font files to the /fonts folder for ease of access.) <link href="/fonts/iconfont.css" rel="stylesheet"> To display an icon, add <i class="hn hn-icon-name"></i> For the UI, I took an element-by-element approach to keep things organized and make it easy to revert to the previous iteration if needed. Here’s the order : Nav Bar Footer Hero Section Search Bar Icon Cards & Grid Individual Icon Modal I made sure to define paddings, margins, border radius, colors, and dimensions for all these elements while adding hover & click states as well. In addition to CSS properties, I included responsive behavior & interactions in the prompts as well. To generate a preview for all the code I was approving, I used the Live Server extension. This extension launches a local development server with a live reload feature for static & dynamic pages in one click! Icon Data Challenge & Implementing Search Functionality With the UI Elements in place, it was time for the real challenge: displaying all icons with their details - Icon Name, Icon Type Tag, and SVG Code while ensuring smooth search functionality. To overcome this, Cursor suggested a structured approach: Creating a JSON file with icon metadata and SVG code Loading the data from the JSON to display it efficiently. Implement search based on the icon name. Add search filters based on the icon type tags - solid, regular, brands/social-media-icons, purrcats To further automate this process, I asked Cursor to create a script to add all the icon data to the /data/icons.json file. Now, with the search working, search filters in place, and icon modal working as intended, all that was left to do was add remaining interactions to the UI, thorough testing, and deployment! Deployment & Beyond Once I was happy with the UI and thoroughly tested every functionality, it was time for the next challenge - Deployment!!! Since the project was a static site, I needed a hosting solution that was fast, free, and easy to maintain. GitHub Pages was a no-brainer! It offered: Seamless integration with the GitHub repo, making deployment effortless. It’s free to use & best suited for static projects like this. Updates are super easy - all you need is a commit! But before I could push all my code to the repository and deploy via GitHub Pages, I needed to clean up the code and check for any production issues. After a quick back and forth with Cursor, and a few tweaks, it was all ready for launch! Here’s all you need to do to deploy your project via GitHub Pages: Push all your code to the GitHub repo & make sure it’s public Enabling GitHub pages for the repo Go to Settings Click on Pages Set the Branch to “Website” (The branch where your code is. In my case, it was in website branch) Click Save Optional: Add your custom domain (Like I used: pixeliconlibrary.com) Configure DNS (Thanks to Richard for helping me out with this) Wait for a few minutes & your website will be LIVE! https://pixeliconlibrary.com/?embedable=true A Product to Be Proud Of From designing pixel-art icons to vibe-coding my way into a fully functional site, this project pushed me beyond my comfort zone in the best way possible. Looking back, it was more than just building a website - it was about widening my creative horizons & realizing that with AI, the line between design and development is blurring faster than ever. And to me, it's like an endless road has opened up in front of my eyes. One designer to another: If I can do it, so can you. So, what are you waiting for? Let’s get building! PS: The Pixel Icon Library Website is LIVE! Wanna take a peek at the code behind the website? Check out the GitHub repo! As a designer, I've always been fascinated by the intersection of design and tech. The gap between designer and developer has always intrigued me—I just never expected to cross it this soon. As a designer, I've always been fascinated by the intersection of design and tech. The gap between designer and developer has always intrigued me—I just never expected to cross it this soon. The Pixel Icon Library by HackerNoon started as a fun design project to create pixelated icons that captured the nostalgic essence of HackerNoon’s design language—but transforming a Figma Design file into a fully functional website myself? That was not on my card for 2025 until I discovered Cursor AI. Having the library open-sourced via GitHub, xFigma & NPM, we always wanted to make these icons more accessible to the community. The idea was simple: let’s build a website where designers and developers could browse, search, and download these icons for their projects. Pixel Icon Library The challenge? I had literally zero experience with coding.💀 Enter Cursor AI, an AI-powered code editor that quickly became my mentor and guide throughout this journey. Here's how I pushed past my limits from design to full-stack with AI assistance and some serious vibe coding . vibe coding Starting from Ground Zero The first step was to establish what I wanted to build and take stock of what I already had: A library of pixel icons in SVG format. A Figma design for the website. A list of features I wanted on the website. Absolutely no idea how to bring it to life. A library of pixel icons in SVG format. A Figma design for the website. A list of features I wanted on the website. Absolutely no idea how to bring it to life. I started by setting up a website branch on the Pixel Icon Library GitHub Repository . Then I installed Cursor AI, and getting started was surprisingly straightforward. website branch Pixel Icon Library GitHub Repository Setting Up the Project with Cursor AI After installing Cursor, the next thing was to check for: GIT - for version control Node.js - for the NPM package GIT - for version control GIT Node.js - for the NPM package Node.js With the essentials installed, it was time to get my hands dirty. I cloned the repo to my system, opened the project folder in Cursor AI, and initiated a conversation with the built-in AI assistant. Having had a solid experience with Claude, I opted for Claude 3.7 Sonnet in Agent Mode to guide me through the process. Having had a solid experience with Claude, I opted for Claude 3.7 Sonnet in Agent Mode to guide me through the process. With the first prompt, I briefly explained what I wanted to build and listed the required features along with a basic structure of the project, asking for suggestions on which framework(s) to prioritize efficiency and speed. Cursor helped with the necessary folder structure and suggested I stick to HTML & Tailwind for the project. It even created the files required for starting the project. Here’s how the folder structure looked after this: ├── index.html ├── index.html ├── src/ ├── src/ │ ├── style.css │ ├── style.css │ ├── output.css │ ├── output.css ├── assets/ ├── assets/ ├── fonts/ ├── fonts/ ├── scripts/ ├── scripts/ The next step was setting up Tailwind & starting with the UI. Setting Up Tailwind CSS & Building The UI To my surprise, Cursor messed up the Tailwind installation and mixed up commands from Tailwind v3.4 & v4.0. So, it was time for me to step up! I went over to Tailwindcss Installation Docs and followed these steps: Tailwindcss Installation Docs To install Tailwind, open the terminal & run: npm install tailwindcss @tailwindcss/cli To install Tailwind, open the terminal & run: npm install tailwindcss @tailwindcss/cli To install Tailwind, open the terminal & run: npm install tailwindcss @tailwindcss/cli npm install tailwindcss @tailwindcss/cli Import Tailwind in src/style.css file: @import "tailwindcss"; Import Tailwind in src/style.css file: @import "tailwindcss"; Import Tailwind in src/style.css file: @import "tailwindcss"; @import "tailwindcss"; To set up the Build Process, run: npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch To set up the Build Process, run: npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch To set up the Build Process, run: npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch Start using Tailwind in the HTML: <link href="/src/output.css" rel="stylesheet"> Start using Tailwind in the HTML: <link href="/src/output.css" rel="stylesheet"> Start using Tailwind in the HTML: <link href="/src/output.css" rel="stylesheet"> <link href="/src/output.css" rel="stylesheet"> Once Tailwind was installed and the classes were ready to be used, I started defining colors, fonts, and other atoms for the AI agent before building out more complex molecules, organisms, and pages as per my Figma Design. Then, I installed the Pixel Icon Library NPM Package to use the icons in the project. Here are the steps for installing the NPM Package: Install the package: npm i @hackernoon/pixel-icon-library Install the package: npm i @hackernoon/pixel-icon-library Install the package: npm i @hackernoon/pixel-icon-library npm i @hackernoon/pixel-icon-library Import the CSS in your HTML (I moved all the necessary icon font files to the /fonts folder for ease of access.) <link href="/fonts/iconfont.css" rel="stylesheet"> Import the CSS in your HTML (I moved all the necessary icon font files to the /fonts folder for ease of access.) <link href="/fonts/iconfont.css" rel="stylesheet"> Import the CSS in your HTML (I moved all the necessary icon font files to the /fonts folder for ease of access.) <link href="/fonts/iconfont.css" rel="stylesheet"> <link href="/fonts/iconfont.css" rel="stylesheet"> To display an icon, add <i class="hn hn-icon-name"></i> To display an icon, add <i class="hn hn-icon-name"></i> To display an icon, add <i class="hn hn-icon-name"></i> <i class="hn hn-icon-name"></i> For the UI, I took an element-by-element approach to keep things organized and make it easy to revert to the previous iteration if needed. Here’s the order : Nav Bar Footer Hero Section Search Bar Icon Cards & Grid Individual Icon Modal Nav Bar Footer Hero Section Search Bar Icon Cards & Grid Individual Icon Modal I made sure to define paddings, margins, border radius, colors, and dimensions for all these elements while adding hover & click states as well. In addition to CSS properties, I included responsive behavior & interactions in the prompts as well. To generate a preview for all the code I was approving, I used the Live Server extension. This extension launches a local development server with a live reload feature for static & dynamic pages in one click! To generate a preview for all the code I was approving, I used the Live Server extension. This extension launches a local development server with a live reload feature for static & dynamic pages in one click! Live Server Icon Data Challenge & Implementing Search Functionality With the UI Elements in place, it was time for the real challenge: displaying all icons with their details - Icon Name, Icon Type Tag, and SVG Code while ensuring smooth search functionality. To overcome this, Cursor suggested a structured approach: Creating a JSON file with icon metadata and SVG code Loading the data from the JSON to display it efficiently. Implement search based on the icon name. Add search filters based on the icon type tags - solid, regular, brands/social-media-icons, purrcats Creating a JSON file with icon metadata and SVG code Loading the data from the JSON to display it efficiently. Implement search based on the icon name. Add search filters based on the icon type tags - solid, regular, brands/social-media-icons, purrcats To further automate this process, I asked Cursor to create a script to add all the icon data to the /data/icons.json file. Now, with the search working, search filters in place, and icon modal working as intended, all that was left to do was add remaining interactions to the UI, thorough testing, and deployment! Deployment & Beyond Once I was happy with the UI and thoroughly tested every functionality, it was time for the next challenge - Deployment!!! Since the project was a static site, I needed a hosting solution that was fast, free, and easy to maintain. GitHub Pages was a no-brainer! It offered: Seamless integration with the GitHub repo, making deployment effortless. It’s free to use & best suited for static projects like this. Updates are super easy - all you need is a commit! Seamless integration with the GitHub repo, making deployment effortless. It’s free to use & best suited for static projects like this. Updates are super easy - all you need is a commit! But before I could push all my code to the repository and deploy via GitHub Pages, I needed to clean up the code and check for any production issues. After a quick back and forth with Cursor, and a few tweaks, it was all ready for launch! Here’s all you need to do to deploy your project via GitHub Pages: Here’s all you need to do to deploy your project via GitHub Pages: Push all your code to the GitHub repo & make sure it’s public Enabling GitHub pages for the repo Go to Settings Click on Pages Set the Branch to “Website” (The branch where your code is. In my case, it was in website branch) Click Save Optional: Add your custom domain (Like I used: pixeliconlibrary.com) Configure DNS (Thanks to Richard for helping me out with this) Wait for a few minutes & your website will be LIVE! Push all your code to the GitHub repo & make sure it’s public Enabling GitHub pages for the repo Go to Settings Click on Pages Set the Branch to “Website” (The branch where your code is. In my case, it was in website branch) Click Save Go to Settings Click on Pages Set the Branch to “Website” (The branch where your code is. In my case, it was in website branch) Click Save Go to Settings Settings Click on Pages Pages Set the Branch to “ Website ” (The branch where your code is. In my case, it was in website branch) Branch Website Click Save Save Optional: Add your custom domain (Like I used: pixeliconlibrary.com) Configure DNS (Thanks to Richard for helping me out with this) Add your custom domain (Like I used: pixeliconlibrary.com) Configure DNS (Thanks to Richard for helping me out with this) Add your custom domain (Like I used: pixeliconlibrary.com) Configure DNS (Thanks to Richard for helping me out with this) Richard Wait for a few minutes & your website will be LIVE! https://pixeliconlibrary.com/?embedable=true https://pixeliconlibrary.com/?embedable=true A Product to Be Proud Of From designing pixel-art icons to vibe-coding my way into a fully functional site, this project pushed me beyond my comfort zone in the best way possible. Looking back, it was more than just building a website - it was about widening my creative horizons & realizing that with AI, the line between design and development is blurring faster than ever. And to me, it's like an endless road has opened up in front of my eyes. And to me, it's like an endless road has opened up in front of my eyes. One designer to another: If I can do it, so can you. So, what are you waiting for? Let’s get building! One designer to another: If I can do it, so can you. So, what are you waiting for? Let’s get building! PS: The Pixel Icon Library Website is LIVE! PS: The Pixel Icon Library Website is LIVE! Pixel Icon Library Website Pixel Icon Library Website Wanna take a peek at the code behind the website? Check out the GitHub repo! Wanna take a peek at the code behind the website? Check out the GitHub repo! the GitHub repo ! GitHub repo
