I sit down with my friend Suraya Shivji, a designer who sold her last company to Snap, to tackle the biggest problem in vibe coding: everything looks the same. Suraya walks me through her full AI design workflow — from Google AI Studio to Claude to Weavy AI to Figma and back — showing how to turn a generic one-shot prototype into a beautifully branded app. Together we live-build a voice journaling app called "Cassette," covering everything from defining how a product should *feel*, to generating color palettes, custom assets, and logos using Weavy AI, Flux, and Ideogram. This is a start-to-finish tutorial for anyone who wants their vibe-coded products to look like a real brand designer made them.
Timestamps
00:00 – Intro
03:35 – Why Every Vibe-Coded App Looks the Same
04:34 – Prototyping with Google AI Studio
09:34 – Defining How Your App Should Make Someone Feel
11:07 – Using Claude to build Brand Identity/Guidelines
16:38 – Building a Mood Board with Cosmos
17:58 – Intro to Weavy AI: Node-Based Visual AI Tool
19:32 – Generating Color Palettes with Flux 2 Pro in Weavy
26:54 – Creating Record Buttons and Custom Assets in Weavy
30:46 – Generating Cassette Tape History Elements
34:47 – Logo Generation with Ideogram V3 in Weavy
38:52 – Compositing the Final App Screens in Figma
47:38 – Pasting the Design Back into Google AI Studio
47:00 – Comparing Figma Output vs. Google AI Studio Output
52:20 – Final Advice: Spend Time on Inspiration, Then Build
Key Points
– Vibe-coded apps are easy to build now, but they all look the same — branding is what makes someone actually download and use your product.
– Weavy AI is a node-based tool that lets you run image models like Flux 2 Pro and Ideogram visually, making it easy to generate color palettes, buttons, assets, and logos from reference images.
– Claude serves as the ideal brainstorming partner for writing brand guidelines, crafting image generation prompts, and refining your creative direction.
– The full workflow is: Google AI Studio (prototype) → Claude (brand strategy) → Cosmos (mood board) → Weavy AI (visual assets) → Figma (composition) → back to AI Studio (final build).
Numbered Section Summaries
1) The Vibe-Coded Sameness Problem
I open by laying out the core issue: anyone can build an app now, which is amazing, but everything ends up looking identical. If your app looks like everything else, it is really tough to expect anyone to download it. Soraya and I set out to prove you can go from a generic prototype to something that looks like an agency designed it.
2) Defining How Your Product Should Feel
Soraya’s process always starts with emotion: who is this for, and how should they feel using it? We decide our journaling app is for overthinkers who are tired of being on their phones and want something analog and calm. She pastes this framing into Claude to generate deeper brand insights, including what the product is and what it is *absolutely* meant to avoid being (a productivity tool, a social app).
3) Brand Guidelines and Mood Boarding
Claude helps us write brand guidelines for our app, now called "Cassette." Soraya then moves to Cosmos (a Pinterest alternative) to build a mood board of vintage cassette imagery. The key insight: brand guidelines are really just a prompt you bring into your visual tools — they guide every design decision downstream.
4) Weavy AI: The Visual Asset Engine
Here is the core of the episode. Soraya shows how Weavy AI works as a node-based canvas where you feed in reference images and run them through models like Flux 2 Pro. We generate color palettes, textured backgrounds, record buttons, and cassette tape history elements — all grounded in the mood board. She switches between Claude (for prompt writing) and Weavy (for visual output) throughout.
5) Compositing in Figma and Final Comparison
Soraya assembles all the generated assets — logo, record button, cassette tapes, color palette — into iPhone frames in Figma. She shares practical tips like using blend overlay for automatic color matching. We then paste the Figma reference images back into Google AI Studio and compare outputs. The AI Studio version is dramatically better than the original one-shot, and Soraya notes you could skip Figma entirely if you prefer.
The #1 tool to find startup ideas/trends – https://www.ideabrowser.com/
LCA helps Fortune 500s and fast-growing startups build their future – from Warner Music to Fortnite to Dropbox. We turn ‘what if’ into reality with AI, apps, and next-gen products https://latecheckout.agency/
The Vibe Marketer – Resources for people into vibe marketing/marketing with AI: https://www.thevibemarketer.com/
FIND ME ON SOCIAL
X/Twitter: https://twitter.com/gregisenberg
Instagram: https://instagram.com/gregisenberg/
LinkedIn: https://www.linkedin.com/in/gisenberg/
FIND SURAYA ON SOCIAL
X/Twitter: https://x.com/surayashivji
Personal Website: https://www.surayashivji.com/
