AI-Assisted Product Design: A Workflow for Designers
For Product designers moving into AI-assisted workflows · Based on Sariah's AI Beautiful App Design Workflow
// TL;DR
If you're a product designer adopting AI tools, this workflow shows how to use Claude, Weavy AI, Cosmos, and Figma without surrendering your taste to the model. You keep the emotional and visual direction in your own hands — defining how the product should feel, choosing a Visual Anchor, and curating a mood board — while AI handles rendering color palettes, UI assets, content objects, and logos. It's a way to 10x asset production while maintaining cohesion, since product design only needs colors, shadows, and lighting to stay consistent. The result is intentional design at AI speed.
How do I use AI without losing my design taste?
By applying the core distinction: outsource what the product does (functionality) to AI, but keep how it should feel in your own brain. As a designer, your taste is the asset — AI is the rendering engine. This workflow structures that relationship. You define the emotional target, select the Visual Anchor, and curate the mood board; Weavy AI generates palettes, buttons, and content objects; Claude articulates and prompts. You stay in the driver's seat while dramatically compressing production time.
Why is a single Visual Anchor so important?
Because iconic product design has always grown from one obsessed-over reference — colors, shadows, lighting, textures, and metaphors all flow from it. In an AI workflow, the Visual Anchor is also functional: it becomes an input image in Weavy AI that keeps every generated asset cohesive. This is where product design has an advantage over character work — you don't need consistent faces, only consistent colors, shadows, and lighting, which AI handles reliably when anchored.
How does brand guidelines-as-a-prompt change my process?
Instead of producing a static brand document, you generate guidelines with Claude specifically to feed into Weavy AI. Pull a one-sentence positioning statement, 2-3 core keywords, and a NOT list. The NOT list is as valuable as the positive direction — it steers image models away from their defaults. This reframe turns branding from a deliverable into an active instruction set that shapes every asset output.
What's the step-by-step for asset generation?
1. Palette first — import mood board images to Weavy AI, use Flux 2 Pro, prompt 'extract colors from this reference' plus a textured variation. Pick 1-2 cohesive palettes.
2. Primary interactive element — ask Claude for four button prompt variations, run each in Weavy AI with your palette and Visual Anchor as inputs, select the simplest on-brand option, remove the background.
3. Content objects — generate your repeating metaphor (e.g., cassette tapes for entries), then iterate to swap in dynamic text like dates so they work as real components.
4. Logo — switch to Ideogram v3, run four wordmark variations with a negative prompt ('3D render, glossy, gradient, sparkles, corporate'), pick one, run black-and-white variations, remove background.
How do I composite AI assets in Figma without them clashing?
Always remove backgrounds in Weavy AI before importing — mismatched backgrounds break cohesion instantly. In Figma, drop assets onto iPhone frames per your functional screen list, then use Appearance blend modes (Overlay or Hard Light) to derive background and text colors directly from your assets. This automates color harmony and keeps typography restrained. You're compositing, not perfecting — get every functional screen represented, then refine.
Does this replace traditional design skills?
No — it amplifies them. Your judgment about what feels 'true or not true to the feeling' is exercised at every step, from picking the Visual Anchor to selecting among Weavy AI variations. What changes is speed and the elimination of manual asset production. The designers who benefit most are those who bring strong taste and use AI to render it faster, not those hoping AI supplies the taste.
Next step
Take a current project, write its emotional brief, and run it through Claude for brand guidelines. Then open Cosmos and find your Visual Anchor. Once you have that single image, the rest of the workflow is execution — and you'll produce a cohesive asset set in a fraction of your usual time.
// FREQUENTLY ASKED QUESTIONS
Will AI-generated assets look consistent enough for production?
Yes, when anchored properly. Product design consistency only requires stable colors, shadows, and lighting — which AI handles well, unlike consistent human faces. Feed your color palette and Visual Anchor into Weavy AI as input images on every generation, run variations, and remove backgrounds before compositing. This keeps a set of assets visually cohesive enough to ship.
How do I keep creative control when AI generates the assets?
You control every upstream decision: the emotional brief, the brand guidelines and NOT list, the Visual Anchor, the mood board, and which variation to select. AI only renders within your constraints. At each step you ask 'is this true or not true to the feeling?' — that judgment is your creative control, applied faster than manual production allows.
When should I switch from Flux 2 Pro to Ideogram?
Switch to Ideogram v3 specifically for logos and any typography-heavy work, where it's dramatically better than Flux 2 Pro. Use Flux 2 Pro for everything else — color palettes, buttons, content objects, and general UI — because it's quick and generically strong at text prompts. The rule: Ideogram for type, Flux 2 Pro for everything else.