Stop Shipping AI Slop. Design with Weavy AI, Claude etc.

2mo ago

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 ti