AI支援UI開発ワークフロー
AI支援UI開発のための完全な操作マニュアル。すべてのプロンプトとコマンドは直接コピーして使用できます。
1. UIの複製 - 画像からJSON
ワークフロー
- UIデザイン（スクリーンショット/デザインファイル）を準備
- GPT-4V/Claudeを使用してUIパラメータを抽出
- JSONファイルを生成
- JSONをCursorのコンテキストとして使用
プロンプトテンプレート
このUIデザインを分析し、以下のパラメータをJSON形式で抽出してください：
1. レイアウト情報：コンテナタイプ、配置、間隔、padding、margin
2. カラーシステム：プライマリ、セカンダリ、背景、テキストカラー（HEX値を提供）
3. タイポグラフィ：フォントサイズ、ウェイト、行の高さ、文字間隔
4. コンポーネントの寸法：幅、高さ、border-radius、border
5. シャドウ効果：box-shadowパラメータ
6. アイコン/画像：位置、サイズ、タイプ
以下のJSON構造で出力してください：
{
"layout": {},
"colors": {},
"typography": {},
"spacing": {},
"components": []
}JSONファイルの例
design-system.jsonを作成：
json
{
"colors": {
"primary": "#3B82F6",
"secondary": "#8B5CF6",
"background": {
"base": "#FFFFFF",
"secondary": "#F9FAFB"
},
"text": {
"primary": "#111827",
"secondary": "#6B7280"
}
},
"typography": {
"fontFamily": {
"sans": "'Inter', sans-serif"
},
"fontSize": {
"base": "16px",
"lg": "18px",
"xl": "20px"
}
},
"spacing": {
"sm": "8px",
"md": "16px",
"lg": "24px"
}
}2. UIのカスタマイズ - Tweakcn
ツールリンク
🔗 Tweakcn: https://www.tweakcn.com/
ワークフロー
- Tweakcnにアクセス → コンポーネントタイプを選択
- スタイルパラメータをリアルタイムで調整
- 生成されたCSS/Tailwindコードをコピー
.cssファイルとして保存- スタイルファイルをCursorのコンテキストとして使用
3. コンポーネントライブラリ - React Bits
前提条件
Framer Motionをインストール：
bash
npm install framer-motionプロンプトテンプレート
要件：アコーディオンコンポーネントを作成
参照コード：
```jsx
[React BitsのAccordionコードをここに貼り付け]
```
要件：
1. TypeScriptを使用
2. Framer Motionを統合してスムーズなアニメーションを実現
3. 単一/複数展開モードをサポート
4. カスタムアイコンを追加
5. レスポンシブデザイン
6. 完全な型定義を含む
スタイル要件：
- Tailwind CSSを使用
- 8pxのborder-radius
- ホバー状態で背景色変更4. アニメーション
アニメーションキーワード
| 英語 | 説明 |
|---|---|
| fade in/out | 透明度の変化 |
| slide in/out | transform: translateX/Y |
| scale | transform: scale |
| rotate | transform: rotate |
| bounce | バウンス効果 |
| spring | 弾性物理効果 |
| parallax scroll | 異なる速度でスクロール |
| hover lift | マウスホバー時の上昇 |
| pulse | 周期的なスケール |
| stagger | 順次表示 |
プロンプトテンプレート
ログインページにアニメーションを追加
対象：LoginPage.tsx
アニメーション要件：
1. ロゴ - 上からフェードイン、duration 0.6s
2. フォームカード - 下から上にスライド + フェードイン、duration 0.8s、delay 0.2s
3. 入力フィールド - stagger、それぞれ0.1s遅延
4. ボタン - バウンスイン、delay 0.8s
Framer Motionを使用、ease-outカーブ5. フォント - Google Fonts
Google Fontsリンク
🔗 Google Fonts: https://fonts.google.com/
プロンプトテンプレート
Google Fontsをプロジェクトに統合
選択したフォント：Inter（ウェイト：400, 500, 600, 700）
参照方法：
**HTML Link：**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```
適用：
1. Interをグローバルフォントとして設定（body、html）
2. 見出しは font-weight: 700 を使用
3. ボタンは font-weight: 600 を使用
4. 本文は font-weight: 400 を使用
更新：
- index.html（linkを追加）
- globals.css（font-familyを設定）
- tailwind.config.js（fontFamily設定を追加）ツールリファレンス
| ツール | リンク | 用途 |
|---|---|---|
| Google Fonts | https://fonts.google.com/ | フォントリソース |
| Tweakcn | https://www.tweakcn.com/ | コンポーネントスタイリング |
| React Bits | https://github.com/vasanthk/react-bits | Reactパターン |
| Framer Motion | https://www.framer.com/motion/ | Reactアニメーション |
| Tailwind CSS | https://tailwindcss.com/ | CSSフレームワーク |