目标是做一张可直接用于产品页/活动页的玻璃拟态信息卡片：包含标题、说明、一个主按钮与少量辅助信息。重点不是“抄一张图”，而是把它做成可复用组件：以后换背景、换文字、换尺寸都能自动适配。
1）新建 Frame（桌面端建议 1440x900）。打开 Layout grid，选择 12 列，左右边距 120，沟槽 24（可按团队规范调整）。
2）在画板上先放一张背景：可以用图片，也可以用纯色渐变。玻璃拟态的观感来自“背景被模糊后透出来”，所以背景不要太单调。
1）画一个圆角矩形（例如 420x260，圆角 20）。
2）填充：用线性渐变（上浅下深），建议从 rgba(255,255,255,0.28) 到 rgba(255,255,255,0.12)。
3）描边：1px，颜色 rgba(255,255,255,0.35)。
4）投影：轻微即可，例如 y=12 blur=24 颜色 rgba(0,0,0,0.18)。玻璃拟态常见错误是阴影过重，像“贴纸”，不是“玻璃”。
5）背景模糊：在效果里添加 Background blur（例如 18）。如果你发现背景模糊不可用，确认当前对象不是在矢量布尔组里，并且没有被某些特殊蒙版影响。
1）把卡片内部内容分成三块：标题区、说明区、按钮区。先在卡片内放一个垂直容器（Auto layout：Vertical）。
2）容器 Padding：24（上下左右），Item spacing：16。对齐方式选择 Left + Top。
3）标题：建议 20-22px，字重 600；颜色不要纯白，可用 rgba(255,255,255,0.92)。
4）说明文字：14-16px，行高 1.5；颜色 rgba(255,255,255,0.78)。如果背景比较亮，把说明降一点透明度，避免“发灰”。
1）按钮容器使用 Auto layout（Horizontal），Padding：12/16，圆角：14。
2）按钮填充建议用更“实”的渐变或半透明色块：例如 rgba(255,255,255,0.20)。描边 1px rgba(255,255,255,0.28)。
3）按钮文字 14-15px，字重 600。为按钮加一个微弱内阴影（可选），让它与玻璃层区分开。
4）把按钮做成组件（Create component），并建立两种变体：Default / Hover。Hover 只需要稍微提高填充与描边的透明度即可，别大幅变化。
1）卡片整体：如果你希望卡片在不同宽度下保持居中，放在父 Frame 中设置 Constraints 为 Center。
2）卡片内部文字与按钮都放在同一个垂直 Auto layout 容器里，容器宽度设为 Fill container，这样卡片变宽时内容会自动撑开。
3）说明文字建议打开 Auto height，避免内容多时被裁切。
1）把常用文字样式存为 Text styles： / Body / Caption。
2）把玻璃层的填充、描边与阴影存为 Color styles 或 Variables，命名建议带层级：Glass/Fill、Glass/Stroke、Shadow/Soft。
3）这样做的好处：当你换背景色或项目整体换主题时，只改样式即可，全站联动。
1）导出截图时，用 2x 或 3x，格式优先 PNG（需要透明）或 JPG（背景固定）。
2）如果交付给前端：建议给出 3 个关键参数：背景模糊值（blur）、玻璃层填充/描边的 rgba 值、阴影参数。并说明玻璃层应使用 backdrop-filter 实现。
3）为避免不同浏览器效果差异，建议同时提供“降级方案”：在不支持 backdrop-filter 时，用更实的半透明填充 + 更明显的描边替代。
Q1：为什么看不出玻璃效果？ 背景太单调或模糊值过低。先换一张更有层次的背景，再把 Background blur 提到 16-24 之间试试。
Q2：文字发灰不清晰？ 说明文字透明度太低，或背景太亮。把文字透明度提高，或在卡片上方叠一层更深的渐变。
Q3：按钮和卡片融在一起？ 给按钮更实的填充、略微不同的描边颜色，或加一点内阴影。
把卡片做成组件后，你可以快速扩展为：带图标的功能卡、带统计数字的仪表盘卡、带标签与头像的活动卡。保持同一套玻璃层样式，就能获得统一的视觉语言。
