关于这个模板
这是 Impact Ventures 的首屏，连同生成它的那份需求简报一起发布，而不是只给一张截图。页面自己的标题是“We shape digital products that define brands”，整个构图就是围绕这串字搭的。颜色只用了蓝色 #2D64B0 打底、白色 #C5D5DE 给文字，正文排的是 Instrument Serif。交付形式是 React 和 Tailwind CSS，收录于 640x472，所以画幅在任何一行代码写下去之前就已经定好。动效只限于700ms 的过渡、cubic-bezier(0.76,0,0.24,1)。这份参考是给这样的金融科技产品用的：希望首屏在动手构建之前就已经定下来。
适合谁
- 用提示词给首屏提需求的人，会把这份 4,400 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和Impact Ventures一样的内容负责人用。
- 想要同样速度的同一套构建，就照抄 700ms 的入场和 cubic-bezier(0.76,0,0.24,1) 曲线。
包含哪些内容
- 链接在前，操作在后. 导航条压在首屏之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 640x472 的构图上，自己没有底色，素材因此从它下面通到两边。
- 两套字，各有各的活. 气质来自需求简报里的字号档位和字距：Instrument Serif 用收紧的展示字号，然后干净地掉到支撑句。字体和固定字号配对使用，展示行和界面文字因此始终是一家人。一套职责清楚的字，好过两套互相打架的字。
- 顶栏：字标、链接、一个操作. 导航条压在首屏之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 640x472 的构图上，自己没有底色，素材因此从它下面通到两边。字标占的位置不超过它那行字需要的宽度。
- 每个尺寸都写下来了. 尺寸是对着 640x472 的渲染量出来的：700ms 的过渡、cubic-bezier(0.76,0,0.24,1) 缓动曲线。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。
动效与交互
交互区域刻意做小
交互层很小，也很好预期：悬停态只给按钮和链接，而不是每张卡片。其他部分都不动，重心因此留在构图上。每个状态只改一个属性，反馈因此保持清楚。这份参考在 640x472 下收录。
控件共用一个时长
需求简报把过渡值钉在 700ms，重建时不能换成一个更慢的默认值。没有任何东西在等滚动位置，所以一碰页面就有反应。换皮的时候保留这些时长。
这套构图为什么适合金融科技
数一数这个首屏里的决定，它们都能追回到同一份文件：4,400 个字符，写明了 640x472 的画幅、字体和节奏。它给金融科技读者的是一条通向主张的最短诚实路径。
这个首屏背后的顺序
一屏、一个行动，中间是导航、数据行、功能列表、背景片段、页脚。需求简报把这个顺序钉死，而不是把首屏交给一摞板块自己决定。金融科技读者先看到主张，再看到选项。这份参考在 640x472 下收录。
这个首屏怎么重排
设计过的窄屏版式比直接挤小要多做不少决定。需求简报把这些决定付掉了：导航收进移动端菜单，是写明的，而不是构建时才发现。自动播放和动效都做了诚实的兜底，所以它们不可用时页面依然能表达自己。这份参考在 640x472 下收录。
常见问题
Impact Ventures 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 4,400 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
能用别的技术栈重建 Impact Ventures 的首屏吗？
Impact Ventures 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Impact Ventures 的动效是由什么驱动的？
入场和状态切换都落在 700ms 这个区间内使用 cubic-bezier(0.76,0,0.24,1)，由状态变化触发而不是滚动库，也从不会拖住文案。
