Pencilとは
一言でいうと、VSCodeのエディタ内に"キャンバス"を持ち込んだツール。
.pen という独自ファイルを開くとキャンバスが起動し、Claude Codeがそのキャンバスを直接操作できる。MCPサーバーが自動で立ち上がり、AIがデザインの挿入・更新・削除を行う仕組み。
| 項目 | 内容 |
|---|---|
| 動作環境 | VSCode / Cursor / Windsurf など |
| AI連携 | Claude Code（MCP経由） |
| 価格 | 現在無料・商用利用可 ※将来有料化あり |
セットアップ
実質VScode拡張機能をインストールするだけで完了。
手順1. VSCode拡張をインストール
手順2. Claude Code CLIを用意
npm install -g @anthropic-ai/claude-code-cli
手順3. pencil.devでアカウント作成 → メール認証 → .penファイル を作成
VSCodeでファイルを開くとキャンバスが表示される。
MCPサーバーは自動起動なので追加設定不要。所要時間は約5分だった。
色々検証してみる
検証１：「Qiitaのトップページを作って」
プロンプト
Qiitaのトップページを、Qiita-toppage.penで作成して
できたもの
実際の画面より、少し情報量が少ないように思いますが、イイ感じにできましたね。
Pencilの面白い（強いポイント）のが、中のコンテンツを自由にいじれることですね。
検証２：「（スクリーンショットを添付して、）この画像を参考に、Qiitaのトップページを作って」
プロンプト
この画像を参考にQiitaのトップ画面を、Qiita-toppage-from-image.penに作成してください。
添付画像
できたもの
私のシステム設定が、ダークモードなので黒くなっちゃいましたね（笑）
中身はとてもいい感じになりました。ただ、検索バーやヘッダーなどの情報量が減らされており、忠実に再現しているとは言えませんね。
ちなみに右側の桜の画像どこから取ってきたのかというと・・・？！
unplashから取得してきていることが分かりました。
おそらく、AIが画像を判断して、類似画像を取得してきていますね。
検証３：できたものをコードにする。
噂によると、Pencil to Codeができるらしい！やってみた。
AIエージェントに、ファイルをコードにする手段を教えてもらった。
フレームワーク
- React / Next.js（TypeScript対応）
- Vue.js
- Angular
- Svelte
- その他のフロントエンドフレームワーク
スタイリング
- Tailwind CSS（最も詳細なガイドラインあり）
- CSS Modules
- styled-components
- 通常の CSS / SCSS
生成の仕組み
- .penファイルのノードツリーを読み取り
- Reusableコンポーネント（ref）をコンポーネントとして変換
- レイアウト（flex）・サイズ・カラー・タイポグラフィをそのままコードに反映
- 既存のコードベースがあれば、それに合わせて生成
あと、喋りたいこと
Pencilファイルはどんな構成要素なのか？
Pencilのファイル構造は、コンポーネントシステムによって構成されている。
例えば、この記事カードの場合
{
"type": "frame",
"id": "YVRFS",
"name": "記事カード",
"reusable": true, // ← これでコンポーネントとして登録
"x": 1500, // キャンバス外に配置するのが慣習
"y": 0,
"children": [
{ "id": "H2Vjl", "name": "title", "content": "記事タイトルが表示されます" },
{ "id": "MAbx6", "name": "author", "content": "author_name" },
{ "id": "JHCpC", "name": "likes", "content": "0" }
]
}
みたいになっている。これをそれぞれ配置していってる感じでした。
Pencil to Figma出来ないのか？
結論、「できない」
フォーマットが独自仕様同士
.pen も Figma の .fig も非公開の独自フォーマットです。.pen → .fig への変換仕様は存在しません。
データモデルも一致しないです。
| 概念 | .pen | Figma |
|---|---|---|
| コンポーネント参照 | ref + descendants | Component + Variant |
| サイズ指定 | fill_container | Fill / Hug |
| アイコン | icon_font (Lucide) | 独自のベクターノード |
あとは、デザイン→コード一貫ワークフロー がPencilの価値です。
Figmaへのエクスポートをサポートすると「Pencilで作ってFigmaで管理」というワークフローが生まれ、自社ツールの優位性が薄れるので、さすがにやりませんよね笑。
まとめ
Pencilは「Figmaの代替」ではなく、「デザイン工程をAIとのチャットで完結させて、直接コードに落とすツール」 として捉えるのが正確だと思う。
Figma to Codeについては、こちらの記事を読んでください
デザイナー不在のチームや、AIファーストで開発を進めたいエンジニアには特にハマるツールだと感じた。
PoCとかモックアップには、ちょうどよさそうですね。
現在無料なので、今すぐ試せます。