AI Design Workflow: Claude, Codex, Stitch + Figma Stack
AI accelerates design from ideation to production UI via a multi-tool workflow—Claude for accurate code, Codex for token efficiency, Stitch for quick mobile layouts, Figma for refinements—not a single dream tool.
AI as Workflow, Not Single Tool: The Reality Gap
Designers crave one AI tool mirroring Figma's all-in-one power: auto-absorbing design systems (variables, styles, components), prompt-to-canvas editing, one-click handoff docs, and perfect code export. But this doesn't exist yet. Instead, the speaker outlines a workflow training AI on design systems via prompts, generating iterations across tools (Claude, Codex, Google Stitch), pushing/pulling to Figma for tweaks, AI-assisted docs, and developer handoff. Figma lags in AI—its Make tool misapplies states (e.g., error variants everywhere), yields generic results. Startups add noise; focus on Claude, Codex, Stitch, Figma, Mobbin.
"AI is not a tool. AI is a workflow." (Speaker emphasizes shift from Figma-only to multi-tool efficiency, rejecting one-tool dreams.)
This stack handles ideation (Stitch layouts), UX thinking (Claude prompts), wireframing/high-fi (Claude Design/Codex), systems/prototyping (Figma skills), production UI (Claude Code/ChatGPT). Tradeoff: More tools mean setup/learning, but faster iterations without token waste.
Claude vs. Codex: Code Quality, Tokens, Figma Fidelity
Claude excels in developer-friendly code—cleaner, less rework—while Codex uses 3-4x fewer tokens, ideal for iteration on pro plans where limits hit fast. Claude handles Figma attributes better (auto-layout, fill/hug responsiveness) post-push. Claude costs rise (rumored $20 plan axed). Experiment: Same prompt yields varying designs; Claude more structured, Codex efficient.
Generate multiples, refine in Figma. Developers prefer Claude code; designers lean Codex for cost.
"Claude is the better code. If you're working with developers, they're going to want to use cloud code." (Highlights dev preference after a designer-Codex handoff required full redo.)
"Codex uses about three to four times fewer tokens for the same work as Claude." (Key for token-limited iteration in complex designs.)
Figma Setup: MCP and Skills for Seamless Integration
Core: Install Figma MCP (reads files) + Skills (teaches AI Figma usage: variables, components, canvas). From Figma Community: Bulk ZIP (Figma Use skill bundles MCP/server + workflows), Apply Design System (retrofit existing designs), Audit Design System (flags/fixes inconsistencies—speaker's favorite).
Claude: Customize > Upload ZIP > Connectors > Install Figma MCP. Codex: Search/install Figma plugin/skills (Figma Code Connect, Create Design Systems Rules); availability varies by plan.
Connects AI-Figma loop: Generate in AI, push to Figma, tweak (spacing/variables), pull back. Enables design system training without re-prompting.
Google Stitch for Fast Mobile Ideation, Claude Design for Structure
Stitch (beta): Prompt-to-app screens in 30s. Excels mobile (e.g., financial advisor app: client list, dashboard, nav)—inspires layout/data display. Weak desktop (juvenile/AI-feel). No design system training; generic polish varies. Use early: Structure ideas for team talks.
Claude Design: Better structure than Stitch; combine (Stitch layout → Claude refine). Outputs: Editable canvases, but limitations—repetitive elements, ignores specifics sometimes. Best tokens: Specific prompts post-setup.
"Google Stitch's web designs are never really that good. The app designs usually way better." (Guides prompt choice for reliable results.)
Design Systems Mastery: Train AI on Tokens, Variables, Components
Can't auto-upload systems; train via prompts/skills storing brand knowledge. Build tokens (colors/sizes) with AI, apply Figma Variables. Components: Claude Skills generate/audit (e.g., buttons with states). Train custom: Paste system docs, query usage.
Codex add-on: Claude Skills ported. Limitations: Claude Design ignores systems sometimes; audit/fix in Figma. Production: Claude Code/ChatGPT → refined UI → Figma push.
Mobbin integrates research: Screenshot patterns → AI ideation.
Research to Production: Mobbin, Claude Code, Iteration
Mobbin (20% off via link): Pattern library for prompts (e.g., financial UIs). Claude Code/ChatGPT: Production screens (e.g., dashboard) → refine prompts → Figma final. Full chain: Ideate (Stitch/Mobbin), structure (Claude), code (Claude/Codex), docs (AI).
Results: Original, non-generic UIs faster. Failures: Generic AI widgets—iterate tools.
Key Takeaways
- Treat AI as workflow: Train systems, iterate across Claude/Codex/Stitch/Figma, avoid one-tool hype.
- Setup first: Figma MCP + Skills (Use, Apply, Audit) in Claude/Codex for file access/variable mastery.
- Claude for dev code accuracy; Codex for 3-4x token savings in iterations.
- Stitch mobile-only for 30s layouts; pair with Claude Design for polish.
- Train AI on design systems via stored prompts/skills; audit outputs religiously.
- Generate multiples, Figma refine, AI docs—cuts manual work but needs devs for final code.
- Mobbin boosts research; prompt specificity burns fewer tokens.
- Figma essential for fine tweaks; its AI lags—use as hub.
- Experiment personally: Token limits hit fast on pro plans.
- Future-proof: Master all tools as innovations leap (e.g., Claude Design).