vapor-ui

Vapor UI デザインスキル

手順

ステップ 1：ユーザーの意図を特定し、バージョンを検出する

次の確認を並行して実行します：

1. ユーザーの意図を判断する：

   • コンポーネントの検索：利用可能なコンポーネントや、特定のコンポーネントの詳細を知りたい
   • 使用方法の案内：props、バリエーション、またはサンプルコードが必要
   • モックアップの生成：UI プロトタイプを作成したい
   • Figma からの変換：Figma デザインをコードに変換したい

2. Vapor UI のバージョンを判断する（優先順位順）：

   1. ユーザー指定のバージョン：ユーザーがバージョンを指定した場合は、そのバージョンを直接使用します
   2. コードベースから自動検出：

      node scripts/detect-version.mjs [start-path]
      

      出力：CORE: x.x.x および ICONS: x.x.x

   コンポーネントのスクリプトには CORE バージョンを、アイコンのスクリプトには ICONS バージョンを使用します。

ステップ 2：コンポーネント情報

コンポーネント一覧を取得する：

node scripts/get-component-list.mjs <VERSION>

例：node scripts/get-component-list.mjs 1.0.0-beta.12

コンポーネントの詳細（props、説明）を取得する：

node scripts/get-component-info.mjs <VERSION> <COMPONENT> [PART]

例：node scripts/get-component-info.mjs 1.0.0-beta.12 avatar

コンポーネント構造の詳細については、references/component-structure.mdを参照してください。

ステップ 3：コンポーネントの例

サンプルコードを取得する：

node scripts/get-component-examples.mjs <VERSION> <COMPONENT> [EXAMPLE_NAME]

例：node scripts/get-component-examples.mjs 1.0.0-beta.12 avatar default-avatar

ステップ 3.5：アイコンの検索

アイコン一覧を取得する：

node scripts/get-icon-list.mjs <ICONS_VERSION> [search-keyword]

例：

• node scripts/get-icon-list.mjs 1.0.0-beta.12 - すべてのアイコンを一覧表示
• node scripts/get-icon-list.mjs 1.0.0-beta.12 arrow - 「arrow」を含むアイコンを検索
• node scripts/get-icon-list.mjs 1.0.0-beta.12 --outline - アウトラインアイコンのみを一覧表示
• node scripts/get-icon-list.mjs 1.0.0-beta.12 --filled - 塗りつぶしアイコンのみを一覧表示

注意：アイコンを検索する際は、detect-version.mjsの出力にある ICONS バージョンを使用してください。

ステップ 4：モックアップの生成

モックアップの依頼では：

1. get-component-list.mjsを実行して、利用可能なコンポーネントを特定します
2. 必要な各コンポーネントについて、get-component-info.mjsを実行して props を確認します
3. get-component-examples.mjsを実行して、使用パターンを確認します
4. Vapor UI コンポーネントのみを使用してコードを生成します
5. 完全で、そのままコピーして貼り付けられるコードを提供します

ステップ 5：Figma デザインの変換

Figma からの変換依頼では：

1. Figma URL を解析して、file_keyとnode_idを抽出します：

   https://www.figma.com/design/{file_key}/...?node-id={node_id}
   

2. MCP を使用してデザインコンテキストを取得します：

   mcp__figma-dev-mode-mcp-server__get_design_context
     - file_key: URL から抽出した値
     - node_id: URL から抽出した値（形式：「X-Y」または「X:Y」）
     - depth: 5（複雑なデザインの場合はそれ以上）
   

3. ノードツリーを分析します：

   • 💙で始まるノード：デザインシステムのコンポーネント（references/design-system-recognition.mdを参照）
   • 自動レイアウトフレーム：VStack／HStack／Box／Grid に変換します（references/figma-layout-mapping.mdを参照）
   • TEXT ノード：テキストコンテンツを抽出します

4. レイアウトプロパティを変換します：

   • layoutMode: VERTICAL → VStack
   • layoutMode: HORIZONTAL → HStack
   • itemSpacing → gap トークン
   • padding* → padding トークン
   • マッピングの全容はreferences/token-mapping.mdを参照してください

5. デザインシステムのコンポーネントを認識します：

   • 💙で始まるノードは vapor-ui コンポーネントです
   • componentPropertiesを抽出し、バリエーションを props にマッピングします
   • 例：💙ButtonでSize: md, ColorPalette: primaryの場合 → <Button size="md" colorPalette="primary">
   • 重要：レイアウト props（gap、padding、margin、backgroundColorなど）は、$css prop 内に指定する必要があります

6. コードを生成します：

   • ノードツリーから JSX を構築します（ボトムアップ）
   • デザイントークンを使用してスタイルユーティリティ props を適用します
   • 本番環境で使用できるコードを出力します

---

例

例 1：コンポーネントの使い方に関する質問

ユーザー：「Button コンポーネントの使い方を教えてください」

アクション：

1. node scripts/get-component-info.mjs 1.0.0-beta.12 button を実行します
2. node scripts/get-component-examples.mjs 1.0.0-beta.12 button を実行します
3. props、バリアント、コード例を提示します

結果：コード例を含む、Button の使い方に関する完全なガイド

---

例 2：モックアップの生成

ユーザー：「ログインページのモックアップを作成してください」

アクション：

1. get-component-list.mjs を実行して、利用可能なコンポーネントを確認します
2. text-input、button、card、form の get-component-info.mjs を実行します
3. フォームのパターンについて get-component-examples.mjs を実行します
4. Vapor UI を使ってレスポンシブなレイアウトを生成します

結果：本番環境ですぐに使えるログインページのコード

---

例 3：コンポーネントの検索

ユーザー：「利用可能なフォームコンポーネントを教えてください」

アクション：

1. node scripts/get-component-list.mjs 1.0.0-beta.12 を実行します
2. 出力からフォーム関連のコンポーネント（text-input、textarea、checkbox、radio、select など）を絞り込みます

結果：フォーム関連コンポーネントを分類した一覧

---

Figma 変換の例については、references/conversion-examples.md を参照してください。

---

トラブルシューティング

エラー	原因	解決策
コンポーネントが見つからない	名前の不一致またはバージョンエラー	get-component-list.mjs を実行し、バージョンを確認します
スクリプトの取得エラー	無効なバージョンまたはネットワークの問題	detect-version.mjs を再実行し、ネットワークを確認します
Figma ノードが認識されない	💙 プレフィックスがない	カスタムレイアウト（Box/VStack/HStack/Grid）として扱います
間隔の不一致	標準外の値	最も近いトークンに丸めます（token-mapping.md を参照）

---

参考資料

コンポーネントのドキュメント

• references/url-patterns.md：コンポーネントデータ取得用の GitHub URL パターン
• references/component-structure.md：コンポーネントのファイル構造と JSON スキーマ

Figma 変換

• references/figma-layout-mapping.md：オートレイアウトからコンポーネントへのマッピング
• references/design-system-recognition.md：💙 プレフィックスによるコンポーネントの認識
• references/token-mapping.md：Figma の値から vapor-ui のトークンへの変換
• references/conversion-examples.md：Figma からコードへの変換例

スクリプト

スクリプト	目的
detect-version.mjs	package.json から @vapor-ui/core と @vapor-ui/icons のバージョンを検出します
get-component-list.mjs	利用可能なすべてのコンポーネントを一覧表示します
get-component-info.mjs	コンポーネントの props とドキュメントを取得します
get-component-examples.mjs	コンポーネントのコード例を取得します
get-icon-list.mjs	アイコンの一覧表示と検索を行います（--outline、--filled、キーワード検索に対応）

MCP ツール

ツール	目的
mcp__figma-dev-mode-mcp-server__get_design_context	Figma のデザインノードツリーを取得します
mcp__figma-dev-mode-mcp-server__get_screenshot	視覚的な参照画像を取得します
mcp__figma-dev-mode-mcp-server__get_metadata	Figma ファイルのメタデータを取得します