---
title: "Pencil × Claude CodeでUIデザインを自動生成する方法【MCP連携ハンズオン】"
description: "PencilとClaude CodeをMCPで連携させてUIデザインを自動生成する手順をハンズオン形式で解説。セットアップからLP制作、コード変換まで実践的に紹介します。"
url: "https://shiftb.dev/articles/pencil-mcp-claude-code"
publishedAt: "2026-04-05"
updatedAt: "2026-04-05"
author: "立川修平（ぶべ）"
category: "ai-development"
tags: ["Pencil MCP", "Claude Code", "AIデザイン自動生成", "MCP", "UI開発"]
---

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

「Pencilでデザインを作ったけど、これをReactコードに書き起こすのが面倒…」——[Pencil.devの使い方](https://shiftb.dev/articles/pencil-dev-guide)を覚えた受講生から、次に出てくるのがこの悩みです。デザインとコードの間にある「手作業」をなくせたら、どれだけ楽になるか。

その答えが、**MCP（Model Context Protocol）**を使った**Pencil × Claude Code連携**です。PencilにはMCPサーバーが内蔵されており、Pencilを起動するだけでClaude Codeから直接キャンバスを読み書きできます。つまり、**AIにプロンプトを投げるだけで、デザイン生成からReact+Tailwindのコード変換まで一気通貫で完了する**のです。

僕自身、ShiftBの受講生向けページのリニューアルでこの連携を使い、**従来3時間かかっていたLP制作を約40分に短縮**できました。デザインの精度も、手動でコードに起こしていた頃より高い。一度体験すると、もう元には戻れません。

この記事では、MCP連携のセットアップから、実際にランディングページをAIで0から作るハンズオンまで、**手を動かしながら読める形式**で徹底解説します。所要時間は約30分。記事を読み終える頃には、あなたもPencil × Claude CodeでUIデザインを自動生成できるようになっているはずです。

## 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サーバーの完全ガイド](https://shiftb.dev/articles/mcp-server-guide)も合わせてご覧ください。

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

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

| 役割 | 具体例 | 何をするか |
| --- | --- | --- |
| MCPクライアント | Claude Code、Cursor | ユーザーの指示をMCPサーバーに伝える |
| MCPサーバー | Pencil MCP Server | ツールの機能をAIに公開する |
| ツール / リソース | Pencilキャンバス、.penファイル | 実際のデータ操作を行う |

![MCPアーキテクチャ図：AIクライアント → MCPプロトコル → ツール群の双方向通信](https://shiftb.dev/images/articles/pencil-mcp-claude-code-architecture.png)

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

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

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

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

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

| 比較項目 | Pencil MCP | 一般的なMCPサーバー |
| --- | --- | --- |
| セットアップ | アプリ起動で自動接続 | mcp.json手動設定が必要 |
| インストール | 追加不要（内蔵） | npm/pipでインストール |
| 接続確認 | `/mcp`で確認 | ログやデバッグツールで確認 |
| 更新 | Pencilと同時に自動更新 | 手動でバージョン管理 |

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

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

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

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

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

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

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

| ツール | バージョン | 用途 |
| --- | --- | --- |
| Pencil.dev | 最新版（VS Code拡張 or デスクトップ） | デザインキャンバス + MCPサーバー |
| Claude Code | 最新版 | AIエージェント（MCPクライアント） |
| Node.js | v18以上 | ローカル開発環境 |

Pencilの基本的なインストール方法は[Pencil.devの使い方ガイド](https://shiftb.dev/articles/pencil-dev-guide)で詳しく解説しています。まだインストールしていない方は先にそちらを済ませてください。

![VS Code MarketplaceのPencil拡張機能ページ。Installボタンからワンクリックで導入可能](https://shiftb.dev/images/articles/pencil-dev-guide-ss-vscode-ext.png)

### 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の出力精度が上がる](https://shiftb.dev/images/articles/pencil-mcp-claude-code-prompts.png)

| 観点 | 悪い例 | 良い例 |
| --- | --- | --- |
| 具体性 | 「いい感じのページ作って」 | 「1440px幅のLP、ヒーロー+特徴3カラム+CTA」 |
| 色指定 | 「青っぽい色で」 | 「メインカラー#2788f5、背景#f3f8fe」 |
| コンポーネント | 「ボタンを置いて」 | 「Shadcn/UIのButtonコンポーネント、variant=default」 |
| レイアウト | 「並べて」 | 「Flexbox横並び、gap-6、md以下は縦積み」 |
| ファイル指定 | 「デザイン作って」 | 「hero.penに書き込み、実装はsrc/components/Hero.tsx」 |

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

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

![Pencil × Claude Code連携フロー：プロンプト入力→デザイン生成→コード変換→デプロイ](https://shiftb.dev/images/articles/pencil-mcp-claude-code-flow.png)

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

ここからは、実際に手を動かしながら**架空の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の書き方ガイド](https://shiftb.dev/articles/claude-md-guide)で詳しく解説しています。

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

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

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

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

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

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

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

| ファイルサイズ | AIの処理速度 | 推奨 |
| --- | --- | --- |
| 〜100KB | 即座（1〜3秒） | コンポーネント単位 |
| 100〜500KB | やや遅い（5〜15秒） | ページ単位 |
| 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比較記事](https://shiftb.dev/articles/pencil-vs-figma)を参照してください。

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

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

### 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ワークフローガイド](https://shiftb.dev/articles/pencil-git-workflow)で詳しいブランチ戦略を解説しています。

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

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