Hola de nuevo. He retomado este proyecto que, como suelo comentar en otros posts, es un espacio para aprender y experimentar.
Hace mucho tiempo le di un estilo sencillo; sin embargo, quise aventurarme a desarrollar, junto con la IA, una interfaz inspirada en la estética de Apple de los años 2000: el estilo Aqua. Conservamos algunos detalles e incluso creamos íconos propios para el sitio. Mira cómo quedaron:
Si deseas explorar más, puedes ver la colección completa en el repositorio de GitHub. Pero volviendo al sitio, por dentro luce de la siguiente manera:
Bueno, bueno… ¿qué tenemos de nuevo?
Me entusiasmé bastante con esta nueva estética y los íconos, pero el cambio no es solo visual. Dentro del sitio hemos implementado una serie de mejoras técnicas. Como mencioné, el proyecto se encuentra en constante desarrollo, así que aquí tienes un resumen práctico de lo avanzado hasta ahora:
- Páginas amigables para el SEO(y el usuario): Optimizadas para una mejor indexación y búsqueda.
- Layout de 2 columnas: Una columna dedicada al árbol de cheatsheets con sus carpetas y otra para el contenido principal.
- Scripts de utilidades: Herramientas que facilitan el desarrollo y las futuras integraciones.
- Skill de IA personalizada: Genera cheatsheets a partir de cualquier tema y los integra directamente en el contenido para mantener el sitio siempre actualizado.
- Navbar funcional: Una barra de navegación operativa que, aunque sencilla, cumple su propósito mientras preparamos mejoras adicionales.
- Soporte de favoritos: Una página simple que muestra tus contenidos guardados (personalmente, ya guardé varios sobre Java).
Hicimos mejoras pequeñas en estos módulos, pero me agradó bastante el resultado. Siempre puede quedar mejor, pero pienso que por ahora es un gran paso adelante ⭐.
El proceso del estilo Aqua
Guiar a la IA para que comprendiera exactamente la estética que buscábamos fue un reto interesante. Este proceso me llevó a crear herramientas adicionales que serán de gran utilidad en futuros proyectos. Uno de los pasos clave fue definir la identidad visual en un archivo AESTHETIC.md, el cual dicta cómo deben verse y sentirse los componentes del sitio.
Luego buscaba inspiración pero no encontré muchos casos reales, la mayoría bocetos o de Pinterest (bastante bonitos estos últimos).
La generación de íconos fue un proceso fluido una vez establecida la estética. Generamos un archivo DESIGN.md que fuimos refinando —la iteración es clave— hasta consolidar los colores y la tipografía final para su implementación en el código.
Cuando tuvimos los subproductos, los iconos fueron entendidos bien por la IA, solicité un prompt maestro para que podamos generarlos bajo una misma estética.
Los creé usando Nano Banana en la plataforma Flow. Te los dejo aquí para que puedas usarlos si deseas.
Conclusión
El proyecto está madurando para mí, sé que es poquito pero estamos logrando crecerlo, pronto habrán muchas otras cosas interesantes y a lo mejor compartirlo con la comunidad de una manera más activa. Hasta la próxima 👋.
AI Cheatsheets está en GitHub y puedes visitar el sitio en vercel.