关于这个模板
Wanderful Hero 收录于 640x470，保留的是一份规格书，而不是一张画廊图片。它以“Our smart itineraries shape around you — your rhythm, your vibe, your hunger for adventure”开场，给这句话整个版心，而不是把它缩进一张卡片里。页面排的是 Inter，字号在需求简报里就已经定死。实现用的是 React 和 Tailwind CSS；里面的每个尺寸都写了下来，这正是它可复用的原因。对于需要在第一屏就显得刻意的旅行品牌首屏，它是一份合适的参考。
适合谁
- 接手这版首屏的市场人员，会用字号从 15px 到 17px、11px 间距检查改稿有没有保住原来的尺度。
- 用提示词给首屏提需求的人，会把这份 4,223 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和Wanderful Hero一样的内容负责人用。
包含哪些内容
- 一条会主动让开的导航. 字标占住左边缘，链接从它右边排开，全部用 Inter 排，所以这条导航条属于下面的页面，而不是另一套系统。导航条悬在 640x470 的构图上，自己没有底色，素材因此从它下面通到两边。
- 尺寸钉在需求简报里. 需求简报钉死字号从 15px 到 17px、11px 间距，其余交给摆放，这正好和一套会自己长大的比例相反。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。看着没道理的那些值，照留。
- 导航收在一行. 字标占住左边缘，链接从它右边排开，全部用 Inter 排，所以这条导航条属于下面的页面，而不是另一套系统。导航条悬在 640x470 的构图上，自己没有底色，素材因此从它下面通到两边。把这一行控制在单行。
- 一套字，两个角色. 字体和它的字号是一起写明的（Inter，跨 15–17px），字体因此在不同的构建之间搬得动。字号越大字距收得越紧，标题行在 15–17px 范围内才能保持完整。字阶是写明的，照着用。
动效与交互
边滚动，页面边拼装
内容绑定在滚动位置上（背景层与前景以不同速度移动），所以构图随读者的移动而变化，而不是按计时器播放。它只是几行代码，不是一个滚动库，复刻因此很轻。这份参考在 640x470 下收录。
交互限制在局部
每个可交互元素只做一件事（悬停态只给按钮和链接，而不是每张卡片），状态才因此可预期。交互状态不会推动版式，指针底下不会有东西跳。交互层保持小。这份参考在 640x470 下收录。
把这个首屏变成你自己的
直接替换是有上限的：如果你的产品需要另一套层级，字号从 15px 到 17px、11px 间距会跟你作对。这种情况先改顺序，再改数值。新文案仍按同样的展示字号排，并且在加任何东西之前先重新对一遍对比度。
Wanderful Hero 怎么安排第一次阅读的顺序
旅行读者落到一屏内容上时，是先扫再读的。这套版式回应了这一点：导航、标题、数据行、背景片段的尺寸就是为扫读定的，字号从 15px 到 17px、11px 间距让每一站彼此分明。旅行读者先看到主张，再看到选项。
把 Wanderful Hero 当规格书读
固定尺度的代价是即兴空间更小。字号从 15px 到 17px、11px 间距让构图保持连贯，但新元素必须被装进去，而不是随手摆上去。这个首屏里没有任何一处依赖默认值。
常见问题
Wanderful Hero 背后的提示词到底有多长？
简报是从页面上收录下来的，共 4,223 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
Wanderful Hero 有多少地方依赖 React 和 Tailwind CSS？
Wanderful Hero 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
拿到 Wanderful Hero 的简报之后，我能用它做什么？
页面上引用的内容全部出自收录的 4,223 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
