Pencil.devとは？Figmaとの違いからMCP連携まで徹底解説【2026年版】

はじめに

UIデザインとコード実装の間には、長年にわたって「翻訳コスト」が存在してきました。Figmaで作ったデザインをエンジニアが手作業でReactコンポーネントに落とし込む——この工程が開発サイクルのボトルネックになっているチームは少なくありません。

2026年、このギャップを根本から解消するツールとして Pencil.dev が注目を集めています。VS CodeやCursor内で直接デザインでき、MCP（Model Context Protocol）を介してClaude Codeと連携し、デザインからプロダクションコードを自動生成する。本記事では、Pencil.devの仕組みとFigmaとの違い、実践的な導入方法を解説します。

Pencil.devとは何か？

Pencil.devは、IDE内で動作するAIネイティブなフロントエンドデザインツールです。「Design on canvas. Land in code.」をコンセプトに掲げ、デザインをキャンバス上で行い、そのままコードに落とし込むことを目指しています。

主な特徴は以下の通りです。

• IDE統合: VS CodeまたはCursorの拡張機能として動作し、.penファイルを開くとエディタ内にFigmaライクな無限キャンバスが展開される
• Git管理: デザインファイルがリポジトリ内に保存されるため、ブランチ、マージ、プルリクエストといったGitワークフローがそのまま適用できる
• MCP連携: Model Context Protocolを通じてClaude CodeなどのAIエージェントと双方向に通信し、デザインの読み取り・編集・コード生成を自動化する
• Figmaインポート: Figmaからフレームやコンポーネントをコピー＆ペーストでき、レイヤー構造やオートレイアウト設定が保持される

2026年3月現在、Pencil.devはアーリーアクセス段階で 無料 で利用できます。ただし、AIコード生成機能をフルに活用するにはClaude Codeのサブスクリプション（月額20ドル〜）が必要です。

Pencil.devとFigmaは何が違うのか？

両ツールは設計思想が根本的に異なります。Figmaがクラウドベースの包括的デザインプラットフォームであるのに対し、Pencil.devは開発ワークフローに深く統合された「デザインとコードの橋渡し」ツールです。

AI連携の決定的な違い

最も注目すべき差異は AIエージェントに対する権限モデル です。Figmaの公式MCPサーバーはAIに読み取り専用のアクセスを提供します。AIはデザインを「見る」ことはできますが、直接編集することはできません。

一方、Pencil.devはMCPを通じてAIエージェントに フルの読み書き権限 を付与します。Claude Codeがキャンバス上のデザインを解釈し、コンポーネントの追加・修正・削除を自律的に実行できます。これにより、自然言語でデザインの指示を出すだけでAIがUIを生成する「AIドリブンデザイン」が実現します。

MCP連携によるDesign-to-Codeワークフローはどう機能するか？

Pencil.devの真価は、MCPを介したAIエージェントとのシームレスな連携にあります。具体的なワークフローを見てみましょう。

セットアップ

1. VS Codeの拡張機能マーケットプレイスで「Pencil」を検索してインストール
2. プロジェクトディレクトリ内に .pen 拡張子のファイルを作成
3. MCPサーバーの設定はインストール時に自動構成される（手動設定が必要な場合は mcp.json を編集）

デザイン → コード生成の流れ

[Pencilキャンバスでデザイン]
        ↓
[.penファイルとしてGitに保存]
        ↓
[MCP経由でClaude Codeがデザインを読み取り]
        ↓
[React / HTML / CSSコンポーネントを自動生成]
        ↓
[生成コードをGitにコミット]

このワークフローのポイントは、デザインデータが常にローカルに存在することです。クラウドにデザインデータが送信されることはなく、すべての処理がローカルで完結します。セキュリティやプライバシーに敏感なプロジェクトでも安心して導入できます。

Figmaからの移行パス

既存のFigmaデザインアセットも活用できます。Figmaからフレーム・ベクター・テキスト・スタイルをコピーし、Pencilにペーストするだけで、レイアウトやスタイル情報が保持されます。SVGの破損やフォントの欠落といった一般的な変換トラブルも発生しません。

エンジニアにとってPencil.devが刺さる理由とは？

Pencil.devが特にエンジニアコミュニティで支持を集めている理由は、開発者の既存ワークフローを壊さない設計にあります。

Design-as-Code

デザインファイルをGitで管理する「Design-as-Code」は、Infrastructure-as-Code（IaC）のデザイン版とも言えるアプローチです。

• コードレビュー: デザイン変更をプルリクエストでレビューできる
• ブランチ戦略: 機能ブランチごとにデザインを分岐し、並行開発が可能
• 変更履歴: git log でデザインの変更履歴を追跡できる
• CI/CD統合: デザインの変更をトリガーに自動テストやビルドを実行できる

コンテキストスイッチの排除

従来のワークフローでは、デザイナーがFigmaで作成 → エンジニアがブラウザでFigmaを確認 → IDEに戻ってコード記述、というコンテキストスイッチが発生していました。Pencil.devではIDE内でデザインの確認と実装が完結するため、このオーバーヘッドが解消されます。

個人開発者・小規模チームの味方

デザイナーを雇う余裕がない個人開発者や小規模チームにとって、AIに自然言語でデザインを指示できるPencil.devは強力な選択肢です。プロトタイプの作成速度が飛躍的に向上します。

Pencil.devの制約と注意点

Pencil.devは革新的なツールですが、万能ではありません。導入を検討する際に知っておくべき制約があります。

• デザイナー向け機能の不足: Figmaのようなプロトタイピング、デザインシステム管理、ハンドオフ機能は現時点では限定的
• チームコラボレーション: リアルタイム共同編集はGitベースのため、Figmaのマルチプレイヤー体験には及ばない
• 学習コスト: MCP設定やClaude Codeとの連携にはある程度の技術知識が必要
• エコシステム: プラグインやコミュニティリソースはFigmaと比較するとまだ発展途上
• アーリーアクセス: 2026年3月現在、プロダクション利用には安定性の検証が推奨される

大規模デザインチームが全面移行するツールというよりは、エンジニア主導のプロトタイピングやデザイン実装フェーズで最大の効果を発揮するツールと位置づけるのが現実的です。

よくある質問

Q. Pencil.devは無料で使えますか？

A. 2026年3月現在、アーリーアクセス期間中は無料で利用できます。AIコード生成にはClaude Codeのサブスクリプション（月額20ドル〜）が別途必要です。

Q. FigmaからPencil.devに完全移行すべきですか？

A. 現時点では完全移行よりも併用がおすすめです。Figmaでデザインし、Pencilにインポートしてコード生成するハイブリッドワークフローが実用的です。

Q. Pencil.devはどのプログラミング言語に対応していますか？

A. React、HTML、CSSのコンポーネント生成に対応しています。MCP経由でClaude Codeと連携するため、AIが対応するフレームワークであれば柔軟にコード生成が可能です。

Q. デザインデータはクラウドに送信されますか？

A. いいえ。Pencil.devのデザインデータは .pen ファイルとしてローカルに保存され、クラウドには送信されません。

Q. Pencil.devはチーム開発に向いていますか？

A. Gitベースのワークフローに慣れたエンジニアチームであれば、PRレビューによるデザインコラボレーションが可能です。ただし、Figmaのようなリアルタイム共同編集は提供していません。

まとめ

Pencil.devは、デザインとコードの境界を再定義するAIネイティブなツールです。IDE内で完結するデザイン体験、MCP経由のAIエージェント連携、Gitによるバージョン管理——これらの要素が組み合わさることで、従来のDesign-to-Codeワークフローを根本から変革する可能性を秘めています。

Figmaを置き換えるものではなく、Figmaとコード実装の間に存在するギャップを埋めるツールとして位置づけるのが適切でしょう。特にエンジニア主導のプロジェクトや個人開発において、AIと協調したUIデザイン・実装のワークフローを構築したいなら、Pencil.devは試す価値のある選択肢です。

ZenChAIneでも、AIエージェントを活用した開発ワークフローの最適化を日々研究しています。Pencil.devのようなAIネイティブツールの登場は、ソフトウェア開発の未来を加速させる重要な一歩です。

参考ソース

• Pencil.dev 公式サイト
• Pencil.dev Documentation - AI Integration
• 新しいデザインツール Pencil を試してみた - azukiazusa.dev
• 新デザインツールPencilはなぜエンジニアに刺さるのか - Zenn
• Pencil.dev: Bridging the Design-to-Code Gap in Modern Development - Medium
• Cursor Changed How We Code. This Tool Changes How We Design. - Medium