目标是做出一个真正“内容驱动”的卡片组件：文字变长不会撑爆布局，图片可有可无，按钮可切换主/次/禁用状态，并且整张卡片在不同宽度下能自动换行与对齐。
建议：桌面端做一版（宽度 360），再做一版移动端（宽度 328），最后统一成一个组件。
1）新建 Frame：Desktop 1440 或任意尺寸。开启 Layout grid（例如 12 栏）方便对齐。
2）在画板里新建一个 Frame 作为卡片容器，先给一个固定宽度（如 360）与圆角（如 16）。背景填充白色或浅灰。
卡片通常由 3 层组成：封面区（可选） + 内容区（标题/描述/标签） + 行为区（按钮/图标）。
1）在卡片容器里放入一个纵向的 Auto Layout（Shift+A），方向选择 Vertical。
2）设置 Padding：16/16/16/16，Item spacing：12。此时卡片高度先让它 Hug。
1）新建一个 Frame 作为图片占位，建议宽度 Fill container，高度固定（如 160）。
2）图片 Frame 的 Resizing：Horizontal 设为 Fill container，Vertical 保持 Fixed。
3）为了让图片可选：先把它做成一个单独的组件（ImageSlot），后面用变体控制显示/隐藏。
1）新建一个纵向 Auto Layout 作为 ContentStack，放标题、正文、标签行。
2）标题 Text：Resizing 设为 Fill container；文本框宽度跟随容器，不要手动拉死。
3）正文 Text：同样 Fill container，并把 Line height 设置合理（如 22-24），让长文自然增高。
4）标签行：再做一个横向 Auto Layout（TagRow），Item spacing 8；每个 Tag 用小组件（有圆角、内边距 6/10）。
1）行为区做一个横向 Auto Layout（ActionRow），包含主按钮、次按钮、收藏图标等。
2）把 ActionRow 的 Resizing 设为 Fill container，并开启 Wrap（如果你使用的是支持换行的 Auto Layout 版本）。
3）按钮组件：建议做成 Button（Primary/Secondary/Disabled）变体，宽度默认 Hug，最小高度 40。
这样当卡片变窄、按钮文本变长时，按钮会自动换到下一行，而不是挤压到不可读。
1）选中卡片最外层容器，Create component。
2）建立 Variant 属性：
- Cover：On / Off（控制 ImageSlot 的显示）
- Size：S / M（控制 padding、字体大小、图片高度）
- State：Default / Hover / Pressed（可选，主要用于展示）
3）Cover=Off 时，把图片占位隐藏，并确保整体间距仍然自然（Auto Layout 会自动回收空间）。
1）文字溢出：标题/正文一定要 Fill container，别固定宽度。
2）组件里有“神秘空白”：多半是某个子层还在 Fixed height，改为 Hug。
3）圆角断层：图片区与卡片圆角不一致时，给图片 Frame 也加同样圆角或用 Mask。
4）对齐混乱：ContentStack 与 ActionRow 都统一用 Left + Fill container。
5）变体爆炸：只保留真正影响布局的属性，颜色/阴影尽量用样式（Styles）管理。
把卡片组件放进一个小型 Design System：包含按钮、标签、头像/图标尺寸规范。实际项目中卡片往往要配合列表组件（List）一起使用，建议再做一个“卡片列表”组件，让间距与响应式规则更统一。
完成后，你可以复制这套卡片到新文件，作为个人模板；后续只需要替换内容，就能快速产出整洁一致的 UI。
