Product Design · Vibe Coding
Bloom.
I wanted to learn Claude Code by building something real. Not a todo app — something with actual design decisions, emotional texture, and enough complexity to show me where the collaboration broke down.
1 day
idea to working app
8
plant archetypes
6
personality traits
Hero — Bloom V1 homepage: 'Every relationship has a nature'
The concept
Plant care needs are surprisingly good metaphors for people
A Monstera needs full sun and constant water. A Cactus thrives on neglect. Most compatibility tools ask about values or love languages. Bloom asks about emotional metabolism — how you actually function day to day, not how you'd like to.
Six plant traits map to six human ones. Water frequency becomes how often someone needs quality time and connection. Light needs map to social energy — full sun is extrovert, low light is introvert. Root retention is how much alone time you need before you can show up for others. Temperature sensitivity is your need for stability versus capacity to handle change.
You answer 13 questions. The algorithm scores you against 8 plant archetypes and finds your closest match. Then your partner does the same. The result is a pairing — Monstera meets Chinese Elephant Ear — with a breakdown of where you align and where you're different, and what to do about it.
Trait map — plant care needs (water, light, roots, humidity, temp, growth) mapped to human personality equivalents
Question design — Claude conversation rebuilding the quiz questions in a warm, non-clinical voice
The build
I'm the product partner. Claude Code is the developer.
I established the collaboration model in the first conversation. I handled the product thinking — the concept, the trait framework, the question design, the copy tone. Claude built everything.
The concept came out of a live chat where I brought the plant analogy and Claude helped map it to human behavior, asked sharper questions about what the quiz was really measuring, and pushed the product thinking further than I'd taken it alone — surfacing real relationship friction points like after-work energy management and social calendar negotiation that I hadn't articulated yet.
Then I opened a terminal. Claude wrote the entire app in one pass: quiz data, 8 plant profiles, scoring logic, 24 suggestion cards, quiz flow, results page, homepage. Watching the file list appear one by one is a particular kind of strange.
"Think of it like: I'm the product partner, Claude Code is the developer. You're the founder talking to both."
Collaboration model — Claude establishing 'I'm the product partner, Claude Code is the developer'
Terminal build — Claude Code writing the full app (quiz data, scoring, UI) in one pass
V1
Functional. But the cards felt like data, not people.
V1 worked. The homepage was clean and editorial — "Every relationship has a nature." The quiz flowed. The results page paired you with another plant and showed trait bar charts side by side.
But the results felt surface-level. The trait bars were accurate — they were doing the right job — but they didn't tell you anything meaningful about who you were as that plant. You got data. You didn't get a mirror.
There was also a moment that looked like a bug but wasn't. Claude debugged why two plants were showing no differences: "It's not a bug — it's the data. Look at their trait matrices side by side." Monstera and Chinese Elephant Ear scored within one point on seven out of seven traits. They really were almost identical. Claude offered to handle it gracefully. I directed how.
V1 results page — Monstera meets Chinese Elephant Ear with trait bar charts side by side
V1 results with plant cards flipped — descriptions visible but writing still surface-level
Debug moment — Claude identifying that two plants scoring identically isn't a bug, it's the data
Evolution
Three days later. Two things changed. The gap closed.
I came back with a clear list of what felt off. The plant cards needed to feel like portraits, not profiles. And the compatibility section needed to do actual interpretive work — not just surface the data, but tell you what it meant.
Plant descriptions became character studies. "You don't open up for just anyone, and that's not a flaw, it's discernment. When the conditions are right you are one of the most loving, attentive partners there is. The person who takes the time to understand you gets something truly rare." That's a different thing to read than a bar chart.
The compatibility breakdown split into Where you align and Where you're different. Not just which traits matched — but what that means in practice, with practical pull quotes as advice. "Keep checking in even when things are good. The couples who stay emotionally close aren't the ones who talk when things are hard. They're the ones who never fully stop talking."
The iteration loop: Claude built, I reviewed on localhost, I redirected or approved. Three files. Fifty seconds of thinking. Meaningfully better.
Evolved plant cards — descriptions rewritten as character portraits, not trait profiles
'Where you align / Where you're different' compatibility breakdown with practical pull-quote advice
Terminal — Claude confirming iteration complete: 'Check localhost:3000 — run a quiz and see if the results feel more nuanced'
What I learned
The bottleneck shifted. The work didn't disappear.
Vibe coding isn't about typing less code. It's a different kind of creative work — you're directing rather than building, which means the bottleneck shifts from implementation to decision-making.
The places I spent real time: the concept, the trait framework, the question design, the copy tone. Not scaffolding. Claude can build scaffolding. What it can't tell you is whether the quiz questions feel like an interrogation or a conversation, or whether the results page earns the emotional weight it's asking for. That judgment is still yours.
What surprised me most was the debugging moment. "It's not a bug — it's the data." Claude looked at the trait matrices, identified the real issue, and offered a solution that was actually better than what I'd have reached for. That was Claude acting like a product partner. I didn't fully expect it, and it's changed how I think about what these tools are actually good at.
If I were doing it again: I'd define the visual design more intentionally upfront. The aesthetic emerged fine, but I made reactionary decisions rather than intentional ones. Next time I'd spec the design system before the first build command.
Built with
Claude Code · Next.js · TypeScript · Tailwind CSS
Timeline
March 2026 — two sessions, three days apart