Vibe Coding ガイド

🎯 Vibe Codingとは

Vibe Codingは、AIにコードを生成してもらう開発手法です。 Misora Design Systemは、AIがデザインシステムに沿ったコードを生成しやすいように設計されています。

💡 はじめに

AIにMisora Design Systemを参照させるには、いくつかの方法があります。 初めての方は、方法1: リポジトリをクローンから始めるのがおすすめです。

方法1: リポジトリをクローン（推奨 ⭐）

デザインシステム全体をローカルにダウンロードして、AIに参照させる方法です。

手順

git clone https://github.com/misora-connect/misora-design-system.git
cd misora-design-system

AIへの指示例

misora-design-systemリポジトリのreact/src/components/Buttonコンポーネントを
参照して、ログインボタンを作成してください。

方法2: 特定のファイルを直接見せる

必要なコンポーネントのコードだけをコピーして、AIに見せる方法です。

手順

1. GitHubでreact/src/components/Button/Button.tsxを開く
2. ファイルの内容をコピー
3. AIに以下のようにプロンプトを送る

AIへの指示例

以下のButtonコンポーネントを使って、ログインフォームを作成してください。

[Button.tsxの内容をここに貼り付け]

方法3: HTML版を参照させる

完成されたHTMLデモページをAIに見せる方法です。視覚的にわかりやすいのが特徴。

手順

1. components.htmlをブラウザで開く
2. 使いたいコンポーネントを確認
3. AIにURLまたはHTMLコードを見せる

AIへの指示例

components.htmlを参照して、このデザインシステムに沿った
ログインフォームを作成してください。

[components.htmlのURL または HTMLコードを貼り付け]

方法4: Storybookのスクリーンショット

Storybookを起動して、コンポーネントのスクリーンショットをAIに見せる方法です。

手順

npm install
npm run storybook
# ブラウザで http://localhost:6006 が開く
# スクリーンショットを撮る

AIへの指示例

添付したStorybookのスクリーンショットと同じデザインで、
ログインフォームを作成してください。

[スクリーンショットを添付]

使い分けガイド

用途に応じて最適な方法を選びましょう：

🚀 初めてのVibe Coding - ステップバイステップ

初めての方向けに、最初の一歩を解説します：

1. リポジトリをクローン

   git clone https://github.com/misora-connect/misora-design-system.git
   cd misora-design-system

2. components.htmlをブラウザで開いて確認

   open components.html

3. AIに最初のプロンプトを送る

   misora-design-systemのButtonコンポーネントを使って、
   「お問い合わせ」という文字の入ったPrimaryボタンを作成してください。

4. 生成されたコードを確認
   AIが生成したコードがデザインシステムに沿っているか確認します。
5. 必要に応じて修正を依頼

   ボタンのサイズをlargeにしてください。

💡 Tip: 最初は簡単なコンポーネントから始めて、徐々に複雑な画面を作成していくと効果的です。

1. デザインシステムを参照させる

AIに以下のように指示します：

misora-design-systemのReactコンポーネントを使って、
ログインフォームを作成してください。

2. 具体的なコンポーネントを指定

misora-design-systemのButtonとInputを使って、
以下の機能を持つフォームを作成：
- メールアドレス入力（必須）
- パスワード入力（必須）
- ログインボタン（Primary）
- キャンセルボタン（Outline）

3. レイアウトも含めて指示

misora-design-systemのCardコンポーネント内に、
以下を含むユーザープロファイル画面を作成：
- ユーザー名表示
- メールアドレス編集フィールド
- 保存ボタンとキャンセルボタン

ログインフォーム

misora-design-systemのコンポーネントを使って、
ログインフォームを作成してください。

要件：
- メールアドレス入力（type="email"、必須）
- パスワード入力（type="password"、必須）
- ログインボタン（Primary、フルワイド）
- パスワードを忘れた方はこちらリンク

スタイル：
- Cardコンポーネントで囲む
- max-width: 400px
- 中央配置

管理画面ダッシュボード

misora-design-systemを使って、
SIM管理ダッシュボードを作成してください。

要件：
- 統計カード3枚（アクティブSIM数、データ使用量、月額料金）
- 検索バー（Input）
- SIMカード一覧テーブル（Table）
- アクションボタン（Primary: 新規追加、Outline: エクスポート）

レイアウト：
- グリッドレイアウト使用
- レスポンシブ対応

モーダルダイアログ

misora-design-systemのModalコンポーネントを参考に、
削除確認ダイアログを作成してください。

内容：
- タイトル：「SIMカードの削除」
- 本文：「このSIMカードを削除してもよろしいですか？」
- キャンセルボタン（Outline）
- 削除ボタン（Primary、赤色）

CSS Variablesを使用

ボタンの色をvar(--color-accent)に、
パディングをvar(--spacing-md)にしてください。

レスポンシブデザイン

モバイルでは1カラム、タブレットで2カラム、
デスクトップで3カラムのグリッドにしてください。
misora-design-systemのグリッドクラスを使用。

実装済みコンポーネント

Button

<Button
  variant="primary" | "secondary" | "outline"
  size="xsmall" | "small" | "medium" | "large"
  fullWidth={boolean}
  disabled={boolean}
>
  ボタンテキスト
</Button>

Input

<Input
  label="ラベル"
  placeholder="プレースホルダー"
  type="text" | "email" | "password" | "tel"
  error="エラーメッセージ"
  required={boolean}
  disabled={boolean}
/>

Card

<Card
  hoverable={boolean}
  noPadding={boolean}
>
  カードの内容
</Card>

例1：お問い合わせフォーム

misora-design-systemを使って、お問い合わせフォームを作成。

フィールド：
- お名前（Input、必須）
- メールアドレス（Input、type="email"、必須）
- 電話番号（Input、type="tel"）
- お問い合わせ内容（textarea）

ボタン：
- 送信（Button、variant="primary"、fullWidth）

レイアウト：
- Cardで囲む
- max-width: 600px

例2：サービス紹介カード

misora-design-systemのCardを3枚並べた、
サービス紹介セクションを作成。

各カード内容：
1. IoT/M2M
   - アイコン（任意）
   - タイトル
   - 説明文
   - 詳細リンク

2. モバイルワーカー
3. エンタープライズ

レイアウト：
- グリッド3カラム
- モバイルで1カラム
- gap: var(--spacing-lg)

🤖 Claude Code での活用

別のNext.jsプロジェクトでMisora Design Systemを使う場合、 Claude Codeの /add-dir コマンドでデザインシステムを参照させることができます。 これにより、AIがコンポーネントの実装を理解した上でコードを生成してくれます。

セットアップ手順

1. Step 1: デザインシステムをクローン

   任意の場所にMisora Design Systemをクローンします。

   Terminal コピー

   # 例: ホームディレクトリにクローン
   cd ~
   git clone https://github.com/misora-connect/misora-design-system.git

2. Step 2: Claude Code で /add-dir を実行

   あなたのNext.jsプロジェクトでClaude Codeを起動し、デザインシステムのディレクトリを追加します。

   Claude Code コピー

   /add-dir ~/misora-design-system

   これでClaude Codeがデザインシステムのコンポーネントを参照できるようになります。

3. Step 3: プロンプトでコンポーネントを指定

   UIを作成する際に、デザインシステムを参照するよう指示します。

UIに関するプロンプト例

基本的な使い方

misora-design-system/react/src/components/ のコンポーネントを参照して、
ログインフォームを作成してください。

使用コンポーネント：
- Input（メールアドレス、パスワード）
- Button（ログインボタン）
- Card（フォームを囲む）

フォーム作成

misora-design-system のReactコンポーネントを参考に、
ユーザー登録フォームを作成してください。

フィールド：
- 氏名（Input）
- メールアドレス（Input type="email"）
- 生年月日（Datepicker）
- 都道府県（Select）
- 備考（Textarea）
- 利用規約同意チェックボックス

ボタン：
- 登録する（Button variant="primary" fullWidth）

管理画面の作成

misora-design-system のコンポーネントを使って、
ユーザー管理画面を作成してください。

要件：
- ユーザー一覧をTableで表示（ID、名前、メール、ステータス）
- 新規追加ボタンをクリックするとModalが開く
- 編集ボタンをクリックするとSidePanelが開く
- 検索用のInput
- 月別フィルター用のMonthPicker

スタイル：
- misora-design-systemのCSS Variablesを使用
- レスポンシブ対応

コンポーネント参照パス

Claude Codeにコンポーネントを参照させる際の主要なパス：

アイコンの使い方（Next.js）

Misora Design Systemのアイコンは icons/svg/ ディレクトリにSVGファイルとして格納されています。

利用可能なアイコン（15種類）

プロンプト例：アイコンをReactコンポーネント化

misora-design-system/icons/svg/ にあるSVGアイコンを参照して、
Next.jsで使えるReactコンポーネントを作成してください。

要件：
- 各アイコンをReactコンポーネント化（WifiIcon, SearchIcon など）
- size props で 16, 20, 24, 32, 48px のサイズ指定
- color props で色を指定可能（デフォルトは currentColor）
- TypeScript対応

プロンプト例：アイコン付きボタン

misora-design-systemを参照して、以下のアイコン付きUIを作成：

1. 検索バー
   - 左側にsearchアイコン
   - InputコンポーネントにMisoraのスタイル適用

2. ナビゲーションメニュー
   - menuアイコンでハンバーガーメニュー
   - closeアイコンで閉じる

3. アクションボタン
   - plusアイコン付き「新規追加」ボタン
   - arrow-rightアイコン付き「次へ」ボタン

アイコンファイルの参照パス

💡 Tips

• コンポーネント名は正確に指定（Button、Input など）
• CSS Modulesのスタイルも自動的に参照されます
• Storybookのstoriesファイルも参照すると、使用例がわかりやすくなります
• 複雑な画面は段階的に依頼すると精度が上がります
• アイコンは icons/svg/ を参照してReactコンポーネント化すると便利です

📦 他のReactプロジェクトへの移植

Misora Design SystemのReactコンポーネントは、他のプロジェクトに簡単に移植できるよう設計されています。 各コンポーネントは独立しており、相互依存がありません。

コンポーネントの構造

各コンポーネントは以下の構造で整理されています：

ComponentName/
├── ComponentName.tsx          # メインコンポーネント
├── ComponentName.module.css   # スコープされたスタイル
├── ComponentName.stories.tsx  # Storybook用（移植時は不要）
└── index.ts                   # エクスポート

ポイント： コンポーネント間に相互依存がないため、必要なコンポーネントだけを選んで移植できます。

移植に必要なファイル

コンポーネントを移植する際は、以下のファイルが必要です：

移植手順

1. Step 1: コンポーネントフォルダをコピー
   Terminal コピー

   # 例: Buttonコンポーネントを移植
   cp -r react/src/components/Button 移植先/src/components/
   
   # 複数コンポーネントを移植する場合
   cp -r react/src/components/Button 移植先/src/components/
   cp -r react/src/components/Input 移植先/src/components/
   cp -r react/src/components/Card 移植先/src/components/

2. Step 2: スタイルファイルをコピー
   Terminal コピー

   # stylesフォルダを作成してコピー
   mkdir -p 移植先/src/styles
   cp react/src/styles/globals.css 移植先/src/styles/
   cp react/src/styles/variables.css 移植先/src/styles/

3. Step 3: グローバルスタイルをインポート

   アプリケーションのエントリーポイントでスタイルをインポートします。

   App.tsx / _app.tsx コピー

   // Next.js の場合: pages/_app.tsx または app/layout.tsx
   import '../styles/globals.css';
   
   // Create React App の場合: src/App.tsx または src/index.tsx
   import './styles/globals.css';

4. Step 4: コンポーネントを使用
   TSX コピー

   import { Button } from './components/Button';
   import { Input } from './components/Input';
   import { Card } from './components/Card';
   
   function LoginForm() {
     return (
       <Card>
         <Input label="メールアドレス" type="email" required />
         <Input label="パスワード" type="password" required />
         <Button variant="primary" fullWidth>ログイン</Button>
       </Card>
     );
   }

⚠️ 注意事項

• CSS変数は必須： variables.css をコピーしないと、色やスペーシングが正しく表示されません。 スタイルが崩れる場合は、まずこのファイルがインポートされているか確認してください。
• React 18+ が必要： コンポーネントはReact 18以上を前提に設計されています。
• CSS Modulesのサポート： ビルドツール（Vite、Next.js、Create React App等）がCSS Modulesをサポートしている必要があります。
• Storybookファイルは不要： .stories.tsx ファイルは開発ドキュメント用なので、移植時は削除して構いません。

移植チェックリスト

移植が完了したら、以下を確認してください：

• ☐ コンポーネントフォルダがコピーされている
• ☐ globals.css と variables.css がコピーされている
• ☐ エントリーポイントで globals.css をインポートしている
• ☐ TypeScript使用時は css-modules.d.ts がある
• ☐ ボタンやカードが正しい色で表示される
• ☐ ダークモード切り替えが動作する（使用する場合）