デザインシステムをAIエージェントに読ませ、UI変更はBefore/Afterスクリーンショットでレビューする

エージェントがコードを書くたびにデザインシステム文書を参照させ、変更結果は左右比較のスクショで確認する。

Claude Code などのコーディングエージェントにUI実装を任せるチーム。「どのpadding？」問題や、エージェントごとに見た目がズレる問題を防ぎたいとき。

デザインシステム（色・タイポ・余白・コンポーネントの使い分け）を、エージェントが読めるMarkdown等の1ファイルにまとめ、リポジトリに置く（人間は読まなくてもエージェントは毎回読む）。
エージェント向け指示に「UIを書く前に必ずこのファイルを参照」と明記。複数エージェントが同じファイルを読むので仕上がりが揃う。
UI変更時はエージェントに変更前後のスクリーンショットを撮らせ、横並びで提示させる。コードを読まずに見た目で可否判断できる。
大きな変更計画は、段階ごとに短い説明付きの「ステップ図」で示させると現状と計画を把握しやすい。