Mini proyecto - Vibe coding con IA - 2026
Pixel.
El pequeño asistente que acompaña a quien visita esta web. En treinta segundos responde lo que un recruiter con prisa quiere saber de mí.
El reto
Que alguien con prisa entienda mi perfil sin leer toda la página, y que la web tenga un detalle que se recuerde.
Qué hice
Un personaje original en pixel art, sus estados y un pequeño design system. Lo diseñé iterando con Claude y lo construí en HTML y JavaScript.
Resultado
Aparece al pasar el hero, responde cinco preguntas clave y se adapta al móvil y al fondo oscuro.
01 - El punto de partida
Una web que se lee en diagonal
Quien revisa portfolios tiene poco tiempo. Quería que, sin leer toda la página, cualquiera pudiera saber qué me diferencia, cómo trabajo con Producto y desarrollo y cómo uso la IA.
También quería que la IA tuviera presencia real en la web, no solo como un texto que dice que la uso. Decidí crear un personaje propio que hiciera de guía.
02 - Bocetos
Cinco versiones hasta dar con él
Cada versión respondía a lo que no funcionaba en la anterior. Lo diseñé directamente en el navegador para ver cada cambio en contexto.
-
Boceto 1 - Vectorial
Redondo y con manos. Simpático, pero no encajaba con una web tan técnica.
-
Boceto 2 - Primer pixel art
El pixel art conectó con el tono de la web. Era demasiado alargado y la mano distraía.
-
Boceto 3 - Más compacto
Más bajito y con coloretes. Quedaba demasiado redondo y dulce.
-
Boceto 4 - Cuadrado
Cerca. Pero el ojo único le quitaba expresividad.
-
Final - Bloque
Dos ojos con brillo, antena naranja y esquinas recortadas.
03 - La decisión
Tres direcciones, una elegida
Antes de cerrar la forma, exploré tres personajes en la misma retícula y con la misma paleta. Elegí el Bloque porque es el más expresivo con menos píxeles y el que mejor convive con el resto de la web.
04 - El sistema
Un design system de 16 × 16
Para que Pixel se vea siempre igual de nítido, fijé unas reglas mínimas: retícula, paleta, construcción, tamaños y movimiento.
- Contorno de 1 píxel en tinta, siempre cerrado.
- Sin antialiasing ni curvas: solo celdas.
- El naranja es solo un acento: la antena.
- Tamaños en múltiplos enteros: 32, 48, 64 y 96 px.
- Movimiento por fotogramas, con
steps().
05 - En la web
Cómo se comporta
- Aparece al pasar el hero y saluda con dos saltitos. Antes no molesta.
- Cinco preguntas pensadas para quien contrata: qué me diferencia, cómo trabajo, cómo uso la IA, accesibilidad y cómo seguir.
- Se cierra al pulsar fuera o con Esc. Solo se cierra la burbuja: Pixel se queda.
- Sobre el bloque oscuro gana un contorno claro y un halo para no perderse.
- En móvil se puede ocultar desde la burbuja, porque la pantalla es pequeña.
- Respeta "reducir movimiento": si el sistema lo pide, no anima nada.
06 - Cómo trabajé con IA
Yo decido, la IA acelera
Lo decidí yo
La idea, el tono, la forma final, qué responde y cuándo aparece. También qué descartar en cada boceto.
Lo aceleró la IA
Dibujar variantes en minutos, montar la hoja de estados y escribir el código. Con Claude iteré el diseño y con Claude Code lo integré en la web.
07 - Qué aprendí
Menos píxeles, más decisiones
En 16 × 16 cada píxel cuenta: mover un ojo una celda cambia la expresión entera. Me obligó a decidir rápido y a justificar cada cambio, igual que en un producto. Y confirmó algo que aplico en mi trabajo: la IA es más útil cuando sabes exactamente qué quieres probar.