IDE統合型AIデザインツール Pencil を試してみた

2026.03.27
 はじめにお疲れ様です。あきとです。
普段の開発で「デザインとコードをもっとスムーズに行き来できたら」と思う場面が増えました。AIの進化もあり、コードの生成は手軽になった一方で、デザインの管理は別ツールのままでした。そんなモヤモヤを感じていたところ、IDE統合型の AI デザインツール「Pencil」を見つけました。
今回は Pencil のセットアップから主要な機能、使ってみた感想までをまとめます。
 Pencil とはPencil は、IDE 内またはアプリとして動作する AI デザインツールです。主な特徴は以下の 3 つになります。
MCP（Model Context Protocol）連携: AI を介してコードとデザインを相互に行き来しやすく、同期作業を進めやすい
Git で管理可能: デザインファイルは JSON 形式（.pen 拡張子）で保存されるため、バージョン管理に対応している
直感的な操作感: Figma に近い UI で、デザイナーでなくても操作しやすい


Pencil のメイン画面。Start Here テンプレートが用意されている
 セットアップ IDE へのインストールVS Code または Cursor の拡張機能マーケットプレイスから「Pencil」を検索し、インストールします。


拡張機能マーケットプレイスからインストール
アプリ版は公式サイトからダウンロードしてください。
 AI 連携の設定Pencil では、AI エージェントと連携してデザイン作業を進められます。現時点では、MCP 経由で Claude Code や Codex CLI など複数の AI アシスタントに対応しています。

アプリの設定画面で MCP のチェックを入れると、Pencil MCP サーバーが自動で設定され有効になります。これにより、AI アシスタントからデザインファイルを操作できるようになります。


Terminal 内の MCP Integrations 設定画面
他の AI アシスタントで使う場合は、MCP の設定をコピーして個別に追加も可能です。


カスタム MCP サーバーの設定画面
MCP 経由では、公式が以下の AI アシスタント対応を明記しています。
Claude Code（CLI and IDE）
Claude Desktop
Cursor（AI-powered IDE）
Windsurf IDE（Codeium）
Codex CLI（OpenAI）
Antigravity IDE
OpenCode CLI
 モデル選択についてアプリ内蔵の 機能でもデザイン操作は可能です。ただし、対応モデルが限られています。



Claude Code や Codex と接続できる


アプリ内蔵のモデル選択画面
AI によるデザイン指示は、Claude Code などの AI アシスタント経由がおすすめです。ドキュメントや既存コードを参照しながら指示を出せるため、より的確な結果を得られるでしょう。
 主要機能Pencil の強みは、AI アシスタントと連携しやすい点と、比較的感覚的に扱えるデザインツールである点です。MCP を通じて AI からデザインを操作でき、コードとデザインを行き来しながら作業を進められます。操作感は Figma に近く、ドラッグ操作やプロパティパネルで直感的にデザインを進められます。
加えて、変数とコンポーネントは意識して活用したい機能です。
 変数色・数値・文字列を変数として保存し、文字の色やフォント、余白サイズなどに適用できます。


色・数値・文字列の 3 種類が使える
CSS のカスタムプロパティと同期すると、デザインとコードの値を一元管理しやすくなります。
 コンポーネント通常の要素を選択すると青い枠が表示されます。ショートカットキー Cmd/Ctrl + Option/Alt + K でコンポーネントに変換すると、紫色の枠に変わります。
コンポーネント化のメリットは以下のとおりです。
1 か所を修正すれば、すべての配置箇所に反映される
デザイン全体の見た目やルールを統一しやすい
コード側のコンポーネントとも対応づけしやすい
 ベストプラクティス以下は Pencil 公式ドキュメント に記載されている推奨事項をもとにまとめた内容です。
 ファイル構成の推奨.pen ファイルはプロジェクトのリポジトリ内に配置します。
my-project/
├── src/
│   ├── components/
│   └── styles/
├── design.pen   ← デザインファイル
└── package.json
この配置には 3 つの利点があります。
AI エージェントがデザインとコードの両方を参照できる
バージョン管理で両方をまとめて追跡できる
デザインとコードの同期状態を保ちやすい
 新規作成時のフローPencil でデザインを作成する
AI で初期コードを生成する
コードの実装を改善する
必要に応じてデザインを更新する
 既存プロジェクトでの使い方既存のコードを Pencil に取り込む
デザインの変更を行う
変更をコードへ同期する
 デザインシステムの保守Pencil で変数を定義する
CSS に同期する
デザインとコードの両方で変数を使う
変数を更新すれば、すべての利用箇所に反映される
 向いている方と注意点 向いている方Git ベースで UI 設計も管理したい人
画面設計から実装までを 1 人、または少人数で進めたい人
AI を活用してデザインとコードの往復を効率化したい人
 注意点使ってみて感じた点をまとめます。
保存の仕様: AI で編集した内容は自動保存されず、手動保存が必要です。編集後に明示的に保存操作を行うことで、確実にファイルに反映させることができます。
トークン消費の特性: 1つのファイルが大きくなりやすく、微修正などでも大きくトークンを消費しやすい。
微調整は手動が確実: ピクセル単位の細かい調整は AI より手動のほうが正確
公式も Git ベースでの協業を推奨しています。現時点では、Figma のようなリアルタイム共同編集を前提にした使い方には向いていません。私の印象では、個人開発や少人数のチームと相性がよい設計です。
 まとめ今回は、IDE 統合型 AI デザインツール Pencil を試してみました。
個人的には、コンポーネントやページ単位で .pen ファイルを分けたほうが、管理や複数人での分担がしやすいと感じました。結果として、AI に渡す文脈も整理しやすくなりそうです。
MCP 連携によってコードとデザインを行き来しやすく、Git でもバージョン管理できます。さらに Figma ライクな操作感もあり、エンジニアがデザインまで手がけるうえで欲しい機能がそろっています。とくに AI アシスタントと組み合わせたワークフローは、従来のツールにはない強みでしょう。
1 人で設計から実装まで進めるエンジニアにとっては試す価値があると感じました。今後のアップデートにも期待しています。
本ブログが誰かの参考になれば幸いです。
 参考資料Pencil Documentation - 公式ドキュメント
 クラスメソッドオペレーションズ株式会社についてクラスメソッドグループのオペレーション企業です。
運用・保守開発・サポート・情シス・バックオフィスの専門チームが、IT・AIをフル活用した「しくみ」を通じて、お客様の業務代行から課題解決や高付加価値サービスまでを提供するエキスパート集団です。
当社は様々な職種でメンバーを募集しています。
「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、クラスメソッドオペレーションズ株式会社 コーポレートサイト をぜひご覧ください。※2026年1月 アノテーション㈱から社名変更しました