Frequently Asked Questions About Sariah's AI Beautiful App Design Workflow
21 answers covering everything from basics to advanced usage.
// Basics
What is vibe coding?
Vibe coding is the practice of using AI tools like Google AI Studio, Claude Code, or Lovable to rapidly generate functional app prototypes through conversational prompts, without traditional engineering workflows. It's great at producing working functionality fast, but it typically produces generic-looking designs — which is exactly the problem this workflow solves.
What is Weavy AI and why is it central to this workflow?
Weavy AI is a node-based AI design tool where you connect image inputs to AI models like Flux 2 Pro and Ideogram to generate visual assets — color palettes, buttons, logos, and UI components. It's the 'secret tool' at the center of this workflow because it lets you feed mood board images and brand guidelines directly into image models to produce cohesive, intentional outputs.
What does 'everything is branding' mean in this context?
It means branding isn't a corporate afterthought or a logo exercise — it's the same thing as the product and the same thing as engineering. If a brand is successful, you won't consciously notice it in the final app; it'll just feel good. This reframe pushes you to treat visual and emotional decisions as core product decisions, not decoration added at the end.
// How To
How do I build a mood board in Cosmos for my app?
Go to cosmos.so, search visual keywords derived from your brand guidelines (like 'vintage cassette' or 'analog warmth'), follow clusters, and add images that match your desired feeling. The test: do all images in the board feel cohesive? If yes, save them to your desktop for Weavy AI. If one image makes you think 'this could be the whole app,' that's your Visual Anchor.
How do I extract a color palette from an image in Weavy AI?
Import your mood board images as inputs in Weavy AI, use Flux 2 Pro, and prompt 'Extract colors from this reference image.' For variations, try 'Give me a color palette based on this image, but make it textured and vintage.' Run multiple inputs simultaneously for several options, evaluate each against your emotional brief, and pick 1-2 cohesive palettes.
How do I generate a logo for my app using this workflow?
Switch from Flux 2 Pro to Ideogram v3 in Weavy AI, since it's much better at typography. Ask Claude for four logo prompts — technical wordmark, handwritten, tape/label-style, and minimal wordmark — plus a negative prompt listing what you don't want ('3D render, glossy, gradient, sparkles, corporate'). Run all four simultaneously, select a favorite, run variations, and remove the background before exporting.
How do I use Figma to composite my AI-generated screens?
In Figma, press F, select an iPhone frame, and add border radius. Import your background-removed assets — logo, record button, Visual Anchor, content objects, and palette. For each screen in your functional list, paste the relevant asset. Use Appearance > blend modes like Overlay or Hard Light to derive background and text colors that cohere with your assets. You're compositing, not perfecting.
How do I turn my Figma design back into a working app?
Take screenshots of your Figma screens, then write a reference prompt for Google AI Studio describing your logo, colors, key visual metaphor, and core interactions. Paste in the screenshots (or upload Figma files directly) and generate. If it's directionally right, iterate the prompt via Claude before re-running. Use this output as your new vibe-coding starting point with intentional visual DNA.
// Troubleshooting
Why do all my AI-generated apps look the same?
Because you're outsourcing both 'what it does' and 'how it should feel' to AI. When you only define functionality and let the model decide the aesthetics, you get its default look — which everyone else also gets. The fix is to keep the 'how it should feel' in your own brain, anchored to a mood board and a single Visual Anchor image.
My Weavy AI outputs don't match my brand — what's wrong?
You're likely running one prompt with no reference inputs, or skipping the color palette and Visual Anchor as image inputs. Feed your mood board images and palette into Weavy AI, run multiple prompt variations simultaneously, and if outputs still miss, ask Claude to 'write me a better prompt for getting [asset] from an image.' Always evaluate against your emotional brief.
My composited assets look mismatched in Figma — how do I fix it?
The most common cause is skipping background removal. Mismatched backgrounds break visual cohesion instantly. Use Weavy AI's built-in background remove function on every final asset before importing into Figma. Then use Figma's blend modes (Overlay or Hard Light) to derive background and text colors from your assets so everything coheres automatically.
My analog/retro styling feels gimmicky — what am I doing wrong?
You're using analog visual metaphors without a functional or emotional purpose. Gratuitous retro styling feels like a costume. Purposeful analog elements serve a reason — for example, a cassette tape that looks more 'used' the more you record creates a reason for daily engagement. Every analog element should tie back to your emotional brief or a functional need.
// Comparisons
How does Google AI Studio compare to Claude Code and Cursor?
Google AI Studio is best for one-shot functional prototypes generated from a single prompt. Claude Code is Anthropic's agentic coding tool, ideal for day-to-day work within an existing codebase. Cursor is also for existing codebases, often paired with the Gemini model. In this workflow, Google AI Studio handles both the initial prototype and the final coded app from your Figma design.
When should I use Flux 2 Pro versus Ideogram in Weavy AI?
Use Flux 2 Pro for most asset creation — color palettes, buttons, content objects, and general UI — because it's quick and generically good at text prompts. Switch to Ideogram v3 specifically for logos and typography, where it's dramatically better. The rule: Flux 2 Pro for everything except type, Ideogram for anything with text.
How is this different from hiring a brand designer?
A brand designer applies taste and produces polished assets manually; this workflow lets you apply your own taste while AI handles the rendering. It's faster and cheaper, and it keeps the emotional direction in your hands. The core insight — build the entire visual system from one anchor image — is exactly how iconic product design has always worked, just executed with AI tools.
// Advanced
Why is defining 'what it is NOT' as important as 'what it is'?
Because constraints are what make a brand distinct. If you only define what the brand should feel like, AI fills gaps with its defaults. Explicitly stating what it must NOT feel like — 'not Instagram for food,' 'no notifications yelling at you,' 'no high-gloss photography' — steers outputs away from generic aesthetics and toward your specific intention. Ignoring this list flattens your product.
What is a progression metaphor and how do I use it?
A progression metaphor is an interface element that visually evolves with use — like a cassette tape that looks more worn the more you record, or a notebook that fills up. It creates a functional reason for daily engagement and emotional attachment. In Weavy AI, generate a before/after variation of your Visual Anchor (e.g., 'show a more used version of this audio system') to establish it.
How do I make AI-generated content objects usable as dynamic UI?
After generating your content metaphor objects (like cassette tapes for journal entries) with a consistent palette, iterate in Weavy AI: 'Generate the same image but change the text to be a date like [date].' This makes AI-generated objects usable as dynamic components that can display real, variable data. Then remove backgrounds on all final assets before compositing.
Why is product design consistency easier than face consistency with AI?
Generating consistent human faces across images is genuinely hard for AI. Product design only needs colors, shadows, and lighting to stay consistent across assets — which AI handles well, especially when anchored to a palette and Visual Anchor as inputs. Use this to your advantage: lean into product-object and UI generation rather than fighting the model on faces.
Should I iterate on aesthetics during the initial Google AI Studio prototype?
No. Step one is purely to establish what the product needs to do — home screen, record, transcript, browse past entries. Don't iterate on aesthetics here; take screenshots for functional reference only. Ping-ponging on aesthetics before you've defined branding is exactly why everything ends up looking the same. Save all visual decisions for after the emotional brief and mood board.
How many prompt variations should I run per asset in Weavy AI?
Always run multiple prompts and multiple input images simultaneously — never just one. Ask Claude to write several distinct variations (e.g., four record-button prompts: minimal, analog 80s, bold, textured), then generate them all at once. Running variations is how you develop taste and find the best output. Relying on a single prompt is a common pitfall that produces mediocre results.