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

KaleidoFutureのサイトを公開しました。 今回は、Claude Codeに新しく追加されたMCPツール「Pencil」を使って、自然言語のプロンプトからUIデザインを生成する体験をしてみました。Figmaを開くことなく、テキストエディタの中でAIと対話しながらデザインが形になっていきます。

Pencil MCPとは

Pencilは、MCP（Model Context Protocol）を通じてAIがデザインファイルを読み書きできるようにするツールです。VS Codeの拡張機能として動作し、.penという独自のJSON形式でデザインを管理します。 Gitで差分管理できるのが大きい。デザインの変更履歴を、コードと同じようにトラッキングできます。

実際に使ってみた

「ジャーナルページのデザインを作って」——この一言から始まりました。Claude Codeがbatch_designツールを使い、フレーム構造を組み立て、テキストを配置し、色を合わせていきます。 驚いたのは、既存のtheme.jsonを読み込んで、サイトのカラーパレットに自動で合わせてくれたこと。ただし、実際のサイトをスクリーンショットで確認するまで、ダークモードで作ってしまっていたことに気づけませんでした。

良かった点

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