做一个可复用的「卡片组件」：包含封面占位、标题、摘要、标签区与操作区。它能在不同宽度下自适应拉伸，内容多少都不崩，并且可以打包成组件+变体，方便在信息流、海报、后台列表页快速复用。
1）新建一个 Frame（建议命名 Card），给它一个基础宽度（例如 360）与圆角（例如 12）。
2）在 Card 里放一个垂直方向的内容容器（命名 Content）。把所有文字/按钮都先放进 Content，再考虑对齐与间距。
3）内容层级建议：封面（Cover）→ 标题（ ）→ 摘要（Summary）→ 标签（Tags）→ 底部操作（Actions）。
关键点：先按信息结构分组，后面 Auto Layout 才好设置；不要一开始就手动拉间距。
1）选中 Content，开启 Auto Layout（垂直方向）。
2）Spacing between items 建议从 8 或 12 起步；Padding（上下左右内边距）建议 16/16/16/16。
3）把 Content 的宽度设为 Fill container（填充容器），这样卡片宽度变化时，内容会跟着撑开。
常见坑：只给外层 Card 开 Auto Layout，而内层依旧手动对齐，结果一改文案就乱。正确做法是“外层负责布局，内层负责内容”。
1）创建 Cover：可以用一个矩形或图片占位，建议高度 180。
2）把 Cover 的 Width 设为 Fill container，高度设为 Fixed（固定高度）。
3）如果你用的是图片，确保图片的约束为 Fill，并在图片属性里选择“填充/裁切”（保持视觉一致）。
想要不同尺寸卡片共用封面：把 Cover 单独做成一个组件（Cover / 16:9），在卡片里引用它。
1）标题 ：文本宽度设为 Fill container，Auto height（自动高度）。标题建议用 16-18pt，行高 24 左右。
2）摘要 Summary：同样设为 Fill container + Auto height。建议颜色比标题浅一档（例如 70% 黑）。
3）如果要限制摘要最多 2-3 行：可以在组件使用场景里用“裁切/隐藏溢出”的容器包一层；不要直接把文本框高度固定死，否则不同内容会被截断得很难看。
1）创建 Tags 容器，开启 Auto Layout（水平）。
2）打开 Wrap（换行），Spacing 建议 6-8。
3）单个 Tag 建议做成小组件：内边距 6/10，圆角 999，文字 12-13pt。
这样你只要复制多个 Tag，系统会自动换行排版，不需要手动一颗颗挪。
1）Actions 用水平 Auto Layout，左右两组元素常见做法是：左侧信息（例如时间/作者）+ 右侧主按钮。
2）在 Actions 里插入一个“Spacer”（空白 Frame），把它设为 Fill container，左右元素就会自动分开。
3）主按钮建议做成组件：Normal / Hover / Disabled 三个变体，方便复用。
1）选中 Card，Create component。
2）定义 2-3 个关键变体即可： - 封面：有 / 无 - 标签：有 / 无 - 操作：单按钮 / 双按钮
3）命名建议：Card / Cover=On, Tags=On, Actions=Primary。后续在页面里替换文案与图片即可快速生成不同卡片。
- 卡片宽度变化时，标题/摘要不会跑出边界（Fill container 生效）
- 文案变长时高度自然撑开，不出现重叠（Auto height 生效）
- 标签能自动换行，不需要手动对齐（Wrap 生效）
- 按钮组件化，样式统一且可扩展（Variants 生效）
把 Card 的 Padding、圆角、阴影、颜色都抽成 Variables（变量），再配合 Styles（样式），就能快速做出浅色/深色或不同品牌主题的卡片皮肤。
