PencilでUIデザインを自動生成する方法

TL;DR

Pencilを導入し、VS CodeやCursorの拡張機能とMCP連携を設定すれば、Claude Codeなどとの対話からUIデザインを生成・修正できる。生成物は.pen形式でプロジェクトに保存してGit管理でき、既存のデザインシステムやFigmaデータも制作の土台にできる。

Transcript

おすです。本日はですね、AIでUI デザインを作る時にめちゃくちゃいい感じ のツールを見つけてきたんで、これについ てお話していきたいと思います。え、その ツールはね、ペンシルというやつなんです けど、え、クロードコードと対話しながら UIデザインを作ったり、え、作ったその UIデザインはMCP経由でね、え、その コンテキストとしてAIエージェントに 渡せるから、え、例えばですけど僕がね、 Webアプリとかちょっと作ろうと思って て、フィグマみたいな、え、感じのアプリ から、あるいはカーソルの拡張から、え、 UIデザインをね、いい感じに作ることが できるんですけど、どういうことかって 言うと、こういう感じのアプリがあってね 、え、ここでちょっと作っていけるんです よ。はい。ま、ちょっと組み立... Read More

Key Insights

• Pencilは、キャンバスでの手動編集とAIエージェントとの対話を組み合わせ、アプリのUIデザインを生成・調整できるツールである。
• MCP連携は、Pencil上のUIデザインをコンテキストとしてClaude CodeやCursorへ渡し、実装や画面再現に利用できる仕組みである。
• 生成されたデザインは.pen拡張子のファイルとして保持され、開発プロジェクト内に保存してGitの履歴管理対象にできる。
• Pencilの拡張機能はVS CodeやCursorから利用でき、独立したアプリを開かなくてもエディタ内でキャンバスの編集を進められる。
• デザインシステムの例にはshadcnを基にした構成があり、既存のスタイルを選んで習慣化アプリなどのUI生成に利用できる。
• 選択中のUI要素はオブジェクトとして認識されるため、対象を絞ってAIに修正を依頼し、レイアウトやアイコンを調整できる。
• Figmaインポート機能は、既存のFigmaデータをPencilへ移す入口になり、分散したデザイン資産を扱いやすくする可能性がある。
• MCP設定は動画内の環境ではグローバル領域に追加されており、不要なプロジェクトでは無効化を検討する必要がある。
• 🎬 このチャンネルの他の動画:
  • Hermes AgentとGrokを連携する方法
  • Cloudflare OSでAI業務基盤を作る方法
  • GPT-5.5とClaude、どちらを選ぶべきか？
• 📺 このチャンネル: まさおAIじっくり解説ch

Questions & Answers

Q: PencilでUIデザインを自動生成する方法は？

Pencilで新規ファイルを作成し、利用するデザインシステムを選んだうえで、チャット欄やClaude Codeから作りたい画面を指示します。動画ではshadcnを選択し、習慣化アプリの生成を依頼すると、そのスタイルに沿ったUIがキャンバス上へ段階的に作成されました。

Q: PencilをVS CodeやCursorで使う方法は？

VS CodeやCursorの拡張機能からPencilを検索してインストールし、.pen拡張子のファイルを開くとキャンバスを利用できます。エディタ内からUIを編集できるため、独立したPencilアプリを常に開く必要はなく、普段の開発環境にデザイン作業を組み込めます。

Q: PencilとClaude CodeをMCPで連携する方法は？

Pencilの導入後にClaude Code側のMCP設定を確認し、Pencilのツールが利用可能な状態でデザイン生成や修正を指示します。動画内の環境では連携設定が自動的に追加されていましたが、詳しい手順はPencil側の案内を確認し、接続状況を確かめる必要があります。

Q: PencilのMCP連携で何ができますか？

MCP連携では、Pencil上のデザインや選択中のオブジェクトをAIエージェントへコンテキストとして渡せます。これにより、Claude CodeやCursorにダッシュボードの再現を依頼したり、特定の要素を選択してレイアウト、アイコン、見た目の修正を対話形式で求めたりできます。

Q: PencilのデザインデータをGitで管理する方法は？

Pencilで作成したデザインを.pen形式で開発プロジェクト内に保存し、そのファイルを通常のプロジェクト資産としてGitの管理対象にします。これにより、UIデザインの変更をコードと同じリポジトリで保持でき、個人開発者が設計と実装を一体で進める用途にも適しています。

Q: Pencilで既存のデザインシステムを使う方法は？

Pencil内に用意されたデザインシステムの例から目的に近いものを選び、それを基準として画面生成を依頼します。動画ではshadcnのデフォルト構成を選び、習慣化アプリのUIを作成しました。生成後もスタイルガイドを選択し、部品やレイアウトを調整できます。

Q: FigmaのデータをPencilへ移行できますか？

PencilのメニューにはFigmaインポートがあり、既存データを取り込む入口が用意されています。動画では機能の存在が補足された段階で、移行結果や対応範囲までは検証されていません。そのため、実際の利用時には対象データが期待どおり再現されるか確認する必要があります。

Q: PencilのMCP設定をプロジェクトごとに管理するには？

動画内ではClaude CodeとCursorのMCP設定がグローバル領域に追加されているように見えたため、接続が不要なプロジェクトでは無効化を検討します。開発系の作業では常時利用する選択肢もありますが、導入後に各エージェントの設定場所と有効状態を確認することが重要です。

Summary & Key Takeaways

• Pencilは、Figmaに似たキャンバス上でUIを組み立てながら、Claude CodeやCursorなどのAIエージェントとも対話できるデザインツールである。MCPを通じて選択中の要素や画面のデザイン情報をエージェントへ渡し、習慣化アプリやダッシュボードなどのUIを生成・再現できる。

• 導入時はPencilをダウンロードして新規ファイルを作り、プロジェクト内へ保存する。VS CodeやCursorではPencil拡張機能をインストールし、.penファイルを開くとキャンバスを利用できる。動画内の環境ではClaude CodeやCursor向けMCP設定が自動的に追加されていたが、設定手順の確認も推奨されている。

• Pencilにはshadcnを含むデザインシステムの例があり、それを基準に画面や部品を生成して、配置、アイコン、スタイルなどを調整できる。.penファイルはGitで管理でき、開発プロジェクトとデザインデータを同じ流れで扱える。Figmaインポートも用意されており、既存データの移行にも使える可能性がある。