Claudeに「おしゃれなUI」を作らせるコツというと、指示文やスキル選びの話になりがちだ。しかし仕上がりを本当に左右するのは、書かせて終わりにせず「実際に画面を見て、直させる」フィードバックループを組めるかどうかにある。今日は、Claude Codeに”目”を持たせてUIを自己レビュー・自己修正させるためのツール群と、その回し方を整理する。
なぜ「見る」工程が要るのか
AIコーディングエージェントが作るUIには、テンプレート然としたレイアウトや余白の狂い、モバイルでの崩れなど、コードだけを読んでいては気づきにくい問題がよく残る。Anthropic公式のfrontend-designスキルのようにデザイン方針をあらかじめ与える手法は有効だが、それだけでは「指示通りに書いたつもりが、実際の画面では崩れている」というギャップは埋まらない。ここで効くのが、Claude自身にブラウザを操作させてスクリーンショットや実行結果を見せ、気づいた点を直させる仕組みだ。
Claudeに”目”を与える4つのツール
Claude Codeから接続できる代表的な「見て直す」系のプラグイン・MCPサーバーを整理する。
| ツール | 提供元 | できること | 向いている場面 |
|---|---|---|---|
| Claude Preview | Anthropic公式プラグイン | アプリの起動・停止、クリックやフォーム入力、コンソールログ・ネットワーク監視、スクリーンショット取得をClaude Code内で完結 | ローカルで動かしながらUIをその場で確認・修正したいとき |
| Chrome DevTools MCP | Google Chromeチーム | 実際に動いているChromeブラウザを操作・検査。パフォーマンストレースやコンソール・ネットワーク情報の取得まで対応 | レイアウト崩れの原因調査や描画パフォーマンスの検証 |
| Playwright MCP | Microsoft | スクリーンショットではなく構造化されたアクセシビリティスナップショットでページ状態をLLMに渡す。クロスブラウザのE2E検証にも使える | 視覚差分よりも「要素が正しく存在するか」を厳密に確認したいとき |
| Storybook連携プラグイン | コミュニティ製 | コンポーネント単位のStorybookストーリー生成、既存ストーリーの一覧・閲覧、ビジュアルリグレッションテストの管理 | デザインシステムのコンポーネントを継続的に一貫させたいとき |
実践パターン:スクリーンショット・フィードバックループ
これらのツールは、次のような順序で回すと効果的だ。
- 撮らせる — Claude PreviewやPlaywright MCPでローカルのアプリをブラウザで開き、対象画面のスクリーンショットを取得させる。
- 批評させる — 撮った画像を見せた上で、「テンプレっぽく見える箇所」「余白や整列の乱れ」「モバイル幅での崩れ」など、具体的な観点を挙げて指摘させる。taste-skillのようなチェックリスト型スキルを併用し、DESIGN_VARIANCE(構図の変化量)・MOTION_INTENSITY(モーションの強さ)・VISUAL_DENSITY(密度)といった観点を明示しておくと、指摘の粒度が安定する。
- 直させて撮り直す — 指摘に基づいて実装を修正させ、再度スクリーンショットを取って比較する。この往復を1〜2回繰り返すだけでも、初回出力との差は大きい。
- 差分で固定する — コンポーネントが安定したら、Storybook連携やPlaywrightのビジュアルリグレッションでベースライン画像を保存し、以後の変更で意図しない崩れが出ていないかを機械的にチェックする。
導入で気をつけたい点
ビジュアル確認のループはトークン消費が増えやすい。スクリーンショットは構造化データより情報量が多く、往復のたびにコンテキストを圧迫する。Playwright MCPが画面そのものよりアクセシビリティスナップショットを優先する設計になっているのはこのためで、「見た目の確認」と「構造の確認」は使い分けたほうがコストを抑えられる。また、ビジュアルリグレッションではCSSアニメーションを無効化し、アンチエイリアシングによる微小なピクセル差は許容範囲(1%程度)を設定しておくと、無関係な差分でテストが落ちるのを防げる。ブラウザ操作系のMCPはローカルにブラウザのインストールが必要になる場合が多く、アプリの状態次第ではセッションが不安定になることもあるため、まずは小さな画面単位から試すのが無難だ。
主な情報源
- Frontend Design Plugin(anthropics/claude-code)
- Chrome DevTools for agents(ChromeDevTools/chrome-devtools-mcp)
- Playwright MCP(microsoft/playwright-mcp)
- Best Claude Code Plugins for Testing – Claude Directory
- Best Claude Code Skills to Try in 2026 – Firecrawl
- Playwright Skill Claude Code – TestDino
- taste-skill(Leonxlnx/taste-skill)
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。