Layout discipline

排版纪律（Layout Discipline）

这是一道**"拍齐工序"**：在内容和审美都做完之后，把版面里"歪的、糊的、不成体系的"东西按一套死规矩拍整齐。它不负责让设计有个性（那是审美层的事），只负责消灭 AI 出网页时最常见的三类毛病：字号层级浑浊、间距随手乱写、卡片各长各的。

适用产物：单文件、自包含的 .html（内嵌 <style>，双击即可打开，不依赖任何框架或构建工具）。

工作流程

1. 正常完成用户要的网页/demo 内容。
2. 写样式时，全程只引用本技能定义的变量（字号、间距、颜色、圆角全部走 :root 里的 token），不要在元素上手写裸数值。
3. 产出后，对照"交付前自检清单"逐条过一遍；如条件允许，运行 scripts/check_layout.py 做一次自动体检。
4. 把体检发现的问题改掉，再交付。不要把带毛病的版面直接给用户。

为什么要走变量而不是手写数值：一旦在某个元素上手写了 padding: 13px 或 #3a7bd5，这个值就脱离了体系，下次想统一调整就调不动，版面也会慢慢"长歪"。变量是唯一事实来源。

---

六条军规

1. 字号只用 5 档，相邻档位拉开差距

裸眼能分清层级的前提是相邻字号差距足够大（比例 ≥ 1.25）。14px / 15px / 16px 挤在一起是 AI 排版"糊"的头号原因。固定使用下面 5 档，不要发明第 6 个字号：

:root {
  --text-caption: 0.8rem;    /* 说明、图注、法务小字 */
  --text-body:    1rem;      /* 正文，基准 16px */
  --text-subhead: 1.25rem;   /* 小标题、卡片标题 */
  --text-heading: 1.563rem;  /* 区块标题 */
  --text-display: 1.953rem;  /* 页面主标题 / Hero */
}

关于"次要文字"：不要用更小的字号来表示次要信息，而是用更浅的颜色或更轻的字重来区分。多一档字号就多一分浑浊；次要靠颜色，不靠尺寸。

2. 间距只用 4 的倍数

所有 margin / padding / gap / 间距 只能取 4 的倍数。禁止出现 13px / 27px / 35px 这类"歪数"。固定使用这条阶梯：

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

小元素内部用 4/8/12，模块之间用 16/24/32，大区块之间用 48/64。同一层级的间距必须用同一个值——卡片之间都是 24px，就不要这张隔 24px、下一张隔 20px。

3. 对齐铁律

• 统一左边界：同一栏里所有元素（标题、正文、按钮）左边缘对齐到同一条线，不要这个缩进那个不缩进。
• 统一栏距（gutter）：多栏布局里，栏与栏之间的间距处处相等。
• 网格优先：多个并排的卡片/项目，用 CSS Grid 等宽排列（display: grid; gap: var(--space-6);），不要用一堆手动 margin 凑位置。
• 光学对齐：图标和文字垂直居中对齐（align-items: center），不要让图标比文字高一截或矮一截。

4. 卡片标准件

所有卡片用同一套规格，不要每张卡片各长各的：

:root {
  --radius:     12px;
  --shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --card-pad:   var(--space-6);   /* 24px 内边距 */
}
.card {
  padding: var(--card-pad);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);            /* 卡内元素统一 12px 间隙 */
}

卡片内部结构固定为 标题 → 正文 → （可选）操作区，每块之间用统一的 gap，而不是各写各的 margin。

5. 颜色全部走变量，集中定义

所有颜色在 :root 顶部一次性定义，按角色命名（不按数值），正文里只引用、不再手写色值：

:root {
  --bg:      #ffffff;   /* 页面背景 */
  --surface: #f7f8fa;   /* 卡片/面板表面 */
  --text:    #1a1d24;   /* 主文字 */
  --text-muted: #6b7280;/* 次要文字（见军规 1） */
  --border:  #e5e7eb;   /* 描边、分隔线 */
  --accent:  #2563eb;   /* 强调色、主按钮 */
}

按角色命名（--text 而不是 --gray-900），是因为有一天你想把主文字调成深蓝，只需改一个变量，而不用全局找替换。正文里出现任何裸 hex 色值都算违规。

6. 行高与垂直节奏

:root {
  --leading-body: 1.6;   /* 正文行高，保证好读 */
  --leading-tight: 1.25; /* 标题行高，紧凑 */
}
body { font-size: var(--text-body); line-height: var(--leading-body); color: var(--text); }
h1, h2, h3 { line-height: var(--leading-tight); }

段落之间用统一的下边距（如 var(--space-4)），保证从上到下的阅读节奏均匀，不要时疏时密。

---

交付前自检清单

交付任何网页/demo 前，逐条核对。任何一条不过，回去改了再交：

1. 字号：页面上出现的字号是否全部落在 5 档之内？有没有冒出第 6 个字号？
2. 间距：所有 margin/padding/gap 是否都是 4 的倍数？有没有 13px、27px 这种歪数？
3. 对齐：同一栏里元素左边界是否齐平？并排卡片是否等宽等距？图标和文字是否垂直居中？
4. 卡片：所有卡片是否共用同一套圆角、阴影、内边距？有没有"特立独行"的卡片？
5. 颜色：是否所有颜色都在 :root 里定义、正文里只引用？有没有散落的裸 hex？
6. 节奏：正文行高是否 ≥1.5？段落间距是否统一？

自动体检（推荐）

如能运行脚本，把生成的 HTML 文件路径交给检查脚本，它会一次性揪出"非 4 倍数间距、超出 5 档的字号、散落的裸色值"三类问题并给出行号：

python3 scripts/check_layout.py 你的文件.html

脚本只读取、不修改文件，只用 Python 标准库、零依赖。拿到报告后，按报告把问题改掉再交付。

---

一个对照示例

违规（AI 默认会写成这样）：

<div style="padding:13px; margin-bottom:18px; border-radius:7px; box-shadow:0 2px 9px #00000022;">
  <h3 style="font-size:17px; margin-bottom:6px;">标题</h3>
  <p style="font-size:15px; color:#888; line-height:1.3;">正文……</p>
</div>

问题：13/18/7/6px 全是歪数；17/15px 不在档位且层级糊；颜色硬编码；行高过紧。

合规（用本技能拍齐后）：

<div class="card">
  <h3 style="font-size:var(--text-subhead);">标题</h3>
  <p style="font-size:var(--text-body); color:var(--text-muted); line-height:var(--leading-body);">正文……</p>
</div>

所有数值走变量，层级清晰，间距成体系，改一处即可全局生效。