Pencilとは何ですか？
Pencilは、ClaudeやChatGPTなどのAIエージェントと連携してデザインを作成できるエージェンティック・キャンバスツールです。Webブラウザ版で無料で試せるほか、デスクトップアプリのダウンロードも可能です。既存のWebサイトやアプリを編集可能なレイヤーとしてインポートし、AIによる生成と手動での微調整を組み合わせて作業を進められます。
Pencilの特徴は何ですか？
- AIエージェントとの協働Claude、ChatGPT、Geminiなどのモデルをキャンバス上で直接利用し、デザインを生成または修正できます。MCP、WebMCP、CLI経由での接続もサポートされています。
- 既存資産のインポート任意のWebページやFigmaファイル（.fig）を編集可能なレイヤーとして取り込めます。Chrome拡張機能や内蔵ブラウザを通じてコピー＆ペーストが可能です。
- コードへの書き出しフレームを1クリックでHTMLおよびCSS/Tailwind形式にエクスポートできます。また、PDF、PNG、JPEG、WEBP形式での画像出力にも対応しています。
- オープンな設計フォーマットデザインデータはJSONベースの.pen形式で保存され、スキーマが公開されているため、AIエージェントがネイティブに処理できます。
- 高度な視覚効果作成リアルタイムシェーダーを用いたグラデーションやテクスチャの効果（Vibe Shaders）を作成・適用できます。
- 直感的な操作環境FigmaやSketchと同様のショートキーを採用しており、パス描画、ベクター化、背景除去、マスク処理などの標準的なデザイン機能を備えています。
Pencilの使用例は何ですか？
- プロトタイピングの高速化AIエージェントに指示を出してカフェサイトのデザイン案を生成し、その後に手動で詳細を調整するワークフローに適しています。
- 既存デザインの再構築Chromeブラウザから任意のWebページをキャンバスへ貼り付け、レイヤー構造のまま編集やリブランドを行う際に有用です。
- 開発者との連携.pen形式のファイルを共有したり、HTML/CSSへの変換結果を開発チームに渡すことで、デザインから実装への橋渡し役を果たします。
Pencilの使い方は？
- キャンバスの起動Webバージョンで無料試用するか、デスクトップアプリをダウンロードしてサインインします。
- 素材のインポート内蔵ブラウザやChrome拡張機能を使って既存のWebページをキャンバス上に読み込みます。
- AIエージェントの活用ClaudeやChatGPTなどのサブスクリプションやAPIキーを接続し、キャンバス上でデザイン生成や修正を依頼します。
- 手動での微調整ペンツールや変数、コンポーネント機能などを用いて、AIが生成した要素の詳細を調整します。
- 成果物の出力完成したフレームをHTML/CSSや画像形式（PNG, JPEG等）へエクスポートします。
Pencilの価格情報：
- Webバージョン無料で利用開始できます。
- 有料プランソース内に具体的な価格やプラン名は記載されていません。
