关于这个模板
Price Calculator 交给了金融科技产品一个已经做完的首屏，以及做出它的那组数字。标题是“Get premium website within your budget”，定价区其余部分都围着它排。整页都建立在黑色 #000000 打底、红色 #FF5656 承担强调色之上。这一条会把生成页面的技术栈（单个组件）写出来，而不是藏起来。把它当作面向金融科技产品做定价区的需求简报：它要经得起复刻，而不只是第一眼好看。收录的提示词记录于 800x648，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 800x648 的画幅一直到最小的间距档。需求简报钉住的一切（画幅、字号、时长、断点）下面都写出来了，所以你可以照着复刻这个定价区，不用猜它背后的意图。
适合谁
- 如果构建从单个组件起步，先拾起 98px 间距，栅格定下来之前别碰配色。
- 这个页面服务的是正用单个组件重建金融科技产品定价区、想找外观背后那组数字的前端开发者。
- 正在做金融科技产品定价区的团队，想要的是量出来的细节（98px 间距），而不是一张可以照抄的截图。
包含哪些内容
- 对着视口量出来的. 字体和间距在这里共用同一份清单：98px 间距。清单里最小和最大的两个值，划定了这套构图的取值范围。搬版式的时候把数值一起搬走。
- 颜色里没有装饰. 强调色只以按钮和链接的面积出现，底下的黑色 #000000 自始至终保持平涂。其余一切都落在黑色 #000000 上，高饱和配色才保得住可读性。
- 顺序由栅格定. 本该放一整段文案的地方，这一页放了一组面板，定价区因此扫得完。每块面板把一个观点和一个图标配在一起，扫读路径就一直保持横向。宁可删一块面板，也别缩字号。这份参考在 800x648 下收录。
- 要面板，不要段落. 本该放一整段文案的地方，这一页放了一组面板，定价区因此扫得完。每块面板把一个观点和一个图标配在一起，扫读路径就一直保持横向。面板的顺序就是阅读顺序。这份参考在 800x648 下收录。
动效与交互
反馈只出现在控件上
反馈只落在按需翻页浏览内容的滑块组件上，这才让信息密集的首屏不显得拥挤。状态在需求简报里就写明了，页面不依赖任何悬停特效库。交互层保持小。这份参考在 800x648 下收录。
不挡路的动效
这一份交付的是 800x648 下的静态构图，所以层级必须不靠动效也成立，它确实成立。只有响应指针的元素会动。
这个定价区背后的顺序
把你自己的文案放进这个定价区，顺序依然成立，因为这些元素不能互换：标题、卡片栅格各自只负责一件事。金融科技读者先看到主张，再看到选项。这份参考在 800x648 下收录。
把 Price Calculator 当规格书读
两个人在同时复刻时，靠眼睛是定不住构图的。需求简报消掉了这场争论：98px 间距，只说一次。这个定价区里没有任何一处依赖默认值。
在 Price Calculator 里先改什么
把新文案按需求简报写明的展示字号排（98px 间距），剩下的字阶会自己跟上，不用重做设计。新文案仍按同样的展示字号排，并且在加任何东西之前先重新对一遍对比度。
常见问题
为什么这条条目还要标注单个组件？
这份参考恰好是用单个组件构建的，但版式里没有一处依赖这个选择：间距、字体和动效数值换到你正在用的工具里照样成立。
用 Price Calculator 重建的页面，可以不署名就上线吗？
提示词由 motionsites.ai 公开发布，这里展示的是他们的渲染画面。把它当成结构与动效的参考，核对来源站的条款，然后用你自己的文案、素材和配色把构图重建过再上线。
拿到 Price Calculator 的简报之后，我能用它做什么？
页面上引用的内容全部出自收录的 3,168 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
