关于这个模板
Rocket Pricing 是一个只靠一份书面简报搭出来的SaaS定价区，这一页记录的就是那份简报。它以“Clear pricing plans that scale with you”开场，给这句话整个版心，而不是把它缩进一张卡片里。颜色只用了黑色 #0E0D0E 打底，正文排的是 Inter。交付形式是 React 和 Tailwind CSS，所以整个定价区可以直接搬进项目，不需要设计交接。对于需要在第一屏就显得刻意的AI 或 SaaS 产品定价区，它是一份合适的参考。这一页剩下的部分按板块、再按时序和数值把这个定价区拆开，不加任何简报里没有的说法。收录的提示词记录于 640x472，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 640x472 的画幅一直到最小的间距档。
适合谁
- 如果这个定价区有三个人要改，就给内容负责人 11px 间距，而不是一张截图。
- 给需要把定价区的范围收进一个迭代、并且不新增任何素材的产品经理用。
- 自己写定价区文案的产品团队，需要每一行都守住展示级字号当初按长度定下的上限。
包含哪些内容
- 能逐项核对的数值. 这里没有一样东西是靠眼睛估的。规格钉死了 11px 间距，剩下的版式都从这些值推导出来。写明的值之间没有凭空插入的中间值，这份测量清单就是整套系统。拿同一组数值验证重建结果。
- 折叠线之上的徽标. 一枚徽标只说一件事：胶囊用 Inter 的最小字阶待在标题上方，没有别的元素来争这个位置。这里只有一条公告，徽标因此像一条新闻。
- 一屏之内的结构. 构图在 640x472 下就是完整的：文案、素材和控件都在需求简报里点明了。页面在 640x472 下就是一套完整构图，所以文案变了它依然立得住。需求简报就是规格。
- 公告胶囊. 一枚徽标只说一件事：胶囊用 Inter 的最小字阶待在标题上方，没有别的元素来争这个位置。这里只有一条公告，徽标因此像一条新闻。一枚徽标，一条信息。
动效与交互
指针只在有用的地方出现
指针上的处理很少，而且写明了：悬停态只给按钮和链接，而不是每张卡片，只加在那些看起来就能点的元素上。可交互目标大到能点，指针处理在这些目标上保持一致。这份参考在 640x472 下收录。
有意做成静止
这里没有滚动库：640x472 的构图保持不动，只有会回应你的元素在动。只有响应指针的元素会动。
在 Rocket Pricing 里先改什么
一行标题、一个字体、一个强调色：这三处替换对设计的改变最大。11px 间距是那组不该动的值。可复用的是构图，换一个品牌它照样成立。
这个定价区做对了什么
如果你的首屏现在要解释三件事，这一版只解释一件。公告徽标、数据行、卡片栅格、功能列表按阅读顺序依次摆开，11px 间距定下节奏。 Rocket Pricing 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
这个定价区背后的顺序
首屏一次读下来，主张就已经清楚了。公告徽标、数据行、卡片栅格、功能列表依次出现，靠11px 间距分隔，而不是靠装饰性分割线。 SaaS读者先看到主张，再看到选项。
常见问题
复制 Rocket Pricing 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 8,841 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
这条 Rocket Pricing 条目是怎么组织的？
页面上引用的内容全部出自收录的 8,841 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
重建 Rocket Pricing 必须用 React 和 Tailwind CSS 吗？
Rocket Pricing 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
