Pencil
公式収録CursorやVSCode、Claude Codeの中で動くエージェント駆動デザインキャンバスで、ベクターデザインを本番用のHTML・CSS・Reactコードに変換します。
Pencil
Pencilは、Cursor、VSCode、Claude Codeといった主流IDEに直接統合されたエージェント駆動のMCPデザインキャンバスです。開発者はコードエディターを離れずにデザインでき、デザインファイルはコードリポジトリに保存されgitでバージョン管理されます。
主な機能
- 無限キャンバス: IDE内でピクセル精度のデザインができ、ワンクリックでデザインとコードを切り替えられます
- AIマルチエージェント協業: AIが複数の画面とフローを並行生成し、デザインの探索を加速します
- ベクターからコードへ: デザインを本番グレードのHTML、CSS、Reactコードに自動変換します
- デザインキット: キュレーション済みのコンポーネントライブラリを内蔵し、自社のデザインシステムも取り込めます
- オープンフォーマット: デザインファイルは読み取り・拡張可能で、ブラックボックス的なロックインはありません
活用シーン ラピッドプロトタイピング、プロダクトデザイン、フロントエンド開発に向きます。フルスタック開発者、個人開発者、AIコーディングツールを使うチームに特に適しています。
独自の強み 双方向のMCP対応が中核の見どころです。AIエージェントはデザインを読むだけでなく、キャンバスを完全に制御できます。データベース、API、Playwrightなどの外部ツールを接続し、真のdesign-as-codeを実現します。
編集部のおすすめ デザインの引き渡しプロセスにうんざりした開発者に、Pencilは革命的なソリューションを提供します。デザインファイルとコードがgitリポジトリに共に存在する姿は、AI時代のデザインワークフローの未来です。
料金
### 定价模式：早期访问 **起步价**：免费下载 目前处于早期访问阶段，可免费使用。
よくある質問
Pencilは無料ですか？
現在はアーリーアクセス中で、ダウンロードと利用は無料です。将来的に有料機能が導入される可能性があります。
Pencilの主な機能は何ですか？
中核機能は、無限のデザインキャンバス、AIマルチエージェント協業、ベクターからコードへの変換(HTML/CSS/React)、デザインキット、Figmaインポート、gitバージョン管理です。
PencilはどのIDEに対応していますか？
Cursor、VSCode、Claude Code、OpenAI Codexといった主流のAIコーディングIDEに対応しています。
PencilとFigmaの違いは何ですか？
PencilはIDEと深く統合され、デザインファイルをコードリポジトリにgitで管理して保存します。双方向のMCP対応により、AIエージェントはデザインを読むだけでなくキャンバスを完全に制御できます。
Pencilは開発者に向いていますか？
開発者のために作られています。IDEを離れずにデザインでき、デザインは本番グレードのコードへ自動変換され、デザインの引き渡しプロセスが不要になります。
PencilのMCP対応の特長は何ですか？
双方向のMCP読み書きを提供し、AIエージェントがキャンバスを完全に制御できます。データベース、API、Playwrightなどの外部ツールとの接続にも対応し、高度な自動化を可能にします。