UI Visual Creation Stack

UI Visual Creation Stack

Overview

Full visual creation workflow for Claude Code using Google Stitch MCP and Figma MCP. Automatically routes tasks to the best tool, coordinates sub-agents, and produces visually coherent, implementation-aware outputs.

Active tools:

• Google Stitch MCP — generate screens from text, manage design systems, create variants (mcp__stitch__*)
• Figma MCP — write to canvas, implement designs as code, extract design context (figma-use, figma-generate-design, figma-implement-design, etc.)
• frontend-design — production-grade frontend code with strong aesthetic direction
• excalidraw-diagram — architecture and flow diagrams
• webapp-testing — visual QA and screenshot capture of live UIs

See tool-reference.md for complete command reference. See workflow-patterns.md for step-by-step patterns.

Routing Decision

digraph routing {
    "Visual task received" [shape=doublecircle];
    "Generate new screens from description?" [shape=diamond];
    "Implement design as production code?" [shape=diamond];
    "Write/edit directly on Figma canvas?" [shape=diamond];
    "Visualize flow or architecture?" [shape=diamond];
    "QA a live UI?" [shape=diamond];

    "Google Stitch" [shape=box];
    "Figma: figma-implement-design" [shape=box];
    "Figma: figma-use + figma-generate-design" [shape=box];
    "excalidraw-diagram" [shape=box];
    "webapp-testing" [shape=box];
    "frontend-design" [shape=box];
    "Combined: Stitch → Figma" [shape=box];

    "Visual task received" -> "Generate new screens from description?";
    "Generate new screens from description?" -> "Google Stitch" [label="fast iteration"];
    "Generate new screens from description?" -> "Implement design as production code?" [label="no"];
    "Implement design as production code?" -> "Figma: figma-implement-design" [label="yes, from Figma file"];
    "Implement design as production code?" -> "frontend-design" [label="yes, from description"];
    "Implement design as production code?" -> "Write/edit directly on Figma canvas?" [label="no"];
    "Write/edit directly on Figma canvas?" -> "Figma: figma-use + figma-generate-design" [label="yes"];
    "Write/edit directly on Figma canvas?" -> "Visualize flow or architecture?" [label="no"];
    "Visualize flow or architecture?" -> "excalidraw-diagram" [label="yes"];
    "Visualize flow or architecture?" -> "QA a live UI?" [label="no"];
    "QA a live UI?" -> "webapp-testing" [label="yes"];
    "QA a live UI?" -> "Combined: Stitch → Figma" [label="full end-to-end"];
}

Default rules:

• Fast screen generation or visual exploration → Stitch
• Need editable Figma layers or design system → Figma
• Producing frontend code → frontend-design or figma-implement-design
• Multi-step end-to-end → Stitch for generation, Figma for refinement

Sub-Agent Roles

When task complexity justifies parallel agents, use these scoped roles:

Keep agents scoped. Merge outputs into one coherent final result.

Required Defaults

Every visual output must consider:

Activation Patterns

This skill activates for (examples — not exhaustive):

• "Design a dashboard for..."
• "Create screens for..."
• "Wireframe the onboarding flow"
• "Make a landing page for..."
• "Generate UI for the settings screen"
• "Redesign this component"
• "Create a design system for..."
• "Build a high-fidelity mockup"
• "What should this look like on mobile?"
• "Iterate on this design"
• "Generate 3 style directions for..."
• "Push this to Figma"
• "Create variants of this screen"
• "Review the visual quality of this UI"
• "Build a component library"

Quality Gates

Before delivering any visual output:

1. Does the layout have clear visual hierarchy?
2. Are text sizes and spacing consistent?
3. Does the color system have sufficient contrast (WCAG AA)?
4. Is the design responsive or scoped correctly?
5. Are component names and structures reusable?
6. Does it match the stated context (product type, user, platform)?
7. Is the output implementation-ready or clearly documented for handoff?

Failure Prevention