Introduction
Hemi started from a real problem: my monthly reflections were scattered across too many places — a Hobonichi planner, a Notion doc, social media posts. The turning point was a hand-drawn spread in my planner — a structured page on the left with goals and statistics, and a creative page on the right capturing everything else: a quote of the month, favorite memories, what I was listening to and watching, and reflections on what I was letting go and bringing in. That sketch became the blueprint for Hemi: a digital version I could fill in quickly, access from anywhere, and use to pull insights over time. I designed and directed the entire build through vibe coding — using AI (Claude Code) to translate my design vision into a working, deployed product.
Vision & Inspiration
I knew exactly what I wanted Hemi to feel like: muji-inspired Japanese minimalism. Quiet, warm, analog. Everything lowercase. Muted pastels. Generous whitespace. No harsh edges or aggressive UI patterns.
- Quiet over loud — muted colors, thin borders, small type.
- Analog warmth — linen textures, wooden shelf planks, page-flip shadows.
- Color as mood — each month gets its own color that tints the entire spread.
- Soft transitions always — every element fades in and out gently.
The app is built around the metaphor of a physical bookshelf — a shelf of journals, one for each year. You pull a book off the shelf, flip to a month, and land on a two-page spread. My original vision was more immersive — a full library scene with a window and couch. But I realized that would be difficult to execute well through vibe coding, and simplifying to just shelf planks and book spines was the stronger choice — cleaner, more minimal, more aligned with the muji aesthetic.
The Vibe Coding Process
Vibe coding means building software by describing what you want in natural language and having AI write the code. This wasn't "AI generated the app." It was a deeply collaborative process where I directed every design decision through conversation.
The 3D page-flip transition is a good example. The first version was clunky — pages flashing incorrectly, wrong pages showing mid-flip, stiff animation. Getting it to feel like smoothly turning a page in a real book took many rounds of design feedback until it finally felt right.
Key Features
All features below are shown with sample data for demonstration.
Monthly Spreads
The heart of Hemi. Each month is a two-page spread — the left page for structured tracking (theme, stats, goals, reflection) and the right page for expressive content (quotes, photos, songs, vibes). Content is fixed-size like real paper — no scrolling, which encourages intentional editing over endless journaling. One of my favorite details is the Spotify embed — each month has a song of the month that you can play directly in the journal, because music is such a big part of how I remember a period of time.
Sky Garden
An alternative home view where journals float in a sky scene with watercolor clouds, falling petals, and twinkling sparkles. A live sky mode shifts based on time of day — from soft morning light to a moonlit night sky with four-pointed stars and shooting stars. Users can also choose the season, which changes the flowers and elements drifting across the sky, and adjust the wind speed, which affects how everything moves.
Hemi Wrapped
Inspired by Spotify Wrapped, Hemi automatically compiles insights from all 12 months into a read-only year recap — recurring themes, a timeline of month-by-month colors, your top songs across the year pulled from each month's Spotify embed, favorite memories, and a summary of what you let go of and brought in.
Outcome
Hemi is live at hemi.rubyqian.com with a pre-filled demo at hemi.rubyqian.com/demo. By default, everything runs locally in the browser — no accounts required. Users can optionally sign in with Google to sync their data across devices, and the only backend is for image uploads.
I've been using Hemi throughout 2026 to recap my months, and it's become a genuine part of my routine — something I look forward to filling in at the end of each month. I'm now slowly testing it with friends to get feedback on the experience. Hemi is currently designed for desktop, which is intentional — the two-page spread layout mirrors the physical journal that inspired it, and the level of detail in each spread benefits from a larger screen.
Reflection
Learnings
Clear prompting is everything. The more precisely I could describe what I wanted upfront — the aesthetic, the layout, the feel — the faster and better the results were. Vibe coding works best when you and the AI are fully on the same page before building starts. Once that foundation was set, it let me focus on product thinking over implementation — instead of worrying about whether something could be built, I could just try it and see.
Challenges
Communicating visual intent without technical vocabulary. I couldn't say "reduce the border-radius to 8px" — I'd say "make it feel less rounded" or "this looks too bubbly." Some things took many rounds to get right, like the 3D page-flip transition — it took a long time before the flip felt smooth and natural instead of clunky. Over time, I developed a shared language with the AI that made iteration faster, but translating a feeling into words was always the hardest part.
What's Next
Currently expanding Hemi with new journal types — a travel journal and a cafe journal — and working on making the experience responsive across screen sizes.
