Como eu codifiquei o site da biblioteca de ícones de pixel no Vibe sem aprender a programar (obrigado, Cursor AI!)

Como designer, sempre fui fascinado pela intersecção entre design e tecnologia. A lacuna entre designer e desenvolvedor sempre me intrigou — eu só nunca imaginei que a cruzaria tão cedo.

A Pixel Icon Library da HackerNoon começou como um projeto de design divertido para criar ícones pixelados que capturassem a essência nostálgica da linguagem de design da HackerNoon — mas transformar um arquivo Figma Design em um site totalmente funcional eu mesmo? Isso não estava nos meus planos para 2025 até que descobri o Cursor AI. Tendo a biblioteca de código aberto via GitHub, xFigma e NPM, sempre quisemos tornar esses ícones mais acessíveis à comunidade. A ideia era simples: vamos construir um site onde designers e desenvolvedores pudessem navegar, pesquisar e baixar esses ícones para seus projetos.

O desafio? Eu tinha literalmente zero experiência com codificação.💀

Entre no Cursor AI, um editor de código alimentado por IA que rapidamente se tornou meu mentor e guia ao longo desta jornada. Veja como ultrapassei meus limites do design para o full-stack com assistência de IA e alguma codificação de vibe séria.

Começando do Marco Zero

O primeiro passo foi estabelecer o que eu queria construir e fazer um balanço do que eu já tinha:

• Uma biblioteca de ícones de pixel em formato SVG.
• Um design Figma para o site.
• Uma lista de recursos que eu queria no site.
• Não tenho a mínima ideia de como dar vida a isso.

Comecei configurando um branch de site no Pixel Icon Library GitHub Repository . Então instalei o Cursor AI, e começar foi surpreendentemente simples.

Configurando o projeto com o Cursor AI

Cursor UI

Depois de instalar o Cursor, a próxima coisa a fazer foi verificar:

• GIT - para controle de versão
• Node.js - para o pacote NPM

Com o essencial instalado, era hora de colocar a mão na massa. Clonei o repositório para meu sistema, abri a pasta do projeto no Cursor AI e iniciei uma conversa com o assistente de IA integrado.

Janela de bate-papo do cursor

Tendo tido uma sólida experiência com Claude, optei pelo Claude 3.7 Sonnet in Agent Mode para me guiar pelo processo.

Com o primeiro prompt, expliquei brevemente o que queria construir e listei os recursos necessários junto com uma estrutura básica do projeto, pedindo sugestões sobre qual(is) framework(s) priorizar eficiência e velocidade. O Cursor ajudou com a estrutura de pasta necessária e sugeriu que eu ficasse com HTML e Tailwind para o projeto. Ele até criou os arquivos necessários para iniciar o projeto. Veja como a estrutura de pasta ficou depois disso:

├── index.html

├── src/

│ ├── style.css

│ ├── output.css

├── assets/

├── fonts/

├── scripts/

O próximo passo foi configurar o Tailwind e começar com a interface do usuário.

Configurando Tailwind CSS e construindo a IU

Para minha surpresa, o Cursor bagunçou a instalação do Tailwind e misturou os comandos do Tailwind v3.4 e v4.0. Então, era hora de eu me esforçar! Fui até a documentação de instalação do Tailwindcss e segui estes passos:

• Para instalar o Tailwind, abra o terminal e execute:

  npm install tailwindcss @tailwindcss/cli

• Importar Tailwind no arquivo src/style.css:

  @import "tailwindcss";

• Para configurar o processo de compilação, execute:

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

• Comece a usar o Tailwind no HTML:

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

Depois que o Tailwind foi instalado e as classes estavam prontas para serem usadas, comecei a definir cores, fontes e outros átomos para o agente de IA antes de criar moléculas, organismos e páginas mais complexas de acordo com meu design do Figma.

Então, instalei o Pixel Icon Library NPM Package para usar os ícones no projeto. Aqui estão os passos para instalar o NPM Package:

• Instale o pacote:

  npm i @hackernoon/pixel-icon-library

• Importe o CSS no seu HTML

  (Movi todos os arquivos de fontes de ícones necessários para a pasta /fonts para facilitar o acesso.)

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

• Para exibir um ícone, adicione

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

Para a interface do usuário, adotei uma abordagem elemento por elemento para manter as coisas organizadas e facilitar a reversão à iteração anterior, se necessário.

Aqui está a ordem:

• Barra de navegação
• Rodapé
• Seção de Heróis
• Barra de pesquisa
• Cartões de ícones e grade
• Ícone Individual Modal

Eu me certifiquei de definir paddings, margens, raio de borda, cores e dimensões para todos esses elementos, enquanto adicionava estados de hover e clique também. Além das propriedades CSS, eu incluí comportamento responsivo e interações nos prompts também.

Extensão do Servidor ao Vivo

Desafio de dados de ícones e implementação da funcionalidade de pesquisa

Com os Elementos de UI no lugar, era hora do verdadeiro desafio: exibir todos os ícones com seus detalhes - Nome do Ícone, Tag do Tipo de Ícone e Código SVG, garantindo ao mesmo tempo uma funcionalidade de pesquisa suave. Para superar isso, o Cursor sugeriu uma abordagem estruturada:

• Criando um arquivo JSON com metadados de ícones e código SVG
• Carregando os dados do JSON para exibi-los de forma eficiente.
• Implemente a pesquisa com base no nome do ícone.
• Adicione filtros de pesquisa com base nas tags de tipo de ícone - sólido, regular, marcas/ícones de mídia social, purrcats

Para automatizar ainda mais esse processo, pedi ao Cursor para criar um script para adicionar todos os dados dos ícones ao arquivo /data/icons.json.

arquivo icons.json

Agora, com a pesquisa funcionando, os filtros de pesquisa implementados e o modal de ícones funcionando conforme o esperado, tudo o que faltava fazer era adicionar as interações restantes à IU, fazer testes completos e implementar!

Implantação e além

Depois que fiquei satisfeito com a interface do usuário e testei exaustivamente todas as funcionalidades, chegou a hora do próximo desafio: implantação!!!

Como o projeto era um site estático, eu precisava de uma solução de hospedagem que fosse rápida, gratuita e fácil de manter. O GitHub Pages foi uma escolha óbvia! Ele oferecia:

• Integração perfeita com o repositório GitHub, facilitando a implantação.
• É gratuito e mais adequado para projetos estáticos como este.
• Atualizações são super fáceis: tudo o que você precisa é de um compromisso!

Mas antes que eu pudesse enviar todo o meu código para o repositório e implantar via GitHub Pages, eu precisava limpar o código e verificar se havia algum problema de produção. Depois de um rápido vai e vem com o Cursor, e alguns ajustes, estava tudo pronto para o lançamento!

Aqui está tudo o que você precisa fazer para implantar seu projeto via GitHub Pages:

• Envie todo o seu código para o repositório GitHub e certifique-se de que ele seja público
• Habilitando páginas do GitHub para o repositório
  • Vá para Configurações
  • Clique em Páginas
  • Defina o Branch para “ Website ” (o branch onde seu código está. No meu caso, estava no branch do site)
  • Clique em Salvar
• Opcional:
  • Adicione seu domínio personalizado (como eu usei: pixeliconlibrary.com)
  • Configurar DNS (Obrigado a Richard por me ajudar com isso)
• Aguarde alguns minutos e seu site estará NO AR!

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.

Página de configurações das páginas do GitHub

Um produto para se orgulhar

Desde a criação de ícones de pixel-art até a codificação de vibe para um site totalmente funcional, este projeto me levou além da minha zona de conforto da melhor maneira possível. Olhando para trás, foi mais do que apenas construir um site - foi sobre ampliar meus horizontes criativos e perceber que, com a IA, a linha entre design e desenvolvimento está se confundindo mais rápido do que nunca. E para mim, é como se uma estrada sem fim tivesse se aberto diante dos meus olhos.

Quer dar uma olhada no código por trás do site? Confira o repositório do GitHub !