关于这个模板
把 Securify Data Security 当作首屏规格书来读：这些数值在页面动手之前就先写下来了。整套配色是深蓝色 #01090E 打底、白色 #FFFFFF 给文字，页面字体是 Readex Pro。交付形式是 React 和 Tailwind CSS，收录于 800x551，所以画幅在任何一行代码写下去之前就已经定好。当AI 与 SaaS的首屏必须扛住一次文案改动、又不能重做设计时，它最有用。下面引用的每一项都是那份简报里的数值，从 800x551 的画幅一直到最小的间距档。收录的提示词记录于 800x551，所以这一页引用的每个数值都能追回到它。
适合谁
- 如果动效必须砍掉，这版首屏照样读得通，靠固定 15px 的标题字号、240px 间距撑起层级。
- 用提示词给首屏提需求的人，会把这份 3,822 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和Securify Data Security一样的内容负责人用。
包含哪些内容
- 导航是刻意做细的. 一条细导航压在首屏上，字标在左，链接用 Readex Pro 排，整套构图因此先读成内容、再读成界面。导航条悬在 800x551 的构图上，自己没有底色，素材因此从它下面通到两边。
- 没有一样是继承来的. 版式走的是绝对值，不是比例：固定 15px 的标题字号、240px 间距。画幅比例和尺寸记在一起，重建时连比例也一起对。搬版式的时候把数值一起搬走。
- 顶栏只放一个操作. 一条细导航压在首屏上，字标在左，链接用 Readex Pro 排，整套构图因此先读成内容、再读成界面。导航条悬在 800x551 的构图上，自己没有底色，素材因此从它下面通到两边。这条导航只有几个元素，不用组件库也能重建。
- 需求简报点了名. 版式走的是绝对值，不是比例：固定 15px 的标题字号、240px 间距。画幅比例和尺寸记在一起，重建时连比例也一起对。换题材，别换档位。
动效与交互
反馈只出现在控件上
每个可交互元素只做一件事（悬停态只给按钮和链接，而不是每张卡片），状态才因此可预期。每个状态只改一个属性，反馈因此保持清楚。状态宁少，但要写全。这份参考在 800x551 下收录。
不挡路的动效
这一份交付的是 800x551 下的静态构图，所以层级必须不靠动效也成立，它确实成立。动效被当作反馈，而不是装饰。
把这个首屏变成你自己的
代价是辨识度。 Securify Data Security 的东西留得太多，页面读起来就是别人的；保住数字、换掉内容，它就是你的。别动的是画幅和字阶。这份参考在 800x551 下收录。
这个首屏在论证什么
模板会用一个个模块把首屏填满，这个首屏只用导航、标题、公告徽标、数据行、背景片段就收住。差别体现在固定 15px 的标题字号、240px 间距上：没有任何东西是靠撑开去填满空间的。 Securify Data Security 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
Securify Data Security 怎么安排第一次阅读的顺序
注意力是被引导的，不是碰运气。顺序依次是导航、标题、公告徽标、数据行、背景片段，每一站都按固定 15px 的标题字号、240px 间距定尺寸，所以不会有东西乱序出现。 SaaS读者先看到主张，再看到选项。
常见问题
Securify Data Security 背后的提示词到底有多长？
简报是从页面上收录下来的，共 3,822 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
重建 Securify Data Security 必须用 React 和 Tailwind CSS 吗？
Securify Data Security 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
用 Securify Data Security 重建的页面，可以不署名就上线吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x551 下收录。
