Skill

ui-review

Reviews and improves UI designs for iOS and Web using 5 specialist agents (UX, visual, accessibility, mobile UI, copy designers) that discuss and edit in Pencil tool.

iOS

Html

Css

design

accessibility

npx claudepluginhub sean-sunagaku/claude-code-plugin --plugin ui-review

Tool Access

This skill uses the workspace's default tool permissions.

Preview

5つの専門エージェントが Pencil でデザインを見ながら議論し、UIを添削・改善する。

Supporting Assets

references/report-template.mdreferences/review-criteria.md

SKILL.md

Similar Skills

ui-variations

Generates 5 custom UI design variations in Pencil with 15 parallel agents analyzing app codebase, domain, personas, competitors. Builds screens simultaneously for comparison, A/B testing, design exploration.

1 file

ui-variations

design-critique

Provides structured, actionable feedback on UI designs, Figma files, wireframes, and user flows using JTBD, Gestalt principles, and Nielsen heuristics with prioritized issues.

pm-design

ui-ux-design

Designs UI/UX interfaces: wireframes, design system tokens, UI components, navigation flows, WCAG accessibility, responsive breakpoints from product specs.

dev-team-kit-fv

Stats

Parent Repo Stars31

Parent Repo Forks0

Last CommitMar 3, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

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 でチーム削除