我们用一个最常见的「信息卡片」作为例子（封面/标题/描述/标签/按钮）。目标不是画得漂亮，而是可复用、可扩展、可交付：内容多少都不崩，间距一致，状态可切换。
建议先定一个简单的规则，后面所有间距都按它来：
1）以 8px 为基础单位：8 / 16 / 24 / 32。
2）文字样式至少两种：标题（16/600）与正文（13/400）。
3）颜色只保留 3 类：正文色、次级文本色、边框/分割线色。
1）新建一个 Frame，命名为 Card。
2）选中 Frame，按 Shift + A 转为 Auto Layout。
3）方向选 Vertical；Padding 设为 16；Item spacing 设为 12（或 8/16，按你体系）。
4）宽度先给一个固定值（例如 320），高度设为 Hug contents。
5）给 Card 加圆角 12、描边 1px、背景白色（或浅灰）。
常见结构是：封面（可隐藏） + 内容（文本/标签/按钮）。我们先把内容区做扎实：
1）在 Card 内新建一个 Frame，命名 Content，同样 Shift+A 变 Auto Layout（Vertical）。
2）Content 的宽度设为 Fill container，高度 Hug。
3）把标题、描述都放进 Content，分别设为 Hug；标题行可再包一层来放「右侧图标/菜单」。
很多卡片“看起来”能用，换了文案就爆炸，通常是 Hug/Fill 没配对：
1）外层 Card：宽度固定（或后面做响应式），高度 Hug。
2）Content：宽度 Fill container。
3）标题/描述文本：宽度 Fill container（这样换行才受容器控制），高度 Hug。
4）如果你有「右侧图标」：左侧标题用 Fill，右侧图标 Hug，父容器用 Horizontal Auto Layout。
标签是最典型的“动态数量”元素。做法：
1）新建 Frame Tags，Shift+A 转 Auto Layout，方向 Horizontal。
2）打开 Wrap（换行），Item spacing 8，Row spacing 8。
3）每个 Tag 做一个小组件：左右 Padding 8/12，高度 Hug，圆角 999，背景浅灰，文字 12。
4）Tags 容器宽度 Fill container，高度 Hug。
1）新建 Frame Actions，Horizontal Auto Layout，宽度 Fill container。
2）把按钮放进去，Actions 设为 Right 对齐。
3）按钮组件至少做 2 个 Variants：Primary / Secondary；再加 Disabled 状态（可选）。
1）选中 Card，Create component。
2）给封面区做一个 Boolean 属性：Has cover，用于显示/隐藏。
3）给按钮做 Variant 属性：Button（Primary/Secondary/None）。
4）如果有收藏/置顶：用 Boolean 属性控制图标显示。
把下面 6 条过一遍，你的组件就“可直接照做”了：
1）把标题改成超长：会自动换行且不遮挡图标。
2）把描述删除：间距依然合理，不会出现空白大洞。
3）加 10 个标签：会自动换行，整体高度随内容 Hug。
4）切换按钮 Variant：布局不抖动，右侧对齐稳定。
5）把卡片宽度从 320 拉到 480：文本仍 Fill container，行长自然增长。
6）把封面隐藏：Card 高度立即回收，间距不乱。
坑 1：文本是 Fixed width 导致不换行。
修复：把文本宽度改为 Fill container。
坑 2：父容器没设 Hug，导致高度固定出现大空白。
修复：把卡片/内容容器高度设为 Hug contents。
坑 3：标签容器没开 Wrap。
修复：在 Tags 的 Auto Layout 打开 Wrap，并设置 row spacing。
