关于这个模板
F1 Racing Hub 交给了生活方式品牌一个已经做完的首屏，以及做出它的那组数字。整页都建立在深蓝色 #0A0E1C 打底、亮橙色 #EDB40B 承担强调色之上。实现用的是 React 和 Tailwind CSS；里面的每个尺寸都写了下来，这正是它可复用的原因。需求简报把动效预算花在400ms 的过渡、cubic-bezier(0.16,1,0.3,1)、一段循环视频打底上。对于需要在第一屏就显得刻意的生活方式品牌首屏，它是一份合适的参考。
适合谁
- 要找代理公司提案的创始人，会用 1470x1080 的画幅当第一轮的验收标准。
- 给必须在不做原型的前提下向客户解释 768px 表现的工作室用。
- 这一版首屏服务的是需要一屏证据、证明生活方式的文案能扛住 7s 的循环视频的创始人。
包含哪些内容
- 导航不带底色. 导航是一条细带，而不是一整条色块：字标在左，链接偏右居中，一个 #EDB40B 操作，全部悬在首屏之上，自己没有底色。标签短到能在 768px 下一行放下，当前项用字重标出，而不是加一个胶囊底。
- 通栏视频垫在文字后面. 视频落在 1470x1080 构图的最底层，文字排在它之上，两者之间什么都没有。循环短到 7s，眼睛会把它读成肌理，而不是一条时间轴。
- 该流体的时候就流体. 需求简报给标题用的是 13px 到 120px 的 clamp，长句子才不会在尴尬的位置折行。视口变窄时，字体的角色不变，只是尺寸变。
- 导航条落在页面栅格上. 导航是一条细带，而不是一整条色块：字标在左，链接偏右居中，一个 #EDB40B 操作，全部悬在首屏之上，自己没有底色。标签短到能在 768px 下一行放下，当前项用字重标出，而不是加一个胶囊底。字标占的位置不超过它那行字需要的宽度。
动效与交互
指针只在有用的地方出现
页面只在能被操作的地方给出回应：悬停态只给按钮和链接，而不是每张卡片、按需翻页浏览内容的滑块组件，除此之外什么都不动。页面不会弹出模态框，也不劫持滚动；交互始终限制在元素本身。指针效果只留在控件上。这份参考在 1470x1080 下收录。
时长以需求简报为准
控件里的动效短且可重复：每次状态变化都是 400ms。反馈要读成一次回应而不是一段动画，靠的就是这组短时长。
在 F1 Racing Hub 里先改什么
一上来先换配色是常见的错。它只改了气氛，没碰构图，撑住版式的仍然是字号从 13px 到 120px、42vh 高的板块；先做文案和素材，配色放到最后。你的强调色要过和参考强调色同样的对比度测试。
这个首屏背后的时序
页面让人坐不住，通常是因为入场太多。这一版把清单压得很短：400ms 的过渡、7s 的循环视频、悬停态与按下态。这个首屏里没有为动而动的动画。
这份生活方式需求简报为什么站得住
假设你的素材比文案更吵，这套构图就是为这种情况做的。素材是一段 7s 的 1470x1080 循环。画幅保持安静，字号从 13px 到 120px、42vh 高的板块把读者的注意力留在文字上。它给生活方式读者的是一条通向主张的最短诚实路径。
常见问题
F1 Racing Hub 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 10,448 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么 F1 Racing Hub 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 10,448 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
能用别的技术栈重建 F1 Racing Hub 的首屏吗？
F1 Racing Hub 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
