关于这个模板
Vela Ul 是面向AI 或 SaaS 产品的一份可用参考：这套功能区已经排好、量好，可以直接照着复刻。颜色只用了 #16120C 打底、#F7F5F2 给文字，正文排的是 Arial, Helvetica。交付形式是一个自包含的 HTML 文件，所以整个功能区可以直接搬进项目，不需要设计交接。动效归结起来就是720ms 的过渡、cubic-bezier(.22,1.36,1)、一段循环视频打底。把它当作面向AI 或 SaaS 产品做功能区的需求简报：它要经得起复刻，而不只是第一眼好看。下面引用的每一项都是那份简报里的数值，从 1920x1418 的画幅一直到最小的间距档。
适合谁
- 给必须在不做原型的前提下向客户解释 410px 表现的工作室用。
- 接手这版功能区的外包团队，需要在第一次提交之前把一个自包含的 HTML 文件钉进仓库里。
- 写你自己的标题，然后用一个自包含的 HTML 文件在测量值不变的前提下重建这版功能区。
包含哪些内容
- 一行到底，不做抽屉. 导航条压在功能区之上，而不是把它往下挤，构图因此保住首屏的完整高度。标签短到能在 410px 下一行放下，当前项用字重标出，而不是加一个胶囊底。
- 循环就是背景板. 素材是一段 4.7s 的片段，按 cover 裁进 1920x1418 的画幅，任何宽度下都不会出现黑边。按 1920x1418 或更宽的尺寸导出，cover 裁切就继续成立。
- 证据就一行. 数字是按文字排的，不是装进卡片的：Arial, Helvetica 的展示字号，标签低一档。数字和周围文案坐在同一条基线上，这一行因此读成一个整体。在最窄的宽度下核一遍这一行。
- 每种宽度都有明确行为. 宽度变化由字体自己消化：14px 到 20px 的 clamp 让标题从手机一路撑到桌面，不需要另做一套移动端构图。移动端菜单属于同一份需求简报，所以收起来的状态也是设计过的。
动效与交互
时长写进了需求简报
一个时长覆盖所有交互（720ms缓动是 cubic-bezier(.22,1.36,1)），悬停和按下才读成同一套系统。数值足够短，读起来是反馈，而不是动画。换皮的时候保留这些时长。
是循环，不是时间轴
环境动感是一段 1920x1418 下的 4.7s 片段，在文案后面安静循环，不响应指针。片段短到能循环而不露接缝，这比它的分辨率更重要。
把这个功能区变成你自己的
换进你自己的素材时，保住裁切和图层顺序。素材是一段 4.7s 的 1920x1418 循环。正是这个摆放位置让文案保持可读。替换比重新构图便宜，这正是重点。
这个功能区在论证什么
一屏只留给读者一个决定，这就是这套版式的代价：其余内容全部下移到折叠线以下。需求简报写明了固定 25px 的标题字号、100vh 高的板块、3 栏栅格、20px 间距、720ms 的过渡，好让下面的板块保持同样的节奏。它给SaaS读者的是一条通向主张的最短诚实路径。
这个功能区怎么重排
把这个功能区先在 1920x1418 下测，再在手机宽度下测：顺序一样成立，只是字阶是流体的，而不是阶梯式的、版式在 410px 处切换、板块高度锁在 100vh。移动端是一个决定，不是退而求其次。
常见问题
复制 Vela Ul 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 25,889 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
重建 Vela Ul 必须用一个自包含的 HTML 文件吗？
Vela Ul 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
这条 Vela Ul 条目是怎么组织的？
页面上引用的内容全部出自收录的 25,889 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
