ai-ui-generation

AI UI 生成

AI ツール（json-render、v0.app、Google Stitch、Bolt Cloud、Cursor）が生成した UI コンポーネントを生成、レビュー、統合するためのパターンです。複数のサーフェスに対応する出力、MCP のビジュアル出力、型安全なカタログのワークフローでは、json-render を第一の選択肢とします。AI 生成 UI は**定型部分が 80％、カスタム部分が 20％**です。人間が出力をレビューし、リファクタリングし、その責任を担います。これらのルールに従うことで、リリース前に AI の出力がデザインシステム、アクセシビリティ、品質の基準を満たしていることを確認できます。

2026-04 時点のツールの状況：

• v0.dev → v0.app（2026 年 1 月にリブランド）— コンポーネントのひな形生成から、リリース先（Vercel、Cloudflare、Railway）を指定できるフルスタックアプリ生成へと拡張されました。v0.app MCP サーバー（@vercel/v0-mcp）は生成機能を MCP ツールとして公開しているため、エージェントがプログラムから呼び出せます。
• Google Stitch — stitch.withgoogle.com/docs/mcp によるデザイン優先の生成ツールです。React/HTML と PNG を含む、最大 5 画面が相互接続されたアプリを生成します。入力がスクリーンショット、URL、または DESIGN.md ファイルの場合に優れています。
• Bolt Cloud（StackBlitz、2026 年）— Bolt は現在、開発環境をクラウド上で実行します（ローカルの WebContainer は不要です）。GitHub と統合し、永続データベースにも対応しています。バックエンドとデプロイを含むフルスタックのプロトタイプに最適です。
• v0.app と Stitch はどちらも shadcn/ui スタイルと統合できます。生成された出力を再利用するには、shadcn apply <style> CLI（v4）と組み合わせてください。

クイックリファレンス

カテゴリ	ルール	影響度	使用場面
json-render の統合	1	HIGH	複数サーフェスへの出力、MCP のビジュアル出力、型安全なカタログ
プロンプトエンジニアリング	2	HIGH	コンポーネント生成用のプロンプト作成
品質保証	2	CRITICAL/HIGH	AI 生成コードのレビューとリリース判定
デザインシステムとの統合	2	HIGH	トークンの適用、準拠に向けたリファクタリング
ツールの選択とワークフロー	2	MEDIUM	適切な AI ツールの選択、プロンプトの反復

合計：5 カテゴリにわたる 8 ルール

判断表 — json-render、v0.app、Stitch、Bolt Cloud、Cursor の比較

シナリオ	ツール	理由
複数サーフェス／MCP のビジュアル出力	json-render	1 つのカタログであらゆるサーフェスに描画できます — 第一の選択肢
型安全なコンポーネントカタログ	json-render	プラットフォームごとのレジストリを備えたスキーマ駆動の仕様です
AI エージェントからのストリーミング UI	json-render	構造化された JSON 仕様を段階的に描画します
新規コンポーネントをゼロから作成	v0.app	shadcn/ui、Tailwind、a11y を含む完全なひな形です。スタイルの一貫性を保つには shadcn apply <style> と組み合わせてください
デプロイを含むフルスタックアプリ	v0.app	2026 年 1 月の拡張により、ルート、DB、認証、Vercel/Cloudflare へのデプロイを 1 回の生成で実現します
デザイン主導（スクリーンショット／URL／DESIGN.md）	Google Stitch	generate_screen_from_text（1 回のみ。再試行なし）+ get_screen(name="projects/{project}/screens/{screen}")
ビジュアルソースから複数画面のフローを生成	Google Stitch	既存のデザインを基にする場合に最も優れています
永続バックエンドを備えたフルスタックプロトタイプ	Bolt Cloud	クラウド開発環境、GitHub との統合、データベース
既存のコードベースへの段階的な変更	Cursor	プロジェクトのコンテキスト、インポート、トークンを理解します
既存コンポーネントのリファクタリング	Cursor	周辺コードを読み取り、規約を尊重します
ビジュアルデザインのバリエーションを検討	v0.app または Stitch	自由な生成には v0.app、参照デザインを基にする場合は Stitch
実行中のアプリに機能を追加	Bolt Cloud	クラウドプレビュー、完全な環境、セッション間での状態保持
既存コンポーネントのバグを修正	Cursor	プロジェクト全体を把握したインライン編集

クイックスタート

構造化プロンプトの例

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

レビュー例 — AI 生成後

// 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>

ルールの詳細

json-render の統合

出力を複数のサーフェス（Web、モバイル、CLI、MCP）でレンダリングする必要がある場合、AI による UI 生成には json-render が第一の選択肢です。コンポーネントのカタログを一度定義し、AI から JSON 仕様を生成して、任意のターゲットサーフェスでレンダリングします。カタログの作成パターンについては、ork:json-render-catalog を参照してください。

ルール	ファイル	主なパターン
json-render のパターン	rules/json-render-patterns.md	カタログ優先：一度定義し、プラットフォームごとのレジストリを通じてどこでもレンダリング

プロンプトエンジニアリング

フレームワーク、トークン、a11y、状態をあらかじめ指定する構造化プロンプトです。

ルール	ファイル	主なパターン
プロンプトのパターン	rules/ai-prompt-patterns.md	フレームワーク、トークン、a11y を指定する制約優先のプロンプト
イテレーションのパターン	rules/ai-iteration-patterns.md	複雑なインタラクティブ状態に対応する複数回のプロンプト

品質保証

AI が生成したコンポーネントを体系的にレビューし、CI で品質を担保します。

ルール	ファイル	主なパターン
レビューチェックリスト	rules/ai-review-checklist.md	AI が生成したすべてのコンポーネントを対象とする10項目のチェックリスト
CI ゲート	rules/ai-ci-gate.md	マージ前に自動化された品質ゲートを実施

デザインシステムとの統合

AI の出力がデザイントークンを使用し、デザインシステムに準拠するようにします。

ルール	ファイル	主なパターン
トークンの注入	rules/ai-token-injection.md	プロンプトでトークン名を渡し、ハードコードされた値を拒否
リファクタリングによる準拠	rules/ai-refactoring-conformance.md	AI の生出力をデザインシステムに合わせてリファクタリングする手順

ツールの選択とワークフロー

適切な AI ツールを選び、効果的に反復します。

ルール	ファイル	主なパターン
ツールの選択	rules/ai-tool-selection.md	ユースケースに合わせてツールを選択：v0、Bolt、Cursor
イテレーションのパターン	rules/ai-iteration-patterns.md	複雑な状態に対応する反復的な改善

主な原則

1. 出力に責任を持つ — AI はドラフトを生成します。エンジニアがレビューとリファクタリングを行い、リリースするものに責任を持ちます。
2. リテラルよりトークンを優先する — ハードコードされた色、余白、タイポグラフィの値は決して受け入れないでください。必ずデザイントークンにマッピングします。
3. 制約優先のプロンプト — フレームワーク、トークン、shadcn のスタイル（Luma/Nova など）、a11y、状態をあらかじめ指定します。曖昧なプロンプトからは曖昧な出力が生成されます。
4. 反復的に改善する — 複雑なコンポーネントには2～3回のプロンプトが必要です。1回目は構造、2回目は状態、3回目は仕上げに取り組みます。
5. CI は必須 — AI が生成したすべてのコンポーネントに、手書きのコードと同じ CI パイプラインを適用します。
6. アクセシビリティをデフォルトにする — すべてのプロンプトに a11y の要件を含め、生成後に自動チェックで検証します。

アンチパターン（禁止）

• AI の生出力をそのままリリースする — 人によるレビューとデザインシステムに合わせたリファクタリングを行わずに、AI 生成コードをマージしてはいけません。
• 曖昧なプロンプト — 「すてきなフォームを作って」では、一貫性がなく、要件にも準拠しない出力が生成されます。必ず制約を指定してください。
• 16進数や rgb の値をハードコードする — AI ツールは任意の色をデフォルトで使用します。OKLCH のデザイントークンに置き換えてください。
• 「単純な」コンポーネントで CI を省略する — AI 生成コードにも、手書きのコードと同じ範囲のバグが潜んでいます。
• 段階的な変更に v0.app を使う — v0.app は一から生成します。既存のコードベースを変更する場合は Cursor を使ってください。
• 複雑なコンポーネントを一度のプロンプトで生成する — 複数の状態（読み込み、エラー、空、成功）を持つコンポーネントには、反復的なプロンプトが必要です。
• AI の a11y に関する主張を鵜呑みにする — AI ツールは ARIA 属性を一貫性なく追加します。必ず axe-core または Storybook a11y アドオンで検証してください。

詳細ドキュメント

リソース	説明
references/ai-ui-tool-comparison.md	json-render、v0、Bolt、Cursor、Copilot の比較
references/prompt-templates-library.md	よく使うコンポーネント向けのコピー＆ペースト可能なプロンプトテンプレート
references/ai-ui-failure-modes.md	主な 10 件の失敗パターンと対処法

関連スキル

• ork:json-render-catalog — json-render カタログの作成、スキーマ検証、レジストリのパターン
• ork:mcp-visual-output — json-render 仕様を使った MCP ビジュアル出力のレンダリング
• ork:multi-surface-render — 単一のコンポーネントカタログからのクロスプラットフォームレンダリング
• ork:ui-components — shadcn/ui コンポーネントのパターンと CVA バリアント
• ork:accessibility — WCAG 準拠、ARIA のパターン、スクリーンリーダーのサポート
• ork:animation-motion-design — Motion ライブラリのアニメーションパターン
• ork:responsive-patterns — レスポンシブレイアウトとコンテナークエリのパターン
• ork:design-system-tokens — デザイントークンのアーキテクチャとテーマ設定