你将做出什么
做一个可复用的「图文卡片」组件：左侧缩略图、右侧标题+副文案+标签，支持不同宽度自动换行与拉伸，并通过 Variants 一键切换尺寸（S/M/L）与状态（默认/悬停）。
步骤 1：建立卡片的骨架（Auto Layout）
- 新建一个 Frame，命名为 Card，按 Shift + A 变为 Auto Layout。
- 方向选 Horizontal；Padding 设为 16；Item spacing 设为 12。
- 在左侧放一个 Frame 作为缩略图容器，命名 Thumb，尺寸先设 88×88，圆角 12。
- 在右侧放一个 Frame 作为文字容器，命名 Body，对它也使用 Auto Layout（Vertical）。
步骤 2：让文字区域“能涨能缩”
- 选中 Body，把宽度设为 Fill container（填充容器）。
- Body 内放三行： 、De ion、Tags（可选）。
- 文本：设置为 Auto height，并把宽度设为 Fill container。
- De ion 同样设为 Fill container + Auto height；行高建议 150%（更耐看）。
关键点：当 Body 是 Fill container 时，卡片宽度变化会优先分配给文字区，布局更稳定。
步骤 3：用约束和最小宽度防“挤爆”
- 选中 Card，设置 Width 为 Hug contents 或者固定宽度（例如 560）。
- 给 Card 设置 Min width（例如 320），防止缩到无法阅读。
- Thumb 宽高保持固定（Fixed），这样缩小时先压缩文字区而不是把图片压变形。
步骤 4：做 3 个尺寸变体（S/M/L）
- 选中 Card，点击右侧面板 Create component。
- Duplicate 两次，得到 3 个组件：S、M、L。
- 分别调整：Padding（12/16/20）、Thumb（72/88/104）、标题字号（14/16/18）。
- 选中三个组件，点击 Combine as variants，属性命名为 Size，值为 S/M/L。
步骤 5：加一个 Hover 状态（可选但很实用）
- 在 Variants 里新增属性 State：Default / Hover。
- Hover 里把背景加深一点（例如 #FFFFFF → #F7F7F7），并加 1px 边框（#E6E6E6）。
- Prototype：在 Default 上设置 While hovering → 切换到 Hover。
常见问题排查
- 文字不换行：检查 Text 的宽度是否是 Fill container，以及是否启用了 Auto height。
- 卡片拉伸时左右间距变怪：确认 Card 是 Auto Layout，Spacing mode 选择 Packed（通常更稳）。
- 缩略图被压扁：Thumb 不要用 Fill container，保持 Fixed。
你可以继续升级
- 增加「有/无缩略图」变体（Thumb 置为隐藏并调整 Padding）。
- 加入「带按钮」版本（右侧增加 CTA，设置为 Fixed）。
- 把卡片做成列表：外层再套一层 Vertical Auto Layout，并设 Item spacing。
