Pencil MCPでUIデザインを自然言語から生成する

🎧 この記事を音声で聴く（4:28）

Claude Codeに新しいMCPツール「Pencil」が追加されました。自然言語のプロンプトからUIデザインを直接生成できるツールです。試しに、このサイトのジャーナル記事ページのデザインを作ってみました。

Pencil MCPとは

Pencilは、MCP（Model Context Protocol）を通じてAIがデザインファイルを読み書きできるようにするツールです。VS Codeの拡張機能として動作し、.penという独自のJSON形式でデザインを管理します。

特徴的なのは、.penファイルがJSONベースなのでGitで差分管理できること。デザインの変更履歴をコードと同じようにトラッキングできるんですよね。Figmaを開く必要がなく、テキストエディタの中でAIと対話しながらデザインが形になっていくのは、かなり新鮮な体験です。

VS Codeの拡張機能「highagency.pencildev」をインストールして、メールアドレスでサインアップするだけです。注意点として、Pencilを先に起動してからClaude Codeを開始する必要があります。逆だとMCP接続が確立しないので、ここは気をつけてみてください。

MCPサーバーが正しく接続されると、Claude Codeからbatch_designやget_screenshotといったデザイン操作ツールが使えるようになります。

「ジャーナルページのデザインを作って」——この一言から始めました。Claude Codeがbatch_designツールを使い、フレーム構造を組み立て、テキストを配置し、色を合わせていきます。

theme.jsonを読み込んでカラーパレットに自動で合わせてくれたのは良かったです。ただし、ここで問題が起きました。

theme.jsonのスタイル定義では背景色が#0e1117（ダーク）、テキスト色が#f0f3f6（ライト）になっていたため、AIはダークモードのデザインを生成しました。しかし、実際のサイトはライトモード基調。theme.jsonの定義と実際の表示が一致していなかったんですよね。

実際のサイトをブラウザのスクリーンショットで確認して初めて気づきました。デザインファイルだけでなく実際の画面を確認することが大事だと、改めて感じましたね。

サイトのスクリーンショットを参考に、ライトモード・1カラム中央寄せ・ミニマルなデザインで作り直しました。結果、実際のサイトとかなり近いデザインが生成できました。

ヘッダーのナビゲーション構成、ティールのグラデーション帯、記事本文のタイポグラフィ、フッターのリンク配置——すべてプロンプトの指示だけで再現できています。実際にAIが生成したプロトタイプはこちらから確認できます。

プロンプトだけでプロトタイプ品質のデザインが生成されます。特にレイアウト構造やコンポーネントの配置は手作業より速い。.penファイルがJSON形式なのでGitで管理できるのも、エンジニアとしてはありがたいポイントです。

スクリーンショット機能で生成結果をその場で確認できるのも便利ですよ。「作って→確認→修正」のサイクルがターミナルの中だけで完結します。

フォントファミリーの指定方法にクセがあり、複数フォントをカンマ区切りで指定するとエラーになることがありました。テキストの色指定もcolorではなくfillプロパティを使う必要があり、スキーマの理解が前提になるんですよね。

また、既存サイトのデザインを自動で読み取る機能はないため、参考にすべきデザインは自分で確認してAIに伝える必要があります。theme.jsonだけを信じた結果がダークモード問題でした。

Pencil MCPは「AIにデザインを任せる」ための新しいアプローチです。完成度の高いデザインを自動生成するというより、プロトタイピングの速度を劇的に上げるツールとして優秀だと思います。特にエンジニアがデザインカンプを素早く作りたい場面で力を発揮すると感じています。

ただし、AIが参照するデータと実際の表示にギャップがある場合、見当違いのデザインが生成されます。「実物を見て確認する」という基本が、AI時代でも変わらず大事だということを改めて学びました。皆さんもPencil MCPを試す際は、ぜひ実際の画面と見比べながら進めてみてください。

この記事が参考になったら