目标是做一个“真正能缩放”的卡片列表：容器宽度变化时，卡片能自动换行、卡片内部文字区能自适应、图片区保持比例；并且通过组件 + 变量把样式（间距、圆角、阴影、字号）统一管理，后续改一次全局生效。
1）新建一个 Frame 作为画板（例如 1440×900），命名为 Page / Cards。
2）打开 Variables（变量）面板，新建一个 Collection：CardSystem。
3）建立这些数值变量（建议用 number）：space-4=4、space-8=8、space-12=12、space-16=16、radius-12=12、stroke-1=1。如果你的团队有设计规范，把命名对齐即可。
4）建立一个模式（Mode）用于断点：Desktop 与 Mobile。把 Desktop 的 space-16 设为 16，Mobile 设为 12（示例），后面你会体验到“一键切换”的价值。
1）画一个 Frame，命名为 Card，按下 Shift+A 变成 Auto Layout。
2）方向选 Vertical；Padding 绑定变量：左右=space-16，上下=space-16；Item spacing=space-12。
3）给 Card 设置 Fill（白色或浅色），Corner radius 绑定 radius-12；Stroke 绑定 stroke-1（颜色可先用浅灰）。
4）把 Card 的 Resizing 设置为：Horizontal: Fill container，Vertical: Hug contents。这一步决定了“卡片会不会跟着列表一起伸缩”。
1）在 Card 内部新建一个 Frame 命名 Media，设为 Auto Layout（可不必），主要用于占位。
2）给 Media 一个固定高度（比如 160），横向 Fill container，圆角可与 Card 一致或略小。
3）在 Media 下方放一个文本容器 Frame，命名 Body，Shift+A 变 Auto Layout（Vertical）。
4）Body 的 Item spacing 绑定 space-8，Resizing：Horizontal Fill container，Vertical Hug contents。
5）放三行内容：标题（ ）、说明（Desc）、标签行（ ）。把 /Desc 的文本框宽度设为 Fill container，避免内容多时把布局顶乱。
1）新建一个外层 Frame 命名 Card List，Shift+A 变 Auto Layout。
2）方向选择 Horizontal，打开 Wrap（自动换行）。
3）Spacing：横向间距绑定 space-16，纵向间距绑定 space-16。
4）把 Card List 的 Resizing 设为：Horizontal Fill container，Vertical Hug contents。
5）把 Card（组件实例也行）复制 8~12 个放进 Card List。此时拖动外层画板宽度，你会看到卡片自动换行。
1）选中 Card，Create component（创建组件）。
2）把 Card 的 padding、spacing、radius 都绑定到变量，这样切换变量模式（Desktop/Mobile）就会自动改变卡片的密度。
3）如果你要做“紧凑/舒适”两种密度，也可以新增 Mode：Compact，然后把 space-16 改为 12、space-12 改为 8。
4）建议把文字样式（ /Desc）做成 Text styles；字号也可以做变量（但团队协作时要统一规则）。
检查点 A：Fill container 是否用对。卡片想要跟随容器宽度变化，必须是 Fill container；卡片内部文字想要自动换行，也必须是 Fill container。
检查点 B：Hug contents 是否被“固定高度”破坏。如果你发现卡片底部出现大块空白，通常是某个内部 Frame 高度被锁死，改成 Hug contents。
检查点 C：Auto Layout 的对齐与约束。在 Auto Layout 里，优先用 Resizing（Hug/Fill/Fixed）控制，而不是传统 Constraints（Left/Right）。两者混用容易出意外。
1）切换 Variables 的 Mode 为 Mobile。
2）观察 Card：padding、间距是否自动变紧凑；如果没有，说明你某些数值没有绑定变量，而是写死了。
3）在 Mobile 下，把 Media 高度从 160 调整为 140（可选），让首屏信息更集中。
4）把 Card List 的间距也绑定变量（space-16），这样列表密度也会随模式改变。
1）拖动宽度时不换行：确认 Card List 是 Horizontal 且 Wrap 打开；并且 Card 的宽度不要是“固定值过大”。
2）卡片内部文字不换行：确认文本层宽度为 Fill container；并检查文本是否被放进了 Fixed 宽度的 Frame。
3）某些卡片高度不一致：确认 Body 是 Hug contents；并给 Desc 设置合理的最大行数（可用 text truncation）或统一信息密度。
4）阴影被裁切：阴影层需要留出外边距，或在外层容器关闭 Clip content。
5）组件实例不好改：把 /Desc 设为可覆盖文本；必要时用 component properties 暴露开关（例如是否显示 ）。
Page / Cards（Frame） → Card List（Auto Layout Horizontal + Wrap） → Card（Component, Auto Layout Vertical） → Media（Fill container, Fixed height） + Body（Auto Layout Vertical, Hug） → /Desc/ （Text, Fill container）
1）给 Card 增加一个 Variant：Default / Featured（Featured 更大图片、更粗标题）。
2）给 Card 增加一个属性：HasTag（控制是否显示标签行）。
3）把颜色也做成变量（例如 background、stroke、text），再加一个 Dark 模式（如果你的项目需要）。
完成后，你就得到一个能快速复用的响应式卡片列表：改变量/改样式/改内容都不会把布局弄崩。
