お疲れさまです！
いつも日刊IETFを書き続けているGMOコネクトの名もなきエンジニアです。
生成AI使ってWebサイトのデザインできるかやっておいてって雑に依頼されたので調査しました。
はじめに
Figma でデザインを作って、それをエンジニアがコードに起こす。この受け渡しの工程で「ここ、Figma と微妙に違うんだけど」「あ、デザイン更新されてた？」みたいなやり取り、心当たりありませんか。
Pencil は、AI ネイティブな UI デザインツールです。ネイティブのデスクトップアプリとして単体で動くほか、VS Code や Cursor の拡張機能としても使えます。Figma に似た無限キャンバス上で、Claude Code と MCP で連携し、自然言語のプロンプトからデザインを生成してそのままコードに落とし込めます。
この記事では、環境構築からプロンプトによるデザイン生成、コード出力までの一連の流れを実際に試した結果をもとに紹介します。
この記事でわかること
- Pencil + Claude Code の環境構築手順
- プロンプトだけでデザインを生成する方法
- デザインとコードの双方向同期の仕組み
- セットアップ時のよくあるトラブルと対処法
Pencil は何ができるのか
ひと言で言うと、「デザインファイルをコードと同じリポジトリで扱える」ツールです。もう少し具体的に書くと、こんな特徴があります。
ネイティブアプリ & IDE 拡張の両対応 — デスクトップアプリとして単体で使うこともできるし、VS Code / Cursor の拡張機能としてエディタ内に組み込むこともできる。今回は主にネイティブアプリで試した。
.pen ファイルは JSON ベース — テキストファイルなので Git で差分管理できる。デザインの変更を PR 上でレビューするなんてことも可能。
双方向同期 — Pencil のデザイン変数と CSS カスタムプロパティ（--color-primary など）が双方向で同期される。キャンバスで変数の値を変えればコード側の CSS 変数も更新され、逆も然り。
Figma インポート対応 — 既存の Figma 資産を持ち込める。フレーム、ベクター、テキスト、スタイルはコピー＆ペーストで転送できる。ただし画像はそのまま転送されないので、SVG に変換するか再インポートが必要。
現在アーリーアクセス中で無料 — 将来は有料化予定とのこと。試すなら今。
デスクトップアプリは macOS / Linux 向けに提供されています。Windows ネイティブアプリは 2026 年 2 月現在、未提供ですが、VS Code / Cursor の拡張機能経由であれば Windows でも利用できます。
見た目は、こんな感じです✨
1. インストール
前提条件
| 必要なもの | 説明 |
|---|---|
| Pencil デスクトップアプリ、または VS Code / Cursor | ネイティブアプリ単体でも、IDE 拡張としても利用可能 |
| Claude Code | Pencil の AI エンジン。Anthropic のサブスクリプション（月額 $20〜）または API キーが必要 |
| Node.js | Claude Code のインストールに使用 |
Step 1：Claude Code をインストール
まだ導入していなければ、npm でインストールします。
npm install -g @anthropic-ai/claude-code
インストールしたらターミナルで claude と打って起動します。ブラウザが開くのでログインして認証を完了させてください。
claude
# ブラウザが開くのでログインして認証を完了させる
Step 2：Pencil をインストール
2 つの方法があります。今回はネイティブアプリで進めました。
方法 A：デスクトップアプリ（今回はこちら）
- pencil.dev にアクセスしてアプリをダウンロード
- アプリを起動してメールアドレスを入力
- メールに届く確認コードでアクティベート
IDE を使わずにデザインだけ試したい場合や、普段 VS Code / Cursor を使っていない場合はこちらが手軽です。
方法 B：VS Code / Cursor 拡張機能
- VS Code のサイドバーから拡張機能（Extensions）を開く
- 検索欄に「Pencil」と入力
- Install をクリック
Cursor でも同じ手順でインストールできます。コーディングとデザインを同じウィンドウ内で行き来したい場合はこちらが便利です。
Step 3：動作確認
プロジェクトディレクトリで .pen ファイルを作成して開いてみましょう。
cd your-project
touch my-design.pen
VS Code で my-design.pen を開くと、Pencil のキャンバスエディタが自動で起動します。ここまで来ればインストールは完了です。
2. 設定
MCP サーバー（自動設定）
Pencil の MCP サーバーは起動時に自動で立ち上がるので、手動設定は基本的に不要です。MCP サーバーはローカルで動作し、デザインデータがリモートサーバーに送られることもありません。AI を利用する際のプロンプトだけが Claude に送信されます。
キャンバスの基本構成
Pencil のキャンバスは Figma 経験者ならすぐ馴染める構成です。
| エリア | 説明 |
|---|---|
| 左パネル | レイヤー一覧、アセットブラウザ |
| 中央 | 無限キャンバス（ドラッグ＆ズームで操作） |
| 右パネル | 選択したオブジェクトのプロパティ設定 |
| 左下 | 「Design with Claude Code」チャット欄 |
コンポーネント、デザイン変数、Flex Layout といった基本機能もひと通り揃っています。
Figma からのインポート
既存の Figma プロジェクトがあれば、フレーム、ベクター、テキスト、スタイルをコピー＆ペーストで直接インポートできます。ベクターやスタイルはそのまま持ち込めますが、画像（ビットマップ）は転送されないため、SVG に変換するか Pencil 側で再インポートする必要があります。
3. プロンプトでデザインする
ここからが本題。キャンバス左下のチャット欄に自然言語でプロンプトを入力すると、AI がデザインを生成してくれます。
今回は、私の写真を使って素敵なデザインの中に登場させてみようとしています！
なぜ、Mika になったのだろうか...。 Mikaっぽい顔なのかもしれない？笑
実際にどの程度のものが出てくるのか、3 つのまったく異なるテイストのサイトを生成してみました。
実例：プロンプト 1 本でここまで出る
カフェのサイト — 温かみのあるナチュラル系
Design a landing page for a cozy cafe called "Haight Grounds" in San Francisco's Haight-Ashbury neighborhood. Use warm earth tones (dark brown, cream, terracotta). Include sections for hero, our story, signature drinks (3 cards), barista team, shop cat, location info, and footer. Use the attached photos as baristas and staff members.
クリーム色とブラウンを基調にした温かみのある配色、メニューカードやスタッフ紹介セクション、店舗の猫の紹介まで含んだフルページのデザインが生成されました。ヒーローセクション、メニュー、チーム紹介、アクセス情報、フッターまで一式揃っています。
AI コンサルティング企業のサイト — クリーンなコーポレート系
Design a landing page for an AI consulting company called "Nexus AI". Clean, professional design with purple as the accent color. Include sections for hero, services (3 cards), founder story, stats/results, CTA, and footer. Use the attached photos as the founder and team members.
パープルをアクセントにした洗練されたデザインで、サービス紹介のカード UI、導入実績の数値セクション、CTAボタンまで、コーポレートサイトに必要な要素がきちんと配置されています。オフィスの猫の紹介セクションがあるのは愛嬌ですが、ここはプロンプトで調整できます。
暗号技術クラブのサイト — ダークモードでハッカー風
Design a landing page for a university cryptography club called "WIT Cryptography Club". Dark mode with black base and red accents, hacker/cybersecurity aesthetic. Include numbered section navigation, hero, activities overview, team profiles, upcoming events, CTA, and footer. Use the attached photos as club members.
黒背景に赤いアクセント、マトリックス風のヒーロー画像、CTF大会やワークショップのイベントカレンダーまで含んだダークテーマのサイトが生成されました。ナンバリングされたセクション構成も含め、テクニカルな雰囲気が出ています。
3 つのデザインに共通して言えるのは、プロンプトで「スタイルの方向性」と「何のサイトか」を伝えるだけで、セクション構成やカラーパレット、タイポグラフィまで AI が判断してくれることです。もちろん細部の調整は必要ですが、叩き台としての完成度はかなり高い。
デザイン生成プロンプトの例
上の実例以外にも、こんなプロンプトが使えます。
スタイルを変更する
Change this to a simpler and cleaner design direction.
Let's go more bold and rock'n'roll, make the headline much larger,
drop boxes around prompts and just focus on typography,
one column layout, most emphasis on prompts, everything else secondary,
Swiss layout.
個別コンポーネントを作る
Create a blue gradient button with white text that says Get Started.
Create a login form with email and password fields.
Add a navigation bar to this page.
コード生成プロンプトの例
デザインができたら、Claude Code にコード生成を指示します。
Generate React code for this design.
Create a TypeScript component from this frame.
Export this as a Next.js page component.
使う技術スタックや対象ファイルを具体的に書くと、より意図に近い出力が得られます。
Look at the dashboard.pen file and generate a React component
for the Sign Up card using Tailwind CSS.
プロンプトのコツ
| コツ | 具体例 |
|---|---|
| スタイルを明示する |
"technical style", "minimalist", "bold", "Swiss layout"
|
| 段階的に指示する | まずレイアウト → 次に色・タイポグラフィ → 最後に細部調整 |
| 使用技術を明示する |
"using Tailwind CSS", "React component", "Next.js page"
|
| 既存要素を参照する | "Look at the dashboard.pen file and..." |
一度に全部盛りのプロンプトを書くよりも、ステップを分けて指示したほうが安定した結果が出やすい印象です。
公式の Prompt Gallery にはさらに多くのプロンプト例が掲載されています。
4. デザインからコードへ
典型的なワークフロー
.pen ファイルを作成
↓
キャンバスでラフにデザイン or プロンプトでデザイン生成
↓
キャンバス上で手動調整（色・レイアウト・テキスト）
↓
Claude Code でコード生成（React / HTML / CSS）
↓
コードをプロジェクトにコミット
↓
コードを修正 → キャンバスにも反映（双方向同期）
Design → Code
-
.penファイルでデザインを作成 - Claude Code のターミナルまたはチャット欄で指示を出す
Look at the my-design.pen file and generate a React component
using Tailwind CSS.
- AI がキャンバスの視覚的構造を読み取り、対応する
.tsxファイルを生成する
Code → Design
逆方向も可能です。既存のコードを Pencil にインポートして、キャンバス上で視覚的に編集できます。
双方向同期が意味するもの
Pencil の一番面白いところは、デザインとコードが常に同期される点です。
具体的には、Pencil のデザイン変数（Variables）と CSS カスタムプロパティ（--color-primary: #3b82f6 のようなデザイントークン）が双方向で同期されます。キャンバス上でプライマリカラーの値を変更すると globals.css の対応する CSS 変数が更新され、逆にコード側で CSS 変数を書き換えると Pencil のキャンバスにも反映される仕組みです。
Tailwind のユーティリティクラス名（bg-blue-500 → bg-red-500）を直接書き換えるわけではなく、あくまでデザイントークン/CSS 変数レベルでの同期という点は押さえておく必要があります。Tailwind クラスを含むコード生成は Claude Code の AI が担当するパートです。
それでも、Figma からコードへの一方通行だった従来のフローとは根本的に違うアプローチです。デザイナーがキャンバスで微調整した変数値がそのままコードに反映され、エンジニアがコードで直した内容もキャンバスに戻ってくる。デザインとコードの乖離が構造的に起きにくくなります。
Git で管理する
.pen ファイルは JSON ベースのテキストファイルなので、ソースコードと同じリポジトリで管理できます。
git add my-design.pen src/components/MyDesign.tsx
git commit -m "Add signup card design and component"
デザインの変更履歴を diff で確認でき、PR 上でデザインとコードの変更をまとめてレビューできるのは、チーム開発では大きな強みです。
5. トラブルシューティング
アーリーアクセス中ということもあり、セットアップでつまずくことがあります。自分が遭遇した問題と、ネット上でよく報告されているものをまとめました。
「Error: Claude Code process exited with code 1」
もっとも多く報告されているエラーです。以下の順に試してみてください。
① Claude Code の認証を確認する
ターミナルで claude を実行して、正常に起動するか確認します。認証が切れていればブラウザの認証フローが再度表示されるので、ログインし直してください。
それでもダメなら、認証情報をリセットします。
claude auth logout && claude auth login
# ログアウトしてからクリーンな状態で再認証
② IDE を再起動する
VS Code / Cursor を完全に閉じて再起動するだけで直ることも多いです。意外とこれで解決します。
③ MCP 接続を確認する
VS Code の Settings → MCP で Pencil MCP サーバーが接続されているか確認してください。切れている場合は、Pencil キャンバスの右上にある「Export Code & MCP」ボタンを押すと再設定されます。
④ macOS の PATH 問題
macOS では、GUI アプリから起動した MCP サーバーが node や npx のパスを見つけられずクラッシュすることがあります。MCP 設定の env フィールドに明示的に PATH を設定すると解決します。
{
"env": {
"PATH": "/usr/local/bin:/opt/homebrew/bin:..."
}
}
⑤ CLAUDE.md の @ ファイル参照バグ
プロジェクトに CLAUDE.md がある場合、@ファイル名 の形式でファイルを参照していると「Path contains null bytes」エラーでクラッシュする既知の不具合（GitHub Issue #6977）が報告されています。特に @画像ファイル名.png のような画像ファイルへの参照が原因になりやすいです。該当する @ 参照を削除するか、別の記法に書き換えてください。
- アーキテクチャ図は @architecture-diagram.png を参照
+ アーキテクチャ図は architecture-diagram.png を参照
⑥ フルリセット（最終手段）
上記すべてで解決しない場合は、Claude Code の設定を完全にリセットします。
この操作ですべての設定、許可されたツール、MCP サーバー設定、セッション履歴が削除されます。
rm -rf ~/.claude.json ~/.claude/ .claude/ .mcp.json
claude # 初期状態で再スタート
MCP サーバーが接続されない
-
claudeコマンドがターミナルで通るか確認する - 環境変数
ANTHROPIC_API_KEYが設定されていると認証の競合が起きることがある →unset ANTHROPIC_API_KEYで解除してから再試行 - エラーログに
JSON-RPC error: -32601が出ている場合は、MCP サーバーとクライアントのバージョン不一致の可能性あり → Pencil と Claude Code の両方を最新版にアップデート
デザインが生成されない
- キャンバス左下のチャット欄が「Design with Claude Code」と表示されているか確認
- Claude Code のサブスクリプションが有効か確認（API クレジットの残高も要チェック）
- プロンプトは英語のほうが精度が高い傾向がある
まとめ
Pencil + Claude Code を使ってみて感じたのは、「デザインとコードの距離が縮まる」という体験が想像以上に快適だということです。
ネイティブアプリとして単体で動くので IDE がなくても試せるし、VS Code / Cursor の拡張として組み込めばコーディングとシームレスに行き来できる。.pen ファイルが JSON ベースで Git 管理できること、双方向同期でデザインとコードの乖離が起きにくいこと、プロンプトだけで UI の叩き台が作れること。この 3 つが揃っているのは、個人開発でも小規模チームでもかなり刺さると思います。
一方で、デスクトップアプリの対応 OS が macOS / Linux に限られること（Windows は VS Code / Cursor 拡張で利用可能）、Claude Code のサブスクリプションに月額 $20〜 かかること、MCP 連携がまだ安定しきっていない部分があることは、導入前に知っておいたほうがいいでしょう。また、双方向同期は CSS 変数/デザイントークンレベルの同期であり、Tailwind のユーティリティクラスを直接書き換えるものではない点も理解しておく必要があります。
アーリーアクセス中で無料のうちに、まずは触ってみてください。デザインもコードも同じツールで扱える感覚は、試す価値があります。
参考リンク
- Pencil 公式サイト
- Pencil Documentation
- Pencil Prompt Gallery
- Pencil Troubleshooting
- Claude Code Troubleshooting
最後に、GMOコネクトでは研究開発や国際標準化に関する支援や技術検証をはじめ、幅広い支援を行っておりますので、何かありましたらお気軽にお問合せください。