FigmaのURLを渡すだけでUIの抜け漏れを検出するClaude Codeスキルをつくった
UIデザインは「理想の状態」でつくられることが多いと思いますが、実際にはデータが正しく読み込めない場合や、権限で表示が変わる場合など、さまざまな状態をUIとして表現しておく必要があります。
データが空のときや読み込み中など、よくある・わかりやすい状態であれば、考慮されている場合がほとんどでしょう。しかし、裏側の状態をすべて考慮するのは難しいため、気づかなかった状態がFigmaに存在せずに開発の後半で「これどうするんでしたっけ？」という会話をした結果、手戻りを起こしてしまうといったことはよく聞く話ではないでしょうか？
この問題をClaude Codeで解決できないかと考え、FigmaのURLを渡すだけでUIデザインの不足パターンを洗い出してくれるスキル「UI Coverage Check」を作成しました。
このスキルでは、FigmaのURLを渡すと次のようなチェックをしてくれます。
- UI Stackの網羅性（UI Stack: UIで考慮すべき5つの状態のこと）
- 不足していると思われるコンポーネント
- 拡張が必要と思われるコンポーネント
- 必要と思われるインタラクション
- 不足していると思われる横断的なパターン
例えば、よくあるタグ編集管理画面を解析してもらった結果、UI Stackの指摘は次のような感じです。（厳密にはUI Stackではない指摘も含まれてますが…）
また分析のためスキル内でClaude Codeがヒアリングしてくれるのですが、ヒアリングしきれなかった部分で確認が必要そうな箇所も次のような感じでまとめてくれます。
使い方
インストール
マーケットプレイスで配布できるように準備すればよかったのですが、力尽きてしまったので、次のリポジトリから手動でインストールをお願いします。
いわゆる“黒い画面”に慣れている方はgit cloneして、スキルをプロジェクトやユーザー領域のskillsディレクトリへコピーしてください。
“黒い画面”に慣れていない方はGitHubのリポジトリへアクセスし、Codeボタンの中に「Download ZIP」メニューがあるので、そこからZIPファイルをダウンロードして解凍してください。
まずはスキルフォルダのパスを次の手順でコピーします。
- 解凍したフォルダを開いて「skills」の中にある「ui-coverage-check」フォルダを右クリックしてコンテキストメニューを表示する
- コンテキストメニューを開いた状態でoptionキーを押し、「“ui-coverage-check”のパス名をコピー」を選択する（「コピー」の項目が切り替わります）
Claude Codeへパスをペーストして、次のように送ればインストールしてくれます。
# どのプロジェクトでも使えるようにする場合
[ペーストしたパス] のスキルをユーザースコープでインストールしてください
# 特定のプロジェクトでのみ使う場合
[ペーストしたパス] のスキルをこのプロジェクトにインストールしてください
チェックのやり方
Figmaでチェックしたい範囲のURLをコピーし、次のようにClaude Codeへ送信してください。
/ui-coverage-check [FigmaのURLをペースト]
あとは、Claude CodeがFigma MCPを使って情報を取得し、送ったURLの画面を中心に内容を確認、必要であれば質問が飛んでくると思います。何度かやり取りを経て、分析結果をドキュメントにまとめてくれます。
巨大なFigmaファイルでは試せていませんが、30画面＋モーダルダイアログ等の小さいコンポーネントが無数にあるウェブアプリでは問題なく動作していました。画面が複雑になるとどうしても取得するコンテキストが多くなるので、必要に応じてページを分割するなどしてみてください。
また実際にはコンポーネントは存在するけど、「不足してるよ」と指摘が入ることもあります。どうしても完全に走査できない部分もあるので、そこはご愛嬌ということでご容赦ください。
このスキルをつくろうと思ったきっかけと過程の記録
きっかけ
社内の勉強会で、AnthropicのメンバーがXで紹介していたプロンプトをベースにしたサブエージェントを使い、要件と仕様を整理したドキュメントを作成しているという事例を聞きました。その中で、「AskUserQuestion」を使いClaude Codeからユーザーに対してヒアリングを行い、ゴールに対して不明点を明確にしていく過程を見て、見えないところが多いUIデザインの文脈でも使えないかなと考えたのが始まりです。
早速、紹介されたプロンプト（実際には翻訳されたプロンプト）をベースに、渡したFigmaのURLから構造を理解した上で、不足しているUIをあぶり出してもらえるように改良していきました。
何度も試してみましたが、確かに「AskUserQuestion」で絶妙な質問をしてくれるものの、UIとは関係ないバックエンド開発の領域に踏み込んだり、最終的な出力が安定しなかったりしたため、Claude Codeと対話して改善してみることにしました。
改善活動
プロンプトをClaude Codeへ渡し、「このプロンプトの課題を分析してほしい」と依頼すると、早速「AskUserQuestion」で来た質問へ回答していき、課題を明らかにしていきます。主にスコープが広すぎるのと諸条件の提示が不足しているとのことで、そのまま改善したプロンプトを作成させました。
テストを繰り返してさらに改善
何度か試してみると、スコープや諸条件が明確になって出力テンプレートも追加されたおかげで、結果も安定していました。
しかし、元のプロンプトで聞かれていた「深掘りの質問」がなくなっていたので、元のプロンプトと新しいプロンプトを比較して、より深い質問が出てくるように改良を加えていきます。
ここでは改良前の出力と改良後の出力を比較させ、目的が達成されているかをClaude Code自身に評価してもらい、過不足を修正することを繰り返すという方法を取りました。
方針や分析観点など追加したものの、出力先がない！ みたいなことが結構あるので、全体の整合性チェックは忘れずにしてもらいましょう。（後述のSkill Creatorスキルを使っていたら違ったかもしれませんが）
スキル化と最適化
最後に使い勝手を良くするため、Claude Codeでスキル化します。
さらにAnthropicが公開しているスキル「Skill Creator」を使い、ベストプラクティスに則って最適化してもらいました。
このSkill Creatorは、Claude Codeと対話しながらスキルに必要なファイルをClaude Codeが生成してくれるスキルです。新しく作成する場合はもちろん、既存スキルの改善もやってくれます。
ベストプラクティスでは「なぜ」を書いたほうが良いとされていますが、タスクの性質によっては「なぜ」をあえて書かないほうが良いこともある、という学びがありました。
今回は発散型の分析タスクを主としているため、「なぜ」を書いてしまうと本来意図した観点での分析ができない可能性があったため、そうした指摘を一部反映せずに進めました。
まとめ
チームメンバーに（スキル化する前のやつを）軽く使ってもらったところ、「異常系も考慮して評価してくれるのでかなり抜け漏れが減りそう」とか「（異常系の網羅性に）結構自信があったのにー」といった声があったので、一定の成果は出せそうです。
また制作にあたっては、今回はゴールが割と明確にあったので、新旧を比較して改善するというプロセスがうまく回りました。比較して特徴を出すってなかなか面倒なので、その辺りをClaude Codeに任せられるのはありがたいですね。
もし使ってみたら、フィードバックをもらえると嬉しいです。
