How I Build Apps That Don't Look Vibecoded
You can spot a vibecoded app from a mile away.
I've made a few of those myself. Only launched a few because I keep getting sidetracked by tweaking the design and branding. It's probably the designer in me, but if I publish something I'd like it to look nice otherwise I won't use it myself.
Taste is subjective and AI tools can build anything in no time, but spend 10 minutes browsing popular apps in the app store and I bet you won't find an app that looks like a MySpace page from the early 00's. Who wants to use a calorie tracking app in a brutalist design style? It's a fun idea, but I doubt it's useable for more than 5 minutes.
AI can make beautiful designs, but it needs help and proper guidance. I do too. Give me a blank Figma file and tell me to make something awesome and I'd create generic designs too.
There are many factors to a successful app besides good design, but I'm a designer, so let's focus on that.
Every time I start a new app project I slowly fine tune my design process and have landed on a workflow that works for me.
Get your wallets out and pay attention because it involves a few (too many) subscriptions. Just a note: I'm switching between tools all the time, buying and cancelling subscriptions and taking advantage of free tiers whenever possible because I'm still tweaking and testing my process and I sadly don't have an unlimited budget (wife keeps saying no to more subscriptions).
But TL;DR: Just use Claude Code. It'll get you 90% of the way there.
Step 1: Idea to PRD
Get an idea, talk to an LLM to narrow the scope to a quick MVP. I use Claude for this. Describe what I want, let it poke holes, cut features until it's something I can actually ship.
The output is a simple PRD. Nothing fancy. Just enough to keep me focused.
Step 2: First Prototype
Feed the PRD to Claude Code, Vibecodeapp, or Rork. Depends on the project and my mood.
After generation, I check functionality and flows. Does it work? Does the navigation make sense? I'm not looking at design yet. Just: does this thing do what it's supposed to do?
Step 3: Screen Inventory
Once a rough MVP is working, I have the app generate a list of all screens and functionality. This becomes my checklist for the design phase.
Step 4: Design Exploration
This is where it gets fun. I feed that screen list to Variant AI, Aura.build, v0, Superdesign, and try random styles until something clicks.
Sometimes that thing that clicks is just a random pin or post on Dribbble that made me go "could be fun to make my app in this style." and I ask one of these design tools to try out a style.
When I design for myself I default to simple and minimalistic with a focus on typography. I have a background in editorial design. But I sometimes try to venture into other styles. Mascot-heavy apps with a playful aesthetic. Something bold and experimental.
These experiments more often than not fail and I pivot back to my default style just to get the project moving again or create something I know works. That's fine. The point is to try.
Step 5: Into Figma
Export the design to Figma using the html.to.design chrome plugin or native import if available.
This is where I fiddle. Adjust spacing, fix inconsistencies, make it feel like mine. It's also a lot quicker and cheaper than keep telling AI to "please try another font and make the spacing better" over and over again.
Step 6: Back to Code
Feed the design back to the app builder, or download the code and open it in Cursor. Cursor is cheaper for experimentation when I'm not 100% sure what I'm looking for.
Step 7: Before Downloading
Before I pull the code out, I make sure to have the app builder integrate RevenueCat, onboarding flow, paywall, and backend. I don't want to mess with that myself later.
The Point
AI builds fast. That's the easy part.
The hard part is making it look like someone cared. That still takes taste, iteration, and knowing when to stop experimenting and just ship.
I'm still figuring it out. But at least my apps don't look vibecoded anymore.
And since a lot of people asked me about my Claude Code setup and use of skills, I'll get to that next time. I found a few good ones :)
Tools - (Some are affiliate links)
Aura.build
Superdesign.dev
Magicpatterns.com
Magicpath.ai
html.to.design