Building AffinityFlow: What Vibe Coding Taught Me About Designing Product
I didn’t expect a class project (HCDE 530) to change how I think about product design.
As an HCDE graduate student, I spend a lot of time doing qualitative research — interviews, coding transcripts, and building affinity diagrams.
The hardest part isn’t organizing the data.
It’s understanding everyone else’s interpretations.
In large research projects, researchers are usually familiar with their own interviews but not with everyone else’s transcripts and codes. Before synthesis can even begin, a lot of time is spent rebuilding context.
I started wondering:
What if AI could help researchers organize qualitative data while preserving privacy and context?
That’s how AffinityFlow started.
Vibe Coding Didn’t Start with Code
I didn’t open Cursor and ask it to build an app.
I started by building the workflow.
Using HTML mockups, I mapped every step of the experience before adding any functionality.
Only after the flow felt right did I start implementing features one by one.
One lesson I learned:
Thick context is the enemy of good AI outputs.
I created separate Cursor chats for different features — file uploads, clustering, exports, and privacy pipelines — which made AI much more reliable.
AI as a Collaborator, Not an Autopilot
Cursor helped me recommend a stack:
- Next.js
- TypeScript
- Prisma
- Supabase
- Vercel
But I cross-checked every recommendation before adopting it.
AI accelerated implementation, but the product decisions were still mine.
Get Ning Zhang’s stories in your inbox
Join Medium for free to get updates from this writer.
I also had to fix plenty of issues myself:
- anonymization failures,
- activity log bugs,
- batch ingestion problems,
- export edge cases.
Vibe coding is not about hitting Run and hoping for the best.
It’s about knowing what to question.
The MVP Worked… But It Looked Like AI
After shipping the first version, I realized something:
The product worked, but it didn’t feel designed.
The UI was inconsistent and looked obviously AI-generated.
So I paused feature development and built a design system.
I used Codex to analyze reference websites and generate a design.md, then asked Cursor to create multiple design variants before deciding on a final direction.
Typography, spacing, and visual principles matter more than perfect buttons.
What I Learned
This project changed how I think about product design.
AI didn’t replace product thinking.
It amplified it.
The real work became:
- framing problems,
- making decisions,
- evaluating tradeoffs,
- and maintaining quality.
As designers gain the ability to build, our value shifts from producing screens to orchestrating systems.
And maybe that’s what vibe coding really is:
Let AI write the code.
You design the product.
