【Claude Code × Pencil】IDEで完結するAI駆動UIデザインの使い方
「デザインツールとコードエディタを行き来するのが面倒」「デザイナーがいないチームで UI 品質を上げたい」と感じていませんか？
Pencil × Claude Code を組み合わせれば、UIデザインの生成からコード実装まで IDE 内で完結します。
この記事で得られること：
- Pencil（pencil.dev）の概要と Claude Code との連携のしくみ
- インストールから MCP 接続・UI生成までの具体的な手順
- 従来のデザイン→実装フローとの違いと導入メリット
- よくある疑問への回答
対象読者：Claude Code ユーザー、デザイナー不在のチームの開発者、IDE を離れずに UI 制作を完結させたい方
前提：Claude Code がインストール済みであること（インストール方法はこちら）
結論：Pencil は現在アーリーアクセスで無料。Claude Code と MCP 連携することで「AIプロンプト → デザイン → コード生成 → Git コミット」がすべて IDE 内で完結します。
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コンポーネントとして実装して」と指示することで、プロジェクトに合ったコードが生成されます。
従来ツールとの違い
従来のデザイン→開発フローでは「Figmaでデザイン → PNG書き出し → エンジニアが目視で実装 → ズレの修正」という工程が必要でした。Pencilを使えばこのフローが大幅に短縮されます。
Before：Figma（デザイン） → 書き出し → エンジニアが実装 → ズレの修正
After：Pencilキャンバス（AI生成） → Claude Codeで自動実装 → Gitにコミット
デザイナーがいないチームや個人開発者にとって、特に大きなメリットがあります。
UI コードの品質をさらに上げたい場合は、frontend-design スキルを Claude Code に追加するのがおすすめです。
よくある質問
Q1. Figma からの移行は必要ですか？
移行は不要です。Pencil は Figma の代替ではなく、コードとセットで使う開発者向けのデザインツールという位置づけです。既存の Figma ファイルを引き続き使いながら、新規コンポーネントだけ Pencil で作るという使い方もできます。
Q2. Pencilで生成したデザインはどのフレームワークに対応していますか？
Claude Code 経由でのコード生成は React・Vue・Next.js・Svelte など主要なフレームワークに対応しています。「このデザインを Vue コンポーネントとして実装して」と指示するだけです。
Q3. チームで共同作業できますか？
現在のアーリーアクセス版はリアルタイム共同編集には対応していません。ただし .pen ファイルを Git で管理することで、ブランチを切って変更をマージするコードと同じワークフローでデザインを共有できます。
Q4. MCP 接続に失敗する場合はどうすればいいですか？
Pencil を起動してから Claude Code を再起動してみてください。それでも解決しない場合は VS Code の「Settings → Tools & MCP」でPencilサーバーの状態を確認し、必要に応じて再接続します。公式ドキュメントのトラブルシューティングも参照してください。
Q5. Remotion など他のビジュアル系ツールとの違いは？
Pencil は静的な UI コンポーネント・画面デザインが対象です。動画のような時系列アニメーションが必要な場合は Remotion × Claude Code での動画自動生成が向いています。
まとめ
PencilはClaude Codeと組み合わせることで、UIデザインからコード実装までをIDE内だけで完結させる強力なワークフローを実現します。
- Pencil はローカルファーストで
.penファイルを Git 管理できる - MCP 連携で Claude Code から直接 UI 生成・コード出力が可能
- アーリーアクセス期間中は無料で利用できる
- デザイン → 実装の工程を大幅に短縮できる
まずは公式サイト（pencil.dev）からインストールして試してみてください。Claude Code の基本的な使い方は Claude Code のインストール方法【完全ガイド】も参照してください。