A Designer's Vibe Coding Experiment
Claude
Vibe Coding
APP
Play Showreel
A Designer's Vibe Coding Experiment
Claude
Vibe Coding
APP
You ask, I answer.
FAQs
You ask, we answer.
FAQs
Why did I build Bookey?
I've always loved reading, but never had a good way to remember the journey — not just the books, but how I felt reading them. Existing apps felt like databases. I wanted something that felt more like a diary.
Why vibe coding — and why Claude?
What did I actually make?
What was the hardest part?
What did I learn?
Why did I build Bookey?
I've always loved reading, but never had a good way to remember the journey — not just the books, but how I felt reading them. Existing apps felt like databases. I wanted something that felt more like a diary.
Why vibe coding — and why Claude?
What did I actually make?
What was the hardest part?
What did I learn?
Designed by me, built with Claude
Figma
Features Built
Screens Designed
Iterations
Weeks to Ship
Claude
Here's a closer look at what I built — the features that make my reading journey worth remembering.
Features
Your Reading Year, at a Glance
Every day I read, every month I felt — all mapped in one view
Books I'm Dreaming Oft
What I've read, what I'm reading, what's coming next
Memories That Stay
Photos, words, and timestamps — saved in the moment, kept forever
Badges & Milestones
Every book finished is a milestone worth celebrating
Designed by me, built with Claude
Figma
Features Built
Screens Designed
Iterations
Weeks to Ship
Claude
Here's a closer look at what I built — the features that make my reading journey worth remembering.
Features
Your Reading Year, at a Glance
Every day I read, every month I felt — all mapped in one view
Year Heatmap
Month View
Mood Color
Reading Progress
Every day I read leaves a mark on the calendar. Watch the whole year fill up as a heatmap — then tap into any month to see exactly what I read, when, and color-code it with how that month felt.
Books I'm Dreaming Oft
What I've read, what I'm reading, what's coming next
Reading List
Tracking
What's Next
personal list built entirely by me. What I've finished, what I'm currently reading, and what I can't wait to start — all in one place, no algorithm telling me what's next.
Memories That Stay
Photos, words, and timestamps — saved in the moment, kept forever
Timeline
Photo Capture
In-the-moment
A photo, a few words, a timestamp — saved right in the middle of a chapter. Each memory lives in a timeline, so I can go back and remember not just what I read, but exactly where I was in life when I read it.
Badges & Milestones
Every book finished is a milestone worth celebrating
Milestones
Achievements
Reading Streak
Every book I finish unlocks something new. A small reward that turns reading into a habit worth keeping — and makes the milestones feel real.
Here's a closer look at what I built — the features that make my reading journey worth remembering.
Features
Your Reading Year, at a Glance
Every day I read, every month I felt — all mapped in one view
Year Heatmap
Month View
Mood Color
Reading Progress
Every day I read leaves a mark on the calendar. Watch the whole year fill up as a heatmap — then tap into any month to see exactly what I read, when, and color-code it with how that month felt.
Books I'm Dreaming Oft
What I've read, what I'm reading, what's coming next
Reading List
Tracking
What's Next
personal list built entirely by me. What I've finished, what I'm currently reading, and what I can't wait to start — all in one place, no algorithm telling me what's next.
Memories That Stay
Photos, words, and timestamps — saved in the moment, kept forever
Timeline
Photo Capture
In-the-moment
A photo, a few words, a timestamp — saved right in the middle of a chapter. Each memory lives in a timeline, so I can go back and remember not just what I read, but exactly where I was in life when I read it.
Badges & Milestones
Every book finished is a milestone worth celebrating
Milestones
Achievements
Reading Streak
Every book I finish unlocks something new. A small reward that turns reading into a habit worth keeping — and makes the milestones feel real.
When Claude Designs the Logo
Fun
The First Spark
A closed book, surrounded by orbiting dots. Playful and energetic — but something wasn't quite right yet
The First Spark
A closed book, surrounded by orbiting dots. Playful and energetic — but something wasn't quite right yet
The First Spark
A closed book, surrounded by orbiting dots. Playful and energetic — but something wasn't quite right yet
Softer, Lighter
Same idea, lifted into lavender. Warmer, more inviting — closer to the feeling I was after
Softer, Lighter
Same idea, lifted into lavender. Warmer, more inviting — closer to the feeling I was after
Softer, Lighter
Same idea, lifted into lavender. Warmer, more inviting — closer to the feeling I was after
Opening Up
An open book changed everything. Suddenly it felt alive — a story in progress, not one sitting on a shelf
Opening Up
An open book changed everything. Suddenly it felt alive — a story in progress, not one sitting on a shelf
Opening Up
An open book changed everything. Suddenly it felt alive — a story in progress, not one sitting on a shelf
Finding the Balance
Light and airy, the open book with floating dots finally found its rhythm. Soft, balanced, and starting to feel like Bookey
Finding the Balance
Light and airy, the open book with floating dots finally found its rhythm. Soft, balanced, and starting to feel like Bookey
Finding the Balance
Light and airy, the open book with floating dots finally found its rhythm. Soft, balanced, and starting to feel like Bookey
Into the Light
The same energy, but in light mode. Airy, clean，surprisingly fresh and simple
Into the Light
The same energy, but in light mode. Airy, clean，surprisingly fresh and simple
Into the Light
The same energy, but in light mode. Airy, clean，surprisingly fresh and simple
The One, in Light
An open book, dots tracing a journey above it. Reading is a path through life — and this felt like the right way to show it
The One, in Light
An open book, dots tracing a journey above it. Reading is a path through life — and this felt like the right way to show it
The One, in Light
An open book, dots tracing a journey above it. Reading is a path through life — and this felt like the right way to show it
The One, in Dark
Same journey, quieter mood. Reading can be solitary too — and the dark mode leans into that
The One, in Dark
Same journey, quieter mood. Reading can be solitary too — and the dark mode leans into that
The One, in Dark
Same journey, quieter mood. Reading can be solitary too — and the dark mode leans into that
When Claude Designs the Logo
Fun
When Claude Designs the Logo
Fun
Design System — Two Ways
Building
Figma
Figma
Full control, every token hand-placed. More effort, but every decision felt intentional — and easy to tweak when the design evolved
Claude
Claude Design
A complete, structured system generated in minutes. More polished out of the box, but harder to customize once it was set. Less flexible, but impressive as a starting framework
Versus
Versus
Using Claude Design made me realize that the hardest part of a design system isn't building it — it's knowing what you need before you build it. Claude gave me structure instantly, but without design intuition behind it, structure alone isn't enough. The best systems aren't generated. They're decided.
Takeaways
Using Claude Design made me realize that the hardest part of a design system isn't building it — it's knowing what you need before you build it. Claude gave me structure instantly, but without design intuition behind it, structure alone isn't enough. The best systems aren't generated. They're decided.
Using Claude Design made me realize that the hardest part of a design system isn't building it — it's knowing what you need before you build it. Claude gave me structure instantly, but without design intuition behind it, structure alone isn't enough. The best systems aren't generated. They're decided.
Takeaways
Design System — Two Ways
Portfolio
