本稿对应的 Figma 可编辑 UI 设计稿：小猪盖被 · Vercel 官网首页设计稿。打开即可对照版面结构与组件层级。
Vercel 首页在这次抓取中以“智能体基础设施”为主标题。三角形标识仍在，页面的介绍重点则转向具体的技术任务：写代码的智能体怎样部署，应用怎样运行，错误又怎样交回智能体处理。以下观察依据本次首页公开文案、页面结构与样式；动效只记能核实的线索，不把静态抓取当成完整播放体验。
首页采用了较为宽松的布局。首屏高度跟随视口，三角形所在的图形层占据相当大的空间，标题与说明没有把所有空隙填满。正文也不急着铺开产品清单，而是先讲造智能体、让应用承受访问量、为客户托管平台三件事。产品名称被往下放，访客可以先判断服务与自身任务的关系，再进入功能细节。
首屏三角形、主标题与部署入口的空间关系
往下读，十二列栅格的作用开始显现。第一段标题从左侧起，第二段移到第五列，第三段又回到左侧；大标题各占八列。阅读落点随章节移动，标题的宽度却维持一致，错位的内容仍有明确的边界。配图也不是统一压成小卡片，宽屏下可以占八列，旁边留给客户说明与功能入口。窄屏结构则收回纵向排列，图片另有移动版资源。
这种处理保留了编辑版面的起伏，也接受了页面更长的代价。它没有靠每屏更换背景色来提示章节，而是通过标题的起点、图文的比例和较大的段间距，让同一套材料产生节奏。空白在这里承担分组作用；若压缩段间距离，相邻内容容易挤成连续的产品清单，标题换位带来的停顿也会变弱。
字体的分工很克制。样式中能确认 Geist 无衬线与 Geist Mono；主标题明确使用常规字重，宽屏字号设到六十四，后面的章节标题则使用更紧的字距与行高。这里的大字并不需要特别粗，字号和占地已经替它建立了顺序。等宽字出现在后端展示里的技术标签上，把一小块画面拉回工具界面的语境。等宽标签与介绍性正文形成区分，技术感也随内容类型改变。
三组平台介绍的标题错位、图文比例与字体层级
颜色也是分区域使用的。页面准备了明暗两套主题，首屏三角形在浅色结构里是黑色几何面，深色结构则提供发光图形的静态备用图。到了“最近发布”，后端卡片使用蓝色底、白色细网格和悬浮的技术标签。蓝色在这里像绘图纸，和“后端、队列、常驻进程”的内容相互解释，不只是给按钮添一点强调色。
局部上色让品牌识别与产品示意各有分工。三角形和灰阶维持首页的识别线索，蓝色卡片为新内容建立独立的观看区域。首屏与下方卡片的气质因此存在差异，也有助于区分概括性的品牌介绍和具体的技术展示。
组件的尺度随着内容变化。上半段的客户例子分别接着功能列表，具体服务和使用情境挨得很近；下半段则把新内容排成一张较大的后端卡片，加上智能体、沙箱入口。卡片有圆角、细边框和裁切，收束得像可点击的容器。部署按钮使用更饱满的胶囊形，和这些内容卡片区分开：内容说明与动作入口各有清楚的轮廓。
最近发布区域的蓝色网格、技术标签与大小卡片组合
动效线索集中在首屏与后端示意中，静态素材则提供了另一种呈现方式。首屏结构里保留了静态三角形与备用图片，并能读到透明度过渡；后端示意的标签带着时长和错开的延迟。样式还对减少动态效果的偏好作了处理。不过，抓取不能证明整段动画实际如何衔接，也不足以确认光线的运动轨迹。能确定的是，页面在动态表现之外，另备了静态图形来承担识别任务。
收尾处的安排更能说明这次首页的变化。普通访客可以直接部署，旁边还有让智能体开始接入的入口。两种使用者出现在同一处行动区，前文的智能体定位在这里落实为具体组件。再往下，页脚用密集的分类链接收拢产品、框架、文档和公司信息。上方以少量主题维持阅读顺序，底部展开目录，密度变化对应了从理解服务到查找资源的任务变化。
部署与智能体接入并列的收尾行动区及分类页脚
这版首页的工程感来自具体的版面安排：规则栅格容纳错位标题，常规字重配合大字号，技术标签在局部使用等宽字体。它接受较长的页面和区域之间的色彩差异，为说明、示意与行动入口留出各自的位置。三角形保持品牌识别，其余内容逐段交代平台服务的对象与接入方式。