Claude CodeやCursorを使って、AIがUIデザインを生成することができる「Pencil」が登場！

はじめに

みなさんは、Pencil というAIツール使ったことがありますか？

Pencilは、Figma + Layermate みたいなツールで、Pencil上でAIにUIを作らせたり、作成したUIをMCPを経由して開発させることができます！

この記事では、実際に、Pencilを色々触ってみてわかったことなどをまとめようと思います！

Pencil について

Pencil は、サイト上では、以下のように説明されています！

Pencil is agent driven MCP canvas built around open design format that lives in your codebase.
(Pencilは、オープンな設計フォーマットを基盤とし、コードベース内に存在するエージェント駆動型のMCPキャンバスです。)
引用：https://www.pencil.dev/

何ができるかわからないですね....笑

僕が触ってみた所感としては、

と説明されるとしっくりくるかなと思います！

AIにデザインを作らせるとなったら、FigmaにLayermateのpluginを入れてやるイメージがあると思います。

ですが、Pencilの場合は、

• Figma のように人がデザインを作ることができる
• Figma MCP のように、デザインデータをAIにコンテキストとして渡せる
• Layermate のように、AIにデザインを作らせることができる
• 好きなAI AgentにUIを作らせることができる

ができます！

特に、好きなAI AgentにUIを作らせることができる が、Figma + Layermate ではできない体験かなと思います！

使い方の例

⚪︎ PencilでAIにUIを作らせる

以下の動画のように、Pencil上のAIパネルで、AIにUIを作ってもらうことができます！

⚪︎ CursorとVS Codeを使って、UIを作らせる

CursorとVS CodeにPencilの拡張機能を追加することで、CursorやVS Code上からAIにUIを作らせることができます！

この例では、Cursor に拡張機能を追加して、CursorのエージェントにUIを作ってもらってます！

セットアップ方法

⚪︎ Pencil(アプリ) x Claude Code(CLI)

1. 公式サイトからアプリをインストール

2. pencilとClaude Codeを紐付ける
右上のボタンから、pencilとClaude Codeを紐付けることができます。
ボタンを押したら、あとは、指示に従って操作してください

3. Claude Codeの /mcp を確認する
/mcp を確認して、❯ pencil · ✔ connectedとなっていたら接続できてます！
その後、Pencilのaiパネルやclaude codeからUIを作らせてみてください！

Dark bold website for a coffee shop in Prague

create a dark and powerful website for a Prague coffee shop on {{ ファイル名：〇〇.pen }}.

⚪︎ Pencil(拡張機能) x Cursor

1. 公式サイトからアプリをインストール

2. Cursorにpencilの拡張機能を追加する
右上のボタンから、Cursorに拡張機能を追加することができます！

3. Cursor settingsを確認する
Cursor settingsのTool & MCP にあるextension-pensilが enable であればOKです！

その後、cursorのエージェントにUIを作らせてみてください！

create a dark and powerful website for a Prague coffee shop on {{ ファイル名：〇〇.pen }}.

触って所感

Pencil を使ってみてまず感じたのは、
「AIにデザインデータを“作らせる”ことが、現実的な選択肢になってきた」 という手応えでした。

特に印象的だったのは、Claude Code や Cursor、VS Code など、
普段使っている IDE からそのままデザインデータを生成・編集できる点です。
「デザインツールを開く」ではなく、コードを書く延長線上で UI が作れる体験は、これまでにない感覚でした。

また、デザインデータとドキュメント、履歴管理まで含めて、GitHub に統一できそうな点も非常に魅力的です。

1. Design Docs（デザイン作る上での仕様をドキュメント）をまとめる
2. Design Docs をコンテキストに渡して、UIをつくってもらう
3. 作られたUIを見ながら、議論・調整
4. 開発ドキュメントをまとめる
5. 作られたUI・開発ドキュメントからフロントエンドを作ってもらう

これら一連して、Pencilが利用できるので、チーム開発との相性がかなり良いと感じました。

一方で、純粋に「人が手で UI を作る」体験としては、現時点ではまだ Figma の方が作りやすい、というのが正直な感想です。
細かなレイアウト調整や視覚的な試行錯誤は、やはりFigmaが一歩リードしている印象があります。
このあたりは今後の改善に期待したいポイントです。

• その他
  • icon fontの追加機能に感動した
  • デザインデータの管理方法は悩むかも
  • Cursor や CLIから、UIデザインが生成できるのには感動した
  • デザインからフロントエンド、フロントエンドからデザインと双方向からAIを使ってデザイン開発できそう！

まとめ

Pencil を触ってみて感じたのは、
これは単なる「AI付きデザインツール」ではなく、
AIを前提にしたデザイン開発フローそのものを再設計するツール だということです。

Figma + Layermate の延長線にありつつも、

• MCP を通じてデザインデータを AI のコンテキストとして扱える
• Claude Code / Cursor / VS Code など、普段の開発環境から UI を生成・編集できる
• デザイン・ドキュメント・履歴管理を GitHub に寄せられる

といった点は、これまでのデザインツールとは明確に異なる体験でした。

特に、
「Design Docs → UI → 議論 → 実装」
という一連の流れを、AIを介してシームレスにつなげられる点は、
チーム開発やプロダクト開発との相性が非常に良いと感じます。

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。