关于这个模板
Retro-Futurist 收录于 640x474，保留的是一份规格书，而不是一张画廊图片。“Glad you stopped in. Good taste tends to find us. Now, what are we building?” 就是整套版式要承载的那一行。配色是灰色 #B3B1B3 打底，字体用 HelveticaNowDisplay-Medium。这份参考用 React 和 Tailwind CSS 构建，但版式上的决定都独立于它写清楚了。动效归结起来就是38ms 的过渡。写作时让它开着：能迁移到你页面上的，是那份 5,713 字符的简报。
适合谁
- 先从字号从 13px 到 32px、26px 间距开始，让配色跟着走，因为这版首屏靠的就是间距。
- 给要改写一版首屏、标题长度又得和Retro-Futurist一样的内容负责人用。
- 留住 HelveticaNowDisplay-Medium，围绕它重建首屏，别为你的品牌另开一套字阶。
包含哪些内容
- 导航条上不留多余. 一短行链接加一个操作压在首屏上，尺寸按字号从 13px 到 32px、26px 间距控住，导航条因此永远不会跟它背后的构图抢。导航条悬在 640x474 的构图上，自己没有底色，素材因此从它下面通到两边。链接控制在四到五个，这一行的尺寸就是照这个定的。
- 公告胶囊. 一枚徽标只说一件事：胶囊用 HelveticaNowDisplay-Medium 的最小字阶待在标题上方，没有别的元素来争这个位置。胶囊用的是需求简报里最小的字阶，所以它读起来是标签，而不是第二个标题。
- 字和画幅共用一套档位. 需求简报钉死字号从 13px 到 32px、26px 间距、38ms 的过渡，其余交给摆放，这正好和一套会自己长大的比例相反。落回这些数值的重建不用再调就长得像参考。
- 胶囊只装那一件新事. 一枚徽标只说一件事：胶囊用 HelveticaNowDisplay-Medium 的最小字阶待在标题上方，没有别的元素来争这个位置。胶囊用的是需求简报里最小的字阶，所以它读起来是标签，而不是第二个标题。让它待在标题上方，不要挪到旁边。
动效与交互
入场动作即签名
打字机式逐字写入是页面上唯一的入场，需要维护的动态只有这一套。结束时的状态就是一张静帧该有的构图，所以没有东西依赖动画跑完。这份参考在 640x474 下收录。
状态变化也有时长
悬停、按下和聚焦都在 38ms 内完成，界面因此显得即时。没有任何东西在等滚动位置，所以一碰页面就有反应。
把这个首屏变成你自己的
代价是辨识度。 Retro-Futurist 的东西留得太多，页面读起来就是别人的；保住数字、换掉内容，它就是你的。换一个品牌，整套画幅都能接着用。这份参考在 640x474 下收录。
这个首屏背后的数字
几乎每个决定都是一个可以核对的数值：字号从 13px 到 32px、26px 间距、38ms 的过渡。字体固定用 HelveticaNowDisplay-Medium，所以替换必须保持同样的比例。素材是 640x474 下的一张静帧。这个首屏里没有任何一处依赖默认值。
这个首屏在论证什么
5,713 个字符的需求简报，产出的是一屏没有填充内容的首屏。里面的数值都是明写的（字号从 13px 到 32px、26px 间距），所以换了文案，构图照样读得通。 Retro-Futurist 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
常见问题
Retro-Futurist 背后的提示词到底有多长？
简报是从页面上收录下来的，共 5,713 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
重建 Retro-Futurist 必须用 React 和 Tailwind CSS 吗？
Retro-Futurist 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Retro-Futurist 里有多少东西是动的？
动效和版式写得一样细：状态切换落在 38ms 区间内。先复刻构图、再对时长，因为版式立住之后时长更好对。
