【Pencil】AI従量課金を回避して使い倒す。Claude Desktop × MCPで画面を「完全自動コーディング」させる技術

あえて、Claude Desktop 使ってます。
見た目はいいですが、動的ポートという罠がありましたw

Figmaで作ったデザインをPencil経由でNext.jsにしてWeb公開。
このフロー、控えめに言って最高です。

ただ、Pencil内のAIチャットを無邪気に使っていたら、API従量課金で一瞬にして1,000円近くが飛んでいき、青ざめました。

「なんとかせねば」と思い、いい方法がないか模索した結果、Claude Proの定額プラン内で、MCPサーバー経由でPencilを使えば課金を回避できると判明！

ただ、実際にやってみるとセッティング（特にNode.js周り）でかなり苦戦したので、同じ轍を踏まないよう情報を共有します。

---

【追記】Claude code でAPIじゃなくて、サブスクの方を選べば、それで解決だったと気づいたが(初歩的😅...今までClaude使ったことがなかったもので)、Claude Desktop でもPencilが動くようになったので、OK！ということで。

はじめに：未来の開発体験へようこそ

「AIにコードを書いてもらう」時代から一歩進み、「AIがデザインツールを直接操作し、そこからコードを生成して、ローカル環境にファイルとして保存する」 という完全自動化フローがついに実現しました。

この記事では、以下の3つの強力なツールを MCP (Model Context Protocol) で接続し、Mac上でこれらを協調動作させる方法を解説します。

1. Claude Desktop（AIの頭脳・指令塔）
2. Claude Code（AIエンジニア・ターミナル操作）
3. Pencil（AIデザイナー・UIデザインツール・Next.jsコード生成 の設計図提供）

特に、多くのユーザーが躓きやすい 「Node.jsのバージョン管理」「権限エラー」「パス設定の不備」 といった落とし穴をすべて回避する、実証済みの最短ルートをご紹介します。

この記事で実現できること

• Claudeにチャットで頼むだけで、Pencil上にワイヤーフレームが爆速で描画される。
• そのデザインをAIが読み取り、Next.js + Tailwind CSS のコードとしてローカルに保存してくれる。
• API従量課金を気にせず、Claude Proプラン（月額定額）の範囲内でこれらを実行可能にする。

---

1. 基礎知識：登場人物の整理

構築の前に、何がどう繋がっているのかを理解しておきましょう。

• Claude Desktop (アプリ)
  • 役割: すべての指令塔です。ブラウザ版ではなく、Macアプリ版を使うことで、ローカルファイルへのアクセスが可能になります。
• MCP (Model Context Protocol)
  • 役割: Anthropicが提唱する、AIと外部ツールを繋ぐ「共通規格（USBケーブルのようなもの）」です。これのおかげで、Claudeが色々なアプリを操作できます。
• Claude Code (MCPサーバー)
  • 役割: 「エンジニア」です。ターミナル操作、ファイル作成、編集を担当します。
• Pencil (MCPサーバー)
  • 役割: 「デザイナー」です。Pencilアプリ内の要素を読み取ったり、図形を描画したりします。Pencilアプリ本体の中に内蔵されています。

---

2. 前提条件と準備

使用環境

• PC: Macbook Pro (Apple Silicon M2)
• OS: macOS
• アカウント: Claude Proプラン ($20/月)
  • ※Freeプランでもアプリ自体は使えますが、MCPの使用制限があるため、実用的な開発にはProプランが強く推奨されます。

【最重要】Node.js 環境の整備

ここが最大のハマりポイントです。MCPサーバーを安定して動かすには、Node.js v22以上 が必須です。古いバージョンや、システム標準のNodeが入っているとエラーの元凶になります。

手順1: nvm (Node Version Manager) のインストール

Node.jsのバージョンを管理するツール nvm を導入します。ターミナルで以下を実行してください。

curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh) | bash

（インストール後、一度ターミナルを終了して再起動してください）

手順2: Node.js v22 のインストールと固定

nvm install v22
nvm use v22
nvm alias default v22

手順3: 重要なパス（住所）の確認

設定ファイルに記述するため、Node.jsの正確な居場所を突き止めます。以下のコマンドを実行し、出てきた結果をメモしてください。

which node

出力例: /Users/あなたのユーザー名/.nvm/versions/node/v22.xx.x/bin/node
※ このパスの /bin まで（例: /Users/あなたのユーザー名/.nvm/versions/node/v22.xx.x/bin）が後で必要になります。

---

3. アプリケーションのインストール

1. Claude Desktop App

• 公式サイト からMac版をダウンロードしてインストール。
• 初回起動時にログインを済ませてください。

1. Pencil

• Pencil公式サイト からデスクトップアプリをダウンロードしてインストール。
• こちらも起動してログインしておきます。

---

4. 【核心】設定ファイルの作成

ここが構築のハイライトです。多くの人が「パスが通らない」「権限エラー」で挫折しますが、以下の手順なら確実です。

手順1: npmキャッシュの権限修正（トラブル予防）

Macで開発をしていると、過去に sudo（管理者権限）でライブラリをインストールした影響で、自分自身のファイルなのに「アクセス権がない」と怒られることがあります。

具体的には、Claude Code起動時に以下のようなエラーが出てクラッシュします。
npm error Your cache folder contains root-owned files, due to a bug in previous versions of npm...

これを防ぐため、以下のコマンドで 「npm関連のファイルの持ち主を自分自身に戻す」 処理をしておきましょう。

# ~/.npm フォルダの所有権を現在のユーザー（自分）に変更する
sudo chown -R $(whoami) ~/.npm

手順2: 設定ファイルの編集

Claude Desktopの設定ファイルを開きます。
ターミナルで以下のコマンドを実行すると、テキストエディタで開けます（VSCodeがある方は code コマンドでも可）。

open -e ~/Library/Application\ Support/Claude/claude_desktop_config.json

※ ファイルが存在しない場合は、新規作成されます。

---

手順3: 以下のJSONをコピペして修正する（重要！）

ファイルの中身を以下のように記述します。

⚠️最重要: コピペした後、以下の2点を必ずあなたの環境に合わせて書き換えてください

1. <YOUR_USERNAME>: あなたのMacのユーザー名（ターミナルで whoami で確認）。
2. 55461 (ポート番号): ここが最大のハマりポイントです！ Pencilは起動するたびにポート番号が変わる仕様のようなので、必ず以下のコマンドで「現在の正解」を確認して書き換えてください。

---

【追記】後から気づきましたが、Pencil側を固定ポートにするように記述できそうですね。まぁ、今、以下の方法で動いているので、、もしこれからやる人は、固定ポートに設定する方が良いでしょう。

lsof -i -P | grep Pencil | grep LISTEN
# 結果例: localhost:52871 (LISTEN) → この場合 "52871" に書き換える

▼ claude_desktop_config.json の内容

claude_desktop_config.json

{
  "mcpServers": {
    "claude-code": {
      "command": "/Users/<YOUR_USERNAME>/.nvm/versions/node/v22.20.0/bin/npx",
      "args": [
        "-y",
        "@anthropic-ai/claude-code",
        "mcp",
        "serve"
      ],
      "env": {
        "PATH": "/Users/<YOUR_USERNAME>/.nvm/versions/node/v22.20.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
      }
    },
    "pencil": {
      "command": "/Applications/Pencil.app/Contents/Resources/app.asar.unpacked/out/mcp-server-darwin-arm64",
      "args": [
        "--ws-port",
        "55461"
      ]
    }
  }
}

💡 なぜこんなに長い記述が必要なの？（ハマりポイント解説）

1. 絶対パス指定 (/Users/.../bin/npx) の理由
通常は npx と書くだけで動きますが、Claude Desktop アプリは、あなたのターミナル設定（パス）を自動的には読み込みません。そのため、「npxなんてコマンド知らないよ」とエラーになってしまいます。
そこで、「npxはここにあるよ！」と 住所（フルパス） で指名することで、確実に起動させています。

2. 環境変数PATH ("env": { "PATH": ... }) の理由
npx が起動した後、さらに内部で node コマンドを呼び出します。ここでも「nodeが見つからない」というエラーが起きがちです。
これを防ぐために、アプリ側に「Node.jsの置き場所」を環境変数として教えてあげています。

3. Pencilのポート番号 (55461 vs 動的ポート)
ここが今回最大の発見でした。ネット上の情報では 55461 と書かれていることが多いですが、Pencilのバージョンによっては 起動のたびに空いているポートをランダムに使う（動的ポート） 仕様のようです。
そのため、設定ファイルに固定の数字を書いても繋がらないことがあります。「繋がらないな？」と思ったら lsof コマンドで今のポートを確認し、書き換えて再起動する必要があります。

4. Pencilのパス
PencilのMCPサーバーはnpm（ネット上）ではなく、インストールしたアプリの中に内蔵されています。上記のパスを指定するのが正解です。

---

5. 起動と動作確認

「/mcp」コマンドは不要です
ターミナル版の Claude Code（CLI）を使ったことがある方は「/mcp コマンドでサーバーを追加する」操作に馴染みがあるかもしれませんが、Claude Desktopアプリ版ではその操作は不要です。
アプリ起動時に、作成した claude_desktop_config.json が自動的に読み込まれ、接続が完了します。

システム設定からClaudeのフルディスクアクセスが必要です。
最近のmacOSのセキュリティは非常に厳しく、アプリ同士が裏側で連携（通信）しようとすると、「君たち、勝手に仲良くしちゃダメだよ」とブロックすることがあります。 特にMCPのような新しい仕組みは、設定ファイルや通信ソケットを読み書きする必要があるため、フルディスクアクセス（＝家の鍵を渡すようなもの）がないと、門前払いされてしまうのです。

いよいよ起動です！

1. Pencilアプリを先に起動 しておきます（超重要）。
2. Claude Desktopを起動 します（すでに起動している場合は Command + Q で完全に終了してから再起動）。

成功のサイン：アイコンは「出ない」のが標準？

以前のバージョンでは入力欄付近に「ハンマーアイコン」が表示されていましたが、最新のUIではアイコンが表示されないようです。「アイコンがない＝失敗」ではありません。焦らず、以下の方法で確認しましょう。

チャット入力欄に、以下のプロンプトを送ってみてください。

「現在使用可能なツールを確認してください。Pencil関連のツールは認識されていますか？」

AIの回答例：

「はい、以下のPencilツールが認識されています：

• pencil:get_screenshot
• pencil:batch_design
  ...」

このように返ってくれば、裏側では完全に繋がっています。構築完了です！

💡 【重要】ポート番号が変わっても一発で同期するコマンド
Pencilは起動するたびにポート番号が変わる「動的ポート」仕様のようです。毎回ファイルを開いて書き換えるのは大変なので、「現在のポートを自動検出し、設定ファイルを書き換えて、Claude Desktopを再起動する」 という一連のコマンドを用意しました。

Pencil 起動後、「あれ？ Claude Desktop 繋がらない？」となったら、
まずはこのコマンドを叩くのがおすすめです。
👇別記事：
https://qiita.com/shiodome47/items/9f75263cb4c684d69c8d

---

6. 実践：魔法のような開発体験

さあ、AIエンジニアとAIデザイナーに仕事を頼みましょう。画面左にClaude Desktop、右にPencilを並べるのがおすすめです。

シナリオ1：AIにデザインを描かせる

Pencilで白紙のキャンバスを開き、Claudeにこう頼みます。

「Pencilツールを使って、新しいフレームを作成し、そこに『AI開発ギルド』のLP向けヒーローセクションのワイヤーフレームを描画してください。タイトル、サブタイトル、CTAボタンを配置してください。」

→ 目の前のPencil上で、人間には不可能な速度で四角形や文字が描かれていくはずです！

シナリオ2：デザインをコードに変換する

描かれたデザインを選択状態にして、こう頼みます。

「Pencilで現在選択されているフレームを読み取り（get_editor_state）、Next.js (App Router) + Tailwind CSS のコンポーネントコードを作成してください。作成したコードは src/app/page.tsx として私のPCに保存してください。」

→ AIがデザインを解析し、コードを書き、あなたのMacの中に実体ファイルとして生成します。

---

7. セキュリティと「恐怖」への対策

「AIが勝手に私のPC内のファイルを書き換えるなんて、怖くない？」
そう感じるのは正常です。むしろ、その感覚が重要です。しかし、Claude Desktopには 安全装置 があります。

🛡️ 最後の砦は「あなた」です

Claude Code（AI）がファイルを作成したり、コマンドを実行したりする際、必ずClaude Desktopアプリ側で 「承認ダイアログ」 が表示されます。

• Allow (今回だけ許可): その操作1回だけを許可します。
• Always Allow (常に許可): そのツール（例: ファイル書き込み）を信頼し、以降は聞かずに実行させます。
• Reject (拒否): 操作をブロックします。

【初心者のための安全ルール】
最初のうちは、面倒でも 「Allow（1回許可）」 で進めることを強くお勧めします。「AIが今、何をしようとしているのか（例：変なファイルを消そうとしていないか？）」を目視で確認してから許可を出せるからです。

🛡️ ファイルアクセス権限について

今回、~/dev/ などのフォルダにファイルが生成させましたが、これは以下の仕組みで動いています。

1. OSの権限:
   macOSの仕様上、ダウンロードフォルダやデスクトップなどにアクセスする際は、OS側から「Claude Desktopがフォルダにアクセスしようとしています」というポップアップが出ます。これを許可しない限り、AIもそこには触れません。
2. ユーザー権限:
   AI（Claude Code）は、あなたと同じ「一般ユーザー権限」で動いているプログラムに過ぎません。「あなたが手動でできること」以上のことは、AIにもできません（root権限が必要なシステムファイルの書き換えなどはブロックされます）。

結論：
AIが勝手に暴走してシステムを破壊することはありませんが、「承認ボタン」を押すときは、必ず内容を確認する癖をつけましょう。

---

まとめ

結果的に考えると、Cursor × MCP で Pencil を使うのが一番シンプルだったな、という印象です。
ただ、自分は Cursor を使っていなかったので、そこに気づくのが少し遅れました。

とはいえ、Cursor を使っていなくても問題ありません。
Claude Desktop × MCP を使えば、Node.js 環境と設定ファイルを用意するだけで同じことが実現できます。

しかも、操作画面の構成は、Cursorよりも好み。
この構成は、普通におすすめできます。ぜひお試しを。

(終)