Como diseñador, siempre me ha fascinado la intersección entre el diseño y la tecnología. La brecha entre diseñador y desarrollador siempre me ha intrigado, pero nunca imaginé que la cruzaría tan pronto.
La Biblioteca de Iconos Pixel de HackerNoon empezó como un divertido proyecto de diseño para crear iconos pixelados que capturaran la esencia nostálgica del lenguaje de diseño de HackerNoon, pero ¿transformar yo mismo un archivo de diseño de Figma en un sitio web completamente funcional? Eso no estaba en mis planes para 2025 hasta que descubrí Cursor AI. Con la biblioteca disponible en código abierto a través de GitHub, xFigma y NPM, siempre quisimos que estos iconos fueran más accesibles para la comunidad. La idea era simple: crear un sitio web donde diseñadores y desarrolladores pudieran explorar, buscar y descargar estos iconos para sus proyectos.
¿El reto? No tenía ni la más remota experiencia con programación.💀
Presentamos Cursor AI, un editor de código con tecnología de IA que rápidamente se convirtió en mi mentor y guía durante este proceso. Así es como superé mis límites, desde el diseño hasta el desarrollo completo, con la ayuda de IA y un buen programador .
Empezando desde cero
El primer paso fue establecer lo que quería construir y hacer un balance de lo que ya tenía:
- Una biblioteca de iconos de píxeles en formato SVG.
- Un diseño de Figma para el sitio web.
- Una lista de características que quería en el sitio web.
- No tengo ni la menor idea de cómo darle vida.
Empecé creando una rama de sitio web en el repositorio de GitHub de Pixel Icon Library . Después, instalé Cursor AI y empezar fue sorprendentemente sencillo.
Configuración del proyecto con Cursor AI
Después de instalar Cursor, el siguiente paso fue verificar:
- GIT - para el control de versiones
- Node.js - para el paquete NPM
Con lo esencial instalado, llegó el momento de ponerme manos a la obra. Cloné el repositorio en mi sistema, abrí la carpeta del proyecto en Cursor AI e inicié una conversación con el asistente de IA integrado.
Después de haber tenido una sólida experiencia con Claude, opté por Claude 3.7 Sonnet en modo agente para guiarme a través del proceso.
Con la primera solicitud, expliqué brevemente lo que quería construir y enumeré las características necesarias, junto con una estructura básica del proyecto, y pedí sugerencias sobre qué framework(s) priorizar en eficiencia y velocidad. Cursor me ayudó con la estructura de carpetas necesaria y me sugirió usar HTML y Tailwind para el proyecto. Incluso creó los archivos necesarios para iniciar el proyecto. Así quedó la estructura de carpetas después de esto:
├── index.html
├── src/
│ ├── style.css
│ ├── output.css
├── assets/
├── fonts/
├── scripts/
El siguiente paso fue configurar Tailwind y comenzar con la interfaz de usuario.
Configuración de Tailwind CSS y creación de la interfaz de usuario
Para mi sorpresa, Cursor falló la instalación de Tailwind y confundió los comandos de Tailwind v3.4 y v4.0. ¡Así que era hora de ponerme al día! Revisé la documentación de instalación de Tailwindcss y seguí estos pasos:
Para instalar Tailwind, abra la terminal y ejecute:
npm install tailwindcss @tailwindcss/cli
Importar Tailwind en el archivo src/style.css:
@import "tailwindcss";
Para configurar el proceso de compilación, ejecute:
npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch
Comience a usar Tailwind en HTML:
<link href="/src/output.css" rel="stylesheet">
Una vez que se instaló Tailwind y las clases estaban listas para usarse, comencé a definir colores, fuentes y otros átomos para el agente de IA antes de desarrollar moléculas, organismos y páginas más complejos según mi diseño de Figma.
Luego, instalé el paquete NPM de la biblioteca de iconos de píxeles para usar los iconos en el proyecto. Estos son los pasos para instalar el paquete NPM:
Instalar el paquete:
npm i @hackernoon/pixel-icon-library
Importa el CSS en tu HTML
(Moví todos los archivos de fuentes de iconos necesarios a la carpeta /fonts para facilitar el acceso).
<link href="/fonts/iconfont.css" rel="stylesheet">
Para mostrar un icono, agregue
<i class="hn hn-icon-name"></i>
Para la interfaz de usuario, adopté un enfoque elemento por elemento para mantener las cosas organizadas y facilitar la vuelta a la iteración anterior si fuera necesario.
Aquí está el orden:
- Barra de navegación
- Pie de página
- Sección de héroes
- Barra de búsqueda
- Tarjetas de iconos y cuadrícula
- Icono modal individual
Me aseguré de definir rellenos, márgenes, radio del borde, colores y dimensiones para todos estos elementos, además de añadir estados al pasar el cursor y hacer clic. Además de las propiedades CSS, incluí comportamiento responsivo e interacciones en las indicaciones.
Para generar una vista previa de todo el código que estaba aprobando, usé la extensión Live Server . Esta extensión inicia un servidor de desarrollo local con función de recarga en tiempo real para páginas estáticas y dinámicas con un solo clic.
Desafío de datos de iconos e implementación de la funcionalidad de búsqueda
Con los elementos de la interfaz de usuario instalados, llegó el verdadero reto: mostrar todos los iconos con sus detalles (nombre del icono, etiqueta de tipo de icono y código SVG), garantizando al mismo tiempo una búsqueda fluida. Para solucionar esto, Cursor sugirió un enfoque estructurado:
- Creación de un archivo JSON con metadatos de iconos y código SVG
- Cargando los datos del JSON para mostrarlos de manera eficiente.
- Implementar la búsqueda basada en el nombre del ícono.
- Agregue filtros de búsqueda basados en las etiquetas de tipo de ícono: sólido, regular, marcas/íconos de redes sociales, purrcats
Para automatizar aún más este proceso, le pedí a Cursor que creara un script para agregar todos los datos del ícono al archivo /data/icons.json.
Ahora, con la búsqueda funcionando, los filtros de búsqueda en su lugar y el ícono modal funcionando como corresponde, ¡todo lo que quedaba por hacer era agregar las interacciones restantes a la interfaz de usuario, realizar pruebas exhaustivas y la implementación!
Implementación y más allá
Una vez que estuve satisfecho con la interfaz de usuario y probé exhaustivamente cada funcionalidad, llegó el momento del siguiente desafío: ¡la implementación!
Como el proyecto era un sitio estático, necesitaba una solución de alojamiento rápida, gratuita y fácil de mantener. ¡GitHub Pages fue la solución perfecta! Ofrecía:
- Integración perfecta con el repositorio de GitHub, lo que hace que la implementación sea muy sencilla.
- Su uso es gratuito y resulta ideal para proyectos estáticos como este.
- Las actualizaciones son muy fáciles: ¡todo lo que necesitas es una confirmación!
Pero antes de poder subir todo mi código al repositorio e implementarlo mediante páginas de GitHub, necesitaba limpiarlo y comprobar si había algún problema en producción. Tras unas breves idas y venidas con Cursor y algunos ajustes, ¡estaba listo para el lanzamiento!
Esto es todo lo que necesitas hacer para implementar tu proyecto a través de GitHub Pages:
- Envía todo tu código al repositorio de GitHub y asegúrate de que sea público
- Habilitar páginas de GitHub para el repositorio
- Ir a Configuración
- Haga clic en Páginas
- Establezca la rama en " Sitio web " (la rama donde se encuentra su código. En mi caso, estaba en la rama del sitio web).
- Haga clic en Guardar
- Opcional:
- Añade tu dominio personalizado (como el que yo usé: pixeliconlibrary.com)
- Configurar DNS (Gracias a Richard por ayudarme con esto)
- ¡Espere unos minutos y su sitio web estará ACTIVO!
Un producto del que estar orgulloso
Desde el diseño de iconos pixel art hasta la creación de un sitio web completamente funcional, este proyecto me impulsó a salir de mi zona de confort de la mejor manera posible. En retrospectiva, fue más que simplemente crear un sitio web: se trató de ampliar mis horizontes creativos y darme cuenta de que, con la IA, la línea entre diseño y desarrollo se difumina más rápido que nunca. Y para mí, es como si se abriera un camino sin fin ante mis ojos.
De diseñador a diseñador: Si yo puedo, tú también. ¿A qué esperas? ¡A construir!
PD: ¡El sitio web de Pixel Icon Library ya está DISPONIBLE!
¿Quieres echar un vistazo al código del sitio web? ¡Visita el repositorio de GitHub !
