Six Steps to Make Vibe-Coded Apps Look Professional

Most apps built with AI vibe-coding tools end up with the same look: dark gradients, glowing accents, and a general "AI slop" aesthetic that screams "a robot made this." The problem isn't the tools -- it's the workflow. This video lays out a six-step design process that separates the prototyping phase from the design phase, using a specific chain of AI tools to produce something that actually looks intentional.

The example throughout is an audio journaling app called "Cassette," which goes from a generic green-and-white prototype to a warm, analog-feeling app with paper textures and vintage branding.

Step 1: Build the Ugly Prototype

Start in Google AI Studio and deliberately ignore aesthetics. The prompt for the example app was: "Build an audio journaling prototype with recording, playback & History only. Ignore design." The result is a bare-bones white app with a green record button and basic navigation -- functional but generic. The point is to get the logic and functionality right first, before introducing any visual direction.

Step 2: Define the Brand's Soul

Once the prototype works, switch to Claude and prompt it to describe a design identity. The key is being specific about personality rather than asking for generic "modern" or "clean" directions. The example prompt: "Describe the design identity of an audio journaling app with a calm, analog personality."

Claude responded with language like "the app feels like a well-worn notebook that happens to record your voice" and described a design that "resists the clean sterility of most productivity apps" in favor of "warmth and slight imperfection." This written brief becomes the foundation for every visual decision that follows.

Step 3: Gather Visual References

Next, move to Cosmos -- described as a Pinterest alternative built for creatives -- and search for images that capture the intended mood. The example searched for "vintage" and pulled cassette tape imagery. The goal is to collect five to ten images that represent the target aesthetic, then feed them to Weavy AI for style analysis and reference.

Step 4: Build a Cohesive Palette

Using Flux 2 Pro (Black Forest Labs' image generation model), generate a color palette derived from the reference images. The example prompt was "Generate a minimal vintage" palette, which produced four colors tied to the cassette theme: Vintage Red (#C7352C) for the record button accent, Muted Mustard (#C49A3A) for highlights, a warm Surface Background (#F2E8A8), and Soft Beige (#E4D8C8) for cards and containers.

Step 5: Create a Visual Anchor and Logo

Generate a single reference object that anchors the entire design language. For the Cassette app, this was a photorealistic vintage C60 cassette tape rendered via Flux 2 Pro. This anchor image guides the texture, color weight, and tactile feel of every UI element.

For the logo, switch to Ideogram v3 -- specifically chosen for its strong text rendering. The critical technique here is using negative prompts: "Minimal flat vector logo for an analog audio journal app. No gradients. No 3D. No glow. No corporate looks." These constraints push the output away from the default AI aesthetic and toward something distinctive. The result was the "CASSETTE" wordmark with a minimal tape icon.

Step 6: Assemble in Figma, Then Vibe-Code to the North Star

Pull the logo, palette, UI elements, and visual anchor into Figma to create a design reference board. Then take screenshots of this assembled design and feed them back into Google AI Studio as the target for a second round of vibe-coding. The prompt for this final pass: "Match the uploaded cassette style. Warm muted palette, paper texture, red record dot, minimal layout."

The result is a polished app that looks nothing like typical AI output: warm paper textures, a physical-feeling record button, serif typography, and a cohesive vintage identity throughout.

Key Takeaways

• Separate prototyping from design -- build ugly-but-functional first, then layer in aesthetics as a distinct phase
• Use negative prompts aggressively when generating logos and visual assets to escape the default AI look
• A single "visual anchor" image (like the cassette) creates more design coherence than any number of abstract style keywords
• The chain matters: Claude for verbal identity, Cosmos for references, Flux 2 Pro for palette/assets, Ideogram v3 for logos, Figma for assembly, Google AI Studio for final code
• Feed your design screenshots back into the vibe-coding tool as a north star to close the loop between design and implementation

Resources

• Google AI Studio -- Vibe-coding platform for building functional app prototypes from prompts
• Claude -- Used here to generate written design identity briefs with specific personality direction
• Cosmos -- Ad-free Pinterest alternative for creatives; search by image and color
• Weavy AI -- AI-powered design workflow tool for style transfer and reference analysis (now Figma Weave)
• Flux 2 Pro -- Black Forest Labs' 32B-parameter image generation model for palettes and visual anchors
• Ideogram v3 -- AI image generator with industry-leading text rendering, ideal for logos
• Figma -- Design tool for assembling assets into a cohesive reference board