DOMAIN:DESIGN:TOOL_WORKFLOW¶
OWNER: alexander UPDATED: 2026-04-01 SCOPE: Design tool selection, workflow sequencing, cost awareness AGENTS: alexander (design system), felice (visual assets), christel (brand), floris (web frontend), floor (web frontend), martijn (iOS), ilian (motion), valentijn (strategy) PARENT: Design
TOOL_SELECTION:DECISION_TREE¶
| Need | Primary Tool | When to Use | Agent |
|---|---|---|---|
| Visual mockup / reference image | Nano Banana 2 | Before detailed design, for mood boards, hero images, product shots | Felice, Christel, Alexander |
| Structured UI screen design | Stitch MCP | After requirements defined, generates code + preview | Alexander |
| Design system intelligence | UI UX Pro Max skill | Auto-activates on any UI task — no manual trigger needed | Floris, Floor, Martijn, Alexander |
| Component implementation | shadcn/ui + Tailwind | During frontend development, using design tokens from Alexander | Floris, Floor |
| Brand visual exploration | Nano Banana 2 then Christel | Mood boards, color exploration, then refine direction with Stitch | Christel, Alexander |
| Storyboard / reference frames | Nano Banana 2 | Before motion or video production | Ilian, Felice |
| iOS design implementation | SwiftUI + Apple HIG | Using design tokens adapted for iOS by Alexander | Martijn |
| Design inspection / handoff | Figma MCP | When client provides Figma files, or for design review | Alexander, Christel |
SELECTION RULES¶
- Always generate visual mockups BEFORE creating detailed Stitch screens. Mockups are cheaper to iterate on.
- Never use Nano Banana 2 for logo generation. Use SVG code generation instead.
- UI UX Pro Max activates automatically. Agents do not need to invoke it manually.
- Stitch is for structured, code-generating UI design. Nano Banana 2 is for freeform visual imagery.
- When a client provides Figma files, use Figma MCP to extract design intent before starting implementation.
DESIGN_PIPELINE:FLOW¶
Valentijn (strategy brief)
|
v
Christel (brand identity) <--> Nano Banana 2 (mood boards)
|
v
Alexander (design system) <--> Stitch MCP (screen designs) + UI UX Pro Max (design intelligence)
|
v
Rick (copy) — fits copy into design constraints
|
v
Leah (reconciliation) — validates all creative output against specs
|
v
Floris/Floor (frontend) <--> UI UX Pro Max (auto) + shadcn/ui + Tailwind
Martijn (iOS) <--> UI UX Pro Max (SwiftUI) + Apple HIG
|
v
Felice (visual assets) <--> Nano Banana 2 (images) + Remotion (video)
Ilian (motion) <--> Nano Banana 2 (frames) + Remotion + FFmpeg
PHASE DETAILS¶
Phase 1: Strategy Valentijn produces a strategy brief defining target audience, positioning, competitive context, and visual direction keywords. This brief is the input for all downstream design work.
Phase 2: Brand Identity Christel uses Nano Banana 2 to generate mood boards (3-5 variations at Flash/1k). Explores color palettes, photographic styles, illustration approaches. Selects direction with human review.
Phase 3: Design System
Alexander creates the design system using UI UX Pro Max for reasoning and Stitch MCP for screen generation. Produces DESIGN.md tokens and component specifications. All downstream agents reference this system.
Phase 4: Content Rick writes copy that fits within the design constraints (character counts, tone, hierarchy). Leah validates that all creative output matches the original specifications.
Phase 5: Implementation Frontend agents (Floris, Floor, Martijn) implement screens using the design system. UI UX Pro Max auto-activates to ensure consistency. shadcn/ui components are themed with Alexander's tokens.
Phase 6: Visual Assets Felice generates final visual assets (hero images, product shots, marketing materials) using Nano Banana 2. Ilian produces motion content using reference frames from Nano Banana 2 combined with Remotion/FFmpeg.
COST:AWARENESS¶
| Tool | Cost per Use | Model / Notes |
|---|---|---|
| Nano Banana 2 (Flash, 1k) | ~$0.09/image | Gemini 3.1 Flash — primary for exploration |
| Nano Banana 2 (Pro, 1k) | ~$0.30/image | Gemini 3 Pro — final deliverables only |
| Nano Banana 2 (Flash, 4k) | ~$0.25/image | High-res hero images |
| Stitch MCP | Free | Google Stitch v0.4.0 (bundled, no per-use cost) |
| UI UX Pro Max | Free | Local skill, embedded knowledge, no API calls |
| Figma MCP | Free | Figma API (read-only access) |
| DALL-E 3 (standard, 1024x1024) | $0.04/image | Backup tool, cheaper for bulk concept iteration |
| Midjourney (v6.1) | ~$0.02-0.10/image | Best aesthetics, slower, subscription-based |
| Flux Pro | ~$0.02-0.05/image | Best text rendering (superseded by NB2 for most cases) |
COST OPTIMIZATION RULES¶
- Use Flash model at 1k resolution for all exploration and iteration
- Upgrade to Pro or higher resolution only for approved final deliverables
- Generate 3-4 variations at low cost before committing to high-quality renders
- Track all generation costs per project — alert at 80% of budget
- Stitch and UI UX Pro Max are free — prefer them over paid tools when they cover the use case
TOOL:VERSIONING¶
| Tool | Current Version | Pin Status | Notes |
|---|---|---|---|
| Stitch MCP | v0.4.0 | PINNED | v0.5.x has process.exit bug — do NOT upgrade |
| Nano Banana 2 | latest | Rolling | No known version issues |
| UI UX Pro Max | latest | Rolling | Local skill, updated with agent deployments |
| Figma MCP | latest | Rolling | API key expires 2026-06-25 — renewal required |
| shadcn/ui | latest | Rolling | Follows Next.js compatibility |
RULES¶
- Always generate mockups BEFORE detailed Stitch screens (cheaper iteration)
- Never use Nano Banana 2 for logos — use SVG code generation
- Save all generated images to the project directory, never inline in conversation
- Stitch is pinned to v0.4.0 (v0.5.x has process.exit bug)
- Figma API key expires 2026-06-25 — track renewal
- Human review is mandatory before any AI-generated visual goes to a client
- All design decisions must be captured in
DESIGN.mdfor cross-agent consistency - When tools overlap in capability, prefer the cheaper option for exploration and the higher-quality option for delivery
CROSS_REFERENCES¶
- Nano Banana 2 integration: nano-banana-2.md
- UI UX Pro Max integration: ui-ux-pro-max.md
- Google Stitch integration: google-stitch.md
- Figma integration: figma.md
- Image generation domain: image-generation.md
- Design system engineering: design-system-engineering.md
- Design tokens: design-tokens.md
- Anthropic skills and plugins: anthropic-skills-plugins.md
DEVELOPMENT_PLUGINS¶
The following Anthropic official plugins support the design-to-development pipeline:
feature-dev — Enforces a structured feature development workflow for all dev agents (Floris, Floor, Martijn, Maxim, Urszula). Ensures implementation follows design system constraints from Alexander's DESIGN.md through requirements analysis, implementation plan, coding, testing, and documentation phases.
code-review — Provides Koen's automated code review framework during Phase 8 (Integration). Reviews implementation against design specifications, catches deviations from design tokens, and flags inconsistencies between screens.
code-simplifier — Helps enforce the 300-line file limit from CODEBASE-STANDARDS.md. Identifies opportunities to simplify component implementations, extract shared design primitives, and reduce duplication across frontend code.