关于这个模板
VaultShield 收录于 640x468，保留的是一份规格书，而不是一张画廊图片。整套配色是灰色 #CFC8C5 打底、深调 #192837 给文字、深调 #7342E2 承担强调色，页面字体是 Helvetica Now Display。实现用的是 React 和 Tailwind CSS；里面的每个尺寸都写了下来，这正是它可复用的原因。这个页面的动效控制在0.45s 的过渡。当金融科技的首屏必须扛住一次文案改动、又不能重做设计时，它最有用。
适合谁
- 这个首屏服务的是那些得向没参加启动会的人解释 560px 断点的团队。
- 用提示词给首屏提需求的人，会把这份 4,734 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和VaultShield一样的内容负责人用。
包含哪些内容
- 链接在前，操作在后. 导航条上只有字标、板块链接和一个 #7342E2 按钮，尺寸按 100vh 高的板块、24px 间距定，永远不会长成第二个页头。标签短到能在 560px 下一行放下，当前项用字重标出，而不是加一个胶囊底。
- 一套字，克制着用. 由 Helvetica Now Display 一个字体挑大梁：从标题到支撑句字号断得很干脆，字号越大字距收得越紧，层级因此由字体承担，而不是靠颜色。行高跟着字号档位走，而不是一个全局值。换字体，留档位。
- 间距档位是写明的. 这份清单很短（100vh 高的板块、24px 间距、0.45s 的过渡、560px 断点），整套系统因此能靠手一个个核过去。每个值都能对着收录的提示词核一遍，重建因此是可验证的，而不是大约像。
- 该流体的时候就流体. 需求简报给标题用的是 72px 到 24px 的 clamp，长句子才不会在尴尬的位置折行。视口变窄时，字体的角色不变，只是尺寸变。层级保留，尺寸可以改。
动效与交互
短而互相匹配的时长
动画预算小而明确：0.45s只用在状态变化上，不用在入场动画上。缓动和时长写在一起（0.45s），复刻时没法悄悄换成另一种手感。
交互限制在局部
反馈只限在悬停态只给按钮和链接，而不是每张卡片上，版式其余部分是一套固定的构图。交互状态不会推动版式，指针底下不会有东西跳。这份参考在 640x468 下收录。
把这个首屏变成你自己的
假设你只有一个下午。换掉标题和行动按钮的标签，别动100vh 高的板块、24px 间距，你也能得到一个看起来是刻意做过的页面。可复用的是构图，换一个品牌它照样成立。
这个首屏背后的数字
如果你要把这页交给开发者，有用的交付物是那份需求简报。它写明100vh 高的板块、24px 间距、0.45s 的过渡、560px 断点，不留任何需要你们两个人各自解读的地方。这个首屏里没有任何一处依赖默认值。
VaultShield 怎么安排第一次阅读的顺序
这份需求简报有 4,734 个字符，把阅读顺序明写出来：导航、数据行、功能列表、背景片段，中间用100vh 高的板块、24px 间距隔开。金融科技读者先看到主张，再看到选项。
常见问题
VaultShield 背后的提示词到底有多长？
简报是从页面上收录下来的，共 4,734 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注 React 和 Tailwind CSS？
VaultShield 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
VaultShield 的动效是由什么驱动的？
过渡挂在界面状态上，而不是挂在滚动时间轴上，收敛在 0.45s 这个区间内。简报把这些数值记录在案，复刻时照着对齐就行，不用猜。
