{"id":"2023339023381467556","url":"https://x.com/froessell/status/2023339023381467556","text":"","author":{"name":"✌︎ frederik ✌︎","username":"froessell","avatarUrl":"https://pbs.twimg.com/profile_images/1649670410848333825/yNqgk-ys_200x200.jpg"},"createdAt":"Mon Feb 16 10:09:49 +0000 2026","engagement":{"replies":69,"retweets":326,"likes":5060,"views":530324},"article":{"title":"How I Build Apps That Don't Look Vibecoded","previewText":"You can spot a vibecoded app from a mile away.\nI'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","coverImageUrl":"https://pbs.twimg.com/media/HBGR2dGWAAA3H8O.jpg","content":"## You can spot a vibecoded app from a mile away.\n\nI'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.\n\nTaste 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.\n\nAI 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.\n\nThere are many factors to a successful app besides good design, but I'm a designer, so let's focus on that.\n\nEvery time I start a new app project I slowly fine tune my design process and have landed on a workflow that works for me.\n\nGet 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).\n\nBut TL;DR: Just use Claude Code. It'll get you 90% of the way there.\n\nStep 1: Idea to PRD\n\nGet 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.\n\nThe output is a simple PRD. Nothing fancy. Just enough to keep me focused.\n\nStep 2: First Prototype\n\n![](https://pbs.twimg.com/media/HBREHioWgAA0IWv.jpg)\n\nFeed the PRD to Claude Code, Vibecodeapp, or Rork. Depends on the project and my mood.\n\nAfter 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?\n\nStep 3: Screen Inventory\n\nOnce 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.\n\nStep 4: Design Exploration\n\n![](https://pbs.twimg.com/media/HBRDNzwagAA1QPN.jpg)\n\nThis is where it gets fun. I feed that screen list to Variant AI, Aura.build, v0, Superdesign, and try random styles until something clicks.\n\nSometimes 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.\n\nWhen 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.\n\nThese 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.\n\n![Variant.ai](https://pbs.twimg.com/media/HBREdihWEAAxyjt.jpg)\n\nStep 5: Into Figma\n\nExport the design to Figma using the html.to.design chrome plugin or native import if available.\n\nThis 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.\n\nStep 6: Back to Code\n\nFeed 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.\n\nStep 7: Before Downloading\n\nBefore 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.\n\nThe Point\n\nAI builds fast. That's the easy part.\n\nThe hard part is making it look like someone cared. That still takes taste, iteration, and knowing when to stop experimenting and just ship.\n\nI'm still figuring it out. But at least my apps don't look vibecoded anymore.\n\nAnd 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 :)\n\nTools - (Some are affiliate links)\n\n[Vibecodeapp](https://www.vibecodeapp.com/sign-up?code=ref-2yfk7dqcd5ww)\n\nAura.build\n\n[Rork](https://rork.com/?ref=frederik)\n\nSuperdesign.dev\n\nMagicpatterns.com\n\nMagicpath.ai\n\n[Claude Code](https://claude.ai)\n\n[Figma](https://www.figma.com)\n\nhtml.to.design"},"adhxContext":{"savedByCount":1,"publicTags":[],"previewUrl":"https://adhx.com/froessell/status/2023339023381467556"}}