Mini project - Vibe coding with AI - 2026
Pixel.
The little assistant that keeps visitors to this site company. In thirty seconds it answers what a recruiter in a hurry wants to know about me.
The challenge
Help someone in a hurry understand my profile without reading the whole page, and give the site a detail people remember.
What I did
An original pixel art character, its states and a small design system. I designed it iterating with Claude and built it in HTML and JavaScript.
Result
It appears once you scroll past the hero, answers five key questions and adapts to mobile and to the dark background.
01 - The starting point
A website people skim
People reviewing portfolios have little time. I wanted anyone, without reading the whole page, to know what sets me apart, how I work with Product and development, and how I use AI.
I also wanted AI to have a real presence on the site, not just a line saying I use it. So I created my own character to act as a guide.
02 - Sketches
Five versions until it clicked
Each version answered what didn't work in the previous one. I designed it directly in the browser to see every change in context.
-
Sketch 1 - Vector
Round and with hands. Friendly, but it didn't fit such a technical website.
-
Sketch 2 - First pixel art
Pixel art matched the tone of the site. It was too tall and the hand was distracting.
-
Sketch 3 - More compact
Shorter and with blush. It came out too round and sweet.
-
Sketch 4 - Square
Close. But the single eye took away its expressiveness.
-
Final - Block
Two shiny eyes, an orange antenna and clipped corners.
03 - The decision
Three directions, one chosen
Before settling the shape, I explored three characters on the same grid and with the same palette. I chose Block because it's the most expressive with the fewest pixels and the one that sits best with the rest of the site.
04 - The system
A 16 × 16 design system
So Pixel always looks equally sharp, I set a few minimal rules: grid, palette, construction, sizes and motion.
- 1-pixel outline in ink, always closed.
- No antialiasing or curves: only cells.
- Orange is just an accent: the antenna.
- Sizes in whole multiples: 32, 48, 64 and 96 px.
- Frame-by-frame motion, with
steps().
05 - On the site
How it behaves
- It appears once you pass the hero and says hello with two little hops. Before that, it stays out of the way.
- Five questions written for hiring managers: what sets me apart, how I work, how I use AI, accessibility and how to get in touch.
- It closes when you click outside or press Esc. Only the bubble closes: Pixel stays.
- Over the dark block it gets a light outline and a glow so it doesn't get lost.
- On mobile you can hide it from the bubble, because the screen is small.
- It respects "reduce motion": if the system asks for it, nothing animates.
06 - How I worked with AI
I decide, AI speeds things up
What I decided
The idea, the tone, the final shape, what it answers and when it appears. Also what to drop in each sketch.
What AI sped up
Drawing variants in minutes, putting together the state sheet and writing the code. I iterated the design with Claude and built it into the site with Claude Code.
07 - What I learned
Fewer pixels, more decisions
At 16 × 16 every pixel counts: moving an eye by one cell changes the whole expression. It forced me to decide fast and justify every change, just like in a product. And it confirmed something I apply in my work: AI is most useful when you know exactly what you want to test.