アプリ UI の監査

機能をリリースしていくうちに、実装がデザインシステムから少しずつずれていくのはよくあることです。ここでフォントの太さが変わり、あちらで根拠のないカードのボーダーが紛れ込み、別の場所では hex コードが近似値になってしまいます。

Stitch CLI と /stitch スキルを使えば、実行中のアプリを DESIGN.md と比較するローカルデザインレビューを実行できます。レビューのすべてのステップはクラウド呼び出しを行わず、お使いのマシン上でローカルに実行されます。

/stitch スキルでレビューを実行する

リポジトリに DESIGN.md があり、Stitch スキルがインストールされている状態（stitch agent-skills add）で、開発サーバーを起動し、コーディングエージェントにルートのレビューを依頼します。

エージェントは実行中のローカル開発サーバーを検出し、ライブのハイドレート済み DOM（.stitch/captured-dom.html）と 1280x800 の検証用スクリーンショット（.stitch/verify-capture.png）をキャプチャし、両方を DESIGN.md と比較します。

曖昧なアドバイスではなく、実際の CSS セレクター、スクリーンショットの領域、DESIGN.md のルールに基づいた、優先順位付きの指摘リストが得られます。さらにエージェントは一時停止し、どの修正を先に適用するかをあなたが選べます。

ターミナルからページをキャプチャする

エージェントに渡す前に、自分でスナップショットをキャプチャすることもできます。

stitch capture browser \
  --url "http://localhost:5173/dashboard" \
  -o .stitch/captured-dom.html

stitch capture browser を実行すると、ローカルに 2 つのファイルが書き出されます。

• .stitch/captured-dom.html — 計算済みスタイルと構造マークアップを含む、ハイドレート済み DOM。
• .stitch/verify-capture.png — ビューポートに実際にレンダリングされた内容の 1280x800 スクリーンショット。

スクリーンショットにログイン画面やモーダルがページを遮っている様子が写っている場合は、開いているブラウザタブ内で直接ログインし、再読み込みせずにそのアクティブタブを再キャプチャします。

stitch capture browser --page 1 -o .stitch/captured-dom.html

レビューで確認すべきポイント

/stitch に監査を任せる場合でも、自分でスナップショットを確認する場合でも、次の 4 つのチェックに注目してください。

• カラーとサーフェスのトークン — 背景、ボーダー、主要なアクセントは DESIGN.md の正確な hex 値を使っていますか。それとも任意のグレーが紛れ込んでいますか。
• タイポグラフィと数字 — 見出し、本文、データ表示は、タイプスケールと表形式数字のルールに一致していますか。
• 空間のリズム — パディングとギャップの値は 4px/8px グリッドに従っていますか。それとも要素がコンテナの端に窮屈に寄っていますか。
• 視覚的な抑制 — プレーンなタイポグラフィのほうがすっきりする場所に、余計なステータスドット、ピル型バッジ、入れ子のボーダーが現れていませんか。

Stitch キャンバスで視覚的な修正を試す

監査でレイアウトの問題が見つかり、アプリケーションコードに手を入れる前にいくつかの視覚的オプションを試したい場合は、キャプチャしたスナップショットを Stitch キャンバスプロジェクトへ直接アップロードします。

stitch upload screen .stitch/captured-dom.html \
  --route "/dashboard" \
  --title "Dashboard Current"

そこから stitch edit screen または stitch generate variants を使ってキャンバス上でレイアウト変更を試し、採用したデザインをコードベースに戻します。