关于这个模板
Liquid Glass CTA 是一个只靠一份书面简报搭出来的SaaS行动号召区，这一页记录的就是那份简报。颜色只用了黑色 #111111 打底、灰调靛蓝色 #9A83AB 承担强调色，正文排的是 Instrument Serif。交付形式是 React 和 Tailwind CSS，所以整个行动号召区可以直接搬进项目，不需要设计交接。借结构，不借题材：这个行动号召区和它那组数字可以原样搬到你的品牌上。
适合谁
- 需要这版行动号召区在慢网络下也撑得住的工程师，会把 640x466 和字阶当作重量预算。
- 正在做AI 或 SaaS 产品行动号召区的团队，想要的是量出来的细节（200px 间距），而不是一张可以照抄的截图。
- 同时跑好几个项目的工作室负责人，会把这一版行动号召区当作其他页面照抄的样板。
包含哪些内容
- 尺寸钉在需求简报里. 尺寸是写明的，不是继承来的：200px 间距。换字体或换文案，这些关系依然成立。每个值对应一件事：一个字号档位、一段间距、一个圆角或一次过渡。
- 证据放在折叠线之上. 一行数据落在折叠线之上，用 Instrument Serif 的最高一档字号排，#9A83AB 只留给那些承担主张的数字。数字带 #9A83AB 强调色，周围一切都留在正文色上。
- 先文案，后装饰. 折叠线以上的每样东西都得挣到自己的位置。需求简报点明了文案、640x466 画幅和字号，没有留下任何装饰物跟它们抢。页面在 640x466 下就是一套完整构图，所以文案变了它依然立得住。需求简报就是规格。
- 对着视口量出来的. 尺寸是写明的，不是继承来的：200px 间距。换字体或换文案，这些关系依然成立。每个值对应一件事：一个字号档位、一段间距、一个圆角或一次过渡。拿同一组数值验证重建结果。
动效与交互
交互区域刻意做小
交互层是刻意做小的：悬停态只给按钮和链接，而不是每张卡片。悬停态和聚焦态写在一起，指针和键盘拿到的信息因此一样。在触屏设备上把这些状态过一遍。这份参考在 640x466 下收录。
有意做成静止
这里没有滚动库：640x466 的构图保持不动，只有会回应你的元素在动。需求简报里没有动画库，复刻的工作量因此很小。不需要滚动时间轴。
这个行动号召区背后的数字
这个行动号召区是量出来的，不是看出来的。200px 间距来自需求简报，版式是照这些档位排的，而不是一点点挪到位的。这个行动号召区里没有任何一处依赖默认值。
把这个行动号召区变成你自己的
如果你的品牌配色更重，先对着画幅测一轮再定。撑住页面的是黑色 #111111，所以更暗的强调色需要比参考更高的对比。可复用的是构图，换一个品牌它照样成立。
这个行动号召区怎么重排
这里的字号是弹性缩放而不是阶梯式跳档（50px 到 200px 的 clamp），所以展示字不会在宽度之间跳。随视口改变的是尺度，不是顺序。
常见问题
拿到 Liquid Glass CTA 的简报之后，我能用它做什么？
页面上引用的内容全部出自收录的 10,077 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Liquid Glass CTA 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 640x466 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
Liquid Glass CTA 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
