AIにCSSを書かせたら、
設計はどう変わるのか？
同じ AI に、同じページを、3つの条件で書かせました。
見た目は同じ。設計がまったく違います。
3つのパターンを見比べてみてください
DevTools で確認してみてください
各ページを開いて F12 → Styles パネルを見ると、パターン3だけ
@layer component, @layer project と表示されます。どの層のスタイルが適用されているか、ブラウザが教えてくれます。もうひとつ、パターン3の token/color.css でプリミティブ変数（--_blue-500）を1箇所変えると、ボタン・ロゴの色とナビのホバー色がまとめて変わります。パターン1で同じ変更をするには、ファイル中に散らばった色コードを探して回ることになります。
この実験のプロンプト全文は GitHub で公開しています。
設計の判断基準を体系的に学ぶなら → Zenn Books
リファレンス実装を見るなら → mflocss/starter