Pencil.dev 調査レポート¶

📁 docs/dev-environment/artifact/ai-tools/pencil-dev.md

調査日: 2026-03-11 関連Issue: #154

概要¶

Pencil.devは「Design on canvas. Land in code.」をキャッチコピーとするAIネイティブのベクターデザインツール。Figmaのような独立したデザインアプリとは異なり、IDE（VS Code / Cursor）に直接統合される点が最大の特徴。デザインファイル（.pen）をコードと同じリポジトリで管理し、AIアシスタント（Claude Code）がMCP経由でデザインを直接操作できる。

現在は早期アクセス（ウェイトリスト制）で提供中。

基本機能¶

ベクターキャンバス¶

フレーム、シェイプ、テキストなどの標準ベクター要素を操作可能
コンポーネントシステムを持ち、再利用可能なコンポーネント（紫のバウンディングボックス）と通常要素（青）を区別
メインコンポーネントを変更すると全インスタンスに自動反映（FigmaのComponentに相当）
コンポーネント作成ショートカット: Cmd/Ctrl + Option/Alt + K

.penファイル形式¶

JSONベースの構造化データ形式（人間が読みやすいテキスト形式）
Gitなどのバージョン管理ツールと完全互換
git diffでデザインの差分が確認可能
ブランチ・マージがコードと同様のワークフローで可能
チームやプラットフォーム間でのポータビリティを重視した設計

Git管理との統合¶

.penファイルをコードファイルと同じリポジトリに配置
dashboard.pen、components.penのように説明的なファイル名を推奨
頻繁なコミットによるバージョン管理が推奨（自動保存は未実装）
ブランチ・マージを通じたチームコラボレーション（リアルタイム共同編集は未対応）

デザイントークン・変数管理¶

CSS カスタムプロパティ相当の変数システムを内蔵
色・スペーシング・タイポグラフィを一度定義して全体で再利用
ライト/ダークモードなどのテーマ切り替えに対応
AIエージェントに globals.css から変数を自動抽出させることが可能
Figmaのトークンをコピー&ペーストまたはスクリーンショットから変数化可能

Claude Code / MCP 連携¶

MCPの仕組み¶

Pencil MCPサーバーがローカルマシン上で動作し、Claude CodeがMCP経由でデザインファイルを読み書きする。

ローカル完結: デザインデータはAI機能を明示的に使用した場合のみClaudeに送信
リアルタイム反映: AIが.penファイルを修正すると、キャンバスにリアルタイムで反映
ユーザー管理: 最終承認権はユーザーが保持
MCPリポジトリは現在非公開（ソースコード未公開）

利用可能なMCPツール¶

ツール名	機能
`batch_design`	要素の作成・修正・操作、画像配置
`batch_get`	コンポーネント階層の読み取り、パターン検索
`get_screenshot`	デザインのスクリーンショット取得・プレビュー
`snapshot_layout`	レイアウト構造分析、位置問題の検出
`get_editor_state`	エディター状態の確認
`get_variables` / `set_variables`	デザイントークンの読み書き・同期

Claude Code設定手順¶

前提条件 1. VS Code拡張またはデスクトップアプリでPencilをインストール 2. Claude Code CLIをインストール: npm install -g @anthropic-ai/claude-code-cli 3. claude コマンドでブラウザ認証を完了 4. Pencilを起動し .pen ファイルを開く

基本ワークフロー - Cmd/Ctrl + K でプロンプトパネルを開き、自然言語でデザイン指示 - MCPツールが自動的に.penファイルを修正し、キャンバスに即時反映

効果的なプロンプト例

# デザイン生成
「左サイドバー付きのダッシュボードを設計して」

# 一括修正
「全ボタンの色を青（#3B82F6）に統一して」

# コンポーネント化
「ボタンコンポーネントの全バリアント（Primary/Secondary/Disabled）を作成して」

# コード生成
「このコンポーネント用のReactコードを生成して」

ベストプラクティス - 曖昧な指示より具体的な値を指定（「改善」→「パディング16px・背景色#EEEEEEに変更」） - 広範な構造 → 詳細スタイル → 洗練の順で段階的に進める - 既存のデザインシステムやコンポーネントを参照として渡す

Figma等との比較¶

項目	Pencil.dev	Figma
動作環境	IDE組み込み（VS Code/Cursor）	ブラウザ・デスクトップアプリ
ファイル形式	`.pen`（JSONテキスト形式）	バイナリ・クラウド管理
バージョン管理	Git（diff・ブランチ・マージ対応）	Figmaのバージョン履歴のみ
リアルタイム共同編集	未対応（Gitブランチで協業）	対応
AI統合	ネイティブMCP対応（Claude Code直接操作）	プラグインベース
デザイントークン同期	コードとの双方向同期	Variables機能（コード同期は限定的）
コード生成	AIが直接生成・同期	Dev Mode（有料）
価格	早期アクセス中（詳細未公開）	Free〜$75/月（Org）
対象ユーザー	デベロッパー寄りの設計者	デザイナー・開発者両対応

Pencil.devが優れる点 - デザインファイルをGitでコードと一元管理できる - AIがデザインを直接操作できるMCPネイティブ設計 - テキストベース形式によるdiff可視化・マージ解決が可能

Figmaが優れる点 - 成熟したUIとリアルタイム共同編集 - 豊富なプラグインエコシステム - 非エンジニアのデザイナーが使いやすい

制約・制限事項¶

現時点での機能制限（早期アクセス中）¶

自動保存未対応: 手動保存（Cmd/Ctrl + S）が必須、Git頻繁コミット推奨
アンドゥ/リドゥが制限的: 標準的なデザインエディタより機能が弱い
リアルタイム共同編集なし: チーム作業はGitブランチ経由
Windowsデスクトップアプリなし: Windows環境ではVS Code/Cursor拡張のみ
Figmaからの画像コピペ不可: ドラッグ&ドロップでのインポートが必要（macOS）
MCPリポジトリ非公開: ソースコードは非公開、カスタマイズ不可
キャンバスとエクスポートの視覚的不一致: 発生する場合がある

アクセス制限¶

ウェイトリスト制: メール登録 → アクティベーションコード受け取りが必要
「Invite for your email address was not found」エラーが発生するケースあり
ウェイトリスト登録から利用開始まで待機期間が存在

認証上の注意¶

Claude Code CLIでの認証を推奨（ANTHROPIC_API_KEY環境変数との併用は非推奨）
複数の認証方法が競合する場合は環境変数を削除する
初回起動時にconfig.tomlを変更する可能性があるため、バックアップ推奨

プラットフォーム別の注意¶

Linux: Wayland/Hyprland環境でUIの不具合。X11環境での利用を推奨
macOS: 初回起動時のセキュリティ警告 → 右クリック → Openで回避

インストール方法¶

方法1: VS Code拡張（推奨）¶

1. VS Code を起動
2. Extensions（Cmd/Ctrl + Shift + X）を開く
3. 「Pencil」を検索してインストール
4. .pen ファイルを作成し、右上にPencilアイコンが表示されることを確認

方法2: デスクトップアプリ¶

macOS

# 公式サイトから .dmg をダウンロード
# Applications フォルダにドラッグ
# 初回起動時: 右クリック → Open（セキュリティ警告回避）

Linux

# .deb パッケージの場合
sudo dpkg -i pencil-*.deb

# AppImage の場合
chmod +x pencil-*.AppImage
./pencil-*.AppImage

# 注意: Wayland環境は不安定。DISPLAY環境変数でX11を指定推奨

Windows - VS Code / Cursor 拡張のみ対応（デスクトップアプリなし）

Claude Code CLI セットアップ¶

# Claude Code CLIインストール
npm install -g @anthropic-ai/claude-code-cli

# ブラウザ認証
claude

# 認証後、Pencilを起動して .pen ファイルを開くとMCP連携が有効になる

MyLabでの活用可能性¶

適合するユースケース¶

AIエージェント連携UIプロトタイピング Claude Codeで自動化スクリプトのUIモック（ダッシュボード、管理画面）を生成。コードと同一リポジトリで管理できる。
ドキュメントの図解・フロー図作成 docs/配下のMarkdownに添付するアーキテクチャ図やフロー図を.penファイルで作成し、Gitで版管理。
Discord Bot / Bot管理画面のデザイン issue #92（Discord Bot統合）のUI設計をAI対話で進めるワークフロー。
デザイントークン管理 既存のglobals.cssからAIが自動でデザイントークンを抽出・変数化。

導入の判断ポイント¶

ウェイトリスト解消後に試用を開始（現時点では招待待ち）
VS Code環境ですでに開発しているため、拡張追加のみで導入可能
自動保存未対応など早期アクセスの制約を許容できるかがポイント
Figmaの代替ではなく「コードと並走するデザインノート」として活用するのが現実的