关于这个模板
Gulfselite 用一份收录下来的需求简报，解决了面向旅行品牌做首屏时的问题。整套配色是灰调橙色 #69574B 打底、白色 #FEFEFE 给文字，页面字体是 Inter。实现用的是 Tailwind 和原生 JavaScript；里面的每个尺寸都写了下来，这正是它可复用的原因。动效预算就是120ms 的过渡、一段循环视频打底。当你要做面向旅行品牌的首屏、想要一个成品构图而不是一个起点时，就拿它当参照。收录的提示词记录于 1920x1448，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1920x1448 的画幅一直到最小的间距档。
适合谁
- 如果这份参考只是个起点，设计师可以留着 Tailwind 和原生 JavaScript，把首屏其余部分重建。
- 得按常规流程交付这类页面的前端开发者，会把 Tailwind 和原生 JavaScript 的结构当作参考实现。
- 给加入一个已经在用 Tailwind 和原生 JavaScript 的现成项目、只需要把文案换掉的设计师用。
包含哪些内容
- 一条会主动让开的导航. 一短行链接加一个操作压在首屏上，尺寸按 20px 间距、120ms 的过渡控住，导航条因此永远不会跟它背后的构图抢。导航条悬在 1920x1448 的构图上，自己没有底色，素材因此从它下面通到两边。加底色之前，先把自己的素材垫在导航条下面测一遍。
- 胶囊只装那一件新事. 一枚徽标只说一件事：胶囊用 Inter 的最小字阶待在标题上方，没有别的元素来争这个位置。它的位置让标题继续占住构图的正中。让它待在标题上方，不要挪到旁边。
- 需求简报点了名. 需求简报里的每个尺寸都是能反测量回去的数值：20px 间距、120ms 的过渡。字体和版式共用同一套档位，换掉其中一样时不会有东西漂移。
- 素材上不加色罩. 素材是一段 9.9s 的片段，按 cover 裁进 1920x1448 的画幅，任何宽度下都不会出现黑边。按 1920x1448 或更宽的尺寸导出，cover 裁切就继续成立。
动效与交互
时长以需求简报为准
过渡在需求简报里写明为 120ms，控件上的时长就以这个值为准。控件之间复用同一个值，时长就不会各自漂移。
载入时页面自己搭起来
逐词入场是页面上唯一的入场，需要维护的动态只有这一套。跑完之后的画面就是需求简报里那张静帧的构图，所以这段动态是加分，不是必需。这份参考在 1920x1448 下收录。
这个首屏背后的时序
套一个预设动画包上线会更快。需求简报偏偏写明了120ms 的过渡、9.9s 的循环视频、逐词出现的标题，页面因此读起来是被写出来的，而不是被摆出来的。这个首屏里没有为动而动的动画。
把这个首屏变成你自己的
先换内容，再回头检查画幅。20px 间距、120ms 的过渡就是换文案时要护住的那几个值。可复用的是构图，换一个品牌它照样成立。
这个首屏怎么重排
这里的字号是弹性缩放而不是阶梯式跳档（40px 到 20px 的 clamp），所以展示字不会在宽度之间跳。随视口改变的是尺度，不是顺序。
常见问题
复制 Gulfselite 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 2,498 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
Gulfselite 有多少地方依赖 Tailwind 和原生 JavaScript？
这份参考恰好是用 Tailwind 和原生 JavaScript 构建的，但版式里没有一处依赖这个选择：间距、字体和动效数值换到你正在用的工具里照样成立。
Gulfselite 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 2,498 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
