关于这个模板
这是 Vertex 的落地页，连同生成它的那份需求简报一起发布，而不是只给一张截图。它以“Streamline the shop”开场，给这句话整个版心，而不是把它缩进一张卡片里。配色是深蓝色 #020204 打底，字体用 Poppins。这一条会把生成页面的技术栈（一个自包含的 HTML 文件）写出来，而不是藏起来。动作被收进620ms 的过渡、cubic-bezier(.4,0.2,1)、一段循环视频打底里。对于需要在第一屏就显得刻意的电商品牌落地页，它是一份合适的参考。
适合谁
- 把一个自包含的 HTML 文件连同 1920x1414 的裁切一起交给工程师，让他们自己重建。
- 如果构建从一个自包含的 HTML 文件起步，先拾起字号从 12px 到 54px、4 栏栅格，栅格定下来之前别碰配色。
- 正在复刻竞品电商落地页的团队，想在有人选定框架之前先把一个自包含的 HTML 文件点明。
包含哪些内容
- 链接在前，操作在后. 一条细导航压在落地页上，字标在左，链接用 Poppins 排，整套构图因此先读成内容、再读成界面。在 158px 以下，链接收进一个全屏浮层。158px 以下链接直接收起，而不是折到第二行。
- 一段片段承担全部. 片段在 1920x1414 下循环 6.9s，接缝看不出来，所以它读起来是肌理，而不是一条片子。循环短到 6.9s，眼睛会把它读成肌理，而不是一条时间轴。
- 一条会主动让开的导航. 一条细导航压在落地页上，字标在左，链接用 Poppins 排，整套构图因此先读成内容、再读成界面。在 158px 以下，链接收进一个全屏浮层。158px 以下链接直接收起，而不是折到第二行。字标占的位置不超过它那行字需要的宽度。
- 对着视口量出来的. 字体和间距在这里共用同一份清单：字号从 12px 到 54px、4 栏栅格、12px 圆角、16px 间距。画幅比例和尺寸记在一起，重建时连比例也一起对。
动效与交互
正中一块实时画布
一块 WebGL 画布是页面上唯一的看点，周围的界面刻意排得不跟它抢。给渲染留出预算：在低端设备上，它最容易掉帧。这份参考在 1920x1414 下收录。
全部动画预算
悬停、按下和聚焦都在 620ms 内完成，界面因此显得即时。写明的时长只覆盖状态变化，反馈正是这套动效里被规格管住的部分。
电商品牌能从这里得到什么
大多数电商页面在首屏不够有力时选择再加一个板块。这一版反过来做减法：导航、标题、公告徽标、数据行、卡片栅格，就按这个顺序，没有任何重复主张的东西。它给电商读者的是一条通向主张的最短诚实路径。这份参考在 1920x1414 下收录。
把 Vertex 当规格书读
固定尺度的代价是即兴空间更小。字号从 12px 到 54px、4 栏栅格让构图保持连贯，但新元素必须被装进去，而不是随手摆上去。这个落地页里没有任何一处依赖默认值。
在 Vertex 里先改什么
先改文案和素材，再改颜色，最后才动版式。1920x1414 的画幅和 Poppins 的字阶是撑住整页的东西，所以要在它们周围做替换，而不是从它们中间穿过去。新加的元素如果不能帮助说清产品主张或下一步动作，就该挪到折叠线以下。
常见问题
Vertex 背后的提示词到底有多长？
简报是从页面上收录下来的，共 51,432 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注一个自包含的 HTML 文件？
Vertex 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
拿到 Vertex 的简报之后，我能用它做什么？
页面上引用的内容全部出自收录的 51,432 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
