The Bean Bag Theory: coffee tracking taken seriously
They say you are not your user. Until you are, I say.
As a coffee drinker, I’ve been dreaming of an app where I can easily log the beans I try, record taste notes, grade, and document my coffee journey.
No KPIs, no monetisation.
I decided that this is a perfect use-case for vibe-coding.
Goals:
- build an app (native or PWA) I can use on my phone;
- test the [newly launched] Figma MCP-to-Claude Code connection.
- explore computer vision and DB integration.
Workflow:
Step 1: Brainstorm with Claude Framing my app idea in terms of common UI patterns got me relatively close to something that resembled a product. But there definitely were issues.
Step 2: Technical set-up Have Claude Code running in the terminal, connect the Figma MCP, import the frames. Prompting your way out of a weak LLM-generated prototype is too resource-intensive.
Step 3: Landing on a design Experimenting is still better in Figma. Besides, proper components, colours, tokens, and naming had to be set up.
Step 4: Import back into Claude, connect the necessary APIs and get going!
Results and thoughts
Two days later, I had a functional PWA that works as intended. As its sole user, I would 100% recommend it.
Vibe-coding feels empowering and delivers tangible, functional results.
But…
Why this is not real design:
- I didn’t need to account for any edge cases, because I knew exactly how my app would be used.
- Everything runs locally, so I didn’t have to keep track of vulnerabilities that would be unacceptable in real life.
- To make it work, it was enough to have a very rudimentary UI component library and just a handful of tokens in Figma, with no proper documentation.
- There was no discovery, no usability testing, and no KPIs.
Thanks Claude, Figma, and Notion for working so well together.
