关于这个模板
Rocket CTA 用一份收录下来的需求简报，解决了面向AI 或 SaaS 产品做行动号召区时的问题。配色是深蓝色 #14191E 打底，字体用 Inter。这份参考用 React 和 Tailwind CSS 构建，但版式上的决定都独立于它写清楚了。需求简报把动效预算花在300ms 的过渡上。当这个行动号召区需要在新增任何板块之前先定下顺序时，就拿它来用。
适合谁
- 在交接说明里写上 640x468 画幅，下一次构建就不必再从页面里倒推。
- 自己写行动号召文案的产品团队，需要每一行都守住展示级字号当初按长度定下的上限。
- 给需要把行动号召区的范围收进一个迭代、并且不新增任何素材的产品经理用。
包含哪些内容
- 顶栏只放一个操作. 导航条就是一行文字加一个操作，尺寸按 10px 间距、300ms 的过渡定，所以它读起来是一条细带，而不是一整条色块。导航条悬在 640x468 的构图上，自己没有底色，素材因此从它下面通到两边。
- 样式交给字体. 展示行用 Inter 排，字号由需求简报定死，标题因此是构图元素，而不是一段文字。字号档位是固定值，换字体时层级才能原样保住。一套字，职责清楚。
- 每个尺寸都写下来了. 尺寸是对着 640x468 的渲染量出来的：10px 间距、300ms 的过渡。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。
- 折叠线之上的徽标. 一枚徽标只说一件事：胶囊用 Inter 的最小字阶待在标题上方，没有别的元素来争这个位置。它的位置让标题继续占住构图的正中。消息过期就把它删掉。
动效与交互
滚动驱动构图
视差只在页面移动时运行，所以构图始终有一个明确的静止状态。效果只作用在需求简报点名的元素上，而不是整页。关掉这个效果，版式也得成立。这份参考在 640x468 下收录。
控件共用一个时长
规格里每一次状态变化都带着时长：300ms没有一处留给浏览器默认值，所以页面读起来是被设计过的，而不是被加了动画。控件之间复用同一个值，时长就不会各自漂移。
这个行动号召区背后的数字
认定10px 间距、300ms 的过渡，是用灵活性换可重复性。这正是这份参考的意义：同一个页面换到另一个品牌上，不用再猜一轮。这个行动号召区里没有任何一处依赖默认值。
这套构图为什么适合SaaS
在素材上压一层色调本来是最省事的办法，需求简报偏偏不用。素材是 640x468 下的一张静帧。文案依然站得住，因为10px 间距、300ms 的过渡让画幅保持安静。 Rocket CTA 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
这个行动号召区背后的时序
动效只限于 300ms 的过渡、视差层、悬停态与按下态；它只在进入时跑一次，随后就让到一边，对于一个必须保持可读的行动号召区来说，这才是合适的动效预算。这个行动号召区里没有为动而动的动画。
常见问题
复制 Rocket CTA 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 11,622 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么 Rocket CTA 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 11,622 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
为什么这条条目还要标注 React 和 Tailwind CSS？
Rocket CTA 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
