Overview

experimental UX concept · 2026

What if movie night didn't end in a 20-minute scroll?

A gamified movie picker

role
UX Designer + builder
timeline
One day lol
skills
Vibe Coding, Design System, AI-assisted workflow
tools
Claude Code, Google Stitch, Github, VS Code, Gemini - Nano Banana 2

The Problem

You know the drill. Friday night, time to watch a movie, zero agreement. You've been scrolling Netflix and Letterboxd for 20 minutes and your movie meal has gotten cold.

ReelFeel flips the model. Instead of browse stalling, you answer a quick set of questions and get a match.

Planning + lo-fi

The Claude logo

Lo-fi via Claude

Before any visuals, I mapped out what the app actually needed; core user need, key flows, constraints. A lightweight PRD to get aligned with myself first.

Then I asked Claude to generate a lo-fi based on that spec.

The flow made sense. The visual direction? Not there yet. Played around with different type treatments, layouts, color approaches but still wasn't landing.

The pivot: gamified

What if your vibe can't be put into words?

It's a feeling living in your head. A visual. A mood. Not something you type into a search bar.

The original direction was too generic, so I reframed it.

A gamified flow of quick, visual questions that narrows down to one confident recommendation.

Finding the aesthetic

Once the interaction model clicked, the visual direction followed.

The gamified mobile app format called for something tactile and lo-fi.

The Mobbin logo

UI patterns via Mobbin

I landed on a retro sketchbook / tamagotchi aesthetic: hand-drawn energy, monospace type, a muted analog palette while using Mobbin to gather more inspo.

  • Inspiration: a white Sony Pocket Station handheld with a small grey screen showing a pixel cat's face, and five round buttons beneath it.
  • Inspiration: a page from a hand-drawn sketchbook diary in black pen: a to-do list with little faces, small comics, stars and space characters.
  • Inspiration: a pixel-art desktop with a blue profile window for Yuidust, a pixel avatar with a stats list, and small likes and dislikes windows over a green hill.
  • Inspiration: Angel Gotchi virtual pets in pastel white, pink and blue shells, with wings, ball chains and square pixel screens.
The Gemini logo

Logo via Gemini/ Nano Banana 2

Generated and refined the mark to fit the editorial-meets-cinema direction.

A Gemini image generation in progress: an enamel pin on cream card with the words TELEVISION TABBY arched above a pixel black cat sitting beside a small TV with a heart on its screen, and the line KNEADING THE CONTENT SINCE 2024 beneath.The finished ReelFeel mark: a black pixel cat sitting beside a small TV with a heart on its screen.

Building with Google Stitch + Claude

The Google Stitch logo

Claude Code + Google Stitch

Built in Claude Code with the Google Stitch API I added to generate and refine the UI.

The output aligned closely with the retro sketchbook direction with minimal back and forth, high fidelity to the design intent.

Final product

The GitHub logo

Deployed via GitHub

Designed and deployed in a day. A fun, gamified movie picker where the flow moves fast and you walk away with one solid recommendation. No scrolling, no overthinking, just pick your vibe and go.

https://zjaffrey.github.io/reelfeel/

Currently ✍️ 💭

Since this was built in a day, there's already a list of things I want to add.

  • Waiting on TMDB API access to pull in a real movie catalog (Letterboxd doesn't have a public API unfortunately).
  • Also planning to add a "seen it" toggle so users can mark films they've already watched and have that saved to their profile.
  • More to come.

Reflections

This was a fun, quick vibe code project that came together faster than expected. Calling the Google Stitch API within Claude Code made the whole build feel fluid, generating and refining UI all in one place just makes sense.

Currently expanding it so I can use this with my friends!