AI時代のデザインツール「Pencil」徹底解説 - Cursor上でワイヤーフレームをAIに描かせる新常識

「Figmaを開いて、フレームを並べて、コンポーネントを作って...」

ワイヤーフレームを作るたびに、こうした地道な作業を繰り返してきました。AIに「ヒーローセクションを作って」と頼めたら、どれほど楽だろう。そう思っていた人にとって、Pencil はまさに待望のツールです。

Pencil は Cursor / VS Code の拡張、もしくは デスクトップアプリとして動く、AIネイティブなデザインツール。デザインファイル（.pen）はGitリポジトリで管理でき、MCP（Model Context Protocol）経由で AIエージェントがキャンバスを直接読み書きできる という、これまでにない設計思想を持っています。

この記事では、Pencil の特徴・基本的な使い方・MCP連携・Figma との違いを解説したうえで、実際に企業向けWordPressテンプレートのワイヤーフレームを3パターン構築した作業例を紹介します。

Pencil とは

Pencil は、2026年初頭に登場した AI時代のデザインツール です。位置づけとしては「Figmaの代替」ですが、設計思想がまったく異なります。

ひとことで言うと、「キャンバスはローカル、デザインはGitで版管理、編集はAIが直接行う」 ツールです。

キャッチコピー: Design on Canvas. Land in Code.

公式が掲げるキャッチコピーは「Design on Canvas. Land in Code.」。デザインからコードまでの双方向同期を、IDE上でシームレスに行うことを目指しています。

Pencil の特徴

1. IDEネイティブ - Cursor / VS Code 内で完結

Pencil の最大の特徴は、Cursor や VS Code の拡張として動く ことです。コードを書きながら、隣のタブでワイヤーフレームを描き、AIに「このボタンをこのコンポーネントから生成して」と依頼できます。

ブラウザを行き来する必要も、別アプリに切り替える必要もありません。

2. .pen ファイル - Git でバージョン管理

デザインファイルは .pen という独自形式ですが、ローカルファイルとして保存され、Git管理が可能です。

$ ls -la
-rw-r--r--  1 user  staff   45K  5 10 14:32 untitled.pen
-rw-r--r--  1 user  staff  120K  5 10 14:35 wireframes.pen

「誰がいつ、どのフレームを変更したか」が git log で確認できます。Pull Request 上でデザインのレビューもできるため、デザインのコードレビュー文化を作れます。

3. MCP サーバー内蔵 - AIに「読み書き」させる

Pencil は ローカルMCPサーバー を内蔵しています。Cursor や Claude Code から MCP 経由でデザインを操作できます。

batch_design は中でも強力で、JavaScript ライクな構文で複数の操作を一度に実行できます。

sidebar=I("d3902",{type:"frame",layout:"vertical",gap:16,padding:24})
heroTitle=I(sidebar,{type:"text",content:"AI時代のデザインツール"})
ctaButton=I(sidebar,{type:"frame",fill:"#3B82F6",cornerRadius:8,padding:16})
ctaLabel=I(ctaButton,{type:"text",content:"無料で始める",fill:"#FFFFFF"})

I = Insert、U = Update、R = Replace、M = Move、D = Delete、C = Copy、G = 画像生成 と、わずか1文字のコマンドで操作できる 超簡潔なDSLです。

4. 双方向の Design ↔ Code

デザインからコード（React / Next.js / Vue / Svelte / HTML+CSS）への変換だけでなく、既存のコードを取り込んでキャンバスに反映することも可能です。

「実装が先行してしまったけど、ワイヤーフレームを後から作りたい」というケースでも、コードから逆引きでデザインに戻せます。

5. デザイントークンが CSS 変数と同期

Pencil の Variables（変数）は CSS変数と相互変換できます。デザインとコードでカラー・スペーシングを一元管理できるので、プロダクション規模のデザインシステムを運用できます。

Figma との違い

「Figma で十分では？」という声も多いと思います。比較表を作りました。

要点: Figma は「デザイナーがデザインするためのツール」、Pencil は「開発者がAIと一緒にデザインするためのツール」。 用途が完全に分かれているため、両者は競合というより補完関係になっていく可能性が高いです。

セットアップ - 60秒で始める

1. インストール

Cursor や VS Code の拡張として導入するか、デスクトップアプリをダウンロードします。

# Extensions > "Pencil" で検索 > Install

2. 新規ファイル作成

ワークスペース内に .pen ファイルを作成すれば、Pencil エディタが自動で開きます。

$ touch wireframes.pen

3. AI に依頼

Cursor のチャットや Claude Code に依頼するだけ。

@wireframes.pen 中小企業向けコーポレートサイトのワイヤーフレームを作って。
HERO / ABOUT / SERVICES / CONTACT の4セクション、フレーム幅 1440px、
カラーは #1A2744 / #3B82F6 / #FFFFFF を使用。

これで、AIが自動的に Pencil の MCP（batch_design など）を呼び出してデザインを生成してくれます。

実践事例 - 企業向けWordPressテンプレートを3パターン構築

ここからは実際の作業例を紹介します。

案件概要

中小企業向け WordPress テンプレートのワイヤーフレーム を、業種別に3パターン作成する案件。.pen 1ファイルに3パターンを並べる構成です。

3パターンの設計

業種ごとに トーン&マナー を変えた3パターンを設計しました。

カラートークン

各パターンのカラートークンは以下の通り。Pencil の Variables 機能で管理しています。

Pattern A - Modern Minimal（IT）

Pattern B - Natural Warm（建築）

Pattern C - Solid Trust（製造業）

業種に合わせて、cornerRadius の丸みやアクセントカラーで「かっちり感 / やわらか感 / 信頼感」を表現しました。

セクション構成（10セクション）

3パターンとも、コーポレートサイトに必要な 10セクション を共通で組んでいます。

背景色は偶数 / 奇数で交互に切り替わるシマシマ構造です。

AI への指示の出し方（プロンプト例）

実際にAIに渡したプロンプトは、こういう形式でした。

@untitled.pen Pattern A（Modern Minimal、IT業種）の Hero セクションを作って。
- フレーム幅: 1440px / 高さ: 600px
- 背景: #FFFFFF
- 左側にキャッチコピー（48px、bold、#1A2744）+ サブコピー（18px、#666666）+ CTA ボタン（背景 #3B82F6、文字 #FFFFFF、cornerRadius 8px）
- 右側に画像プレースホルダー（500x400、グレー）
- 全要素を vertical layout、gap 24px、padding 80px

AI（Claude Code）は内部で batch_design を呼び出し、以下のような操作を一気に実行してくれます。

hero=I("document",{type:"frame",name:"Hero",width:1440,height:600,fill:"#FFFFFF",layout:"horizontal",gap:48,padding:80})
left=I(hero,{type:"frame",layout:"vertical",gap:24,width:"fill_container"})
title=I(left,{type:"text",content:"未来の事業を、私たちと共に。",fontSize:48,fontWeight:700,fill:"#1A2744"})
sub=I(left,{type:"text",content:"DX推進・AI導入のパートナー",fontSize:18,fill:"#666666"})
cta=I(left,{type:"frame",fill:"#3B82F6",cornerRadius:8,padding:16,width:200,height:56})
ctaLabel=I(cta,{type:"text",content:"お問い合わせ",fill:"#FFFFFF",fontSize:16,fontWeight:600})
right=I(hero,{type:"frame",fill:"#E5E7EB",width:500,height:400,cornerRadius:8})
G(right,"stock","modern office workspace")

ポイントは2つ。

1. I の戻り値（バインディング）を次の操作の親として使う ことで、ネスト構造を組み立てられる。
2. G(nodeId, "stock", "...") で Unsplash から画像を自動取得して fill に設定できる。"ai" を指定すれば AI 画像生成も可能。

主要セクションの設計

各セクションのレイアウトを、AIに指示する際のテンプレートとしてまとめておくと便利です。

About（私たちについて）

• レイアウト: 横2カラム（画像 + テキスト）
• 左カラム: 画像（480 x 320px）
• 右カラム: タイトル、説明文

Strength（私たちの強み）

• レイアウト: カード縦積み x 3件
• 各カード構成:
  • 左カラム: 画像（幅 380px、セクション幅の約 1/3）
  • 右カラム: タイトル、サブキャッチ（英語）、説明文

Services / Members / Blog（3カラム カード）

• レイアウト: 3カラム カード
• 各カード構成: 画像 + タイトル + 説明文（または日付）

Case Study（事例）

• レイアウト: 4カラム、最大4件表示

News（ニュース）

• レイアウト: リスト形式、最大6件表示
• 各行構成: 日付、カテゴリラベル、タイトル

Company（会社情報）

• レイアウト: テーブル形式（2カラム: 項目名 + 値）
• 項目: 会社名 / 設立 / 代表取締役 / 所在地 / 事業内容

Contact（お問い合わせフォーム）

• 背景: ダークカラー（各パターンのプライマリ色）
• フォームフィールド: 法人名 / 法人名（カナ）/ 部署名 / ご担当者名 / ご担当者名（カナ）/ メール / 電話 / お問い合わせ内容

ノードIDのリファレンス管理

Pencil でAIに作業させる際、ノードID（フレームIDやコンポーネントID）の管理は地味に重要です。後から「Pattern A の About を更新して」と頼むときに、ID が手元にあるとAIが迷わず作業できます。

このIDリストを docs/<案件名>/README.md に記録しておくと、長期運用で迷子になりません。

実際にかかった時間

3パターン × 10セクション = 30セクションの構築時間は、およそ半日。 従来の手動Figmaなら、テンプレートがあっても1日〜2日かかる規模感です。

特に効果が大きかったのは、「Pattern A をベースに B / C を派生させる」 フェーズ。replace_all_matching_properties でカラートークンを一括置換するだけで、業種別バリエーションが量産できました。

ハマりポイントと注意事項

1. テキストカラーは fill で指定する

.pen ファイルのテキストカラーは fill プロパティで指定します。CSS 風に color を指定しても無視されるので注意。

text=I(parent,{type:"text",content:"Hello",fill:"#1A2744"})

text=I(parent,{type:"text",content:"Hello",color:"#1A2744"})

2. batch_design は 1回あたり最大 25 操作

batch_design で一度に流せるのは 最大25操作。それ以上は分割が必要です。

公式ドキュメントでも「論理的なまとまりごとに分割せよ」と推奨されています。 例: 「画面構造 → サイドバー → メインコンテンツ」のようにブロック単位で。

3. プロパティの互換性に厳しい

ノードタイプごとに使えるプロパティが厳密に決まっています。例えば:

• children は frame / group のみ
• cornerRadius は frame / rectangle / polygon のみ（ellipse / text には不可）
• テキストプロパティ（content, fontSize など）は text のみ
• アイコンの色は fill（stroke ではない）

不適合があると バッチ全体がロールバックされるので、AIが提案してきた操作をレビューする際は要注意。

4. デザイン変更はAIに明示的に依頼する必要がある

Lovable や V0 と違い、Pencil は 手動でデザインを変更しても、自動でコードに反映されない仕様です。

「デザインを変更したのでコードを更新して」と、明示的にAIエージェントに依頼する必要があります。

逆に言えば、意図しない変更がコードに混入しない安全装置でもあります。

5. .pen ファイルを Read / Grep で開かない

.pen ファイルは暗号化されているため、通常のRead / Grepツールで中身を直接読めません。 必ず Pencil 拡張のMCPツール（open_document / batch_get など）を介してアクセスします。

こんな案件・チームに向いている

まとめ

Pencil は、これまで「デザイナーの領域」とされてきたUI設計を、AIと開発者がIDE内で完結できる新しいツールです。

• .pen ファイル を Git管理できる
• MCP経由でAIが読み書きできる（Figmaは読み取りのみ）
• batch_design のシンプルなDSLで、AIが構造的にデザインを生成
• CSS変数とのトークン同期で、本番デザインシステムにも対応
• 早期アクセス中は 無料（Claude Code等のサブスクは別途）

実案件としても、企業向けWordPressテンプレートのワイヤーフレームを 3パターン × 10セクション = 30セクション を半日で構築できました。 従来の手動 Figma ワークフローに対して、明確に 5〜10倍の生産性を実感しています。

「デザイナーがいないけれど、ちゃんとしたワイヤーフレームを爆速で組みたい」開発者にとって、いま最も期待できるツールのひとつです。

参考リンク

• Pencil 公式サイト
• Pencil ドキュメント - Pencil Interface
• Pencil ドキュメント - Design ↔ Code
• Pencil 料金ページ
• 当ブログ: Figma MCP × Cursor でデザインからHTMLを自動生成
• 当ブログ: Cursor 3 リリース解説