Pencil × Claude CodeでUIデザインを自動生成する方法【MCP連携ハンズオン】

MCPとは？——AIエージェントとツールを繋ぐプロトコル

MCPの概要——「AIのUSB-C」と呼ばれる理由

MCP（Model Context Protocol）は、Anthropicが2024年11月にオープンソースで公開したAIモデルと外部ツールを標準化された方法で接続するプロトコルです。2026年4月時点で、GitHub上のMCP関連リポジトリは15,000個を超え、事実上の業界標準となっています。

よく「AIのUSB-C」と例えられます。USB-Cケーブル1本でどのデバイスにも接続できるように、MCPに対応したツールはどのAIクライアントからでもシームレスに使えます。Pencilもこの仕組みに対応しているからこそ、Claude CodeやCursorから直接キャンバスを操作できるのです。

MCPについてさらに詳しく知りたい方は、MCPサーバーの完全ガイドも合わせてご覧ください。

MCPのアーキテクチャ——3つの登場人物

MCPのアーキテクチャはシンプルで、以下の3つの登場人物で構成されています。

重要なのは、MCPが双方向通信であるという点です。Claude Codeからキャンバスを「読む」だけでなく、「書く」こともできます。これにより、以下の2つのワークフローが実現します。

• デザイン → コード：Pencilで作ったデザインをClaude Codeが読み取り、React+Tailwindのコードに変換
• プロンプト → デザイン：Claude Codeに「ヒーローセクションを作って」と指示し、Pencilのキャンバスに直接描画

Pencil MCPサーバーの特徴——起動するだけで接続完了

多くのMCPサーバーはmcp.jsonや設定ファイルでの手動セットアップが必要です。しかし、Pencilの場合はアプリを起動するだけでMCPサーバーが自動で立ち上がり、Claude Codeと即座に接続されます。

これは、PencilがMCPサーバーをアプリケーション内部に組み込んでいるためです。外部のMCPサーバーを別途インストールする必要がないため、セットアップの手間が劇的に少なくなっています。

なぜ今、MCPとPencilの組み合わせが最強なのか

2026年のWeb開発において、デザイン→コード変換は依然として大きなボトルネックです。Figmaで作ったデザインをReactコードに変換するには、平均して2〜4時間の手作業が必要でした。Pencil × MCPの組み合わせが注目される理由は3つあります。

1. .penファイルがJSON形式——AIがデザインデータを完全に理解・操作できる
2. 双方向MCP通信——読み取りも書き込みもシームレスに行える
3. Git統合——デザインとコードが同じリポジトリで管理でき、GitワークフローにデザインPRを統合できる

この3つが揃ったことで、「プロンプトを投げるだけで、デザインからコードまで一気通貫で完了する」というワークフローが現実のものになりました。

Pencil × Claude Code連携のセットアップ【5分で完了】

前提条件——必要なツール一覧

セットアップを始める前に、以下の3つのツールがインストール済みであることを確認してください。

Pencilの基本的なインストール方法はPencil.devの使い方ガイドで詳しく解説しています。まだインストールしていない方は先にそちらを済ませてください。

Step 1：Pencilを起動してMCPサーバーを確認する

まず、VS Code（またはCursor）でPencilの拡張機能が有効になっていることを確認し、任意の.penファイルを開きます。

# プロジェクトディレクトリに移動
cd ~/projects/my-app

# .penファイルがなければ作成
touch hero.pen

# VS Codeで開く
code .

hero.penを開くと、Pencilのキャンバスが自動で表示されます。この時点で、MCPサーバーがバックグラウンドで自動起動しています。

Step 2：Claude Codeから接続を確認する

次に、ターミナルでClaude Codeを起動し、MCP接続を確認します。

# Claude Codeを起動
claude

# MCP接続状況を確認
/mcp

正常に接続されている場合、以下のように表示されます。

pencil ✔ connected
  Tools: read_canvas, write_canvas, list_files, ...

pencil ✔ connectedが表示されれば、セットアップは完了です。所要時間は約5分。たったこれだけで、Claude CodeからPencilのキャンバスを自由に操作できるようになります。

Cursorの場合のセットアップ方法

Cursorを使う場合も基本的な流れは同じですが、MCP設定を手動で有効化する必要があります。

1. Cursorの設定を開く（Cmd + ,）
2. 「Tools & MCP」セクションに移動
3. 「Pencil」のMCPサーバーが表示されているので、トグルをONにする
4. Cursorを再起動する

Cursorの場合は「Tools & MCP」の設定画面から直接MCPサーバーの状態を確認できます。Pencilの横にグリーンのインジケーターが表示されていれば接続完了です。

接続できない場合のクイックチェックリスト

もし接続できない場合は、以下の5つのポイントを確認してください。

1. Pencil拡張機能が最新版に更新されているか
2. .penファイルが開かれているか（閉じているとMCPサーバーが停止する）
3. Claude Codeが最新版であるか
4. ファイアウォールがローカルのMCP通信をブロックしていないか
5. VS Code / Cursorを一度再起動してみたか

基本操作：AIでUIデザインを生成する

操作①：プロンプトからデザインを生成する

セットアップが完了したら、さっそくClaude Codeからデザインを生成してみましょう。ターミナルで以下のようにプロンプトを入力します。

# Claude Codeに指示
hero.penにヒーローセクションを作成して。
背景はグラデーション（#1a1a2e → #16213e）、
中央に白い見出しテキスト「AI時代の開発を加速する」、
その下にサブテキストとCTAボタン（青, 角丸）を配置。
幅は1440px。

このプロンプトを送信すると、Claude CodeがPencilのMCPサーバーを通じてキャンバスに直接デザインを描画します。Pencilのキャンバスが自動で更新され、指示通りのヒーローセクションが表示されます。

この操作の裏側では以下のことが起きています。

1. Claude Codeがプロンプトを解析し、UIの構成を決定
2. MCPのwrite_canvasツールを呼び出し、.penファイルにJSON構造を書き込み
3. PencilがJSONの変更を検知し、キャンバスをリアルタイムで描画

操作②：既存デザインを読み取ってコードに変換する

Pencilで作成済みのデザインをReact+Tailwindのコードに変換する場合は、以下のようにプロンプトを入力します。

hero.penのデザインを読み取って、
React + Tailwind CSSのコンポーネントとして
src/components/Hero.tsxに実装して。
レスポンシブ対応も含めて。

Claude Codeはread_canvasツールでPencilのキャンバスデータを取得し、色・フォントサイズ・レイアウト・間隔などをピクセルレベルで正確にコードに変換します。生成されるコードの例は以下の通りです。

// src/components/Hero.tsx（Claude Codeが自動生成）
export function Hero() {
  return (
    <section
      className="flex min-h-screen flex-col items-center
                 justify-center bg-gradient-to-b
                 from-[#1a1a2e] to-[#16213e] px-4"
    >
      <h1 className="text-center text-5xl font-bold
                     text-white md:text-6xl">
        AI時代の開発を加速する
      </h1>
      <p className="mt-4 text-center text-lg text-gray-300">
        デザインからコードまで、すべてをAIが支援
      </p>
      <button className="mt-8 rounded-full bg-blue-500 px-8
                         py-3 text-lg font-semibold text-white
                         transition hover:bg-blue-600">
        無料で始める
      </button>
    </section>
  );
}

操作③：既存デザインを部分的に修正する

すでにあるデザインの一部だけを変更したい場合も、プロンプト1つで完了します。

hero.penのCTAボタンの色を#2788f5に変更して、
角丸を12pxにして。
ボタンのテキストも「今すぐ体験する」に変更して。

このように、全体を作り直す必要がなく、ピンポイントで修正指示を出せるのがMCP連携の大きなメリットです。Figmaでは「このボタンはどのフレームの中にあるか」を目で探す必要がありましたが、Pencil × Claude Codeならコンポーネント名を指定するだけで済みます。

良いプロンプトと悪いプロンプトの比較

AIの出力品質は、プロンプトの質に大きく左右されます。以下の比較を見てください。

ポイントは「数値で指定する」ことです。「いい感じ」「大きめ」「余白多め」といった曖昧な表現では、AIの出力がブレます。px、色コード、カラム数、gap値など、具体的な数値を入れるだけでAIの出力精度は2〜3倍向上します。

実践：ランディングページを0からAIで作る

ハンズオンの概要——何を作るか

ここからは、実際に手を動かしながら架空のSaaSプロダクト「TaskFlow」のランディングページを0から作ります。完成イメージは以下の構成です。

1. ヒーローセクション：キャッチコピー + CTAボタン
2. 特徴セクション：3カラムのカード
3. 料金セクション：2プランの比較テーブル
4. CTAセクション：最終アクション

所要時間は約20分です。Pencil × Claude Codeの連携を体感するには最適なボリュームです。

Step 1：プロジェクトの初期化とファイル準備

まず、プロジェクトディレクトリを作成し、Pencilファイルを用意します。

# プロジェクト作成
npx create-next-app@latest taskflow --typescript --tailwind
cd taskflow

# デザインファイルを作成
mkdir -p design
touch design/landing.pen

# VS Codeで開く（Pencil拡張機能がインストール済みであること）
code .

VS Codeでdesign/landing.penを開き、Pencilのキャンバスが表示されることを確認してください。

Step 2：ヒーローセクションをAIで生成

Claude Codeを起動し、以下のプロンプトを入力します。

design/landing.penにSaaS LPのヒーローセクションを作成して。

要件：
- 幅1440px、高さ800px
- 背景：ダークグラデーション（#0f172a → #1e293b）
- 中央配置で以下を縦に並べる：
  - 見出し「タスク管理を、もっとシンプルに」（白、48px、太字）
  - サブテキスト「TaskFlowは〜」（gray-300、18px）
  - CTAボタン2つを横並び（gap-4）
    - 「無料で始める」（bg-blue-500、白テキスト）
    - 「デモを見る」（border白、白テキスト）

約10秒で、Pencilのキャンバスにヒーローセクションが描画されます。この時点でdesign/landing.penのJSONにすべてのデザイン情報が自動で書き込まれています。

Step 3：特徴セクション・料金セクションを追加

続けて、ヒーローセクションの下に残りのセクションを追加します。

design/landing.penに以下のセクションを追加して。
ヒーローの下に続けて配置。

【特徴セクション】
- 背景：白
- 見出し「TaskFlowが選ばれる3つの理由」（中央、24px）
- 3カラムのカードレイアウト（gap-8）
  - カード1：アイコン⚡ + 「直感的な操作」+ 説明文
  - カード2：アイコン🔄 + 「自動化ワークフロー」+ 説明文
  - カード3：アイコン📊 + 「リアルタイム分析」+ 説明文

【料金セクション】
- 背景：#f8fafc
- 見出し「シンプルな料金プラン」（中央）
- 2カラムで料金カードを並べる
  - Free：¥0/月、機能3つ
  - Pro：¥1,980/月、機能5つ、「おすすめ」バッジ

【最終CTAセクション】
- 背景：#2788f5
- 白テキスト「今すぐTaskFlowを始めよう」
- 白ボタン「無料アカウントを作成」

ポイントは、1回のプロンプトで複数セクションをまとめて指示することです。セクションごとに分けるよりも、全体の統一感が保たれやすくなります。

Step 4：デザインをReactコードに変換

LPのデザインが完成したら、コードに変換します。

design/landing.penのデザインを読み取って、
以下のファイル構成でReact + Tailwindのコードを生成して。

- src/components/landing/HeroSection.tsx
- src/components/landing/FeaturesSection.tsx
- src/components/landing/PricingSection.tsx
- src/components/landing/CtaSection.tsx
- src/app/page.tsx（上記コンポーネントを組み合わせ）

レスポンシブ対応：md以下は1カラム。
Tailwind CSSのユーティリティクラスを使用。

Claude Codeがキャンバスのデザインデータをread_canvasで取得し、色・サイズ・間隔・レイアウトをすべてTailwindクラスに変換して、指定したファイルパスにコードを生成します。

ここまでの所要時間はおよそ15〜20分です。従来のFigma→手動コーディングのフローでは、同じLPを作るのに3〜5時間かかっていたことを考えると、作業時間は約80%削減されています。

Step 5：デプロイして確認

最後に、ローカルで確認してデプロイします。

# 開発サーバーを起動
npm run dev

# http://localhost:3000 で確認
# 問題なければデプロイ
vercel --prod

もしデザインと実装にズレがあった場合は、Claude Codeにフィードバックを投げるだけで修正できます。

ヒーローセクションの見出しのフォントサイズを
md以上で56pxに変更して。
CTAボタンの角丸をrounded-fullに変えて。

このように、デザインの微調整もプロンプト1つで完了するのがPencil × Claude Code連携の真髄です。

デザイン→コード変換の実践テクニック

テクニック①：コンポーネント単位で変換する

ページ全体を一度に変換するよりも、コンポーネント単位で変換する方が精度が高くなります。以下のように、.penファイルを分割して管理するのがベストプラクティスです。

design/
├── components/
│   ├── header.pen
│   ├── footer.pen
│   ├── pricing-card.pen
│   └── testimonial.pen
├── pages/
│   ├── landing.pen
│   ├── about.pen
│   └── contact.pen

コンポーネント単位で管理すると、以下のメリットがあります。

• AIの変換精度が上がる（1ファイルの情報量が適切になる）
• 変更差分が小さくなり、Git管理がしやすい
• 再利用性が高まる（共通コンポーネントを複数ページで使い回せる）

テクニック②：デザイントークンを事前に定義する

色やフォントサイズなどのデザイントークン（変数）をプロンプトで事前に伝えておくと、一貫性のあるコードが生成されます。

以下のデザイントークンに従ってコードを生成して。

- Primary: #2788f5
- Secondary: #1e293b
- Background: #f8fafc
- Text: #0f172a
- Font sizes: h1=48px, h2=32px, h3=24px, body=16px
- Spacing: セクション間=80px, カード間=32px
- Border radius: ボタン=12px, カード=16px

これを最初に伝えておけば、複数のコンポーネントを生成しても色やサイズがバラつかず、統一感のあるUIになります。

テクニック③：レスポンシブ対応をプロンプトに含める

デザイン→コード変換で最も忘れがちなのがレスポンシブ対応です。Pencilのキャンバスは通常1440px幅で作成されますが、コードに変換する際はモバイルサイズも考慮する必要があります。

以下のようにブレイクポイントごとの挙動を明示すると、レスポンシブ対応のコードが正確に生成されます。

レスポンシブ対応の要件：
- sm（640px以下）：1カラム、px-4
- md（768px〜）：2カラム、px-8
- lg（1024px〜）：3カラム、px-12、max-w-6xl mx-auto

ナビゲーション：
- md以下：ハンバーガーメニュー
- lg以上：横並びリンク

テクニック④：既存コードベースのパターンを伝える

すでにプロジェクトにコンポーネントがある場合、既存のコーディングパターンを伝えることで、プロジェクト全体の一貫性が保たれます。

このプロジェクトの既存パターンに従ってください：
- スタイル：Tailwind CSSのユーティリティクラス
- コンポーネント：関数コンポーネント + named export
- 型定義：Propsはインターフェースで定義
- ファイル名：kebab-case（例：pricing-card.tsx）
- import順：React → next → 外部ライブラリ → 内部モジュール

これはCLAUDE.mdに書いておくと毎回指示する必要がなくなります。CLAUDE.mdの書き方ガイドで詳しく解説しています。

テクニック⑤：変換結果のDiffを確認する習慣

AIが生成したコードをそのままコミットせず、必ずgit diffで変更内容を確認する習慣をつけましょう。特にチェックすべき点は以下の通りです。

• 不要なインラインスタイルが混入していないか
• ハードコードされた値がTailwindのユーティリティクラスに置き換えられているか
• アクセシビリティ（alt属性、aria-label等）が付与されているか
• レスポンシブ対応が正しく実装されているか

AI生成コードの約90%はそのまま使えますが、残り10%は人間のレビューで品質を担保する必要があります。この「90:10」のバランスがAI駆動開発の現実です。

知っておくべき注意点とトラブルシューティング

注意点①：.penファイルのサイズに気をつける

.penファイルはJSON形式のテキストファイルですが、要素が多くなるとファイルサイズが大きくなります。1ファイルあたり500KB以下を目安にしてください。超える場合は、コンポーネントごとにファイルを分割しましょう。

注意点②：MCPサーバーの接続が切れるケース

Pencilを閉じたり、.penファイルをすべて閉じたりすると、MCPサーバーが停止します。以下のケースで接続が切れることがあります。

• VS Code / Cursorを閉じた
• すべての.penファイルタブを閉じた
• Pencil拡張機能を無効化した
• PCがスリープから復帰した直後

対処法：任意の.penファイルを再度開くだけで、MCPサーバーが自動的に再起動します。Claude Codeで/mcpを実行して接続状況を確認してください。

注意点③：生成されたデザインの著作権

AIで生成したUIデザインの著作権は、日本の著作権法では「人間の創作的寄与がある場合に限り著作物として認められる」という解釈が主流です。つまり、AIに丸投げで生成したデザインは著作物と認められない可能性がありますが、人間がプロンプトで具体的に指示し、生成結果を取捨選択・修正した場合は著作物として保護される可能性があります。

実務上は、AIの生成物をベースに必ず人間が手を加えるワークフローにしておくことで、法的リスクを最小化できます。

トラブル①：「Tool not found」エラーが出る

Claude Codeで/mcpを実行しても「pencil」が表示されない場合は、以下を確認してください。

1. Pencilの拡張機能がインストールされているか確認（Cmd + Shift + Xで拡張機能一覧を開く）
2. 拡張機能のバージョンが最新であることを確認（「更新」ボタンが表示されていたらクリック）
3. .penファイルが少なくとも1つ開かれていることを確認
4. 上記を確認後、Claude Codeを再起動（Ctrl + Cで終了し、再度claudeを実行）

トラブル②：デザインとコードの色がずれる

Pencilのキャンバスで設定した色と、生成されたコードの色が異なる場合があります。これはPencilがRGB色空間を使用しているのに対し、Tailwindのプリセットカラーは独自の値を持っているためです。

解決策：プロンプトで「Tailwindのプリセットカラーではなく、.penファイルに記載された色コードをそのまま使って」と明示してください。

よくある質問（FAQ）

Q1. Pencil × Claude Codeの連携に追加料金はかかりますか？

Pencil自体は無料です。Claude Codeの利用には、AnthropicのMaxプラン（月額$100〜）またはAPI従量課金が必要です。MCP接続自体に追加料金は発生しません。つまり、すでにClaude Codeを使っている方なら追加費用ゼロで始められます。

Q2. Figmaで作ったデザインをPencilに移行してMCP連携できますか？

はい、可能です。Figma上の要素をコピーしてPencilにペーストすることで、レイアウトやスタイルを維持したまま取り込めます。ただし、FigmaのAuto Layoutの一部は再調整が必要になる場合があります。詳しくはPencil vs Figma比較記事を参照してください。

Q3. デザイナーがいないチームでもPencil × Claude Codeは使えますか？

むしろ、デザイナーがいないチームにこそおすすめです。エンジニアがプロンプトで具体的な要件を指定するだけで、プロ品質のUIが生成されます。非デザイナー向けプロトタイプ制作ガイドで、デザイン未経験者の活用法を詳しく解説しています。

Q4. 生成されたReactコードの品質はプロダクションレベルですか？

約90%のケースでそのまま使えるレベルです。ただし、アクセシビリティ対応、エッジケースのハンドリング、パフォーマンス最適化（画像のlazy load等）は人間のレビューが必要です。「AIが生成した90%のベースに、人間が10%の品質担保を加える」というワークフローが最も効率的です。

Q5. Cursor経由でもPencil MCPは同じように使えますか？

はい、ほぼ同じ操作で使えます。唯一の違いは、Cursorの場合は「Tools & MCP」の設定画面でPencil MCPサーバーを手動でONにする必要がある点です。Claude Code（ターミナルベース）かCursor（エディタ統合型）かは好みで選んでください。

Q6. .penファイルをGitにコミットすべきですか？

はい、コミットすべきです。.penファイルはJSONテキストなので、git diffで差分も確認できます。デザインの変更履歴をコードと同じリポジトリで管理できるのは、Pencilの大きなメリットです。Pencil × Gitワークフローガイドで詳しいブランチ戦略を解説しています。

Q7. 複雑なアニメーションやインタラクションもAIで生成できますか？

2026年4月時点では、静的なUIレイアウトの生成が最も得意です。ホバーエフェクトやシンプルなトランジション程度であれば、プロンプトで指示可能です。ただし、複雑なスクロールアニメーションやドラッグ&ドロップなどのインタラクションは、AIが生成した静的UIをベースに手動で追加するのが現実的です。