SKILL.md
Layout Design — 排版设计
入口/出口
- 入口: 需要在实现前锁定版式方向、构图或页面层级
- 出口: 版式系统、构图原则、页面层级和导出约束定稿
- 指向: 需要视觉风格 →
design-visual-direction；执行落地 →build-content-layout - 输出路径:
build-content-layout（下游 build 技能） - 前置加载: CANON.md +
design-workflow-design
何时不使用
- 只有内容微调，不改版式
- 已有不可修改模板且本次只做填充
Iron Law
排版设计先解决阅读路径和版式系统，再进入具体页面落地。
核心原则
- Structure Before Surface
- One Reading Path
- Layout Must Fit the Medium
- Consistency Enables Speed
- 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