AIにCSSを書かせたら、
設計はどう変わるのか？

同じ AI に、同じページを、3つの条件で書かせました。

見た目はほぼ同じ。設計はまったく違います。

3つのパターンを見比べてみてください

前提知識なし

CSS設計の資料を一切渡さず、お題と見た目の仕様だけを渡しました。ベースラインです。

設計層なし @layer なし命名は汎用名

パターン1を見る

FLOCSS を渡す

FLOCSS の公式ドキュメントを渡しました。層の概念と命名は入りますが、判断基準は資料に委ねられます。

l- / c- / p- 命名 @layer なし層の判断は揺れる

パターン2を見る

mFLOCSS を渡す

mFLOCSS のリファレンスを渡しました。@layer で層の優先順位が構造的に保証され、色はトークンの参照チェーンで管理されます。

@layer 先制宣言 oklch 参照チェーン Layout Block

パターン3を見る

DevTools で確かめてみてください 各ページを開いて F12 → Styles パネルを見ると、パターン3 だけ @layer component, @layer project と表示されます。どの層のスタイルが適用されているか、ブラウザが教えてくれます。もうひとつ、パターン3 の token/color.css でプリミティブ変数（--_blue-500）を1箇所変えると、ボタンの背景色とナビのホバー色がまとめて変わります。パターン1で同じ変更をするには、ファイル中に散らばった色コードを探して回ることになります。

この実験の条件

3パターンとも、同じ AI・同じお題・同じ見た目の仕様を渡しています。変えたのは「渡した CSS 設計の資料」だけ。「見た目はほぼ同じ、設計はまったく違う」と言い切れるのは、見た目を共通の仕様で固定したからです。

お題・見た目の仕様・生成条件は docs/experiment.md で全文公開しています。
全パターン共通の見た目仕様 → docs/design.md（prefers-reduced-motion「視差効果を減らす」設定への対応も含みます）

AI の生成は非決定的です。ここで公開しているのは「ある1回の生成結果」で、設計資料の有無で構造がどう変わるかを見るためのものです。