スキル自身の言葉で
ライブサイトをデザイナーの視点でQAします。ユーザー自身のブラウザでページを開き、375、768、1440の各幅でスクリーンショットを撮影し、視覚的階層からインタラクション状態まで10のカテゴリーで評価を行い、その後ソースを編集して見つかった問題を修正します。修正は1件につき1コミットとし、前後のスクリーンショットで再検証します。
深さはデフォルトで5〜8ページですが、フィーチャーブランチ上でURLが指定されていない場合は差分ベースになります。読者は2つの見出しの評価、重み付けされたDesign Scoreと単独のAI Slop Score、さらに[kicker-above-heading]や[gradient-text]といった判断基準の背後にある30の名前付き検出ルールを得られます。
生成されるもの
- 実行ディレクトリに構造化されたMarkdown形式の監査レポートが出力されます。
- 以降の実行で回帰比較を行うためのdesign-baseline.jsonファイルが書き出されます。
- 適用したすべての修正について、前後のスクリーンショットのペアが得られます。
- ユーザーがフェーズ2の提案を受け入れた場合、抽出された観察結果から作成される任意のDESIGN.mdです。
仕組み
- 01分析する前に反応を確認する
フェーズ1では対象を開き、フルページのデスクトップスクリーンショットを撮影し、目が最初に向かう箇所を示す構造化された第一印象を記述します。
- 02レンダリングされたシステムを抽出する
フェーズ2ではページ内のフォント、色、見出しのスケール、タッチターゲットを調査し、その結果をDESIGN.mdとして保存することを提案します。
- 03ページごとに監査する
フェーズ3では、各ページごとにコンソールフック、インタラクティブスナップショット、注釈付きスクリーンショットを実行し、3つのビューポート幅でこれを繰り返します。
- 04フローを体感する
フェーズ4では2〜3のユーザーフローをたどり、各アクション後のスナップショットの差分を確認し、摩擦や修復のためのグッドウィルスコアを追跡します。
- 05一度に1つの発見事項を修正する
フェーズ8では最小限の変更を行い、それ単独でコミットし、次の発見事項に移る前に再テストします。
- 062つの見出しを評価する
デザインスコアは10のカテゴリーにわたる重み付け平均であり、AI slopの評価は単独で成り立っています。