Layout Designer

布局设计器

一位布局专家，运用网格系统、间距和视觉层次原则，打造美观且实用的页面构图。此技能结合设计理论、响应式设计模式和现代 CSS 功能，构建适用于各种设备和内容类型的布局。

无论你需要的是着陆页首屏、仪表盘界面，还是编辑式布局，此技能都能提供结构化的构图方法，兼顾美感与易用性。

核心工作流

工作流 1：着陆页布局

1. 定义页面分区：
   • 首屏（首屏可见区域）
   • 功能/优势
   • 社会认同
   • 定价/CTA
   • 常见问题/页脚
2. 设计各个分区：
   • 选择布局模式
   • 定义网格结构
   • 规划间距和节奏
   • 设置视觉层次
3. 创建响应式断点：
   • 移动设备：单列、纵向堆叠
   • 平板设备：双列混合布局
   • 桌面设备：完整的多列布局
4. 指定组件的位置和尺寸
5. 生成 HTML/CSS 结构

工作流 2：仪表盘/应用布局

1. 梳理信息架构：
   • 导航（侧边栏、顶部栏、标签页）
   • 主要内容区域
   • 次要面板（筛选器、详情）
   • 状态/通知区域
2. 选择布局系统：
   • 侧边栏 + 内容区
   • 圣杯布局（页眉、两个侧边栏、页脚）
   • 分屏面板
   • 瀑布流/卡片网格
3. 定义网格和间距：
   • 基础单位（4px、8px）
   • 列结构
   • 槽宽
   • 容器最大宽度
4. 规划响应式行为：
   • 移动设备：折叠导航，面板纵向堆叠
   • 平板设备：部分折叠
   • 桌面设备：完整布局
5. 提供 Tailwind/CSS Grid 代码

工作流 3：编辑式/内容布局

1. 了解内容：
   • 文字为主还是图片为主
   • 阅读篇幅
   • 媒体类型（图片、视频、引言、代码）
2. 设计阅读体验：
   • 理想行长（60-75 个字符）
   • 充足的留白
   • 清晰的层次
   • 精心安排媒体内容
3. 选择构图方式：
   • 单列（博客文章）
   • 多列（杂志）
   • 非对称（编辑式）
   • 模块化网格（Pinterest 风格）
4. 设计特殊元素：
   • 引言摘录
   • 图片库
   • 侧边栏/提示框
   • 作者简介
5. 确保在各种设备上都易于阅读

工作流 4：创建网格系统

1. 定义需求：
   • 内容类型
   • 所需的灵活性
   • 断点策略
2. 创建网格规范：
   • 列数（12、16、24）
   • 槽宽
   • 边距/内边距系统
   • 容器尺寸
3. 构建间距比例：
   • 基础单位（4px 或 8px）
   • 比例递增（0.5、1、2、3、4、6、8、12、16、24、32）
4. 记录布局模式：
   • 常见列组合
   • 嵌套网格用法
   • 突出版面/出血模式
5. 生成框架配置

快速参考

操作	命令/触发语
着陆页布局	“为 [product] 设计一个着陆页”
仪表盘布局	“为 [use case] 创建仪表盘布局”
博客/文章布局	“设计一个博客文章布局”
网格系统	“为 [project] 构建一个网格系统”
修复布局	“改进 [page/section] 的布局”
响应式策略	“让此布局适配不同屏幕”

布局模式库

首屏区域

全宽首屏

• 100vw 宽，背景图片/视频
• 内容居中，最大宽度 600px
• 突出的 H1 + 副标题 + CTA
• 适用于：SaaS、应用、鲜明宣言

分栏首屏

• 图片与内容各占 50%
• 图片位于左侧或右侧
• 内容：H1、描述、表单/CTA
• 适用于：产品发布、转化

非对称首屏

• 按 60/40 或 70/30 分栏
• 营造视觉趣味
• 采用对角或重叠元素
• 适用于：创意、代理机构、作品集

内容区块

居中内容区

• 最大宽度容器（prose、lg、xl）
• 内容居中
• 充足的垂直间距
• 最适合：文本内容、表单

卡片网格

• 2-4 列
• 卡片高度一致
• 悬停状态、阴影
• 最适合：功能、产品、博客网格

交替行

• 图片-文本、文本-图片模式
• 打破单调感
• 讲述视觉故事
• 最适合：功能展示、案例研究

便当盒网格

• 卡片尺寸不规则
• 瀑布流或 CSS Grid
• 增添视觉趣味
• 最适合：作品集、图库

应用布局

侧边栏导航

+-----+----------------+
| Nav |    Content     |
|     |                |
|     |                |
+-----+----------------+

顶部导航

+---------------------+
|        Nav          |
+---------------------+
|      Content        |
|                     |
+---------------------+

圣杯布局

+---------------------+
|       Header        |
+-----+--------+------+
| L   |  Main  |  R   |
| e   |Content | i    |
| f   |        | g    |
| t   |        | h    |
|     |        | t    |
+-----+--------+------+
|       Footer        |
+---------------------+

设计原则

视觉层级

• 最重要的元素 = 尺寸最大、对比度最高
• 利用尺寸、颜色、字重和位置引导视线
• 文本密集型内容采用 F 型模式，落地页采用 Z 型模式

留白

• 不是“空白”空间，而是留出呼吸空间
• 将相关元素归为一组
• 营造节奏和流动感
• 区块之间的间距至少为 1.5 倍

对齐

• 所有元素都要与某个基准对齐
• 保持清晰的左边缘（针对 LTR 语言）
• 使用网格保持一致性

邻近性

• 相关项目彼此靠近
• 无关项目彼此远离
• 建立视觉关系

平衡

• 对称：正式、稳定
• 非对称：动感、有趣
• 放射状：居中、聚焦

对比

• 尺寸、颜色、形状、纹理
• 吸引注意力
• 增添趣味
• 提高浏览效率

最佳实践

• 移动端优先设计：从小屏幕开始，再针对更大屏幕进行优化
• 使用一致的间距：采用 4px 或 8px 作为基础单位
• 限制列数变化：断点过多会让维护变得十分棘手
• 注意首屏：将关键内容和 CTA 放在首屏，但不要塞得太满
• 创建视觉锚点：使用醒目的元素引导视线
• 使用网格：即使要打破网格，也要清楚自己正在打破它
• 使用真实内容进行测试：Lorem ipsum 会掩盖布局问题
• 考虑阅读模式：F 型模式、Z 型模式、古腾堡图表
• 善用留白：不要害怕空白空间——它很有力量
• 保持宽高比：图片在不同屏幕上不应失真
• 确保焦点流无障碍：标签顺序符合逻辑，焦点状态清晰
• 打印样式：如适用，请测试打印布局

网格系统

12 列网格

• 最常见
• 可被 2、3、4、6 整除
• 适用于大多数布局，灵活性高
• Bootstrap、Tailwind 均采用此网格

16 列网格

• 控制粒度更细
• 适用于复杂仪表板
• 可被 2、4、8 整除

模块化网格

• 同时包含行和列
• 源自瑞士设计传统
• 最适合编辑出版物、杂志

基线网格

• 营造垂直节奏
• 文本与基线对齐
• 营造和谐感
• 常用 8px 或 4px

间距刻度（以 8px 为基础）

0:   0px    (none)
1:   4px    (0.25rem) - tight
2:   8px    (0.5rem)  - base
3:   12px   (0.75rem)
4:   16px   (1rem)    - comfortable
5:   20px   (1.25rem)
6:   24px   (1.5rem)  - loose
8:   32px   (2rem)    - section spacing
10:  40px   (2.5rem)
12:  48px   (3rem)
16:  64px   (4rem)    - hero spacing
20:  80px   (5rem)
24:  96px   (6rem)
32:  128px  (8rem)    - dramatic spacing

响应式断点

常见断点：

• xs：0px（基础移动端）
• sm：640px（大屏移动端）
• md：768px（平板）
• lg：1024px（小屏桌面端）
• xl：1280px（桌面端）
• 2xl：1536px（大屏桌面端）

内容优先断点： 在内容布局出现问题时添加断点，而不是根据任意设备尺寸设置断点。

交付物格式

LAYOUT SPECIFICATION
Project: [Name]
Page: [Landing / Dashboard / Article]

STRUCTURE
[ASCII diagram of layout]

GRID SYSTEM
Columns: 12
Gutter: 24px (1.5rem)
Margin: 16px mobile, 24px tablet, 40px desktop
Max-width: 1280px (80rem)

SECTIONS
1. Hero
   - Height: 100vh on desktop, auto on mobile
   - Grid: Full-width background, centered content
   - Content max-width: 600px
   - Padding: py-20 md:py-32

2. Features
   - Grid: 1 col mobile, 2 col tablet, 3 col desktop
   - Card spacing: gap-8
   - Section padding: py-16 md:py-24

[... more sections ...]

SPACING SYSTEM
Base: 8px
Scale: [0, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 20, 24, 32]
Section spacing: 64px (py-16)
Component spacing: 32px (py-8)

RESPONSIVE BEHAVIOR
Mobile (<768px):
  - Single column stack
  - Sidebar becomes hamburger menu
  - Reduce section spacing 50%
  - Hero height: auto

Tablet (768-1024px):
  - 2-column hybrid
  - Partial sidebar collapse
  - Moderate spacing

Desktop (>1024px):
  - Full multi-column
  - All content visible
  - Maximum spacing

CODE STRUCTURE
[HTML/React component structure]
[Tailwind classes or CSS Grid code]

DESIGN NOTES
- F-pattern reading flow
- CTA buttons right-aligned to guide eye
- Ample whitespace between sections
- Cards use 4:3 aspect ratio for consistency

工具集成

• 使用 ui-builder skill，通过 Tailwind 实现布局
• 使用 Playwright 在真实浏览器中测试布局
• 使用 WebSearch 查找布局灵感
• 使用 Midjourney 生成布局情绪板

常见需求

SaaS 落地页：主视觉区 + 功能网格 + 定价 + CTA 博客：居中栏 + 侧边栏 + 特色图片 作品集：瀑布流网格 + 项目详情页 仪表板：侧边栏导航 + 表格/图表网格 电商：产品网格 + 筛选器 + 详情视图 文档：侧边栏导航 + 内容 + 右侧目录