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 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. Pixel Icon Library 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 séria. codificação de vibe 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 no . Então instalei o Cursor AI, e começar foi surpreendentemente simples. branch de site Pixel Icon Library GitHub Repository Configurando o projeto com o Cursor AI Depois de instalar o Cursor, a próxima coisa a fazer foi verificar: - para controle de versão GIT - para o pacote NPM Node.js 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. 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 e segui estes passos: documentação de instalação do Tailwindcss 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. Para gerar uma prévia de todo o código que eu estava aprovando, usei a extensão . Esta extensão inicia um servidor de desenvolvimento local com um recurso de recarga ao vivo para páginas estáticas e dinâmicas em um clique! Live Server 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. 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 para “ ” (o branch onde seu código está. No meu caso, estava no branch do site) Branch Website Clique em Salvar Opcional: Adicione seu domínio personalizado (como eu usei: pixeliconlibrary.com) Configurar DNS (Obrigado a por me ajudar com isso) Richard Aguarde alguns minutos e seu site estará NO AR! https://pixeliconlibrary.com/?embedable=true 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. Um designer para outro: Se eu consigo, você também consegue. Então, o que você está esperando? Vamos construir! PS: O está no ar! site da biblioteca de ícones do Pixel Quer dar uma olhada no código por trás do site? Confira o ! repositório do GitHub
