ai-ui-generation

name	ai-ui-generation
license	MIT
compatibility	Claude Code 2.1.220+.
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.
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"]
context	fork
agent	frontend-ui-developer
version	1.1.0
author	OrchestKit
user-invocable	false
disable-model-invocation	true
complexity	medium
persuasion-type	reference
metadata	{"category":"document-asset-creation"}
allowed-tools	["Read","Glob","Grep","WebFetch","WebSearch"]

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	1	HIGH	Multi-surface output, MCP visual output, type-safe catalogs
Prompt Engineering	2	HIGH	Writing prompts for component generation
Quality Assurance	2	CRITICAL/HIGH	Reviewing and gating AI-generated code
Design System Integration	2	HIGH	Injecting tokens, refactoring for conformance
Tool Selection & Workflow	2	MEDIUM	Choosing the right AI tool, iterating prompts

Total: 8 rules across 5 categories