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 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. Biblioteca de Iconos Pixel ¿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 en el . Después, instalé Cursor AI y empezar fue sorprendentemente sencillo. rama de sitio web repositorio de GitHub de Pixel Icon Library Configuración del proyecto con Cursor AI Después de instalar Cursor, el siguiente paso fue verificar: - para el control de versiones GIT - para el paquete NPM Node.js 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é y seguí estos pasos: la documentación de instalación de Tailwindcss 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 . 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. Live Server 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 en " " (la rama donde se encuentra su código. En mi caso, estaba en la rama del sitio web). rama Sitio web Haga clic en Guardar Opcional: Añade tu dominio personalizado (como el que yo usé: pixeliconlibrary.com) Configurar DNS (Gracias a por ayudarme con esto) Richard ¡Espere unos minutos y su sitio web estará ACTIVO! https://pixeliconlibrary.com/?embedable=true 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 ya está DISPONIBLE! sitio web de Pixel Icon Library ¿Quieres echar un vistazo al código del sitio web? ¡Visita el ! repositorio de GitHub
