Frequently Asked Questions About Sariah's AI Beautiful App Design Workflow
21 answers covering everything from basics to advanced usage.
// Basics
What's the difference between vibe coding and Sariah's AI design workflow?
Vibe coding uses AI to generate functional prototypes through conversational prompts — it focuses on what the product does. Sariah's workflow picks up where vibe coding stops, focusing on how the product should feel. Vibe coding produces the functional floor; the design workflow transforms that floor into a brand-intentional product with cohesive visuals, emotional direction, and purposeful design decisions that distinguish it from generic AI output.
What is 'brand guidelines as a prompt' in AI design?
Brand guidelines as a prompt reframes traditional brand documents as structured inputs for AI tools like Weavy AI. Instead of creating a corporate PDF, you generate a concise set of directives with Claude — a positioning statement, 2-3 visual/emotional keywords, and a 'what it is NOT' list — then feed these directly into Weavy AI to produce cohesive visual outputs. The guidelines exist to constrain AI generation, not to live in a drawer.
How long does the full 12-step workflow take?
For a focused session, the full workflow takes approximately 3-6 hours from functional prototype to composited Figma screens. Steps 1-2 (prototype and functional list) take 30 minutes. Steps 3-5 (emotional brief, brand guidelines, mood board) take 1-2 hours. Steps 6-10 (asset generation in Weavy AI) take 1-2 hours. Steps 11-12 (Figma compositing and code generation) take 1 hour. The most time-intensive step is mood boarding in Cosmos — don't rush it.
// How To
How do I write an emotional brief for my app if I'm not a designer?
Write a plain-language description of your user: who they are, what they're tired of, what they crave, and what your product must NOT feel like. Use movie, TV show, or real-world analogies. Then paste this into Claude and ask it to articulate the emotional brief. Pull out visually actionable phrases — what the product IS and what it is NOT. You don't need design vocabulary; you need honesty about the feeling you're targeting.
How do I choose a Visual Anchor image for my app design?
Browse your Cosmos mood board and look for the one image that makes you think 'this could literally be the whole app.' It should evoke the exact emotional response you want users to feel. If no mood board image qualifies, generate one in Weavy AI using Flux 2 Pro with your brand keywords. The Visual Anchor governs colors, textures, shadows, and metaphors for all subsequent design decisions — choose something you're genuinely obsessed with.
When should I use Flux 2 Pro vs Ideogram in Weavy AI?
Use Flux 2 Pro for all general asset generation: color palettes, buttons, content objects, UI components, and visual metaphor objects. Switch to Ideogram v3 exclusively for logo and typography work — it's significantly better at rendering legible, stylized text. This model distinction is critical; Flux handles visual composition well but struggles with text, while Ideogram excels at typographic precision.
What's the role of Figma blend modes in this workflow?
Figma's blend modes (Overlay and Hard Light specifically) are used to automatically derive background and text colors that cohere with your imported assets. Instead of manually picking hex values, you apply a blend mode to a color fill over your visual elements, and Figma mathematically generates a harmonious color. This is a compositing trick, not a design technique — it ensures visual cohesion without requiring color theory knowledge.
How do I handle the feedback loop between Figma and Google AI Studio?
In Step 12, screenshot your Figma screens and write a reference prompt describing the design system: logo, colors, key visual metaphor, and core interactions. Paste screenshots as image inputs into Google AI Studio. If the coded output is directionally correct, iterate the prompt using Claude. You can also upload Figma files directly. This step turns your design direction into a coded starting point with intentional visual DNA instead of AI defaults.
// Troubleshooting
Why does my AI-generated app look generic even after multiple iterations?
You're likely iterating on aesthetics without first defining your brand direction. Ping-ponging with AI on visual tweaks without an emotional brief, mood board, or Visual Anchor means you're letting AI make all the creative decisions — and AI defaults to average. Step back, define how your product should feel, build brand guidelines, create a mood board, find your Visual Anchor, and then generate assets with that intentional direction constraining AI outputs.
Can I use this workflow without Figma?
Figma is used in Step 11 for compositing — assembling your generated assets into screen layouts. You could substitute any design tool that supports image importing, layer blending modes, and iPhone frame templates (e.g., Sketch, Adobe XD, or even Canva for simpler layouts). However, Figma's blend modes for deriving cohesive background and text colors are specifically leveraged in this workflow, so alternatives may require manual color matching.
How do I prevent my AI-generated assets from looking inconsistent?
Product design assets only need colors, shadows, and lighting to stay consistent — unlike human faces, which are much harder. Always use your Visual Anchor and color palette as input images in Weavy AI so every generated asset inherits the same visual DNA. Remove backgrounds on every asset before compositing. Run multiple prompt variations simultaneously and select outputs that match your emotional brief. Consistency comes from constraining inputs, not from lucky single prompts.
What if Claude's brand guidelines don't feel right for my product?
Keep only what feels true and discard the rest — Claude's output is a starting point, not a final answer. The 'how it should feel' must stay in your brain. If the guidelines feel corporate or generic, refine your emotional brief with more specific analogies and constraints, then regenerate. Add more 'what it is NOT' statements to tighten the output. You can also manually edit Claude's guidelines to match your instinct before feeding them into Weavy AI.
What are the most common mistakes when using AI to design an app?
The top mistakes are: (1) iterating on aesthetics without defining branding first, (2) outsourcing both 'what it does' and 'how it feels' to AI, (3) skipping brand guidelines, (4) using analog visual elements without functional purpose, (5) stopping at the functional prototype, (6) not removing backgrounds before compositing, (7) running only one prompt variation per asset, and (8) ignoring the 'what it is NOT' list. Most failures stem from letting AI make emotional decisions that should stay human.
// Comparisons
What's the difference between this workflow and using a no-code builder like Lovable or Bolt?
No-code builders like Lovable generate functional apps from prompts but apply generic design defaults. Sariah's workflow is not a replacement for these tools — it's a design layer that sits on top. You can use Lovable for your functional prototype in Step 1, then apply the full 12-step design workflow to give it brand-intentional visuals. The final Figma designs are fed back into a code-generation tool with visual DNA that no-code builders can't produce on their own.
How is this different from just hiring someone on Fiverr to design my app?
A Fiverr designer may produce polished screens, but without your emotional brief and brand constraints, they'll default to trends — which creates the same generic look from a different source. Sariah's workflow ensures the 'how it should feel' comes from you, with AI executing at scale. It's also faster (hours vs. days), iterative (generate 20 variations instantly), and cheaper. For complex design systems or enterprise products, a skilled designer still adds significant value.
Why use Cosmos instead of Pinterest for mood boarding?
Cosmos (cosmos.so) provides higher-quality, more design-focused visual results than Pinterest, which is increasingly polluted with ads and low-quality pins. In this workflow, Cosmos is described as 'one of my favorite apps just in general.' The cluster-following feature helps you discover cohesive visual directions faster. The practical requirement is that your mood board images must all feel unified — Cosmos's curation makes this easier to achieve than Pinterest's algorithm-driven feed.
Can I use Midjourney or DALL-E instead of Weavy AI?
You can generate individual assets in Midjourney or DALL-E, but you lose Weavy AI's node-based workflow that connects input images directly to generation models, enabling rapid iteration with consistent visual inputs. Weavy AI's built-in background removal and multi-model support (Flux 2 Pro for assets, Ideogram for typography) in a single interface streamlines the process significantly. If you substitute, you'll need separate tools for background removal and more manual prompt engineering to maintain cohesion.
// Advanced
Should I use negative prompts when generating assets in Weavy AI?
Yes, especially for logo generation with Ideogram. Ask Claude to generate a negative prompt listing everything you don't want: '3D render, glossy, gradient, mesh, sparkles, corporate, photorealistic, stock photo.' Negative prompts are critical for steering AI away from default aesthetics that make everything look the same. Your 'what it is NOT' list from brand guidelines translates directly into negative prompts for every asset generation step.
How do I use analog design elements without looking gimmicky?
Every analog visual metaphor must serve a functional or emotional purpose. A cassette tape that looks more 'used' the more you record creates a reason for daily engagement — that's purposeful. A cassette tape as a decorative background image with no interaction is gimmicky. Ask yourself: does this analog element change the user's relationship with the product? If the answer is no, it's decoration. If yes, it's a design feature.
Can I apply this workflow to a web app or SaaS dashboard, not just a mobile app?
Yes. The workflow is tool-agnostic and applies to any digital product. For web apps, adjust Step 1 to generate desktop-layout prototypes, Step 11 to use desktop Figma frames, and modify your content objects for web-appropriate metaphors. The core process — emotional brief, brand guidelines, mood board, Visual Anchor, AI-generated assets, Figma compositing — works identically. SaaS dashboards benefit especially from the 'what it is NOT' exercise to differentiate from generic admin panel templates.
What if my product doesn't have an obvious visual metaphor?
Not every product needs a cassette tape or notebook metaphor. Your Visual Anchor can be abstract — a texture, lighting style, or color atmosphere. The principle is that one image drives all visual decisions. For products without physical-world analogies, focus on the emotional feeling: 'calm ocean at dawn' or 'a clean desk with one object on it.' The metaphor can be environmental rather than object-based. Let Claude help you explore what metaphor fits your emotional brief.