Pencil.devは、IDE内で動作するAgent駆動のデザインツール「Pencil」を公開。 「Design on canvas. Land in code.」を掲げ、VS CodeやCursor、Claude Codeなどのエディタ内で直接デザインを行い、そこからAI Agentがプロダクションコード(React/HTML/CSS)を生成する。
主な特徴:
- MCP Canvas: MCP (Model Context Protocol) を活用し、複数のAI Agentが並列で画面やフローを生成する「AI Multiplayer」を実現
- IDE 統合: エディタのタブとして動き、コードとデザインを同じ環境で扱える
- Code as Design: デザインファイルは
.pen形式としてリポジトリ内で管理され、Gitでのバージョン管理が可能 - Figma連携: Figmaからのコピー&ペーストに対応