关于这个模板
把 Interactive Discovery 当作首屏规格书来读：这些数值在页面动手之前就先写下来了。配色控制在黑色 #000000 打底、白色 #FFFFFF 给文字、亮橙色 #E8702A 承担强调色之内，字体用 Inter。这一条会把生成页面的技术栈（React 和 Tailwind CSS）写出来，而不是藏起来。需求简报把动效预算花在1.1s 的过渡、cubic-bezier(0.16,1,0.3,1)上。当你要做面向工业企业的首屏、想要一个成品构图而不是一个起点时，就拿它当参照。
适合谁
- 给做工业项目提案、需要在第一次回复客户时就带上 640x474 画幅的代理公司用。
- 这个首屏回答的是想知道 100vh 高的板块、28px 间距在布局里到底管哪一块的构建者。
- 用提示词给首屏提需求的人，会把这份 6,894 字符的提示词当作起点。
包含哪些内容
- 链接只在一个断点收起. 导航条上只有字标、板块链接和一个 #E8702A 按钮，尺寸按 100vh 高的板块、28px 间距定，永远不会长成第二个页头。链接比字标小一档，#E8702A 操作是导航条上唯一有分量的元素。
- 字号断得很干脆. 字体是 Inter，用在字阶最高一档；支撑文案掉得远低于它，层级因此不用靠颜色就读得出来。字距按字号分别设定，展示行和注释不共用同一个字距值。
- 先文案，后装饰. 首屏的排法是让文案先落地：层级由字体承担，640x474 的画幅撑住构图，其余数值保持安静。页面在 640x474 下就是一套完整构图，所以文案变了它依然立得住。
- 对着视口量出来的. 这份清单很短（100vh 高的板块、28px 间距、1.1s 的过渡、cubic-bezier(0.16,1,0.3,1) 缓动曲线），整套系统因此能靠手一个个核过去。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。换字体、换文案可以，别换字阶。
动效与交互
尊重减少动态效果
需求简报里带了 prefers-reduced-motion 分支，所以入场动画可以关掉，布局不会丢。把这段分支直接抄进你的实现。这段分支是需求简报的一部分，不是事后补的。这份参考在 640x474 下收录。
画布就是视觉本身
一块 WebGL 画布给页面提供纵深，周围的版式保持扁平，所以只有这块渲染在争取注意力。构图必须扛得住渲染失败，因为那块空间没有别的东西来填。这份参考在 640x474 下收录。
Interactive Discovery 里什么在动
最后再移植动效。需求简报把它定成1.1s 的过渡、悬停态与按下态、实时画布，等版式就位之后再对齐会容易得多。这个首屏里没有为动而动的动画。
Interactive Discovery 怎么安排第一次阅读的顺序
认定一条阅读路径，就意味着别的路径被关掉了。需求简报接受这一点，把导航、公告徽标、数据行固定在原处，并把100vh 高的板块、28px 间距花在让这条路径显眼上。工业读者先看到主张，再看到选项。
在 Interactive Discovery 里先改什么
把它和从空白页开始比：这里画幅（640x474）和100vh 高的板块、28px 间距都已经定好，所以你要做的是替换，而不是构图。在碰颜色之前，先重写那行展示字。
常见问题
Interactive Discovery 背后的提示词到底有多长？
简报是从页面上收录下来的，共 6,894 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
能用别的技术栈重建 Interactive Discovery 的首屏吗？
Interactive Discovery 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
能保留 Interactive Discovery 的过渡、只改时长吗？
动效和版式写得一样细：状态切换落在 1.1s 区间内缓动是 cubic-bezier(0.16,1,0.3,1)。先复刻构图、再对时长，因为版式立住之后时长更好对。
