Polishing a vibe-coded app in an afternoon

My friend Devin built a life assessment app over a weekend, mostly by describing what he wanted to an AI and letting it write the code. People call this “vibe coding.” You rate nine areas of your life from 1 to 10, you get a chart of your answers, and a facilitator sees the whole group’s results in one dashboard.

He used it at a retreat he hosted, and I was one of the ten of us in the living room. Everyone scanned a QR code from a PowerPoint slide, filled it out on their phone, and we talked through the results together on the TV. It worked. That’s a real accomplishment, and it’s further than most ideas ever get.

I took the assessment along with everyone else, and I left grateful for the day and for the conversations it started. I also left with a designer’s itch. I could see a handful of things that would make the app easier to follow, and fixing them felt like the best thank-you I had to give. So I asked Devin if I could help. He graciously handed me the keys.

“It works” and “it’s clear” are different finish lines. Two days later I sat down with the code for one afternoon to see how far experience could move it. A few hours later I showed Devin the result. He was excited, he loved how it looked, and he welcomed every change into his app.

AI wrote most of the code in both versions. The difference was who was steering it and what they knew to ask for.

Start with contrast, hierarchy, and spacing

The afternoon started with the boring stuff. That’s usually where the biggest gains are.

The original had light gray text on a light gray background, so the instructions faded into the page. Headings and body text were the same typeface at different sizes, so nothing told your eye where to start. Padding varied from card to card. None of these are bugs, so AI tools rarely flag them. They just make an app feel slightly off.

Before and after: the same home screen on a phone.

The fixes were small. I darkened the text, paired a serif heading font with a clean sans-serif for everything else, made the card spacing consistent, and gave each screen one obvious primary button.

You can do this to your own tools today. Open a screen and ask: what’s the one thing someone should do here? Make that the single clear call to action, then give it the same look and place on every page, so people stop hunting for the next step.

Give every screen a path

The original admin dashboard put everything on one long page: refresh controls, two export buttons, filters in collapsible menus, then the charts. It was all there, but it didn’t tell a story.

Before: controls and filters take up the first screen.

After: the answer first, with the controls moved to a sidebar.

I split it into four tabs: Overview, Categories, Manage, and Share. The controls moved into a sticky sidebar, and the two export buttons became one that says exactly how many responses it will export.

The Share tab replaced the PowerPoint slide. It shows a large QR code next to a sample result, so the person running the session puts that tab on the TV and people know what they’re signing up for.

Small bits of guidance got the same treatment. If you rated too many areas a 5, the old warning said you’d rated “many” of them that way. The new one says how many and which ones, and how many to change.

Build the screen for how it’s actually used

Here’s the scene the app had to serve: ten people in a living room, gathered around one TV, talking through each part of their lives together. Nobody is clicking around. One person drives, and everyone else needs to see their own score, see everyone else’s, and follow along.

The original app had no screen for that moment. So the biggest addition was a page for each category, built for the TV. Each page has a short description of the category, so nobody has to ask what “Growth” covers. It shows one dot per person with their initial, so you can find yourself and see who’s near you, plus a ranked list of names and the group’s median. Breadcrumb icons along the bottom show where you are in the nine categories, and a “Next” button moves the group on. The room always knows which part of the conversation it’s in.

New: one page per category, made to be talked through on a shared screen.

What to leave off mattered just as much. It was tempting to show the mean and the mode next to the median. I kept the median alone, because the dot plot already shows every individual score and more numbers would compete with it.

Use icons and color to give the data weight

This was the most fun part of the afternoon.

Each category had been a colored dot. Now each one has its own icon in a soft tinted circle, and the icons appear everywhere the category does. Picking them took a few rounds. My first pick for Fun was a party popper, which is nine tiny shapes and turns to mush at small sizes, so it became a smile. Spirituality went through a flower and a sun before landing on a single sparkle. Health started as a heart and looked too much like Love, so it became a pulse line. And hearts look off-center even when they’re perfectly centered, so a few icons got nudged a pixel or two until they looked right.

The slider now shows you where a score sits on the scale.

Then the color. Scores now run on a heat map from red (needs the most work) to green (couldn’t be better), and it’s the same scale everywhere: the slider, the score squares, and the slices of the life wheel chart. A 2 looks like a 2 before anyone reads the number.

Same scores, same chart. Color and icons do the reading for you.

Test with realistic data on real devices

Two small tools made the pace possible.

First, a way to fill the app with realistic sample people in one click. The assessment coaches people to avoid a safe 5, so the fake data avoids it too. A design that looks good with tidy test data can fall apart with real answers, and I’d rather find that out at my desk than at the retreat.

Second, running the app on the local network, so I could open it on an actual iPad and phone while I worked. Most participants use it on their phone, and a narrow screen catches problems the desktop never shows.

Not everything belonged in the afternoon. Devin wants to group results by event so each retreat keeps its own data. That one needs actual decisions about how data is stored and who can see it, so it became a written plan instead of a rushed build.

What an afternoon is worth

Vibe coding got Devin from an idea to a working tool, and I don’t want to undersell that. What it didn’t give him was the judgment about what a room full of people needs to see. That part took an afternoon from someone who has spent 15 years learning where apps go wrong.

I didn’t do it as a pitch. I did it because a friend made something good, the day meant a lot to me, and I knew how to make it better. That’s how we like to work at Medeski Solutions. We’d rather build on what you’ve already made, alongside you, than tear it down and start over. And when we see a way to leave something better than we found it, we want to take it.

If you’ve built something that works but doesn’t feel finished, let’s talk.