关于这个模板
Guardnet Benefits 用一份收录下来的需求简报，解决了面向金融科技产品做功能区时的问题。配色是黑色 #0E0E0F 打底、蓝色 #1E3A8A 承担强调色。这一条会把生成页面的技术栈（React 和 Tailwind CSS）写出来，而不是藏起来。当这个功能区需要在新增任何板块之前先定下顺序时，就拿它来用。这一页剩下的部分按板块、再按时序和数值把这个功能区拆开，不加任何简报里没有的说法。需求简报钉住的一切（画幅、字号、时长、断点）下面都写出来了，所以你可以照着复刻这个功能区，不用猜它背后的意图。下面引用的每一项都是那份简报里的数值，从 640x466 的画幅一直到最小的间距档。收录的提示词记录于 640x466，所以这一页引用的每个数值都能追回到它。
适合谁
- 先从字号从 13px 到 14px、13px 间距开始，让配色跟着走，因为这版功能区靠的就是间距。
- 同时跑好几个项目的工作室负责人，会把这一版功能区当作其他页面照抄的样板。
- 自己写功能区文案的产品团队，需要每一行都守住展示级字号当初按长度定下的上限。
包含哪些内容
- 量出来的，不是估的. 需求简报里的每个尺寸都是能反测量回去的数值：字号从 13px 到 14px、13px 间距。间距和字号用同一套单位写明，两者可以直接比。
- 这里扫读胜过细读. 本该放一整段文案的地方，这一页放了一组面板，功能区因此扫得完。面板内的小标题比自己那块正文高一档，而不是比页面标题低一档。这份参考在 640x466 下收录。
- 数字用展示字号. 这一行放在功能区的高处，当证据用，而不是当装饰。数字带 #1E3A8A 强调色，周围一切都留在正文色上。
- 中段交给面板. 本该放一整段文案的地方，这一页放了一组面板，功能区因此扫得完。面板内的小标题比自己那块正文高一档，而不是比页面标题低一档。面板小标题对齐页面的字阶。这份参考在 640x466 下收录。
动效与交互
交互只落在控件上
交互只发生在各自的控件上（悬停态只给按钮和链接，而不是每张卡片），页面其他地方不会跟着动。反馈只限在控件上，所以控件周围的构图保持静止。指针效果只留在控件上。这份参考在 640x466 下收录。
几乎没有动效
需求简报里没有动画，页面靠 640x466 的版式撑住，唯一的变化是悬停态和按下态。构图保持不动，所以页面得靠层级撑住，而它撑住了。
这个功能区在论证什么
你完全可以把这页重建成一摞分开的卡片，丢掉的只是那个论点。这个功能区读起来是一个决定：数据行、卡片栅格、背景片段串成一条序列。它给金融科技读者的是一条通向主张的最短诚实路径。这份参考在 640x466 下收录。
这个功能区背后的数字
如果你要把这页交给开发者，有用的交付物是那份需求简报。它写明字号从 13px 到 14px、13px 间距，不留任何需要你们两个人各自解读的地方。这个功能区里没有任何一处依赖默认值。
这个功能区背后的顺序
营销页面会把证据堆在折叠线以下然后听天由命，这个功能区把数据行、卡片栅格、背景片段直接推到读者面前，其余的先按住不发。金融科技读者先看到主张，再看到选项。这份参考在 640x466 下收录。
常见问题
Guardnet Benefits 背后的提示词到底有多长？
简报是从页面上收录下来的，共 4,108 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么 Guardnet Benefits 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 4,108 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
重建 Guardnet Benefits 必须用 React 和 Tailwind CSS 吗？
Guardnet Benefits 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
