概要
Pencil（pencil.dev）は、VS Code・CursorのIDEに組み込まれるAIネイティブなデザインツール。設計ファイルはJSON形式の.penファイルとしてGitリポジトリで管理できる。
主な特徴
- IDE統合: VS Code / Cursor 拡張機能またはデスクトップアプリとして動作
- Git対応:
.penファイルはJSON形式でバージョン管理可能 - Claude Code MCP: MCPサーバーが自動起動し、Claude CodeがキャンバスをネイティブAPIとして操作できる
- 内蔵UIキット: Shadcn UI、Lunaris、Halo、Nitroなど複数のデザインシステムを内蔵
- Figma互換: FigmaフレームをそのままPencilにペーストしてレイヤー構造を保持
利用可能なMCPツール
| ツール | 役割 |
|---|---|
batch_design |
要素の作成・更新・削除を一括実行 |
batch_get |
設計要素の取得 |
get_editor_state |
現在のキャンバス状態を取得 |
get_screenshot |
キャンバスのスクリーンショット |
get_variables / set_variables |
デザイントークン管理 |
価格
2026年4月時点、無料（Early Access）。Claude Codeとの組み合わせで追加コストなしで利用可能。
対応環境
| プラットフォーム | 対応 |
|---|---|
| VS Code / Cursor 拡張 | ✅ |
| macOS デスクトップアプリ | ✅ |
| Windows（拡張経由） | ✅ |
| Linux（X11推奨） | ✅（Wayland は一部不安定） |