どんな話？
Claude Code から MCP の差しこみ口で Pen の画面を1か所直させ、pen コマンドで PNG に書き出した回です。Settings → MCP のスイッチをオンにすると、.claude.json のどのフォルダでも効く欄に pencil が書き足され、オフにすると消えました。色は72秒で変わりましたが、元の .pen は Ctrl＋S を押すまで変わりません。pen コマンドは、書き出すだけでもログインが要りました。
この記事でわかること
- 差しこみ口のスイッチは Settings → MCP に7つ。オンにするとその道具の設定ファイルに pencil を書き足し、オフにすると消える（Kiro CLI と Antigravity は空のファイルが残った）
- Claude Code では .claude.json のいちばん上の mcpServers、どのフォルダでも効く欄に書かれた。同じファイルにはログインの情報も入っている
- Claude Code は read_skill・get_app_state・execute の3つの道具を使い、72秒で色を変えた。元の .pen が変わるのは Ctrl＋S のあとだけ
- pen コマンドは Node.js 22.19 以上で、npm から入れる。書き出すだけでもログインが要り、版を見るのは pen version
- pen --in first-design.pen --export first-design.png で4秒、800×600 の PNG。JPEG や PDF にするには --export-type が要る
- 使い終わったら、差しこみ口のスイッチを切る
やることチェックリスト
0/6記事を読みながら、できたものにチェックを付けていけます。チェックはこの端末に残ります。
ぜんぶできた！おつかれさまでした。
くわしい手順と画面の図は、Xの記事にあります。
こんな人に
- Claude Code や Codex をふだん使っていて、Pen の画面も同じ窓から直したい人
- Pen を入れたあと、自分のAIの設定ファイルに見覚えのない「pencil」を見つけて、気になっている人
- 描いた画面を、アプリを開かずにコマンドで画像にしたい人
この話のTIPS
- 注意ドキュメントには、書き出しに失敗しても、正常に終わった合図（終了コード0）を返すことがある、とあります。書き出したら、画像のファイルができているか、開いて確かめてください。
- 注意PowerShell で npm や pen と打って、赤い字で「… npm.ps1 cannot be loaded because running scripts is disabled on this system.」（スクリプトの実行が無効なので、npm.ps1 を読みこめません）のように出たら、npm の代わりに npm.cmd、pen の代わりに pen.cmd と打ってください（例：npm.cmd install -g @pen.dev/cli、pen.cmd login）。設定そのものは変えなくてかまいません。