moai-design-tools

デザインツール統合スペシャリスト

デザインからコードへのワークフローを包括的にガイドします。主な機能は、Figma MCP（デザインの取得）、Pencil MCP（ビジュアルレンダリング）、Pencilからコードへのエクスポート（React/Tailwind の生成）の3つです。

デフォルトのデザインスタイル（shadcn/ui Nova）

具体的なデザインスタイルの指定がない場合は、Notionスタイルのニュートラルなカラースキームを備えた shadcn/ui Nova プリセットを使用します。

bunx --bun shadcn@latest create --preset "https://ui.shadcn.com/init?base=radix&style=nova&baseColor=neutral&theme=neutral&iconLibrary=hugeicons&font=noto-sans&menuAccent=bold&menuColor=default&radius=small&template=next&rtl=false" --template next

Nova スタイルの設定

プロパティ	値	説明
スタイル	nova	モダンでクリーンなデザイン言語
ベースカラー	neutral	Notionスタイルのグレースケールパレット
テーマ	neutral	一貫性のあるニュートラルなテーマ設定
アイコンライブラリ	hugeicons	包括的なアイコンセット
フォント	noto-sans	クリーンで読みやすいサンセリフ体
角丸	small	控えめな角丸
メニューのアクセント	bold	メニューを強調する明瞭なスタイル

デフォルトスタイルを使用する場面

次のような場合は、Nova プリセットを適用します。

• ユーザーが具体的な指定をせずに、「クリーン」「モダン」「ミニマリスト」なデザインを求めている場合
• ブランドガイドラインやデザインシステムが指定されていない場合
• ダッシュボード、管理パネル、生産性向上ツールを作成する場合
• ドキュメントやコンテンツを中心とするインターフェースを構築する場合

ツールの選び方（クイックガイド）

Figma MCP - デザインコンテキストと生成

リモート MCP サーバー（https://mcp.figma.com/mcp）を介した公式の Figma MCP 統合です。次のコマンドでインストールします：claude plugin install figma@claude-plugins-official

最適な用途：Figma ファイルからのデザインコンテキストの取得、デザイントークンの抽出、Code-to-Canvas（generate_figma_design）による新しいデザインの生成、FigJam ボードへのアクセス、Code Connect によるコンポーネントとコードの紐付け。

主な強み：読み取り（get_design_context、get_variable_defs、get_screenshot、get_metadata）、書き込み（use_figma、generate_figma_design、create_new_file）、Code Connect（get_code_connect_map、add_code_connect_map、get_code_connect_suggestions、send_code_connect_mappings）、FigJam（get_figjam、generate_diagram）、デザインシステム（search_design_system、create_design_system_rules）、ユーティリティ（whoami）を含む、公式ツール16種類を備えています。ベータ期間中は、キャンバスへの書き込みを無料で利用できます。

ワークフロー：プラグインをインストール → get_design_context → get_variable_defs → get_screenshot → デザインを実装 → スクリーンショットと照合して検証。

Context7 ライブラリ：/figma/docs

Pencil MCP - ビジュアルデザインのレンダリング

AI を活用したデザイン生成により、.pen デザインファイル（スキーマ v2.9）を作成・編集する Pencil MCP 統合です。CLI：@pencil.dev/cli v0.2.4。

最適な用途：ラピッドプロトタイピング、ビジュアルデザインの反復、テキストによる説明からの UI モックアップ作成、共同でのデザイン検討、実装前のビジュアル提案。

主な強み：テキストからデザインへの変換、デザイン操作の一括実行、スタイルガイドとの連携、実装前のビジュアルプレビュー、共同デザインのワークフロー、スロットを備えたコンポーネントシステム、デザインライブラリ（.lib.pen）。

利用可能な Pencil MCP ツール（14 個 + CLI 専用 1 個）：

注： .pen ファイルは純粋な JSON 形式です（Git で差分の確認やマージが可能）。ノードタイプは 13 種類です：Rectangle、Ellipse、Line、Polygon、Path、Text、Frame、Group、Note、Prompt、Context、IconFont、Ref。

ツール	用途
batch_design	デザイン要素を一括で作成、変更、操作します（挿入／コピー／置換／更新／削除／移動／生成）
batch_get	パターンまたはノード ID を指定して、デザインコンポーネントと階層を読み取ります
get_screenshot	デザインのプレビューを PNG 画像としてレンダリングします
snapshot_layout	計算済みのレイアウト構造をバウンディングボックスとともに分析し、重なりを検出します
get_editor_state	現在のエディターコンテキスト、アクティブなファイル、選択範囲を取得します
get_variables	デザイントークンとテーマ変数（色、間隔、角丸、サイズ、フォント）を読み取ります
set_variables	デザイントークンとテーマ変数を更新します
search_all_unique_properties	ノード上のすべての固有プロパティを再帰的に検索します
replace_all_matching_properties	ノード上で一致するすべてのプロパティを再帰的に置換します
get_guidelines	デザインガイドラインを取得します（トピック：code、table、tailwind、landing-page、design-system）
get_style_guide	名前またはタグでスタイルガイドを取得します
get_style_guide_tags	利用可能なすべてのスタイルガイドタグを一覧表示します
open_document	既存の .pen ファイルを開くか、新しいファイルを作成します
find_empty_space_on_canvas	新しい要素を配置できる空きスペースを検索します
export_nodes	CLI 専用 — スケール倍率を指定して PNG、JPEG、WEBP、PDF にエクスポートします

ワークフロー：UI を自然言語で説明 → batch_design でデザインを生成 → get_screenshot で視覚的に確認 → デザインを反復して調整 → 準備ができたらコードにエクスポート。

CLI 認証： pencil login（対話形式）または PENCIL_CLI_KEY 環境変数（CI/CD）。エージェントモード：pencil --out file.pen --prompt "..." --model claude-sonnet-4-6。

Context7 ライブラリ：/pencil/docs

Pencil からコードへのエクスポート - React/Tailwind 生成

プロンプトベースのワークフローを使用して、.pen デザインを本番環境向けの React および Tailwind CSS コードにエクスポートします。

最適な用途：承認済みの .pen デザインの実装への変換、Tailwind スタイルを適用した React コンポーネントの生成、コードでのデザインの忠実な再現、ビジュアルデザインからのフロントエンドの迅速な開発。

主な強み：プロンプトベースのコード生成（エクスポート API なし）、.pen の JSON 構造の読み取りに使う batch_get、get_variables によるデザイントークンの抽出、Tailwind クラスを使った React コンポーネントの生成、コンポーネント構造の保持。

ワークフロー：batch_get でフレームデータを取得 → JSON 構造を分析 → React/Tailwind にマッピング → デザイントークンを適用 → スクリーンショットと照合。

注：Pencil からコードへのエクスポートは、プロンプトベースのワークフローです。pencil.export_to_react() API や pencil.config.js 設定ファイルはありません。

クイック判断ガイド

次の場合は Figma MCP を選択してください：

• 既存の Figma ファイルからデザインのコンテキストを抽出する必要がある
• Figma を使用するデザイナーと作業している
• デザイントークンやコンポーネント仕様の取得が必要である
• Figma からスクリーンショットや視覚的な参考資料を取得する必要がある
• 既存のデザインシステムを文書化する

次の場合は Pencil MCP を選択してください：

• 新しいデザインをゼロから作成する
• 迅速なプロトタイピングと視覚的な反復が必要である
• テキストベースのデザインワークフローを優先する
• AI によるデザイン生成を活用したい
• チームと協力してデザインについて議論する

次の場合は Pencil-to-Code Export を選択してください：

• デザインが .pen 形式で確定している
• ビジュアルデザインをコードとして実装する準備ができている
• Tailwind スタイリングを使用した React コンポーネントが必要である
• デザインの忠実度を維持することが重要である
• デザインからフロントエンドを迅速に開発する

Pencil MCP ワークフロー

デザインセッションの開始

1. エディターの状態を確認する

   get_editor_state() → Determine active .pen file and user selection
   

2. ドキュメントを開く、または作成する

   open_document(filePathOrNew: "new") → Create new .pen file
   open_document(filePathOrNew: "/path/to/file.pen") → Open existing
   

3. デザインガイドラインを取得する

   get_guidelines(topic: "code" | "table" | "tailwind" | "landing-page")
   get_style_guide_tags() → Get available style tags
   get_style_guide(tags: ["minimalist", "dashboard"], name: "nova")
   

デザインの作成

1. batch_design で生成する

   効率的な一括操作には batch_design を使用します。構文：

   foo=I("parent", { ... })    // Insert new node
   baz=C("nodeid", "parent", { ... })  // Copy node
   foo2=R("nodeid1/nodeid2", {...})    // Replace node
   U(foo+"/nodeid", {...})     // Update node
   D("dfFAeg2")               // Delete node
   M("nodeid3", "parent", 2)   // Move node
   G("baz", "ai", "...")       // Generate image with AI
   

2. デフォルトの Nova スタイルでデザインする

   ユーザーがスタイルを指定せずにコンポーネントを作成する場合：

   • ニュートラルなカラーパレット（グレー、白）を使用する
   • 小さな角丸（4-6px）を適用する
   • Noto Sans またはシステムのサンセリフ体を使用する
   • すっきりとしたミニマルなデザインにする
   • 一貫した 4px/8px の間隔グリッドを適用する

3. get_screenshot で確認する

   get_screenshot() → Visual validation of design
   

デザイントークンの管理

1. 変数を読み取る

   get_variables() → Current design tokens and themes
   

2. 変数を更新する

   set_variables(variables: { primary: "#3B82F6", ... })
   

レイアウト分析

snapshot_layout() → Analyze computed layout rectangles
find_empty_space_on_canvas(direction: "right", size: { w: 200, h: 100 })

デザインからコードへの一般的なパターン

共通パターン

これらのパターンは、ツールごとの実装方法は異なりますが、3つすべてのツールに適用されます。

デザイントークンの管理：

すべてのツールがデザイントークンの抽出と管理に対応しています。Figma MCP は既存のファイルからトークンを抽出し、Pencil MCP はデザイン作成時にトークンを生成します。Pencil-to-code はトークンを CSS 変数または Tailwind 設定としてエクスポートします。

コンポーネントアーキテクチャ：

すべてのツールがコンポーネント階層を維持します。Figma MCP は Figma からコンポーネント構造を読み取り、Pencil MCP は DNA codes でコンポーネント構造を作成し、Pencil-to-code は階層を維持した React コンポーネントを生成します。

レスポンシブデザイン：

すべてのツールがレスポンシブレイアウトに対応しています。Figma MCP はレスポンシブバリアントを抽出し、Pencil MCP は DNA でレスポンシブブレークポイントを定義し、Pencil-to-code は Tailwind のレスポンシブクラスを生成します。

スタイルの一貫性：

すべてのツールがデザインの一貫性を確保します。Figma MCP はデザインシステムとの整合性を検証し、Pencil MCP はデザイントークンを適用し、Pencil-to-code は一貫した Tailwind クラスを適用します。

ワークフローのベストプラクティス

すべてのツールに適用されます：

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

• デザイン作業を始める前にデザイントークンを定義する
• すべてのツールで一貫した命名規則を使用する
• デザイン値の信頼できる唯一の情報源を維持する
• トークンの使用方法とコンポーネントのパターンを文書化する

バージョン管理：

• 参照用に Figma のメタデータスナップショットをコミットする
• リポジトリで .pen ファイルをバージョン管理する
• git でデザインの反復を追跡する
• デザインに関する決定事項をコードコメントに記録する

コラボレーション：

• デザインへのフィードバックに Figma のコメントを使用する
• 視覚的なレビュー用に .pen のフレームを共有する
• デザイン変更のプルリクエストを作成する
• コードと併せてデザインドキュメントを管理する

品質保証：

• デザイントークンをスタイルガイドに照らして検証する
• レスポンシブブレークポイントをテストする
• アクセシビリティへの準拠を確認する
• 生成されたコードを見直し、最適化する

ツール固有の実装

ツール固有の実装方法の詳細については、以下のリファレンスファイルを参照してください。

Figma MCP の実装

ファイル：reference/figma.md

Figma MCP の接続設定、ファイルメタデータの取得、コンポーネントツリーの抽出、デザイントークンの取得、スクリーンショットのキャプチャ、スタイルガイドの生成について説明しています。

主なセクション：MCP の設定、認証の設定、ファイルへのアクセスパターン、メタデータクエリ、コンポーネント階層の解析、トークンの抽出形式、スクリーンショット API の使用方法、デザインシステムのドキュメント化。

Pencil MCP レンダリング

ファイル: reference/pencil-renderer.md

batch_design 操作、スタイルガイドの統合、.pen フレームのレンダリング、ビジュアルデザインのイテレーション、共同ワークフロー、デザインバージョン管理について扱います。

主なセクション: batch_design 構文、自然言語によるデザインプロンプト、レンダリングオプション、フレーム設定、デザイン改善パターン、バージョン管理戦略、チームコラボレーションワークフロー。

Pencil からコードへのエクスポート

ファイル: reference/pencil-code.md

.pen デザインの React コンポーネントへのエクスポート、Tailwind CSS の生成、コンポーネント構造の保持、レスポンシブレイアウトの処理、デザインシステムの統合について扱います。

主なセクション: エクスポート設定、React コンポーネントの生成、Tailwind クラスの適用、props API の設計、状態管理の統合、生成されたコンポーネントのテスト、最適化戦略。

ツールの比較

ファイル: reference/comparison.md

ユースケース、ワークフローパターン、統合の複雑さ、各ツールをいつ使用すべきかを網羅した詳細な比較マトリクスを提供します。

主なセクション: 機能比較表、ワークフロー判断マトリクス、ツール統合パターン、移行戦略、エコシステムの互換性、チームワークフローの推奨事項。

ナビゲーションガイド

デザインからコードへの機能を扱う場合:

1. ツールを選ぶ場合は、まず (上記の) クイックツール選択を確認する
2. スタイルが指定されていない場合は、デフォルトの Nova スタイルを適用する
3. 普遍的な概念については、一般的なデザインからコードへのパターンを確認する
4. 実装の詳細については、ツール固有のリファレンスファイルを開く
5. 複数のツールを評価する場合は、comparison.md を参照する
6. 最新のツールドキュメントにアクセスするには、Context7 ツールを使用する

Context7 ドキュメントへのアクセス

Context7 MCP を使用して、最新のツールドキュメントにアクセスできます:

Figma:

• resolve-library-id を "figma" で使用してライブラリ ID を取得する
• get-library-docs をトピック "mcp"、"api"、"design-tokens"、"metadata" で使用する

Pencil:

• resolve-library-id を "pencil" で使用してライブラリ ID を取得する
• get-library-docs をトピック "mcp"、"dna-codes"、"rendering"、"export" で使用する

公式ドキュメント

• Pencil 公式: https://pencil.dev
• Pencil ドキュメント: https://docs.pencil.dev
• Pencil AI 統合: https://docs.pencil.dev/getting-started/ai-integration

併用に適したツール

• moai-domain-uiux: デザインシステムとコンポーネントアーキテクチャ
• moai-domain-frontend: React の実装パターン
• moai-library-shadcn: shadcn/ui コンポーネントの統合 (Nova プリセット)
• moai-lang-typescript: 生成されたコンポーネント向けの TypeScript
• moai-lang-react: React のベストプラクティス
• moai-foundation-core: SPEC 駆動の開発ワークフロー

---

ステータス: アクティブ バージョン: 5.1.0 (Pencil ドキュメント同期 — スキーマ v2.9、CLI v0.2.4、スロット、ライブラリ、完全なノードタイプ) 最終更新: 2026-04-05 ツール: Figma MCP (16 ツール、公式リモートサーバー)、Pencil MCP (14 ツール + export_nodes は CLI 専用)、Pencil からコードへのエクスポート デフォルトスタイル: shadcn/ui Nova (neutral、noto-sans、small radius) UI キット: Shadcn UI (デフォルト)、Halo (グラスモーフィック)、Lunaris (ダークモード)、Nitro (ミニマル)