| name | ui-review |
| description | 5つの専門エージェント（UXデザイナー・ビジュアルデザイナー・アクセシビリティ専門家・ モバイルUI専門家・コピーデザイナー）がチームでUIを添削・改善するスキル。 Pencil(.pen)で画面デザインを作成・修正しながら、リアルタイムで議論する。 新規画面デザインの作成と既存UIのレビュー・改善の両方に対応。 iOS / Web / 汎用プラットフォームに対応。 Use when: UIを添削したい、画面デザインをレビューしたい、UIを改善したい、 デザインの品質を上げたい、UIのフィードバックがほしい、画面を作りたい。 Triggers: "UIレビュー", "UI添削", "デザインレビュー", "画面レビュー", "UIを見て", "デザインチェック", "UI改善", "画面デザイン", "ui review", "design review", "UI作成", "画面作成", "UIフィードバック"
|
UI Review Skill
5つの専門エージェントが Pencil でデザインを見ながら議論し、UIを添削・改善する。
ワークフロー
- ユーザーからデザイン情報をヒアリング
- Pencil で対象デザインを準備（新規作成 or 既存を開く）
- Agent Team を作成し、5エージェントを並列起動
- スクリーンショットとノード構造をエージェントに共有
- 2〜3ラウンドの議論・フィードバック
- フィードバックに基づき Pencil でデザイン修正
- 最終レポートを MD で出力
Step 1: ヒアリング
以下を確認する（不明ならユーザーに質問）:
- デザインタスク: 新規画面作成 or 既存UIレビュー
- 対象画面: どの画面か（ログイン、ホーム、設定 等）
- プラットフォーム: iOS / Web / 両方
- ターゲットユーザー: 年齢層、技術レベル
- 既存 .pen ファイル: あれば開く、なければ新規作成
- 重点的に見てほしい観点: ある場合のみ（UX、配色、アクセシビリティ等）
Step 2: Pencil でデザイン準備
既存デザインのレビューの場合
get_editor_state で現在の .pen ファイルを確認- 対象画面のスクリーンショットを
get_screenshot で取得
batch_get でノード構造を取得
新規画面作成の場合
get_guidelines で適切なガイドライン取得（iOS なら ios-design スキルも活用）get_style_guide_tags → get_style_guide でスタイルガイド取得- 初期デザインを
batch_design で作成
- スクリーンショットを取得
Step 3: チーム作成とエージェント起動
TeamCreate で ui-review チームを作成。以下5エージェントを 1つのメッセージで並列に Task ツールで起動する。
| name | 役割 | 主な評価観点 |
|---|
ux-designer | ユーザビリティ・情報設計 | フロー、操作性、ヒューリスティック |
visual-designer | 配色・タイポグラフィ・レイアウト | 色、余白、階層、シンプルさ |
accessibility-expert | アクセシビリティ | コントラスト、タッチ、WCAG |
mobile-specialist | プラットフォーム準拠 | iOS HIG、Material、レスポンシブ |
copy-designer | マイクロコピー・テキスト | ラベル、エラー文、CTA、トーン |
タスク作成
TaskCreate で7つのタスクを作成:
- ux-designer: UX/ユーザビリティレビュー
- visual-designer: ビジュアルデザインレビュー
- accessibility-expert: アクセシビリティレビュー
- mobile-specialist: プラットフォーム準拠レビュー
- copy-designer: コピー/マイクロコピーレビュー
- デザイン修正: タスク1〜5完了後（
addBlockedBy: ["1","2","3","4","5"]）
- 統合レポート: タスク6完了後（
addBlockedBy: ["6"]）
起動設定
各エージェントのプロンプトにデザイン情報を埋め込んで起動する:
subagent_type: "ux-designer" # agents/ で定義済みのサブエージェント名
team_name: "ui-review"
model: "opus"
mode: "bypassPermissions"
run_in_background: true
プロンプトに含める情報:
- 画面の概要と目的
- プラットフォーム（iOS/Web/両方）
- ターゲットユーザー
- デザインのノード構造（batch_get の結果を要約）
- スクリーンショットの説明（色、レイアウト、要素の配置を言語化）
- 重点的に見てほしい観点（あれば）
Step 4: 議論の進行
エージェントは自律的に議論する:
Round 1: 各エージェントが独立にレビュー → 互いにフィードバック共有
Round 2: 他の観点を考慮して改善案を修正 → 矛盾する提案は議論で解決
Round 3: 最終改善案をスコアリング → チームリーダーに報告
リーダー（自分）の役割
- 基本見守り。エージェントが詰まった場合のみ介入
- ユーザーが途中で方向性を変えたい場合、全エージェントに共有
- ユーザーからの質問や意見をエージェントに中継
- Pencil の操作はリーダーが担当（エージェントの提案に基づき修正）
ユーザー参加
ユーザーがリアルタイムで議論に参加したい場合:
- ユーザーの意見を該当エージェントに SendMessage で中継
- エージェントの議論状況をユーザーに要約して報告
- ユーザーが「この方向で」と指示したら、全エージェントにブロードキャスト
Step 5: デザイン修正
エージェントの提案に基づき、リーダーが Pencil で修正を実施:
- Critical Issues から優先的に修正
batch_design で修正を適用get_screenshot で修正結果を確認- 必要に応じてエージェントに修正結果を共有して再レビュー
Step 6: 最終レポート出力
全報告が揃ったら統合レポートを MD で出力する。テンプレートは references/report-template.md を参照。
詳細な評価基準は references/review-criteria.md を参照。
出力先: プロジェクトルートに UI_REVIEW_REPORT.md
Step 7: クリーンアップ
- 全エージェントに
shutdown_request を送信
- 全員シャットダウン後に
TeamDelete でチーム削除
