关于这个模板
在动手为旅行品牌重建定价区之前，先读 AI Trip Planner：构图和它背后的规格书都在这里。页面自己的标题是“Where will you go next?”，整个构图就是围绕这串字搭的。配色是白色 #FAFAFA 打底、黑色 #0A0A0A 给文字，字体用 Geist。这一条会把生成页面的技术栈（React 和 Tailwind CSS）写出来，而不是藏起来。动作被收进一段循环视频打底里。当这个定价区需要在新增任何板块之前先定下顺序时，就拿它来用。
适合谁
- 给做旅行项目提案、需要在第一次回复客户时就带上 760px 断点的代理公司用。
- 如果这份参考只是个起点，设计师可以留着 1470x1080 画幅，把定价区其余部分重建。
- 在这版定价区上继续加块的内部小组，需要把字号从 15px 到 40px、15px 间距原样带进新块里。
包含哪些内容
- 链接只在一个断点收起. 导航只有一行，下面没有二级。在 760px 以下，链接收进一个全屏浮层。标签短到能在 760px 下一行放下，当前项用字重标出，而不是加一个胶囊底。
- 素材垫在文字后面. 视频落在 1470x1080 构图的最底层，文字排在它之上，两者之间什么都没有。循环短到 6s，眼睛会把它读成肌理，而不是一条时间轴。按 1470x1080 或更宽的尺寸导出，裁切才不失真。
- 胶囊只装那一件新事. 一枚徽标只说一件事：胶囊用 Geist 的最小字阶待在标题上方，没有别的元素来争这个位置。胶囊用的是需求简报里最小的字阶，所以它读起来是标签，而不是第二个标题。让它待在标题上方，不要挪到旁边。
- 每种宽度都有明确行为. 字阶顶部是流体的（15px 到 40px 的 clamp），其余档位固定，视口收窄时画幅依然保持成构图。视口变窄时，字体的角色不变，只是尺寸变。
动效与交互
交互层就是这些控件
交互层是刻意做小的：悬停态只给按钮和链接，而不是每张卡片。看起来能点的控件就真的能点，不会出现假的暗示。这份参考在 1470x1080 下收录。
是循环，不是时间轴
整个环境层就是一段 6s 的片段：它在文案后面播放，循环看不出接缝，也从不响应指针。自动播放被拦截时有首帧封面顶上，所以动效是加分项，而不是必需品。
AI Trip Planner 怎么安排第一次阅读的顺序
严格的顺序会让你以后失去灵活性。在折叠线以上加一个板块，字号从 15px 到 40px、15px 间距就得重新切一遍，因为这条序列是承重的，不是装饰。旅行读者先看到主张，再看到选项。
这个定价区在论证什么
AI Trip Planner 成立，是因为它的层级是被决定出来的，而不是装饰出来的。需求简报定下了字号从 15px 到 40px、15px 间距、760px 断点，所以新文案是落进画幅里，而不是把画幅重新打开。它给旅行读者的是一条通向主张的最短诚实路径。
把这个定价区变成你自己的
假设你只有一个下午。换掉标题和行动按钮的标签，别动字号从 15px 到 40px、15px 间距，你也能得到一个看起来是刻意做过的页面。别动的是画幅和字阶。
常见问题
复制 AI Trip Planner 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 6,398 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么 AI Trip Planner 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 6,398 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
能用别的技术栈重建 AI Trip Planner 的定价区吗？
AI Trip Planner 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
