Pencil.dev 完全ガイド — Claude Code MCP連携で「デザイン→コード」を一気通貫させる

ソロ開発者にとって、デザインとコードの分離は長年の悩みだ。Figmaでデザインを仕上げても、エンジニア（自分）に渡した瞬間に解釈のズレが生まれ、実装しながら「あれ、これで合ってたっけ？」と何度もFigmaに戻る。その往復コストは思いのほか大きい。

2026年、その問題を根本から解消するツールが注目を集めている。Pencil.devだ。

Pencil.devはVS CodeやCursorの中にFigmaライクなキャンバスを埋め込み、デザインファイル（.pen形式）をGitリポジトリで管理し、Claude Code MCPを通じてそのまま実装コードを生成する。「デザイン→仕様書→実装」という三角形のワークフローを、「デザイン＝コード」という一直線に変える。

この記事では、Pencil.devの仕組み、Claude Code MCPとの連携方法、実際のワークフロー、そして「いつ使うべきか・使わないべきか」の判断基準まで、ソロ開発者に必要な情報を体系的にまとめる。

---

Pencil.devとは何か

Pencil.devは「Agent-Driven Design Tool」として開発されたAIネイティブな設計ツールだ。一言でいうと、IDE内で動くFigmaライクなキャンバスに、Claude Code MCPをネイティブ統合したツールである。

3つの核心要素

要素	内容	意味
キャンバス	VS Code/Cursor拡張またはデスクトップアプリ内のビジュアルエディタ	Figmaと同じ操作感でIDEを離れない
.penファイル	JSONベースの設計ファイル	Gitでバージョン管理できる「設計のソースコード」
MCP統合	バックグラウンドで動くMCPサーバー	AIアシスタントが.penファイルを読み書きできる

公式のキャッチフレーズは「Design on canvas. Land in code.」。キャンバスで設計し、コードに着地する。これはマーケティング文句ではなく、アーキテクチャレベルで実現された機能だ。

.penファイルが鍵

Pencilのデザインファイルは純粋なJSONだ。FigmaのバイナリフォーマットやSketchの独自形式とは根本的に異なる。

{
  "frames": [
    {
      "id": "frame-1",
      "name": "Dashboard",
      "width": 1440,
      "height": 900,
      "children": [
        {
          "type": "component",
          "name": "Sidebar",
          "width": 240,
          "fill": "#1e293b"
        }
      ]
    }
  ]
}

このJSON構造は人間にも機械にも読める。Gitでdiffが取れ、PRでレビューでき、ブランチを切ってデザインの実験ができる。ロールバックすれば設計も戻る。デザインとコードが同じGitリポジトリの中で生きるとはこういうことだ。

---

なぜソロ開発者に刺さるのか

ソロ開発者が直面するデザイン問題は大きく3つに分類できる。

問題1: コンテキストスイッチのコスト

Figma → VS Code → ブラウザ → Figmaの往復は、作業の「流れ」を断ち切る。ソロ開発者はこれを一人でこなさなければならない。PencilはIDEの中にキャンバスを持ち込むことで、この往復を物理的に排除する。

問題2: 設計とコードのドリフト

Figmaで「ボタンの角丸16px」と決めても、実装時に「まあ12でいいか」と変えてしまう。そのズレが積み重なり、設計ファイルと実際のUIが乖離していく。Pencilの.penファイルはコードと同じGitリポジトリに置くため、コミットと設計が常に一致する。

問題3: AIへの「設計の伝達」コスト

Claude Codeに「このデザイン通りに実装して」と伝えるとき、スクリーンショットを貼っても精度は低い。PencilはMCPを通じてAIが.penファイルを直接読むため、ピクセル値、余白、カラートークン、コンポーネント構造まで正確に伝わる。Claude Codeが生成するのは「それっぽいコード」ではなく、「あなたの設計仕様に基づいたコード」だ。

---

インストールと初期設定

対応環境

プラットフォーム	インストール方法
VS Code	拡張機能（ID: highagency.pencildev）をインストール
Cursor	同拡張機能をインストール
macOS デスクトップ	公式サイトから .dmg をダウンロード
Windows	VS Code/Cursor拡張機能経由
Linux	.deb / .AppImage（X11推奨。Wayland/Hyprlandは既知の問題あり）

VS Codeへのインストール手順

Step 1: 拡張機能をインストール

VS Codeの拡張機能パネルを開き、pencil または highagency.pencildev で検索してインストールする。

Step 2: Pencilを起動

インストール後、ステータスバー左下にペンシルアイコンが表示される。クリックするとPencilキャンバスが開く。

Step 3: 認証

メールアドレスを入力し、届いたマジックリンクで認証する。Googleアカウントでのログインも可能。

Step 4: 新しい.penファイルを作成

プロジェクトのルートディレクトリに design.pen などの名前で新規ファイルを作成する。このファイルがGit管理される設計ファイルになる。

価格

2026年4月時点、Pencil本体は無料（Early Access）。ただし実際のコード生成にはClaude Codeが必要で、Claude Code Proは月20ドル（約3,000円）。Pencil単体は「AIへの見せ方を改善するキャンバス」として機能するため、Claude Codeを既に使っているソロ開発者には追加コストゼロで導入できる。

---

Claude Code MCPとの連携

Pencilの真価はMCP統合にある。ここを理解しないとPencilの半分しか使えない。

MCPが何をするか

PencilはバックグラウンドでMCPサーバーを自動起動する。このサーバーが「Claude Codeが.penファイルを操作するためのAPI」として機能する。

Claude Code ←→ Pencil MCPサーバー ←→ .penファイル

Claude Codeは単にテキストを読むのではなく、MCPツールを呼び出して設計の構造情報を取得する。フレームの座標、コンポーネントの階層、カラートークン、フォントサイズ——すべてが構造化データとして渡る。

接続の設定手順

重要: PencilはClaude Codeより先に起動すること。逆の順番だとMCP接続が確立しない。

# 1. まずPencilを起動（VS Code拡張またはデスクトップアプリ）
# .penファイルを開いた状態にする

# 2. Claude Code CLIを起動
claude

# 3. MCP接続を確認
/mcp
# → Pencilが表示されれば接続成功

利用可能なMCPツール

Pencil MCPが提供するツールは大きく4カテゴリに分類される。

設計操作ツール:

ツール	役割
batch_design	要素の作成・更新・削除・移動を一括実行
batch_get	ノードIDまたはパターンマッチで設計要素を取得

状態取得ツール:

ツール	役割
get_editor_state	現在開いているファイル、選択状態、キャンバス状態を取得
snapshot_layout	レイアウトのスナップショットを取得
get_screenshot	現在のキャンバスのスクリーンショットを取得

変数管理ツール:

ツール	役割
get_variables	デザイントークン（カラー、スペーシング等）を取得
set_variables	デザイントークンを更新

ドキュメント管理ツール:

ツール	役割
open_document	.penファイルを開く

---

実践ワークフロー 3パターン

パターン1: ゼロから設計してコード生成（基本形）

PencilにはShadcn UI、Lunaris、Halo、Nitroなど複数のデザインシステムが内蔵されている。これを活用すると最速でプロダクションレディなUIが生成できる。

手順:

1. Pencilキャンバスでスタイルガイドを選択
   → 例: "Lunaris" (ダークモード対応のモダンシステム)

2. Claude Codeに指示:
   「ダッシュボードのUIを設計して。サイドバー（幅240px）、
    KPIカード3枚、売上グラフ、アラートテーブルを含める」

3. Pencilキャンバスでデザインが生成される

4. Claude Codeに指示:
   「このデザインをReact/TypeScriptで実装して。
    Tailwind CSSを使って」

5. コンポーネントが自動生成される

実際に試したユーザーの報告では、このフローで複雑なダッシュボードが3〜4時間で完成したという事例がある（従来は1〜2日）。

パターン2: 設計の反復と変数管理（中級）

デザイントークン（カラー変数）をPencil側で管理し、Claude Codeで一括更新するパターン。ブランドカラーの変更が全コンポーネントに即時反映される。

# Claude Codeへの指示例:
# 「デザインのプライマリカラーを#3B82F6から#8B5CF6に変更して。
#  全コンポーネントに反映すること」

# Pencil MCPが set_variables を実行
# → .penファイルのカラートークンが更新
# → コードも自動更新

この「変数管理→コード反映」の連鎖が機能するのは、.penファイルが構造化JSONだからだ。Figmaからスクリーンショットを貼り付けるアプローチでは、AIが「#3B82F6という値がどこに何か所あるか」を把握できない。

パターン3: Figma移行パイプライン（上級）

既存のFigmaデザインがある場合、そのままPencilに移植して活用できる。

手順:

1. Figmaでフレームをコピー（Cmd+C）
2. Pencilキャンバスにペースト（Cmd+V）
   → レイヤー構造、Auto Layout、スタイルが保持される
3. 必要に応じてアノテーション（注釈）を追加
4. Claude Codeでコード生成

Figmaとの連携は完全ではなく、複雑なエフェクト（ブラー、特殊グラデーション等）は手動調整が必要な場合がある。しかし「8割の設計がそのまま移行できる」という報告は多い。

---

組み込みデザインシステムの活用

Pencilに内蔵されているUIキットは、ソロ開発者がゼロからデザインシステムを構築する手間を省く。

UIキット	特徴	向いている用途
Shadcn UI	オープンソースの定番。カスタマイズ性高	SaaS、管理ツール、ダッシュボード
Lunaris	ダークモード最適化。モダンな印象	開発者向けツール、テックスタートアップ
Halo	明るくクリーンなビジネス向け	企業サービス、マーケティングサイト
Nitro	ミニマリスト。余白を活かしたデザイン	ポートフォリオ、シンプルなSaaS

Shadcn UIを選んでいれば、生成されたコードはそのまま既存のNext.js + Shadcnプロジェクトに組み込める。技術スタックと設計システムの整合性が最初から保たれている。

---

競合ツールとの比較

Pencil.devの立ち位置を理解するために、主要な競合ツールと比較する。

Pencil.dev vs Figma

観点	Pencil.dev	Figma
IDEとの統合	ネイティブ（同一環境）	別アプリ（コンテキストスイッチあり）
Git管理	標準（.penはJSON）	非対応（FigmaはSaaS管理）
AI連携	MCP経由でネイティブ	プラグイン経由（非公式）
コラボレーション	限定的（個人・小チーム向け）	リアルタイムコラボ対応
デザイン表現力	基本的なUI設計に特化	プロトタイプ、モーション等も対応
価格	無料（Early Access）	無料〜月15ドル/人

結論: チームのデザイナーがいてFigmaを日常的に使うなら、Figmaから離れる必要はない。FigmaのデータをコピーしてPencilに移植するパイプラインを組むのが現実的な選択だ。

Pencil.dev vs v0/Bolt.new

観点	Pencil.dev	v0 / Bolt.new
入力形式	ビジュアルキャンバス + テキスト	テキストのみ
出力制御	細かいビジュアル調整が可能	生成AIまかせ
既存プロジェクト統合	Git管理で既存プロジェクトに自然に入る	スタンドアロン生成が得意
デザインシステム	内蔵UIキット + カスタマイズ	プロバイダー依存
コスト	Pencil無料 + Claude Code代	v0: クレジット制 / Bolt: サブスクリプション

結論: v0やBolt.newは「何かを素早く試す」ためのツール。Pencilは「継続的に育てるプロダクトの設計を管理する」ためのツール。目的が異なる。

Pencil.dev vs OpenPencil

OpenPencilは完全オープンソースのPencil代替として2026年に登場した。90個以上のMCPツールを持ち、より細粒度な操作が可能だ（ベジェパス操作、Boolean演算、個別ノード操作等）。

観点	Pencil.dev	OpenPencil
オープンソース	クローズド	MITライセンス
MCPツール数	主要8ツール	90+ツール
設定の複雑さ	低（すぐ動く）	高（カスタマイズ可能）
安定性	Early Accessだが比較的安定	コミュニティ開発中
エンタープライズ対応	未定	セルフホスト可能

結論: ソロ開発者が今すぐ使い始めるならPencil.dev。将来的にセルフホストしたい、またはMCPツールを細かくカスタマイズしたいならOpenPencilも選択肢に入る。

---

実際に試した開発者の声

Lulabot社のエンジニアがPencil × Claude Codeで2つの社内ツールを構築した事例が参考になる。

「OpptyNetのUIを3時間で7回イテレーションした。これだけのサイクルを従来のFigma+実装ワークフローでやろうとすれば、最低でも丸一日かかっていた」

興味深いのは、彼がこのプロセスで**「視覚的な問題ではなく、設計上の問題」を発見したと述べている点だ。UIをすばやく生成し、触れてみることで、「フィルター機能が埋もれている」「主要操作が3クリック以上必要」といったUXの構造問題**が早期に浮かび上がった。

また、2プロジェクト目では56個のカラー変数と16個のコンポーネントを共有ライブラリ化したことで、初回より明確に高速に設計できたとも報告している。Pencilを使い込むほど、「再利用可能な設計資産」が溜まっていく。

Classmethod社の検証では、Claude Code + Pencil MCPを使って旅行ギャラリー、ベーカリー注文ページ、売上ダッシュボード、マンション掲示板、企業ポータルの5種類を自然言語のみで生成することに成功している。

---

Pencilを使うべき場面・使わない場面

使うべき場面 ✅

• ソロまたは少人数チームでのプロダクト開発: デザイナー不在で自分でUIを設計する必要がある
• 内部ツール・管理画面の構築: 見た目より機能を重視するが、それなりの品質は必要
• プロトタイプ → 本番コードの連続的な更新: デザインとコードを同じGitリポジトリで管理したい
• Claude Codeを既に使っている: MCPが追加コストゼロで利用できる
• デザインシステムを育てたい: 変数管理、コンポーネント管理を体系化したい

使わない方が良い場面 ❌

• 専任デザイナーがいてFigmaを使っているチーム: 既存ワークフローとの衝突が起きる
• 複雑なモーション・インタラクションデザイン: Pencilは基本的なUI設計に特化
• Figmaプロトタイプを外部ステークホルダーに見せるケース: Pencilの共有機能はまだ限定的
• Linuxでの本格運用: Wayland/Hyprland環境での既知バグがある

---

今すぐ始めるための3ステップ

Step 1: VS Code拡張をインストール（5分）

VS Code拡張マーケットプレイスで highagency.pencildev を検索してインストール。メールで認証する。

Step 2: 最初の.penファイルを作ってみる（15分）

プロジェクトに design.pen を作成し、Shadcn UIキットを選択。Claude Codeに「シンプルなログインフォームを設計して」と指示するだけで最初のキャンバスが生まれる。

Step 3: MCP連携でコード生成（30分）

設計が出来たら「このデザインをReact/TypeScriptで実装して」とClaude Codeに指示。生成されたコンポーネントをプロジェクトに組み込んで、「設計とコードが一致している感覚」を体験する。

---

まとめ

Pencil.devは「Figmaの代替」でも「v0の代替」でもない。**「設計とコードの境界を消すインフラ」**として機能するツールだ。

.penファイルをGit管理することで、設計とコードのドリフトが構造的に起きなくなる。MCPを通じてClaude Codeが設計の文脈を正確に理解するため、「それっぽいコード」ではなく「あなたの設計仕様に準拠したコード」が生成される。

現在はEarly Accessで無料。Claude Codeユーザーなら今すぐ導入できる。ソロ開発者がデザインに費やす時間を圧縮し、より多くのクリエイティブサイクルを実装に向けるために、一度試す価値は十分にある。

参照リンク:

• Pencil.dev 公式サイト
• Pencil.dev ドキュメント（AI Integration）
• Claude Code × Pencil MCPの実践例（Classmethod）
• Pencilを使った実際のワークフロー事例（jeradbitner.com）

---