【Claude Code × Pencil】IDEで完結するAI駆動UIデザインの使い方

2026年2月25日

Pencilとは何か？
Pencilの主な特徴
Claude CodeでPencilを使う手順
従来ツールとの違い
まとめ

Pencilとは何か？

Pencil（pencil.dev）は「Design on canvas. Land in code.」をコンセプトにした開発者向けのAI駆動UIデザインツールです。従来のFigmaのようなデザインツールと異なり、IDE（統合開発環境）の中に直接組み込まれた無限キャンバスとして動作します。

デザインしたUIは自動的に.penファイルとしてGitリポジトリに保存されるため、デザインとコードが常に同期した状態を保てます。Figmaからのエクスポートやデザイナーとエンジニア間のハンドオフは不要です。

Pencilの主な特徴

1. ローカルファースト・無限キャンバス

Pencilはクラウドではなくローカル環境で動作します。UIデザインを無限キャンバス上で自由に配置でき、既存のGitワークフローにそのまま組み込めます。デザインは.penファイルとしてバージョン管理されるため、チームでの共同作業にも対応しています。

2. Claude CodeとのMCP連携

PencilはClaude CodeのMCP（Model Context Protocol）を通じて連携します。これにより、Claude CodeからPencilプロジェクトに直接コンテキストを渡し、自分のテックスタック（React・Vue・Next.jsなど）に合わせた実装コードを自動生成できます。設定はClaude Codeのコマンドから数ステップで完了します。

3. AIデザインエージェント

Pencilには組み込みのAIデザインエージェントが搭載されています。テキストプロンプトを入力するだけで、UIコンポーネントの提案・生成・修正をAIが担当します。生成されたデザインはキャンバス上でドラッグ&ドロップやプロパティ編集といったビジュアル操作も可能です。

4. 無料で利用可能（アーリーアクセス）

Pencil自体は現在アーリーアクセス段階で無料で利用できます（制限なし）。AI機能の利用にはClaude Codeのサブスクリプション（月額$20〜）が必要ですが、Pencilアプリ自体に追加コストはかかりません。

Claude CodeでPencilを使う手順

ステップ1：Pencilのインストール

公式サイト（pencil.dev）からPencilをインストールします。VS Code・Cursor向けの拡張機能と、デスクトップアプリ（macOS・Linux・Windows）の2種類が提供されています。VS Code / Cursor の場合は拡張機能マーケットプレイスで「Pencil」を検索してインストールするだけです。

ステップ2：Claude Codeの認証とMCP自動接続

PencilのMCPサーバーはPencilを起動した時点で自動的にローカルで立ち上がります。手動でのMCP設定コマンドは不要です。事前にClaude Codeへのログインを済ませておきましょう。

claude

ターミナルで上記コマンドを実行してブラウザ認証を完了させます。VS Code / Cursor の場合は「Settings → Tools & MCP」でPencilがサーバー一覧に表示されていることを確認してください。詳細は公式ドキュメント（docs.pencil.dev）を参照してください。

ステップ3：AIエージェントでUIを生成する

Pencilのキャンバス上で Cmd/Ctrl + K を押すとAIプロンプトパネルが開きます。「ダッシュボードのヘッダーコンポーネントを作って」と指示するだけで、AIがデザイン案を自動生成します。生成されたデザインはキャンバス上で直接編集でき、色・フォント・レイアウトを自由に調整できます。

ステップ4：コードとしてリポジトリに保存する

デザインが完成したら、Claude Codeを通じて実際のコードに変換します。Pencilは.penファイルを直接Gitリポジトリに保存するため、git commitするだけでデザインもバージョン管理されます。Claude Codeに「このデザインをNext.jsコンポーネントとして実装して」と指示することで、プロジェクトに合ったコードが生成されます。