スキル自身の言葉で
design-critiqueは、Figma URL、スクリーンショット、または文章による説明を持つ人であれば、探索段階から最終仕上げまでのどの段階でも共通のデザインレビューを実行します。第一印象、使いやすさ、視覚的階層、一貫性、アクセシビリティという5つの要素からなるフレームワークで進めます。フィードバックのルールにより、エージェントは曖昧な指摘を超え、競合する要素を明示し、デザイン原則やユーザーニーズに基づいて理由を説明し、代替案を提案し、うまく機能している点も認めます。
出力は、全体的な印象、重大度別（Critical、Moderate、Minor）のユーザビリティ表、一貫性の表、アクセシビリティに関する注記、うまく機能している点のリスト、そして3つの優先推奨事項を含むMarkdown形式の批評です。デザインツールやユーザーフィードバック連携が存在する場合は、コンポーネントやトークンを検査するか、サポートチケットを相互参照します。
生成されるもの
- 重大度レベルと推奨される修正案を付けて各所見を一覧化したユーザビリティ表。
- デザインシステムに対するタイポグラフィ、スペーシング、色の逸脱を示す一貫性テーブルです。
- 影響度順に並べた優先度別の推奨事項リストで締めます。
仕組み
- 01デザインをすぐに提示する
Figmaから取得されたFigma URLと参照ファイルが読み込まれます。どちらも存在しない場合、エージェントはユーザーにデザインの説明や共有を求めます。
- 022秒の第一印象から始める
分析に入る前に、最初に目を引くもの、それが正しいか、感情的な反応、そして目的が即座に伝わるかどうかを記録します。
- 035つの観点を順番に確認する
ユーザビリティ、視覚的階層、一貫性、アクセシビリティにはそれぞれ独自のプロンプトが用意されており、読み取り順序や余白からコントラスト比やタッチターゲットまでを扱います。
- 04明示されたスタイルルールに基づいてフィードバックを書く
指摘は具体的で、説明が伴い、代替案の提案とセットで、すでに機能している部分とのバランスが取れている必要があります。
- 05Markdown出力テンプレートを埋める
固定された構成は、全体的な印象、深刻度付きのユーザビリティテーブル、階層に関するメモ、一貫性テーブル、アクセシビリティ、うまく機能している点、そして優先度別の推奨事項リストです。