目标是做出一张“信息卡片（Card）”组件：包含封面图、标题、描述、标签、按钮/价格区，并且能在不同宽度下自动换行、自动拉伸、保持间距一致。最后把它做成可复用组件（含变体/约束），并整理成开发可读的交付说明。
1）建立 8pt 规则。 在 Figma 里绝大多数间距用 8 的倍数（8/16/24/32），小间距可用 4。这样 Auto Layout 的 padding/spacing 更规律，页面也更“干净”。
2）设置 Layout Grid。 选中 Frame（画板）→ 右侧 Layout grid → 选择 Columns。推荐：桌面端 12 列，Margin 80，Gutter 24；移动端 4 列，Margin 16，Gutter 16。数值不绝对，但要保持同一项目一致。
3）建立文字样式。 至少准备 3 个：标题（16/20 或 18/24）、正文（14/20）、辅助信息（12/16）。并命名如：Text/ , Text/Body, Text/ 。
1）创建容器。 新建一个 Frame，尺寸先随意（例如 320×420）。把它改成 Auto Layout（Shift + A）。方向选择“垂直（Vertical）”。
2）设置 padding 与间距。 Container padding：16；Item spacing：12。对齐方式：左对齐。这样就有了基本的节奏感。
3）添加圆角与描边。 Corner radius：12；Stroke：1px #E6E6E6；Fill：#FFFFFF。阴影可选（轻微）：0, 4, 16, 10% 黑。
1）封面作为独立 Frame。 在容器最上方插入一个 Frame，命名为 Cover。高度建议 160（移动端）或 180（桌面卡片）。宽度让它 Fill container。
2）给 Cover 放图片。 把图片拖进去或用 Fill → Image。关键：Image 的 Scale 模式选 Fill（铺满裁切），而不是 Fit（留白）。
3）裁切圆角。 如果 Card 外层有圆角，Cover 顶部圆角要一致（12），底部可为 0，避免中间出现重复圆角。
1）创建 TextStack。 新建一个 Frame 作为文字区，改为 Auto Layout（Vertical）。Item spacing：6；宽度 Fill container。
2）标题（ ）。 文本对齐左；Width 设为 Fill container；Text 设置为“Auto height”。这样标题换行会自动增高。
3）描述（De ion）。 使用正文样式 14/20。建议限制为 2-3 行：可以用组件变体（短/长），或在实际使用时由内容控制。
1）标签容器（TagWrap）。 新建一个 Auto Layout（Horizontal）容器，勾选 Wrap（自动换行）。Spacing 建议：行间距 8，列间距 8。
2）制作一个 Tag 子组件。 Tag 用 Auto Layout（Horizontal），padding：横向 10，纵向 6；圆角 999；背景浅灰；文字 12/16。这样 Tag 自适应文本长度。
3）底部操作区（Actions）。 用 Auto Layout（Horizontal）：左侧放价格/状态（可选），右侧放按钮。按钮做成组件：padding 12×8，最小高度 36，圆角 10。
1）所有内部主容器宽度用 Fill container。 Cover、TextStack、TagWrap 都设为 Fill。不要手动固定宽度，否则一拉伸就乱。
2）高度尽量 Auto。 Card 外层高度用 Hug contents（根据内容撑开）。封面高度可固定（比如 160）。
3）对齐策略。 垂直堆叠区域用 Left；底部 Actions 用 Space between（左右分散）。
1）组件化。 选中整个 Card → Create component。命名：Component/Card。
2）做 3 个常用变体。
3）可替换内容（Overrides）。 确保标题、描述、标签文本都可在实例里直接改；图片为可替换 Fill。
为了减少来回沟通，把以下信息写在组件旁边（或放到一个“Hand-off”页）：
如果开发使用 CSS/Flutter/React：重点强调“外层垂直布局 + 文字自适应高度 + 标签容器可换行 + 内边距与间距按 8pt”。
把 Card 拓展为列表项、弹窗卡片、商品卡片，并把颜色/字号抽成变量（Styles + Variables）。当组件库越来越大时，命名规则和一致的间距系统会比“视觉炫酷”更能省时间。
