sugawaramasaya /figma-ia-checker
FigmaのUI画面の情報設計をチェックし、問題点と改善提案をレポートするスキル。
使い方
/figma-ia-checker <FigmaのURL>
/figma-ia-checker <URL1> <URL2> <URL3> # フロー（複数画面）
動作
ユーザーからFigmaのURLを受け取ったら、以下の手順で実行する：
Step 1: 画面の取得
Figma MCPツール（mcp__figma__get_design_context または mcp__figma__get_screenshot）を使って、指定されたURLの画面情報とスクリーンショットを取得する。
URLが複数の場合はすべて取得し、フローとして扱う。
Step 2: 情報設計チェック
取得した画面を以下の 10カテゴリ で評価する。スコアは1〜5（5=問題なし、1=重大な問題）。
- ナビゲーション構造 — タブ・メニューの一貫性、階層の深さ
- 情報階層 — 重要情報の視覚的優先度、グルーピング
- ラベル・テキストの明確さ — 曖昧な表現・省略過多・専門用語の乱用
- 表記揺れ — 同義語の混在（ログイン/サインイン、削除/除去など）、全角/半角混在
- CTA配置・優先度 — 主要/副次アクションの関係、ボタン配置の一貫性
- ユーザーの認知負荷 — 一画面の情報量、選択肢の数、視線誘導
- 画面遷移の論理性 — 前後の文脈の一貫性、戻り導線（複数画面時に特に重視）
- コンテンツのグルーピング — 関連情報のまとまり、セクション分割
- エッジケース対応 — 空状態・エラー状態・長文溢れ・極端な値の考慮
- デザイントークン準拠 — ハードコードされた色・サイズ・スペーシングの使用
Step 3: レポート出力
以下のフォーマットでMarkdownレポートを出力する：
## Figma 情報設計チェックレポート
**対象画面**: [画面名]
**モード**: 単一画面 / フロー（N画面）
### 総合スコア: X/5 — [評価ラベル]
[全体サマリー 2〜3文]
---
### [カテゴリ名] — X/5 🔴/🟡/🟢
**優先度**: 高/中/低
**課題**
- 具体的な問題点
**改善提案**
- 具体的な改善案（UIの表現レベルまで）
[表記揺れの場合は混在表記の一覧テーブルも表示]
[エッジケースの場合はシナリオ×未対応状態×提案のテーブルも表示]
[デザイントークンの場合は要素×直接値×推奨トークンのテーブルも表示]
スコア絵文字の目安：
- 🟢 5〜4: 問題なし〜軽微
- 🟡 3: 要改善
- 🔴 2〜1: 問題あり〜重大
注意事項
- スクリーンショットが取得できない場合は
get_design_contextのテキスト情報のみで評価する - 画面が複数の場合、「画面遷移の論理性」を特に詳しく評価する
- 問題がないカテゴリも省略せずすべて出力する
- 提案は「改善してください」ではなく「○○を△△に変更してください」のように具体的に記述する