design-content-layout

name	design-content-layout
description	排版设计——版式系统、构图、页面层级、媒介适配。当需要设计文档或页面的视觉布局，或提到"排版""布局""layout""网格"

Layout Design — 排版设计

入口/出口

• 入口: 需要在实现前锁定版式方向、构图或页面层级
• 出口: 版式系统、构图原则、页面层级和导出约束定稿
• 指向: 需要视觉风格 → design-visual-direction；执行落地 → build-content-layout
• 输出路径: build-content-layout（下游 build 技能）
• 前置加载: CANON.md + design-workflow-design

何时不使用

• 只有内容微调，不改版式
• 已有不可修改模板且本次只做填充

Iron Law

排版设计先解决阅读路径和版式系统，再进入具体页面落地。

核心原则

1. Structure Before Surface
2. One Reading Path
3. Layout Must Fit the Medium
4. Consistency Enables Speed
5. Export Constraints Are Design Constraints

最佳实践输入

先读取 references/design-best-practices.md 和 references/design-pattern-extract.md，并把排版相关证据写入 02-design.md 的 Design References / Pattern Synthesis / Adopt / Reject。

扫描重点：

• Enterprise Product Patterns: 同类文档、deck、visual 的密度、构图、阅读路径和媒介约定
• Official Systems / Platform Rules: 品牌版式、平台尺寸、打印/投屏/导出规范、可读性规则
• Methods / Theory / Style Schools: 栅格、层级、留白、对齐、信息设计方法
• Anti-patterns / Verification: card 套 card、随机间距、多主焦点、强行 bento、导出错位
• Local Project Truth: 当前模板、素材比例、内容长度、输出格式和安全边距；项目根 DESIGN.md（如果存在，读取 spacing/rounded/layout token）

版式决策必须有来源层或本地约束支撑；不能只写审美词。

流程

Step 1：读取媒介约束

• 阅读 / 投屏 / 打印 / 社媒
• 尺寸、比例、页边距
• 字体、品牌、模板限制
• ✅ 验证点: 是否已读取项目根 DESIGN.md（如存在）中的 spacing/layout token？是否明确了具体媒介尺寸？

Step 2：定义版式系统

• 栅格
• 对齐线
• 间距尺度
• 标题 / 正文 / 注释层级
• ✅ 验证点: 间距尺度是否是有限的 5-7 级体系，而非随意取值？标题层级是否只有 3-4 级？

Step 3：定义构图

• 主焦点
• 分组关系
• 页面密度
• 关键信息如何占位
• ✅ 验证点: 每页是否只有一个主焦点？分组关系是否有明确的视觉依据（如间距、边框、背景）？

Step 4：记录导出约束

• 预览方式
• 安全边距
• 可能错位风险
• ✅ 验证点: 导出约束是否具体到像素级（如"安全边距 20px，出血 5mm"），而非"到时候看"？

输出契约

写入 02-design.md：

• 排版方向
• 页面视觉层级
• 构图 / 导出规格
• Adopt / Reject（排版模式）
• 不做清单

验证失败处理

失败场景	处理方式
版式方向只有审美词	改写成栅格、层级、密度和对齐规则
没有导出约束	停止，先明确媒介和尺寸
多个主焦点竞争	回退到单主焦点版式
排版模式无证据	补充 best-practice scan，写清 Adopt / Reject
间距尺度随意取值	建立有限层级间距体系（5-7 级），删除不在尺度内的值

常见说辞

说辞	现实	后果
“排版最后再调”	版式系统最后补，通常已经来不及。	版式后补 → 已有内容按随意版式固化，修改版式需重排 60-80% 页面，等于从头做
“先把内容塞进去”	靠塞内容会把结构问题隐藏起来。	内容塞入 → 结构缺陷被掩盖，后期版式调整发现密度不均匀，需要删减 40%+ 内容
“导出错了再说”	导出约束不提前处理，返工最大。	导出未提前规划 → 安全边距和出血问题导致 30-50% 页面需要重排，最昂贵的返工项

好坏示例

✅ Good: 证据驱动的排版决策

媒介约束: 投屏演讲（16:9, 1920x1080）+ 异步阅读 PDF

栅格: 12 列（内容区 8 列，侧边注释 4 列）
间距尺度: 4 / 8 / 12 / 16 / 24 / 32px（来源: DESIGN.md → spacing.scale）
标题层级: H1 28px/700 / H2 20px/600 / Body 14px/400 / Caption 12px/300

构图:
- 主焦点: 每页左侧 8 列承载核心数据或主张
- 分组: 8px 间距区分组内，24px 区分组间
- 降权: 侧边 4 列放注释和引用

导出约束:
- 安全边距: 20px（投屏自适应）
- PDF 出血: 5mm
- 文字不超出安全边距

Adopt: 左重右轻不对称构图（参考 McKinsey deck，Pattern Synthesis 来源 #1）
Reject: 对称三栏布局（与主焦点目标冲突）

❌ Bad: 抽象模板无具体决策

媒介: 普通页面
栅格: (未定义)
间距: 随缘
标题层级: 大标题、小标题、正文
导出: (未考虑)
不做清单: (未写)
→ 没有来源证据，没有 Adopt / Reject，版式无法落地

输出模板

排版设计产出应写入 02-design.md 的以下结构：

## Layout Design — [内容名称]

### 媒介约束
- 主媒介: [阅读 / 投屏 / 打印 / 社媒]
- 尺寸: [具体像素或物理尺寸]
- 限制: [品牌、字体、模板约束]

### 版式系统
- 栅格: [列数和分配]
- 对齐线: [关键对齐位置]
- 间距尺度: [5-7 级具体值]
- 标题层级: [3-4 级具体字号和字重]

### 构图
- 主焦点: [每页焦点位置和内容类型]
- 分组关系: [组内/组间间距规则]
- 页面密度: [高密度/低密度/混合]
- 降权方式: [如何视觉降权次要信息]

### 导出约束
- 安全边距: [具体值]
- 出血/裁切: [具体值]
- 错位风险: [可能问题及预防]

### Adopt / Reject（排版模式）
| 模式 | 来源 | 决定 | 理由 |
|------|------|------|------|
| [模式 A] | [来源层] | Adopt | [具体理由] |
| [模式 B] | [来源层] | Reject | [冲突点] |

### 不做清单
- [不做项 1]: [冲突来源或证据]
- [不做项 2]: [冲突来源或证据]

红旗 — STOP

• 没有画布或媒介约束
• 缺少排版 best-practice scan 或 Adopt / Reject
• 没有栅格或层级规则
• 构图中存在多个主焦点
• 导出规格完全未定义

验证清单

• 媒介约束明确
• 版式系统明确
• 构图明确
• 导出约束明确
• 排版决策已回溯到来源证据或 Local Project Truth
• 已写入 02-design.md