/ai-ui-generation

name: ai-ui-generation
license: MIT
compatibility: "Claude Code 2.1.277+."
description: AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality assurance. Use when generating UI components with AI tools, rendering multi-surface MCP visual output, reviewing AI-generated code, or integrating AI output into design systems.
user-invocable: false
disable-model-invocation: true
metadata:
  owner-agent: "frontend-ui-developer"
  category: document-asset-creation
  version: "1.1.0"
  author: "OrchestKit"
  complexity: "medium"
  tags: "ai-ui, json-render, v0, v0-app, stitch, bolt, bolt-cloud, cursor, prompt-engineering, code-generation, design-tokens, component-generation, ai-review, shadcn-ui"
allowed-tools: "Read Glob Grep WebFetch WebSearch mcp__stitch__generate_screen_from_text mcp__plugin_hq-ext_stitch__generate_screen_from_text mcp__stitch__get_screen mcp__plugin_hq-ext_stitch__get_screen"
  # Stitch: body names generate_screen_from_text and get_screen.
  # Grant BOTH prefixes: standalone stitch (mcp__stitch__*) and hq-ext plugin
  # (mcp__plugin_hq-ext_stitch__*). See https://code.claude.com/docs/en/mcp-servers

AI UI Generation

Patterns for generating, reviewing, and integrating UI components produced by AI tools (json-render, v0.app, Google Stitch, Bolt Cloud, Cursor). **json-render is the first choice** for multi-surface, MCP visual output, and type-safe catalog workflows. AI-generated UI is **80% boilerplate, 20% custom** — the human reviews, refactors, and owns the output. These rules ensure AI output meets design system, accessibility, and quality standards before shipping.

> **Tool landscape as of 2026-04:** > - **v0.dev → v0.app** (Jan 2026 rebrand) — expanded from component scaffolding to full-stack app generation with shipping targets (Vercel, Cloudflare, Railway). v0.app MCP server (`@vercel/v0-mcp`) exposes generation as an MCP tool, so agents can call it programmatically. > - **Google Stitch** — design-first generation via `stitch.withgoogle.com/docs/mcp`. Produces multi-screen apps (up to 5 interconnected screens) with React/HTML + PNG. Strong when input is a screenshot, URL, or DESIGN.md file. > - **Bolt Cloud** (StackBlitz, 2026) — Bolt now runs the dev environment in the cloud (no local WebContainer). Integrates with GitHub and supports persistent databases. Best for full-stack prototypes with backend + deploy. > - **v0.app** and **Stitch** both integrate with shadcn/ui styles; pair with the `shadcn apply <style>` CLI (v4) to reuse generated output.

Quick Reference

| Category | Rules | Impact | When to Use | |----------|-------|--------|-------------| | [json-render Integration](#json-render-integration) | 1 | HIGH | Multi-surface output, MCP visual output, type-safe catalogs | | [Prompt Engineering](#prompt-engineering) | 2 | HIGH | Writing prompts for component generation | | [Quality Assurance](#quality-assurance) | 2 | CRITICAL/HIGH | Reviewing and gating AI-generated code | | [Design System Integration](#design-system-integration) | 2 | HIGH | Injecting tokens, refactoring for conformance | | [Tool Selection & Workflow](#tool-selection--workflow) | 2 | MEDIUM | Choosing the right AI tool, iterating prompts |

**Total: 8 rules across 5 categories**

Decision Table — json-render vs v0.app vs Stitch vs Bolt Cloud vs Cursor

| Scenario | Tool | Why | |----------|------|-----| | Multi-surface / MCP visual output | json-render | Single catalog renders to any surface — FIRST CHOICE | | Type-safe component catalog | json-render | Schema-driven specs with per-platform registries | | Streaming UI from AI agents | json-render | Structured JSON specs render progressively | | New component from scratch | v0.app | Full scaffold with shadcn/ui, Tailwind, a11y. Pair with `shadcn apply <style>` for style consistency | | Full-stack app with deploy | v0.app | Jan 2026 expansion — routes, DB, auth, Vercel/Cloudflare deploy in one generation | | Design-driven (screenshot/URL/DESIGN.md) | Google Stitch | `generate_screen_from_text` (once; no retry) + `get_screen(name="projects/{project}/screens/{screen}")` | | Multi-screen flow from a visual source | Google Stitch | Strongest when grounded in an existing design | | Full-stack prototype with persistent backend | Bolt Cloud | Cloud dev env, GitHub integration, databases | | Incremental change in existing codebase | Cursor | Understands project context, imports, tokens | | Refactor existing component | Cursor | Reads surrounding code, respects conventions | | Explore visual design variations | v0.app or Stitch | v0.app for freeform, Stitch when grounded in a reference | | Add feature to running app | Bolt Cloud | Cloud preview, full environment, persists between sessions | | Fix bug in existing component | Cursor | Inline edits with full project awareness |

Quick Start

Structured Prompt Example

Generate a React signup form component using:
- Framework: React 19 + TypeScript
- Styling: Tailwind CSS v4 + shadcn/ui (Luma style — rounded-4xl, shadow-md elevation)
- Style: run `npx shadcn@latest apply luma` (CLI v4, Apr 2026) after generation
- Tokens: use color.primary, color.destructive, spacing.md from our design system
- A11y: ARIA labels on all inputs, error announcements via aria-live
- States: default, loading (disabled + spinner), error (inline messages), success
- Responsive: stack on mobile (<640px), 2-col on desktop

Review Example — After AI Generation

// AI generated: hardcoded hex value
<button className="bg-[#3b82f6] text-white px-4 py-2">Submit</button>

// After human review: design token applied
<Button variant="default" size="md">Submit</Button>

Rule Details

json-render Integration

json-render is the **first choi