概要
Pencilは、デザインデータをGit管理可能なJSON形式で保持し、MCPを通じてIDEやAIエージェントとコードを双方向同期させるエンジニア向けのAIネイティブ・デザインツールです。
詳細内容
Pencilは「Design on canvas. Land in code.」を掲げる新しいデザインツールで、特にエンジニアのワークフローへの統合に最適化されています。最大の特徴は、デザインデータがテキストベースの.penファイル（JSON）として保存されるため、ソースコードと同様にGitでバージョン管理やプルリクエストによるレビューが可能な点です。また、MCP（Model Context Protocol）を活用することで、VS CodeやCursor、Claude Codeといったツールと双方向に連携します。キャンバス上での視覚的な変更が即座にTailwind CSS等のコードに反映され、逆にコードの編集もデザインに即時反映されるAST変換とHMR（Hot Module Replacement）の仕組みを備えています。Figmaがデザイナーの共同編集に特化しているのに対し、PencilはAIエージェントが直接デザインを操作することを前提に設計されており、エンジニアがVibe Codingの感覚でUI構築を行える環境を提供します。