Entry/Exit
- Entry: Need to lock the layout direction, composition, or page hierarchy before implementation
- Exit: Layout system, composition principles, page hierarchy, and export constraints finalized
- Points to: Need visual style →
design-visual-direction; Execution and implementation →build-content-layout - Output path:
build-content-layout(downstream build skill) - Preload: CANON.md +
design-workflow-design
When not to use
- Only minor content adjustments, no layout changes
- There is an unmodifiable template and this time only filling is done
Iron Law
Layout design first solves the reading path and layout system, then moves on to specific page implementation.
Core principles
- Structure Before Surface
- One Reading Path
- Layout Must Fit the Medium
- Consistency Enables Speed
- Export Constraints Are Design Constraints
Best practice input
First read references/design-best-practices.md and references/design-pattern-extract.md, and write layout-related evidence into 02-design.md 's Design References / Pattern Synthesis / Adopt / Reject。
Scan focus:
- Enterprise Product Patterns: density, composition, reading paths, and media conventions for similar documents, decks, and visual artifacts
- Official Systems / Platform Rules: brand layout, platform dimensions, print/projection/export specifications, readability rules
- Methods / Theory / Style Schools: grids, hierarchy, whitespace, alignment, information design methods
- Anti-patterns / Verification: card inside card, random spacing, multiple primary focal points, forced bento, export misalignment
- Local Project Truth: current template, asset proportions, content length, output format, and safe margins; project root
DESIGN.md(if present, read spacing/rounded/layout tokens)
Layout decisions must be supported by a source layer or local constraints; aesthetic words alone are not enough.
Process
Step 1: Read media constraints
- Reading / projection / print / social media
- Size, ratio, margins
- Font, brand, template restrictions
- ✅ Verification point: Has the project root
DESIGN.md(if present) spacing/layout tokens been read? Are the specific media dimensions clear?
Step 2: Define the layout system
- Grid
- Alignment lines
- Spacing scale
- Heading / body / annotation hierarchy
- ✅ Verification point: Is the spacing scale a limited 5-7 level system rather than arbitrary values? Are there only 3-4 heading levels?
Step 3: Define composition
- Primary focal point
- Grouping relationships
- Page density
- How key information occupies space
- ✅ Verification point: Does each page have only one primary focal point? Do grouping relationships have a clear visual basis (such as spacing, borders, background)?
Step 4: Record export constraints
- Preview method
- Safe margins
- Potential misalignment risks
- ✅ Verification point: Are the export constraints specific to the pixel level (such as "safe margin 20px, bleed 5mm") rather than "we'll see when the time comes"?
Output contract
Write to 02-design.md：
- Layout direction
- Page visual hierarchy
- Composition / export specifications
- Adopt / Reject (layout patterns)
- Do-not-do list
Validation failure handling
| Failure scenario | Handling method |
|---|---|
| Layout direction only has aesthetic words | Rewrite into grid, hierarchy, density, and alignment rules |
| No export constraints | Stop, first clarify medium and dimensions |
| Multiple primary focal points competing | Fall back to a single-primary-focus layout |
| Typography mode has no evidence | Add a best-practice scan, clearly write Adopt / Reject |
| Spacing scale values chosen arbitrarily | Establish a limited hierarchical spacing system (5-7 levels), remove values outside the scale |
Common claims
| Claim | Reality | Consequence |
|---|---|---|
| "Adjust typography at the end" | Filling in the layout system at the end is usually already too late. | Layout added later → existing content is frozen according to arbitrary layout, and modifying the layout requires re-laying out 60-80% of pages, equivalent to starting over |
| "Just stuff the content in first" | Relying on stuffing content hides structural problems. | Content stuffed in → structural defects are masked, later layout adjustments reveal uneven density, requiring deletion of 40%+ of content |
| "Deal with export errors when they happen" | If export constraints are not handled in advance, rework is greatest. | Export not planned in advance → safe margin and bleed issues cause 30-50% of pages to require re-layout, the most expensive rework item |
Good and bad examples
✅ Good: Evidence-driven typography decisions
媒介约束: 投屏演讲（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: Abstract template with no specific decisions
媒介: 普通页面
栅格: (未定义)
间距: 随缘
标题层级: 大标题、小标题、正文
导出: (未考虑)
不做清单: (未写)
→ 没有来源证据，没有 Adopt / Reject，版式无法落地
Output template
Typography design output should be written into 02-design.md the following structure:
## Layout Design — [内容名称]
### 媒介约束
- 主媒介: [阅读 / 投屏 / 打印 / 社媒]
- 尺寸: [具体像素或物理尺寸]
- 限制: [品牌、字体、模板约束]
### 版式系统
- 栅格: [列数和分配]
- 对齐线: [关键对齐位置]
- 间距尺度: [5-7 级具体值]
- 标题层级: [3-4 级具体字号和字重]
### 构图
- 主焦点: [每页焦点位置和内容类型]
- 分组关系: [组内/组间间距规则]
- 页面密度: [高密度/低密度/混合]
- 降权方式: [如何视觉降权次要信息]
### 导出约束
- 安全边距: [具体值]
- 出血/裁切: [具体值]
- 错位风险: [可能问题及预防]
### Adopt / Reject（排版模式）
| 模式 | 来源 | 决定 | 理由 |
|------|------|------|------|
| [模式 A] | [来源层] | Adopt | [具体理由] |
| [模式 B] | [来源层] | Reject | [冲突点] |
### 不做清单
- [不做项 1]: [冲突来源或证据]
- [不做项 2]: [冲突来源或证据]
Red flags — STOP
- No canvas or medium constraints
- Missing typography best-practice scan or Adopt / Reject
- No grid or hierarchy rules
- Multiple primary focal points exist in the composition
- Export specifications are completely undefined
Validation checklist
- Medium constraints clear
- Layout system clear
- Composition clear
- Export constraints clear
- Typography decisions traced back to source evidence or Local Project Truth
- Written into
02-design.md