关于这个模板
Portiva Hero 是面向创意机构或工作室的首屏参考，它背后的需求简报是一份完整的构建规格书，而不是情绪板。页面自己的标题是“Less complexity, more impact in every project”，整个构图就是围绕这串字搭的。颜色只用了青绿色 #087573 打底、白色 #D1E5E7 给文字、橙色 #C25E2E 承担强调色，正文排的是 Inter。交付形式是一个自包含的 HTML 文件，所以整个首屏可以直接搬进项目，不需要设计交接。需求简报把动效预算花在120ms 的过渡、一段循环视频打底上。把它当作面向创意机构或工作室做首屏的需求简报：它要经得起复刻，而不只是第一眼好看。
适合谁
- 这个首屏服务的是那些得向没参加启动会的人解释一个自包含的 HTML 文件的团队。
- 需要这版首屏在慢网络下也撑得住的工程师，会把 1466x1080 和字阶当作重量预算。
- 正在复刻竞品创意机构首屏的团队，想在有人选定框架之前先把一个自包含的 HTML 文件点明。
包含哪些内容
- 导航收在一行. 字标、链接和 #C25E2E 操作共用一条基线，细导航条才不会被看成随手排的。链接比字标小一档，#C25E2E 操作是导航条上唯一有分量的元素。
- 尺寸钉在需求简报里. 需求简报钉死 62px 间距、120ms 的过渡，其余交给摆放，这正好和一套会自己长大的比例相反。字体和版式共用同一套档位，换掉其中一样时不会有东西漂移。
- 视频压在最底层. 需求简报把视频定在 1466x1080、循环 4.5s，每个文字元素都是对着这个画幅摆的。自动播放不可用时，1466x1080 的封面帧撑住构图，版式不会塌。按 1466x1080 或更宽的尺寸导出，裁切才不失真。
- 越大收得越紧. 展示行用 Inter 排，字号由需求简报定死，标题因此是构图元素，而不是一段文字。界面文字始终用同一套字，同一字号下不会混进第二种声音。
动效与交互
时长写进了需求简报
动画预算小而明确：120ms只用在状态变化上，不用在入场动画上。缓动一改，时长必须跟着重新看一遍。换皮的时候保留这些时长。
环境动效交给循环
背景片段在 1466x1080 下以 4.5s 循环播放，静音、行内，所以读者的注意力在文案上时，页面依然在动。不需要滚动库，因为唯一的环境动效就是这段素材本身。循环按 cover 裁切，构图因此不依赖某个固定的画面尺寸。
这个首屏背后的顺序
严格的顺序会让你以后失去灵活性。在折叠线以上加一个板块，62px 间距、120ms 的过渡就得重新切一遍，因为这条序列是承重的，不是装饰。创意机构读者先看到主张，再看到选项。
把 Portiva Hero 当规格书读
这一页里的数字比看上去多。复刻必须保住的是62px 间距、120ms 的过渡，其余的都可以动。这个首屏里没有任何一处依赖默认值。
这个首屏怎么重排
需求简报写明了每个宽度下变什么（导航收进移动端菜单），也就是说移动端是一个决定，而不是把桌面端挤小。对比度靠素材之上的 #C25E2E 强调色守住，视频静音且行内播放。自动播放和动效都做了诚实的兜底，所以它们不可用时页面依然能表达自己。
常见问题
Portiva Hero 背后的提示词到底有多长？
简报是从页面上收录下来的，共 2,639 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注一个自包含的 HTML 文件？
Portiva Hero 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Portiva Hero 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 2,639 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
