Frequently Asked Questions About Sariah's AI Beautiful App Design Workflow
21 answers covering everything from basics to advanced usage.
// Basics
Can I use Sariah's workflow if I don't have a prototype yet?
Yes. Step 1 of the workflow generates a functional prototype from scratch using Google AI Studio with a single prompt. You just need a one-sentence product concept and a sense of your target user's emotional state. The prototype is purely functional — you don't iterate on its aesthetics at all. It exists only to establish what the product needs to do before you move to defining how it should feel.
Do I need to know Figma to use this workflow?
You need basic Figma skills: creating frames, importing images, adjusting colors, and using blend modes (Overlay or Hard Light). You don't need to be a Figma expert. The Figma step is compositing, not pixel-perfect design — you're placing your AI-generated assets onto phone-sized frames and adjusting background colors using blend modes. If you've never used Figma, you can learn enough in 30 minutes to complete Step 11.
Can I use this workflow for web apps or is it only for mobile?
The workflow applies to any digital product — mobile apps, web apps, dashboards, or landing pages. The examples focus on mobile because that's the demonstrated use case, but the core process (emotional brief → brand guidelines → mood board → Visual Anchor → asset generation → compositing) is platform-agnostic. In Figma Step 11, simply use a desktop-sized frame instead of an iPhone frame. The principles about emotional direction and visual cohesion apply regardless of screen size.
How long does the full 12-step workflow take?
The workflow is designed to be completed in a single focused session — roughly 2-4 hours for someone following it for the first time. The AI tools (Google AI Studio, Claude, Weavy AI) dramatically compress what would traditionally take weeks of brand exploration. The longest steps are mood boarding in Cosmos (Step 5) and asset generation in Weavy AI (Steps 6-10), where running multiple variations simultaneously is key. With practice, subsequent projects go faster.
What does 'vibe coding' mean and how is it different from regular 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. You describe what you want in natural language and the AI generates working code. The problem this workflow solves: vibe-coded apps work functionally but look identical because the AI defaults to generic UI patterns. This workflow adds intentional visual identity to vibe-coded prototypes.
// How To
When should I use Flux 2 Pro vs Ideogram v3 in Weavy AI?
Use Flux 2 Pro for everything except typography and logos. It's the general-purpose model for color palette extraction, button generation, content objects, and Visual Anchor creation — it's described as 'quick and just good at text prompts and generically good.' Switch to Ideogram v3 exclusively for logo and wordmark generation because it's 'really good at typography — like amazing.' Using Flux 2 Pro for logos will produce poor text rendering.
How do I write a good emotional brief for my app?
Write a plain-language description of: who the user is, what they're tired of, what they crave, and what the product must NOT feel like. Use movies, TV shows, or real-world analogies as references. Then paste this into Claude and ask it to help articulate the emotional brief. Pull out visually actionable phrases from Claude's response — specifically, what the product IS (evocative keywords) and what it is NOT (constraints). The 'is not' list is equally important.
What's a negative prompt and why do I need one for logo generation?
A negative prompt is a list of things you explicitly do NOT want in your AI-generated asset — for example, '3D render, glossy, gradient, mesh, sparkles, corporate.' It constrains the AI model away from its default aesthetics. Ask Claude to generate your negative prompt based on your brand guidelines' 'what it is NOT' list. This is especially critical for Ideogram logo generation because without constraints, the model will default to overproduced, generic logo styles.
What's the 'what it is NOT' list and why is it so important?
The 'what it is NOT' list defines what your brand must never feel like — e.g., 'not corporate, not glossy, not aggressive wellness.' It's generated in Step 4 alongside your brand guidelines. This list is equally important as your positive brand direction because it constrains AI outputs away from generic defaults. Without it, AI tools drift toward safe, overproduced aesthetics. Use it as a negative prompt in Weavy AI and as a filter when evaluating every generated asset.
How do I pick the right color palette from multiple Weavy AI outputs?
Evaluate each palette against your emotional brief by asking: 'Does this feel true to how I want the user to feel?' Run multiple inputs simultaneously — different mood board images and different prompt phrasings — to generate several options. Pick 1-2 palettes that feel cohesive when placed side by side. If none feel right, try prompting variations: 'Give me a color palette based on this image, but make it textured and vintage' or ask Claude to write a better color extraction prompt.
// Troubleshooting
What if my Weavy AI outputs don't match my brand direction?
Ask Claude to write you a better prompt. Specifically, describe what you wanted and what you got instead, then ask Claude to rewrite the Weavy AI prompt with more specific constraints. Also try: running the same prompt on different input images, adjusting your reference images to be closer to your desired direction, and adding a negative prompt listing what you explicitly don't want. Always run multiple prompt variations simultaneously rather than iterating one at a time.
Can I skip the mood board step and go straight to generating assets?
No — this is explicitly called out as a pitfall. The mood board is described as 'infrastructure, not decoration.' Without it, AI image models produce generic outputs because they have no visual constraints. Your mood board feeds directly into Weavy AI as input images. Skipping it means your color palette, buttons, and content objects will have no cohesive relationship to each other. The mood board is what makes the difference between a branded product and AI slop.
What if I can't find a Visual Anchor image that feels right?
Generate one in Weavy AI using Flux 2 Pro. Take the strongest images from your Cosmos mood board, import them as inputs, and prompt variations that combine their elements. For example, if your mood board has warm tones and analog textures but no single image captures the whole feeling, prompt: 'Create [specific object] with [texture/lighting from reference] in [color palette from reference].' Iterate until one image makes you think 'this could literally be the whole app.'
How do I handle background removal for complex assets in Weavy AI?
Use Weavy AI's built-in background removal node. Run it on every final asset before exporting — this is a non-negotiable step called out in the pitfalls. Mismatched backgrounds break visual cohesion instantly when you composite in Figma. If the built-in removal leaves artifacts on complex edges, try generating the original asset against a solid contrasting background (e.g., pure white or pure black) to give the removal tool cleaner edges to work with.
// Comparisons
What's the difference between Cosmos and Pinterest for mood boarding?
Cosmos (cosmos.so) is described in the workflow as a Pinterest alternative that's better suited for building visual mood boards for product design. The key advantage is cluster-based discovery — you search visual keywords from your brand guidelines and follow clusters of related imagery. The test is cohesion: do all images in the board feel like they belong together? If yes, you proceed. Cosmos is the recommended tool, but the workflow's principles apply to any visual mood boarding tool.
How is this workflow different from just using Midjourney to design an app?
Midjourney generates isolated images without a coherent system behind them. Sariah's workflow builds a complete visual system — emotional brief, brand guidelines, mood board, Visual Anchor, color palette, component assets, and final composited screens — where every element derives from the same source. The result is cohesive rather than a collection of pretty but disconnected images. Additionally, Weavy AI's node-based approach lets you connect inputs to outputs in a workflow, not just generate standalone images.
Why does this workflow use Claude instead of ChatGPT?
The workflow uses Claude specifically for articulating emotional briefs, generating brand guidelines, and writing better prompts for image generation. Claude is chosen because the creator describes it as their preferred tool for nuanced language tasks. However, the workflow's principles are model-agnostic — you could use ChatGPT or Gemini for the same steps. The critical thing is the process: defining emotions first, generating guidelines, and using those guidelines as prompts for visual AI tools.
// Advanced
How do I use analog design elements without looking gimmicky?
Every analog visual element must serve a functional or emotional purpose. The framework's example: a cassette tape that looks more 'used' the more you record creates a reason for daily engagement — the wear is functional, not decorative. Ask yourself: does this retro/analog element communicate something about the product's behavior, or is it just aesthetic? If it's just aesthetic, it will feel gimmicky. Purposeful analog elements create meaning; gratuitous ones create cringe.
How do brand guidelines work as a prompt in Weavy AI?
In this framework, brand guidelines aren't a corporate PDF — they're a structured prompt you feed into Weavy AI alongside your mood board images. Claude generates them in Step 4: a one-sentence positioning statement, 2-3 core visual/emotional keywords, and a 'what the brand is NOT' list. You reference these directly in your Weavy AI prompts, e.g., 'Generate a button that feels [keyword] and [keyword], not [anti-keyword].' This is what makes AI outputs cohesive instead of generic.
Can I use Sariah's workflow to redesign an existing app that's already live?
Yes. Skip Step 1 (prototype generation) and use screenshots of your existing app as your functional reference. Start at Step 2 by listing what your app currently does, then proceed through the emotional brief, brand guidelines, mood board, and asset generation steps. The workflow is explicitly designed for apps that 'work functionally but look like every other app' — which describes many live products. Feed your final Figma designs back into your development workflow.
How do I make AI-generated design assets look consistent across screens?
The workflow has a built-in consistency advantage: product design only needs colors, shadows, and lighting to stay consistent — unlike generating consistent human faces. Derive everything from your Visual Anchor image and color palette. Use the same input images across all Weavy AI generations. In Figma, use blend modes (Overlay or Hard Light) to automatically derive cohesive background and text colors. If assets feel disconnected, regenerate them using your Visual Anchor as the shared input.