Pencil は AI ファーストのフロントエンドデザインツールで、VS Code や Cursor の中で直接動きます。デザインはリポジトリの /design フォルダ配下に JSON 形式の .pen ファイルとして保存されるため、コードと同じように Git で管理でき、Model Context Protocol（MCP）を通して AI エージェントから直接読み取れます。Claude Code を含む MCP 対応のエージェントは、ビジュアルレイアウトをそのまま理解して、Figma フレームと別管理のコードベースを橋渡しすることなく、ピクセル単位で精密な React・HTML・CSS を生成できます。

中心にあるのは双方向のループです。無限キャンバスでビジュアルにデザインし、コードに書き出し、既存コンポーネントをキャンバス側に戻し、デザイントークンを Pencil とコードベースの間で同期し続ける。ターゲットは「Figma → ハンドオフ → 再実装」のサイクルを飛ばしたいフロントエンドエンジニアやデザインエンジニア、そして AI エージェントで一気にプロダクトを出すタイプの PM-builder です。

Pencil は現在アーリーアクセス中で、ツール自体は無料で利用できます。ただし AI 部分を動かすには Claude Code のサブスクリプション（月額 20 ドル〜）が必要です。Medium や CTOL Digital Solutions など 2026 年のレビュー記事では、IDE ネイティブなデザインの取り組みとして注目されています。