关于这个模板
Travel Journal 收录于 1470x1080，保留的是一份规格书，而不是一张画廊图片。配色控制在深蓝色 #1A1A1E 打底、灰调青绿色 #77A0B0 承担强调色之内，字体用 Inter。交付形式是 React 和 Tailwind CSS，收录于 1470x1080，所以画幅在任何一行代码写下去之前就已经定好。需求简报把动效预算花在150ms 的过渡、一段循环视频打底上。从收录的需求简报起步，然后改这个博客区，而不是从零重建。收录的提示词记录于 1470x1080，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1470x1080 的画幅一直到最小的间距档。
适合谁
- 如果这个博客区有三个人要改，就给内容负责人 52px 圆角、10px 间距，而不是一张截图。
- 自己写博客区文案的产品团队，需要每一行都守住展示级字号当初按长度定下的上限。
- 产品市场的人需要博客区在背后有6.4s 的循环视频时依然好读。
包含哪些内容
- 一行到底，不做抽屉. 导航是一条细带，而不是一整条色块：字标在左，链接偏右居中，一个 #77A0B0 操作，全部悬在博客区之上，自己没有底色。链接比字标小一档，#77A0B0 操作是导航条上唯一有分量的元素。
- 尺寸钉在需求简报里. 尺寸是写明的，不是继承来的：52px 圆角、10px 间距、150ms 的过渡。换字体或换文案，这些关系依然成立。每个值对应一件事：一个字号档位、一段间距、一个圆角或一次过渡。搬运页面时保留这些写明的数值。
- 封面帧也算数. 1470x1080 的画幅由一段循环填满，它在文案后面播放，不要任何控件。循环短到 6.4s，眼睛会把它读成肌理，而不是一条时间轴。
- 字阶就是样式系统. 由 Inter 一个字体挑大梁：从标题到支撑句字号断得很干脆，字号越大字距收得越紧，层级因此由字体承担，而不是靠颜色。界面文字始终用同一套字，同一字号下不会混进第二种声音。
动效与交互
短而互相匹配的时长
时长短而统一：150ms悬停态和按下态因此读起来是一套系统，而不是一堆各自为政的效果。缓动一改，时长必须跟着重新看一遍。
环境动效交给循环
环境动感是一段 1470x1080 下的 6.4s 片段，在文案后面安静循环，不响应指针。因为是静音的，循环可以在文案下面跑，不抢声音，也不抢注意力。拍摄或导出按 1470x1080 或更宽的尺寸。
把这个博客区变成你自己的
先改文案和素材，再改颜色，最后才动版式。1470x1080 的画幅和 Inter 的字阶是撑住整页的东西，所以要在它们周围做替换，而不是从它们中间穿过去。你的强调色要过和参考强调色同样的对比度测试。
Travel Journal 里什么在动
这里的动效是一组决定，而不是一个库：150ms 的过渡、6.4s 的循环视频，而且没有任何东西跟着滚动播放。结果是一个像被设计过的页面：时长短、只有一次入场，状态变化用来确认操作，而不是装饰。这个博客区里没有为动而动的动画。
把 Travel Journal 当规格书读
两个人在同时复刻时，靠眼睛是定不住构图的。需求简报消掉了这场争论：52px 圆角、10px 间距、150ms 的过渡，只说一次。这个博客区里没有任何一处依赖默认值。
常见问题
拿到 Travel Journal 的简报之后，我能用它做什么？
页面上引用的内容全部出自收录的 5,151 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Travel Journal 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 1470x1080 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
重建 Travel Journal 必须用 React 和 Tailwind CSS 吗？
Travel Journal 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
