AIで作るサイトがページごとにバラバラになるなら、3つの共通ルールを先にスキルへ書く

どんな問題を解決するか / いつ使うか

Claude Code や Codex でページを増やしていくと、ページごとに見出しの大きさや余白がずれて、同じサイトに見えなくなるとき。複数ページのサイトを作り始める前に入れる。

先に決める3つ

1. 見出しの大きさは4段だけ（例：ページタイトル・セクション見出し・小見出し・本文寄りの見出し）。それ以外のサイズを作らせない。
2. 余白は8の倍数（8, 16, 24, 32, 48, 64…）。半端な値を禁止する。
3. ヘッダーとフッターは全ページ共通。ページごとに作り直させず、1つの部品を使い回させる。

スキル・ルールファイルへの書き方の例

## サイト共通ルール（必ず守る）
- 見出しサイズは h1〜h4 の4段のみ。新しいサイズを作らない
- margin / padding / gap は 8px の倍数だけを使う
- ヘッダー・フッターは共通コンポーネントを読み込む。ページ内で個別に作らない

注意点

• 数は投稿者の例。大事なのは「段数を決めて増やさない」「単位を1つに決める」こと。
• 既に作ったページがある場合は、ルールを書いたあとに全ページをこのルールで点検させる。

関連

• Claude Codeにサイトを頼むときは「参考サイトの分析→目的・雰囲気・動き・量→声で中身→見たままの言葉で修正→ルールをスキル化」の5手順で進める

出典

• @tatsu_studio post