デザイナー6人を雇う代わりに、AIエージェント6人が目の前で同時に画面をデザインする様子を想像してみてください。1人はレイアウトを決め、別の1人はタイポグラフィを選び、またほかの1人はコンポーネントを配置する — これがすべて1つのキャンバスでリアルタイムに起きるのです。
これは何？
PencilはAIが駆動するMCP（Machine-Centered Protocol）ベースのデザインキャンバスです。Tom Kruchaが作りました。彼はMiroが買収したビデオ通話アプリAroundとGoogleが買収したAlterアバターを共同創業したシリアル・アントレプレナーです。
Pencilが特別な理由は、デザインファイル（.pen）がただのJSONだということです。コードのようにGitでバージョン管理し、ブランチを切ってマージし、AIエージェントが直接読み書きできます。Figmaでデザインを作って→開発者にハンドオフして→解釈が違って修正し直す、あのループ？Pencilはこれを丸ごとなくします。
そして今回公開されたSWARMモードが核心です。最大6つのAIデザインエージェントが1つのキャンバスで同時に作業します。それぞれのカーソルが見え、リアルタイムで画面が埋まっていくのを目で見ることができます。Tomはこれを「自律型デザインエージェンシー」と呼んでいます。
何が変わるの？
今のAIデザインツールの最大の問題はシングルスレッドだということです。1つのプロンプト→1つの結果→気に入らなければまたプロンプト。SWARMモードはこのボトルネックを打ち破ります。
| 従来のAIデザインツール | Pencil SWARM | |
|---|---|---|
| 作業方式 | 1プロンプト → 1結果 | 1プロンプト → 6エージェント並列 |
| デザインファイル形式 | 独自フォーマット（ブラックボックス） | .pen = JSON（Git互換） |
| コード変換 | デザイン→ハンドオフ→コーディング | デザイン = コード（一度に） |
| IDE統合 | 別アプリ | Cursor·VSCode·Claude Code内蔵 |
| リアルタイムフィードバック | 結果物確認後に修正 | エージェントカーソルをリアルタイム観察 |
Peter Yang（Behind the Craft）が実際にSWARMモードで旅行アプリをデザインするデモを行いましたが、6つのエージェントがそれぞれ別の画面を同時に作っていく過程が「脳をリワイヤリングする」経験だったと表現しました。
特に重要なのはPencilが「バイブ・デザイニング（vibe designing）」という新カテゴリーを作っている点です。CursorがバイブコーディングをOpenしたとすれば、Pencilはバイブデザインの扉を開けています。Tom自身もCursorを使いながらUIをテキストで説明するのがあまりにも辛くて、Pencilのプロトタイプを始めたと言っています。
MCP（Machine-Centered Protocol）はAIエージェントが外部ツールを直接操作できるようにするプロトコルです。PencilのMCPサーバーはAIがキャンバスにフレームを追加し、コンポーネントを挿入し、スタイルを適用し、レイアウトを整えることを直接できるようにしています。読み取りだけでなく書き込み権限まで完全に開放しているのがPencilの差別化ポイントです。
始め方のポイント
Pencilは現在無料です。始めるのに5分あれば十分です。
- Pencilデスクトップアプリをダウンロード
pencil.dev/downloadsからMac、Windows、Linux全て対応。インストール後すぐに無限キャンバスが開きます。 - AIエージェントを接続する
設定→Agents & MCPでClaude Code、Cursor、VSCodeの中から使いたいツールをトグルON。Macでは自動検出されます。Claude Codeなら端末で/mcpと入力して接続確認。 - SWARMモードで最初のデザインを生成する
AIモデルを追加（Claude推奨）→SWARMモードをON→「Design a travel app with booking flow」のようにプロンプトを入力。エージェントたちがリアルタイムで画面を埋めていくのを眺めましょう。 - デザインキットで品質を上げる
Shadcn UI、Lunaris、Haloなどの内蔵デザインシステムを活用すると、AIがそのコンポーネントでデザインします。「AI感」のないプロフェッショナルな結果が出ます。 - コードに変換する
デザインが気に入ったらclaude 'Generate HTML/CSS/React based on the design in app.pen'でそのままコード変換。.penファイルがJSONなのでAIが構造を完璧に理解します。
Pencilは2026年1月にリリースされた新しいツールです。Figmaと比べて手動編集機能が不足しており、デザイン修正後のコード自動同期（双方向シンク）はまだできません。LovableやV0のようにUI修正するとコードがすぐ変わるものではなく、修正後にAIに再度リクエストする必要があります。初期プロトタイピングとアイデア探索に強いツールとして接近するのがいいでしょう。
もっと深く掘り下げたいなら
6つのAIエージェントがリアルタイムで旅行アプリをデザインする過程を50分かけて深く見せてくれます。内部動作原理（.pen = JSON）からCursor統合、コード変換まで。
環境設定からダッシュボード生成、複数ページのウェブサイトデザイン、コード変換まで段階的に実施できるチュートリアル。
デザイナー視点でPencilのインターフェース、Prompt Block、UI Kit、限界点まで率直に扱った分析。
