关于这个模板
这是 SkyElite Private Jets 的首屏，连同生成它的那份需求简报一起发布，而不是只给一张截图。标题是“Your dedication deserves recognition”，首屏其余部分都围着它排。整套配色是深蓝色 #1A2229 打底，页面字体是 Inter。交付形式是 React 和 Tailwind CSS，收录于 1920x1455，所以画幅在任何一行代码写下去之前就已经定好。这份参考是给这样的旅行品牌用的：希望首屏在动手构建之前就已经定下来。收录的提示词记录于 1920x1455，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1920x1455 的画幅一直到最小的间距档。
适合谁
- 正在给旅行品牌首屏提案的代理公司，想把 100vh 高的板块、12px 间距写进方案里，好让报价在启动会之后仍然站得住。
- 给正在做旅行品牌首屏、背后还没有设计系统的独立创始人用。
- 用提示词给首屏提需求的人，会把这份 2,285 字符的提示词当作起点。
包含哪些内容
- 导航是刻意做细的. 导航条就是一行文字加一个操作，尺寸按 100vh 高的板块、12px 间距定，所以它读起来是一条细带，而不是一整条色块。导航条悬在 1920x1455 的构图上，自己没有底色，素材因此从它下面通到两边。
- 层级交给字体. 字体是 Inter，用在字阶最高一档；支撑文案掉得远低于它，层级因此不用靠颜色就读得出来。数字和界面共用同一套字，统计数据与标签因此属于同一套系统。
- 每个尺寸都写下来了. 尺寸是收录时就在需求简报里写下的（100vh 高的板块、12px 间距），重建因此可以逐项核对，而不是大约像。画幅比例和尺寸记在一起，重建时连比例也一起对。
- 字重按角色写明. 字体是 Inter，用在字阶最高一档；支撑文案掉得远低于它，层级因此不用靠颜色就读得出来。数字和界面共用同一套字，统计数据与标签因此属于同一套系统。一套字，职责清楚。
动效与交互
交互区域刻意做小
每个可交互元素只做一件事（悬停态只给按钮和链接，而不是每张卡片），状态才因此可预期。看起来能点的控件就真的能点，不会出现假的暗示。几个可靠的状态，胜过一长串特效。这份参考在 1920x1455 下收录。
不挡路的动效
这一份交付的是 1920x1455 下的静态构图，所以层级必须不靠动效也成立，它确实成立。需求简报里没有动画库，复刻的工作量因此很小。静止是一个成立的选择。
这个首屏怎么重排
这里的响应式说的是尺度在变，而不是层级在变：板块高度锁在 100vh、导航收进移动端菜单。文字始终留在折叠线以上，控件保持足够大的点击面积，减少动态效果的设置也被认真对待。自动播放和动效都做了诚实的兜底，所以它们不可用时页面依然能表达自己。
在 SkyElite Private Jets 里先改什么
先改文案，别先改颜色。把“Your dedication deserves recognition”重写成一句说你自己产品的话，再用 Inter 按需求简报里的字号排。新加的元素如果不能帮助说清产品主张或下一步动作，就该挪到折叠线以下。
这个首屏背后的数字
把这个首屏拆开，这些数值依然能描述它：100vh 高的板块、12px 间距，管住画幅和下面的节奏。这个首屏里没有任何一处依赖默认值。
常见问题
SkyElite Private Jets 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 2,285 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
SkyElite Private Jets 有多少地方依赖 React 和 Tailwind CSS？
SkyElite Private Jets 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
SkyElite Private Jets 能用在客户项目里吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 1920x1455 下收录。
