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

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

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

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

1

前提知識なし

CSS設計の知識を一切渡さず、「ヘッダーとカードリストのあるページのCSSを書いて」とだけ指示。

1ファイル 命名ルールなし 色ハードコード
パターン1を見る
2

FLOCSS を渡す

FLOCSS の公式ドキュメントを読み込ませて、同じ指示を出しました。層の概念はあるが、判断基準が曖昧。

l- / c- / p- 命名 @layer なし 判断が揺れる
パターン2を見る
3

mFLOCSS を渡す

mFLOCSS の設計思想と判断基準を読み込ませて、同じ指示を出しました。@layer で層の優先順位が構造的に保証。

@layer 3層トークン 論理プロパティ
パターン3を見る
DevTools で確認してみてください 各ページを開いて F12 → Styles パネルを見ると、パターン3だけ @layer component, @layer project と表示されます。どの層のスタイルが適用されているか、ブラウザが教えてくれます。

この実験のプロンプト全文は GitHub で公開しています。

設計の判断基準を体系的に学ぶなら → Zenn Books

リファレンス実装を見るなら → mflocss/starter