Claude Code と Pencil MCP を使って自然言語で Web ページをデザインしてみた
こんにちは。オペレーション部のしいなです。
はじめに
Claude Code でプロトタイプのデザインをする際、どうしても AI がデザインした感じが残ってしまうことがあります。
これまでは Claude Code 公式プラグイン「frontend-design」[1]を利用していましたが、もう少し差をつけたい場面がありました。
デザインツールとしては Figma が有名ですが、MCP サーバーをもっと手軽に試せるツールを探していたところ、「Pencil」というツールを見つけました。
Pencil を使うと、自然言語でベースデザインを生成し、キャンバス上で微調整するワークフローが実現できます。
実際に試してみましたので、セットアップ手順といくつかの Web ページのデザイン結果を紹介します。
Pencil とは
エージェント駆動型の MCP キャンバスです。
現時点では無料で利用可能です。
IDE 拡張機能とスタンドアロンのデスクトップアプリケーションの両方で利用できます。
MCP サーバーの利用に特に制限はありません。
デザインファイルは独自の .pen 形式で保存されます。
JSON ベースのため、Git などでバージョン管理ができる点がメリットです。
{
"version": "2.8",
"children": [
{
"type": "frame",
"id": "bd0gH",
"x": 900,
"y": 0,
"name": "Component/Card",
"reusable": true,
"width": 400,
"fill": "$bg-card",
"stroke": {
"thickness": 1,
"fill": "$border"
},
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "DWwm0",
"name": "cardHeader",
"width": "fill_container",
"padding": [
16,
20
],
（省略）
プロンプトギャラリーというものがあり、自然言語によるデザイン用のプロンプトが公開されています。
セットアップ
前提
- Claude Code CLI 導入済み
- IDE 拡張機能（VS Code Extension）を利用
1.インストール
VS Code メニューより Extension（拡張機能）を選択します。
Pencil と入力し、一覧より「Pencil」を選択します。
識別子がhighagency.pencildevであることを確認のうえ、インストールします。
2.Pencil 起動
インストールが完了したら、ステータスバーの左下にある鉛筆マークの Pencil をクリックします。
3.ログイン
初回起動時にはログイン画面が表示されます。
メールアドレスを入力します。
届いたコードを入力しログインします。
これでセットアップ完了です。
Pencil 単体で利用する
Figma などのデザインツールに慣れた方には馴染み深いインターフェースです。
キャンバス上でレイアウトや UI コンポーネントを配置し、画面デザインを作成できます。
ゼロからデザインすることも、用意されたデザインキットをベースに作成することも可能です。
Claude Code で MCP サーバーを利用する
MCP サーバーを利用すれば自然言語でベースデザインを生成できます。
インストール時に自動で MCP サーバーの設定が行われるため、特に設定は不要です。
利用できるか確認してみます。
-
Claude Code を起動します。
-
/mcpコマンドを実行します。 -
Pencil というMCP サーバーが追加されていることが確認できます。
pencil が connected であれば利用可能です。
-
利用できるか会話してみます。
利用可能なツール概要も表示されました。
参考
./claude.json には以下の定義が行われます。
"mcpServers": {
"pencil": {
"command": "/Users/shiina.yuichi/.vscode/extensions/highagency.pencildev-0.6.28/out/mcp-server-darwin-arm64",
"args": [
"--app",
"visual_studio_code"
],
"env": {},
"type": "stdio"
}
}
自然言語でデザインしてみる
Claude Code を利用してデザインしてみます。
本検証ではモデルは Claude Opus 4.6 を利用しています。
旅行好きの個人フォトギャラリー
プロンプト（デザイン生成）
世界一周旅行の写真を公開する個人サイトをデザインして
地図上にピンを置いて訪問地を表示、マソンリーレイアウトの写真ギャラリー、旅行記ブログ
ナチュラルなアースカラーで
仕上がり
地域密着型パン屋のオンライン注文ページ
プロンプト（デザイン生成）
街のベーカリーのオンライン注文ページをデザインして
本日焼き上がりパンの写真カルーセル、カテゴリ別メニュー、受取時間選択、カート機能
クリーム色と焦げ茶で温かみのあるデザインに
仕上がり
小規模カフェのオーナー向け売上管理画面
プロンプト（デザイン生成）
個人経営カフェの売上管理画面をデザインして
日別売上の棒グラフ、人気メニューランキング、在庫アラート、本日の予約一覧を表示
温かみのあるブラウン系配色で
仕上がり
自治会・マンション管理組合の掲示板サイト
プロンプト（デザイン生成）
マンション管理組合の住民向け掲示板サイトをデザインして
お知らせ一覧、ゴミ出しカレンダー、共用施設予約、理事会議事録アーカイブ
落ち着いたグレーとグリーンで誰にでも使いやすいシンプルなデザインに
仕上がり
企業の社員向けポータルサイト
プロンプト（デザイン生成）
社員向けポータルサイトをデザインして
お知らせ一覧、勤怠ボタン、社内リンク集、本日の予定ウィジェットを配置
コーポレートブルーを基調にした清潔感のあるデザインで
仕上がり
どれもそのままプロトタイプとして利用できそうな美しい仕上がりです。
.pen ファイルとして保存されるため、AI が生成したベースデザインをもとにキャンバス上で微調整もできます。
既存の Web ページにデザインを適用する
既存プロジェクトのデザイン変更にも活用できます。
まず Pencil MCP で .pen ファイルを生成し、そのデザインをコードの CSS に反映するという流れです。
プロンプト（デザイン生成）
Pencil MCP サーバーを利用して現在のプロジェクトの「設定」ページをデザインしてください。
【メインコンテンツ】
設定ページにはサマリーカード・グラフ・テーブルは一切表示しない。
設定項目のみのクリーンなフォームページ。
■ セクション: AI分析設定
白カード内にフォーム。
- 使用モデル: ラジオボタン（Claude Sonnet / Claude Opus）
- 各モデルの下に小さいグレーテキストで特徴説明
プロンプト（コードへの反映）
デザインを適用してください
仕上がり
まとめ
Pencil の MCP サーバーを Claude Code から利用して、自然言語で Web ページのデザインを作成してみました。
数行のプロンプトでプロトタイプとして十分な品質のデザインが生成でき、MCP サーバーも安定して動作していました。
生成されたデザインは .pen ファイルとして保存されるため、Pencil のキャンバス上で微調整したり、Git で管理したりできます。
Figma ほどの多機能さは求めないものの、デザインのイメージ合わせをしたい、という場面にちょうどよいツールだと感じました。
気になった方はぜひ試してみてください。
本記事が参考になれば幸いです。
参考
