チームとエージェントが同じ部品とルールで作れるよう、「見た目・部品・エージェント」の3層のルールと /ds ページを作らせる

Lumenridge の無料プレイブック「Build your Product Design Harness」に沿って、実際のコードから DESIGN.md、部品ごとの説明、デザインシステム担当のサブエージェントを作らせ、全トークンと全状態を並べた /ds ページで確かめる。

色や余白の値が書かれていないと、エージェントは毎回その場で値を選び、ページが少しずつズレていく。色が合っていても、読み込み中の表示を勝手に別の形で作ることもある。既存のプロダクトにあとからルールを整えたいときに。

プレイブック（lumenridge.studio）を読ませてから、「Document」の段階として次の3層を作らせる（投稿のプロンプトの要約）。

見た目のルール：globals.css、tailwind.config、部品のコードから、実際に使われている色・余白・角丸・文字サイズ・動きを拾って DESIGN.md にする。部品の中で DESIGN.md と合わない直書きの値を探し、似たものをまとめて、多い順に上位10件を出す。
部品のルール：components/ui などの共通部品ごとに「何のための部品か・状態・使う場面・使わない場面」を1項目ずつ書く。名前違いで2回作られている部品や、ほかと見た目が違う読み込み中・空・エラーの表示も指摘させる。
エージェントのルール：.claude/agents に ds-manager サブエージェントを作り、担当範囲・作業前に読むもの・変更してよいファイル・必ず確認を取る場面を書く。CLAUDE.md には「UIを変える前に DESIGN.md と部品一覧を読み、変更後は ds-manager に確認させる」の1行を足す。
最後に /ds ページを作らせる。全トークンと共通部品の全状態を1ページに並べ、ライト／ダーク切り替えを付けて、合っていないものが一目で分かるようにする。
見つけた問題と、最初に作る・変えるファイルを一覧で出させ、確認するまで書かせない。