Como designer, sempre fui fascinado com a interseção de design e tecnologia. A lacuna entre designer e desenvolvedor sempre me intrigou – eu nunca esperava atravessá -la tão em breve.
A biblioteca de ícones do Pixel de Hackernoon começou como um projeto de design divertido para criar ícones pixelados que capturaram a essência nostálgica da linguagem de design de Hackernoon – mas transformar um arquivo de design da figma em um site totalmente funcional? Isso não estava no meu cartão para 2025 até que eu descobri o cursor AI. Tendo a biblioteca de origem aberta via Github, Xfigma & NPM, sempre quisemos tornar esses ícones mais acessíveis à comunidade. A idéia era simples: vamos criar um site onde designers e desenvolvedores pudessem navegar, pesquisar e baixar esses ícones para seus projetos.
O desafio? Eu tive literalmente zero experiência com codificação.💀
Digite o Cursor AI, um editor de código de IA que rapidamente se tornou meu mentor e guia ao longo desta jornada. Veja como eu ultrapassei meus limites do design à pilha completa com assistência de IA e uma codificação séria de vibração.
Começando do Ground 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 pixels em formato SVG.
- Um design da figma para o site.
- Uma lista de recursos que eu queria no site.
- Absolutamente nenhuma idéia de como trazê -lo à vida.
Comecei configurando uma filial do site no Pixel Icon Library Github Repository. Então eu instalei o cursor AI, e o início foi surpreendentemente direto.
Configurando o projeto com o cursor AI
Depois de instalar o cursor, a próxima coisa foi verificar:
- Git – para controle de versão
- Node.js – Para o pacote NPM
Com os itens essenciais instalados, era hora de sujar minhas mãos. Clonei o repositório do meu sistema, abri a pasta do projeto no cursor AI e iniciei uma conversa com o assistente de IA embutido.
Tendo tido uma experiência sólida com Claude, optei pelo Claude 3,7 sonetos no modo de agente para me guiar pelo processo.
Com o primeiro prompt, expliquei brevemente o que queria criar e listei os recursos necessários, juntamente com uma estrutura básica do projeto, pedindo sugestões sobre qual estrutura (s) priorize a eficiência e a velocidade. O cursor ajudou com a estrutura de pastas necessária e sugeriu que eu continuo com HTML & Tailwind para o projeto. Ele até criou os arquivos necessários para iniciar o projeto. Veja como a estrutura da pasta cuidou 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 o Tailwind CSS e construindo a interface do usuário
Para minha surpresa, o cursor estragou a instalação do Tailwind e os comandos misturados da Tailwind v3.4 e v4.0. Então, estava na hora de eu acelerar! Fui à TailWindcss Instalation Docs e segui estas etapas:
-
Para instalar o Tailwind, abra o terminal e execute:
npm install tailwindcss @tailwindcss/cli
-
Para configurar o processo de construção, execute:
npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch
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 construir moléculas, organismos e páginas mais complexos, conforme o meu design do Figma.
Em seguida, instalei o pacote NPM da Biblioteca do Pixel Icon para usar os ícones no projeto. Aqui estão as etapas para instalar o pacote NPM:
Para a interface do usuário, adotei uma abordagem de elemento por elemento para manter as coisas organizadas e facilitar a reversão da iteração anterior, se necessário.
Aqui está a ordem:
- Nav bar
- Rodapé
- Seção de herói
- Barra de pesquisa
- Cartões de ícone e grade
- Ícone individual modal
Certifiquei -me de definir padrões, margens, raio de fronteira, cores e dimensões para todos esses elementos, além de adicionar estados do hover e clique. Além das propriedades do CSS, incluímos comportamentos e interações responsivos nos avisos também.
Para gerar uma visualização para todo o código que eu estava aprovando, usei a extensão do servidor ao vivo. Esta extensão lança um servidor de desenvolvimento local com um recurso de recarga ao vivo para páginas estáticas e dinâmicas em um clique!
Icon Data Challenge e implementação da funcionalidade de pesquisa
Com os elementos da interface do usuário, chegou a hora do verdadeiro desafio: exibir todos os ícones com seus detalhes – nome do ícone, tag do tipo de ícone e código SVG, garantindo a funcionalidade de pesquisa suave. Para superar isso, o cursor sugeriu uma abordagem estruturada:
- Criando um arquivo JSON com metadados de ícone e código SVG
- Carregando os dados do JSON para exibi -los com eficiência.
- Implementar a pesquisa com base no nome do ícone.
- Adicione filtros de pesquisa com base nas tags do tipo de ícone-sólido, regular, marcas/mídia social-icons, purrcats
Para automatizar ainda mais esse processo, pedi ao cursor para criar um script para adicionar todos os dados do ícone ao arquivo /data/icons.json.
Agora, com a pesquisa funcionando, os filtros de pesquisa no local e o modal de ícone funcionando como pretendido, tudo o que resta a fazer foi adicionar interações restantes à interface do usuário, testes completos e implantação!
Implantação e além
Depois que fiquei feliz com a interface do usuário e testei completamente todas as funcionalidades, chegou a hora do próximo desafio – implantação !!!
Como o projeto era um local estático, eu precisava de uma solução de hospedagem rápida, gratuita e fácil de manter. As páginas do Github eram um acéfalo! Oferecido:
- Integração perfeita com o repositório do GitHub, tornando a implantação sem esforço.
- É gratuito para usar e mais adequado para projetos estáticos como esse.
- As atualizações são super fáceis – tudo o que você precisa é de um compromisso!
Mas antes que eu pudesse empurrar todo o meu código para o repositório e implantar via páginas do GitHub, eu precisava limpar o código e verificar qualquer problema de produção. Depois de uma rápida frente e para trás com o cursor e alguns ajustes, tudo estava pronto para o lançamento!
Aqui está tudo o que você precisa fazer para implantar seu projeto nas páginas do Github:
- Empurre todo o seu código para o repositório do GitHub e verifique se é público
- Permitindo páginas do github para o repositório
- Vá para Configurações
- Clique em Páginas
- Defina o Filial para “Site”(A filial onde está seu código. No meu caso, estava na filial do site)
- Clique Salvar
- Opcional:
- Adicione seu domínio personalizado (como eu usei: pixeliconlibrary.com)
- Configure o DNS (graças a Richard por me ajudar com isso)
- Aguarde alguns minutos e seu site estará ao vivo!
Um produto para se orgulhar
Desde projetar ícones de pixel-art até codificar o meu caminho para um site totalmente funcional, este projeto me empurrou além da minha zona de conforto da melhor maneira possível. Olhando para trás, era mais do que apenas construir um site – tratava -se de ampliar meus horizontes criativos e perceber que, com a IA, a linha entre design e desenvolvimento está embaçada mais rápido do que nunca. E para mim, é como se uma estrada sem fim tivesse se abrindo na frente dos meus olhos.
Um designer para outro: se eu puder fazê -lo, você também pode. Então, o que você está esperando? Vamos conseguir construir!
Quer dar uma olhada no código por trás do site? Confira O repositório do Github!
