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 排版设计先解决阅读路径和版式系统，再进入具体页面落地。 核心原则 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