目标：做一个“可复制粘贴的页面布局骨架”。它包含：8pt 间距规则、三档栅格（桌面/平板/移动）、以及把栅格封装成可复用的 Auto Layout 组件。以后你做海报、落地页、后台页面，都可以直接套用，整体对齐会非常稳。
1）新建一个 Frame，命名为 _Tokens。
2）在右侧面板中准备一组常用间距：4/8/12/16/24/32/40/48（单位 px）。建议把它们做成一列矩形条，旁边写上数字，方便随手取用。
3）在组件命名上保持一致：例如 sp-8、sp-16。后续你在 Auto Layout 里设置 padding/gap 时就尽量只用这些值，能极大减少“看起来差不多但其实不一样”的间距。
我们用三档最常用的规格，参数可以按你的项目微调，但建议先按下面的做一次：
Desktop（1440 宽）：12 列；左右边距 120；列间距 24。
Tablet（768 宽）：8 列；左右边距 40；列间距 16。
Mobile（375 宽）：4 列；左右边距 16；列间距 12。
操作方法：
1）分别创建 3 个 Frame（1440/768/375）。
2）选中 Frame → 右侧 Layout grid → “+” → 选择 Columns。
3）按上面的列数、margin、gutter 填好。把这 3 个 Frame 命名为 Grid/Desktop、Grid/Tablet、Grid/Mobile。
很多人做完栅格只当参考线，但更高效的做法是：把内容容器（Container）做成组件，任何页面直接用它来承载内容。
1）在 Desktop Frame 内画一个内容容器 Rectangle：宽度 = 1440 - 120*2 = 1200，高度随便先给 800。
2）把它设置成 Auto Layout（Shift + A），方向为垂直；padding 左右 0，上下 0；gap 24。
3）把它做成组件，命名：Layout/Container/Desktop。
4）同理做 Tablet/Mobile 的 Container（对应 margin 的内容宽度），命名：Layout/Container/Tablet、Layout/Container/Mobile。
小技巧：如果你希望一个组件在不同尺寸下自动换算，可以用 Constraints + Auto Layout：Container 设为 “Fill container”，并把外层页面 Frame 设为 Auto Layout，这样页面宽度变化时内容区也跟着变。
现在把常见页面结构也组件化，后续做教程封面、活动页、产品页会快很多。
1）创建一个 Desktop 页面 Frame（1440x1800），设置 Auto Layout 垂直。
2）放入 Container 组件，然后在 Container 内建立三段：
- Header：高度 96，左右留白遵循栅格。
- Body：内容区，默认 gap 24。
- Footer：高度 160。
3）把整个页面骨架做成组件：Template/Page/Desktop。
4）复制出 Tablet/Mobile 版本：主要改两处——Frame 宽度与栅格参数；间距用 16/12 等更紧凑的 token。
在 Body 中放 3 张卡片（Desktop 三列，Tablet 两列，Mobile 一列）：
1）做一个卡片组件：标题、说明、按钮；卡片 padding 24（Mobile 用 16）；圆角 12；阴影轻一点。
2）卡片列表用 Auto Layout 横向，Desktop 下卡片宽度设为 “Fill container”，并设置每行 3 个；Tablet 改为 2 个；Mobile 改为 1 个。
3）你会发现：只要栅格和间距 token 一致，视觉会自动变得“高级且干净”。
Q1：栅格开着太乱怎么办？ 建议把 Layout Grid 的透明度调低到 10%~15%，并用快捷键临时隐藏（Shift + G）。
Q2：同事用不同的间距值导致页面不齐？ 统一用 8pt token，并把 sp-8/sp-16 这些 token 放在页面最上方的 Tokens 区做“可见规范”。
Q3：如何快速适配多尺寸？ 优先用 Auto Layout + Fill container；其次才是手动拉伸。把 Template/Page 做成组件后，改一次，全项目都能同步。
发布前自检：1）是否只使用 4/8/12/16/24/32 等间距；2）Desktop/Tablet/Mobile 是否都有栅格；3）页面是否基于 Container 组件搭建；4）卡片/列表是否使用 Auto Layout；5）移动端是否收紧 padding 与 gutter。
