你将得到什么
我们用一个“信息卡片（Card）组件”贯穿全程：包含封面、标题、描述、标签、按钮。做完后它可以：
- 改文案不跑版（长短标题都能撑住）
- 一键切换小/中/大三种尺寸
- 按钮可选（有按钮/无按钮）
- 封面可选（有图/无图）
准备：先画“内容骨架”，别急着上样式
新建一个 Frame（例如 360x240），先只放结构：
- 封面图区域（矩形占位）
- 标题（Text）
- 描述（Text）
- 标签行（2~3 个 Tag）
- 按钮（Button）
提示：先用灰色占位，等自动布局稳定后再换字体、圆角、阴影。
第一步：把最外层变成 Auto Layout（垂直）
选中最外层 Frame，点击右侧 Auto layout → 选择 Vertical。
- Padding：建议 16 / 16 / 16 / 16
- Spacing between items：建议 12
- Alignment：Left & Top
- Resizing：宽度 Fill container（之后用于适配），高度 Hug contents
第二步：封面图做成“可裁切且自适应”的容器
封面区域建议用一个单独的 Frame 做容器，再放图片（或矩形）进去：
- 创建封面容器 Frame，开启 Clip content（裁切）。
- 容器宽度设为 Fill container，高度先固定（例如 160）。
- 把图片放进来，图片的约束设为 Fill（或用填充模式）。
这样后续卡片变宽时，封面会自动铺满；变窄时也不会露白。
第三步：文本区再包一层 Auto Layout（垂直）
标题+描述+标签行+按钮，不建议直接散放在外层。新建一个内容区 Frame，把它设为 Auto Layout（Vertical）：
- 内容区宽度：Fill container
- 内容区高度：Hug contents
- 内容区内部间距：8（标题与描述）/ 10（描述与标签）可用不同 spacing？做不到就用统一 spacing 再用空白对象微调
标题和描述的 Resizing：宽度 Fill container，高度 Hug contents。这样长文案会自动换行。
第四步：标签行用 Auto Layout（水平），解决“标签数量变化”
把多个 Tag 包到一个 Auto Layout（Horizontal）的容器里：
- Spacing：8
- Wrap：如果你使用的是支持 Wrap 的版本，可以打开；否则限制标签数量（比如最多 3 个）
- 每个 Tag 组件：宽度 Hug contents，高度固定（如 24），左右 padding 10
第五步：按钮做成组件，并设置 Fill container 的宽度策略
按钮组件推荐结构：容器（Auto Layout Horizontal）+ 文本。常用设置：
- 按钮左右 padding：14，上下 padding：10
- 按钮宽度：在卡片里通常设为 Fill container（用于移动端），如果是桌面列表可改为 Hug contents
- 文本：Hug contents
关键点：按钮“宽度策略”决定了卡片在不同布局下的适配方式。
第六步：用 Variants 组织 4 种状态（有图/无图 × 有按钮/无按钮）
把整个 Card 做成组件（Create component），然后创建 Variants：
- property: Cover = On / Off
- property: CTA = On / Off
实现方式：
- Cover=Off：隐藏封面容器（注意 Auto layout 会自动回收空间）。
- CTA=Off：隐藏按钮。
这样产品/运营同学改内容时，你只需要切变体，不需要复制粘贴四份。
第七步：再加一个 Size 属性（S/M/L），一键适配多尺寸
在同一个组件集里新增：
- property: Size = S / M / L
不同尺寸建议只改“外层 padding、字体大小、封面高度、间距”，不要改结构。参考值：
- S：padding 12，标题 14，描述 12，封面 120
- M：padding 16，标题 16，描述 13，封面 160
- L：padding 20，标题 18，描述 14，封面 200
自检清单：做完这 6 条就算合格
- 把标题改成很长一段，卡片不溢出、不遮挡
- 把描述清空，布局不会塌（可用最小高度或占位）
- 切 Cover/CTA 变体，间距自然、不留大空洞
- 把卡片拉宽/拉窄，内容区仍然 Fill container
- 复制 10 个卡片放进列表，整体对齐一致
- 用组件实例改文本，不需要进组件编辑页
常见坑与修复
- 文字不换行：检查 Text 的 Resizing，宽度要 Fill container。
- 隐藏封面后还有空白：确认封面容器在 Auto layout 里，且隐藏的是容器本身。
- 按钮被压扁：按钮高度设为 Hug contents，并确保内部 padding 不被约束。
- 组件越做越乱：先定结构，再定变量；变量只控制“可预期的差异”。
结尾：把它变成你自己的模板
最后一步，把卡片的颜色、圆角、阴影改成你的品牌样式，然后把组件命名规范化（例如 Card / Content、Card / Media）。下次做新页面时直接拖实例，再也不用从零搭结构。
