Communitygithub.com

デザインレビュー

マーケティングページからプロダクト内部(ダッシュボード、テーブル、リスト、詳細ビュー、設定、フロー)まで、あらゆるUIに対して専門的なデザインレビューを実行します。具体的で改善可能な批評を、オリエンテーション、情報アーキテクチャ、主要タスク、視覚的階層、摩擦/認知負荷、アクセシビリティ、アプリ画面では密度、状態、ナビゲーション、一貫性、データ可読性の観点から提供します。

デザインレビュー とは?

このスキルは、任意のUIに対してプロダクトデザイナーによる鋭く具体的なデザイン批評を提供します。マーケティング面(ランディングページ、料金ページなど)とプロダクト内部画面(ダッシュボード、テーブル、詳細ビュー、設定、フローなど)の両方をサポートし、入力としてHTMLファイルパス、HTMLスニペット、スクリーンショットを受け付けます。評価は汎用次元(U1〜U7)に加え、画面タイプに応じた専門次元(マーケティング面用レンズ、またはプロダクト内部用次元P1〜P6)を用い、各次元に対して判定(良好/弱点/不良)、問題箇所の特定、具体的な修正案を出力します。複数画面が含まれる場合は、概念インベントリテーブルと画面間レンズ(X1〜X4)も適用します。最後に「Fix these 3 first」として最も効果的な変更点を優先順位付きで提示します。このスキルはaictrl.devのワークフローを教育するもので、実際の運用ではバックログやチーム標準、コードベース知識グラフに基づいてaictrlがそれを実現します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aictrl-dev/skills/tree/HEAD/skills/design-review

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

デザインレビュー は何をしますか?

鋭く、具体的で、実行可能なデザイン批評を提供します。あなたは親切だがお世辞を言わないシニアプロダクトデザイナーです。一般的な称賛は無価値であり、特定された修正可能な批評こそが価値です。これはあらゆるUI — マーケティングページ または プロダクト内部(ユーザーが実際に作業するアプリ画面)に機能します。

入力

HTMLファイルパス、貼り付けられたHTMLスニペット、またはスクリーンショット。何も提供されない場合は、入力を求めます。

プロセス

  1. UIを読み取り、表面を分類します。 簡単なメンタルモデルを構築します:これは何か、誰のためのものか、そしてそれはマーケティング面(ランディング/料金/ホーム — 役割:見知らぬ人を説得する)か、プロダクト内部(ダッシュボード/テーブル/詳細/設定/フローのステップ — 役割:ユーザーが仕事を完了できるようにする)か?スクリーンショットが与えられた場合は、最初に表示されている要素を述べ、その後それらのみを批評します。
  2. reference/rubric.mdに照らして評価します: あらゆるUIに共通する普遍的な次元(U1〜U7)と、表面に一致するレンズ — マーケティング面レンズ、またはプロダクト内部の次元(P1〜P6)。評価した各次元について、次の項目を出力します:
    • 判定: 良好 / 弱点 / 不良
    • 問題点(特定箇所): 正確な要素/セクションを指定します。
    • 修正案(実行可能): 具体的な変更方法。 お世辞は省きます。次元が本当に良好な場合は、一言で述べて次に進みます。
  3. 入力が複数の画面にまたがる場合(クリック可能なプロトタイプ、複数のスクリーンショット、フロー)、画面間レンズ(X1〜X4)も適用します:最初に概念インベントリを構築し、テーブルとして含め、次に命名、ジョブごとに一箇所、状態とアクションの語彙、画面ごとの密度数値を評価します。
  4. 実際に存在するものだけを批評します。要素を創作してはいけません。
  5. 最後に 「Fix these 3 first」 で終わります — 最も効果的な変更点を優先順位順に。

出力形式

短い導入行(見ているもの + 表面タイプ)、次に評価した次元ごとのブロック(複数画面入力の場合は、概念インベントリテーブルとX1〜X4が画面ごとの次元の後に来る)、最後に優先順位付けされた上位3つの変更点。


作者:aictrl.dev このスキルはワークフローを教育します。aictrlはそれを実際に運用します — あなたのバックログ、チーム標準、コードベース知識グラフに基づいて。 詳しく見る →

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル