关于这个模板
这是 Neo Museum 的落地页，连同生成它的那份需求简报一起发布，而不是只给一张截图。页面自己的标题是“Step into the natural world and discover the stories written millions of years ago”，整个构图就是围绕这串字搭的。颜色只用了白色 #FCFCFC 打底、黑色 #0A0A0A 给文字，正文排的是 Inter。这份参考用 React 和 Tailwind CSS 构建，但版式上的决定都独立于它写清楚了。动效是2800ms 的过渡、cubic-bezier(0.16,1,0.3,1)，克制到文案依然是主角。把它当作面向教育或社区品牌做落地页的需求简报：它要经得起复刻，而不只是第一眼好看。
适合谁
- 要找代理公司提案的创始人，会用 640x468 的画幅当第一轮的验收标准。
- 需要先看数字的设计师：字号从 12px 到 15px、75vh 高的板块，全部引自需求简报。
- 给正在做教育或社区品牌落地页、背后还没有设计系统的独立创始人用。
包含哪些内容
- 一行到底，不做抽屉. 导航条就是一行文字加一个操作，尺寸按字号从 12px 到 15px、75vh 高的板块定，所以它读起来是一条细带，而不是一整条色块。导航条悬在 640x468 的构图上，自己没有底色，素材因此从它下面通到两边。
- 证据放在折叠线之上. 这行数字就是证据：三到四组数字排成一行，每组下面配小标签，字体和界面共用同一套 Inter，所以它读起来是数据，不是装饰。标签同一个字号，某个标签更长也不会改变这一行的高度。
- 间距档位是写明的. 版式是对着一组固定值（字号从 12px 到 15px、75vh 高的板块、10px 间距、2800ms 的过渡）解出来的，首屏在任何宽度下因此都保持成构图。每个值对应一件事：一个字号档位、一段间距、一个圆角或一次过渡。
- 该放证据的地方放数字. 这行数字就是证据：三到四组数字排成一行，每组下面配小标签，字体和界面共用同一套 Inter，所以它读起来是数据，不是装饰。标签同一个字号，某个标签更长也不会改变这一行的高度。宁可删一个数字，也别缩标签字号。
动效与交互
短而写明的时长
过渡在需求简报里写明为 2800ms缓动是 cubic-bezier(0.16,1,0.3,1)，控件上的时长就以这个值为准。同一组时长在控件之间复用，交互因此像一套系统。
数据在进入时递增
数字进入视口时递增，用 Inter 按主标题字号排，其他地方不动。标签和数字周围的一切都保持静止。
这个落地页怎么重排
宽屏下构图是密的，窄屏下板块高度锁在 75vh、导航收进移动端菜单。两种状态需求简报都写了。控件大到能点，文案在任何宽度下都保持同样的阅读顺序。
对教育与社区来说成立的地方
如果你的首屏现在要解释三件事，这一版只解释一件。导航、标题、公告徽标、数据行、背景片段按阅读顺序依次摆开，字号从 12px 到 15px、75vh 高的板块定下节奏。 Neo Museum 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
Neo Museum 怎么安排第一次阅读的顺序
如果你的页面现在以功能开头，就该照这个顺序改：导航、标题、公告徽标、数据行、背景片段放前面，支撑细节跟在后面，字号从 12px 到 15px、75vh 高的板块定下两者的距离。教育读者先看到主张，再看到选项。
常见问题
Neo Museum 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 15,036 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么 Neo Museum 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 15,036 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
为什么这条条目还要标注 React 和 Tailwind CSS？
Neo Museum 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
