企业官网建设流程全解析

六周之内，两个 MIT 许可证

2026 年 8 月 27 日，Vercel 官方 X 账号扔出一枚重磅消息："We built vgpu.sh to ship shaders on vercel.com. Now it's open source."——为 vercel.com 官网那些流动的渐变、玻璃质感与光效提供动力的内部 WebGPU 库vgpu，正式开源。

不到六周，10 月 6 日，Shader Effects, Inc. 把 Shaders 的渲染引擎和 200+ 组件以 MIT 协议开源——就是那家被 16,000+ 设计工程师用来给网站加"魔法"的 shaders.com。注意边界：组件库与引擎本身 MIT；1,000+ 高级预设、55+ 成品区块、无水印视频渲染仍属 Pro 订阅。

两个项目都指向同一件事：让浏览器里的 GPU 像素为前端所用。初看像竞品，拆开后才发现：它们几乎从不在同一张图纸上竞争——一个站在创作端，一个站在验证端。这场"对决"的真正价值，在于它完整呈现了 2026 年 WebGPU 前端化的两张必修拼图。

先厘清：这不是尤雨溪的项目，但确实是"尤雨溪系"

先纠正一个流传甚广的说法。Shaders 的作者是 Simon Le Marchant，一位长期活跃于 Vue 生态的 UX 工程师——2024 年他就因为在 Frontend Nation 上演示"用 Vue 响应式驱动 WebGL Shader"而被社区熟知。2025 年，他作为多家协作机构之一，参与了 VoidZero、Vite、Vitest、Rolldown 和 Oxc 的品牌重塑工作（他本人确认"有机会参与这个项目"，Rolldown 仓库的 rebrand PR 也是他提交的）。

2025 年 9 月 23 日 Shaders 首次亮相时，尤雨溪亲自转发并写下了推荐语。更准确的说法是：Shaders 出自尤雨溪的亲密合作圈，带着 Vue 生态"渐进式、声明式"的鲜明基因；而另一位主角 vgpu，出自 Vercel Labs——React/Next.js 阵营的大本营。不过要注意：谱系是精神上的，不是技术上的——Shaders 的导出目标明确包含 React，Vercel 用 vgpu 做的 Prism 也只是自家产品。这不是两个阵营的战争，而是两种工具哲学的并置，恰好沿着两条精神谱系展开。

Shaders：把 WGSL 藏起来，让设计"长出"像素

打开 shaders.com，你会看到一个 infinite canvas 设计编辑器：左边是图层树，中间是实时渲染画布，右边是每个效果参数的可视化控件。你不需要知道什么是 binding、什么是 pipeline——拖一个 Blob 进来，调几个色标，叠一层玻璃折射，点 Export，它直接吐给你 React/Vue/Svelte/Solid 任意一种框架的组件代码。

Shaders 官网：自称"The design platform for shader magic"，主打 16,000+ 设计工程师社区（来源：GitHub README 头图）

设计编辑器实拍：图层、Blob、OKLCh 色标、玻璃折射体——全程零 WGSL（来源：shaders.com 官网截图）

效果长什么样？官网 sections 页给出的答案是：订阅 Pro 后可以直接当产品落地页用的成品区块。紫橙渐变的 eSIM 品牌页、深蓝色调的法律咨询公司首页——这些不是示意稿，是订阅后拖进项目就能跑的真实区块（免费层包含完整组件库与设计编辑器，区块库属付费内容）。

Shaders 的成品网站区块（sections，Pro 内容）：Relay 品牌页与 Precedent 法务首页，背景均为实时 WebGPU 渲染（来源：shaders.com/sections）

Shaders 预设库中的一例：色散边缘的有机体渐变（来源：shaders.com/presets）

vgpu：把 WGSL 抬升为模块，让 CI 也能"看见"像素

vgpu 的画风截然不同。官网是一束白光穿过三棱镜——致敬 Pink Floyd《The Dark Side of the Moon》，黑白极简，配上一句定位："The WebGPU library, designed for agents."

vgpu.sh 官网主视觉（来源：vgpu.sh）

它的效果是什么样的？打开 vgpu.sh/examples 的示例画廊：全息质感的谢尔宾斯基三角（WGSL raymarching）、棋盘格地面上的玻璃立方体、放射状光线 burst——与 Shaders 那种"营销页氛围光"的审美相比，vgpu 的示例更像图形学课的优秀作业：更冷、更硬、更接近着色器语言本身。

vgpu 官方示例画廊："Holographic"（谢尔宾斯基三角 + 全息渐变）、玻璃立方体 raymarching、放射光线效果（来源：vgpu.sh/examples）

这个审美差异不是偶然，而是哲学的直接投影——vgpu 不是隐藏 WGSL，而是把 WGSL 文件提升为与 TypeScript 平起平坐的一等模块。

技术解剖：它们为什么只能以不同的方式构建

vgpu：给着色器语言装上类型系统的模块机制

vgpu 最核心的创新是typed WGSL imports：.wgsl文件可以像.ts文件一样 import/export，@vgpu/wgsl包在构建期通过类型反射解析 WGSL-to-WGSL 的导入，没有 codegen 步骤，也没有需要手动同步的绑定声明；@vgpu/wgsl-std则像 WGSL 世界的标准库，以命名导出提供 hash、noise、color、sampling 等可复用声明 。

它的 API 设计透着一股"反魔法"的执拗：init()返回唯一的Gpu上下文，其余所有入口（draw、effect、frame、surface、target……）都以它为第一个参数，没有任何隐藏全局状态；渲染是显式的——frame(gpu, (f) => f.pass(target, effect))，pass、clear、draw 都是显式调用，不存在隐式的场景图状态。未使用的声明在压缩前被裁剪，全屏效果 gzip 后 25 KB——这是项目内部用 CI 强制执行的体积预算，为 vercel.com 这种"每字节都算钱"的场景而立。

最能体现其野心的还是运行时设计：同一份 API 跑在浏览器、无头 Node（vgpu/node，Dawn 后端）和一个确定性 mock 适配器（vgpu/mock）上。着色器可以编译、渲染一帧、做快照比对，全程不需要真实 GPU——历史上"验证一个 shader 对不对"意味着开浏览器用眼睛看，这对 CI 流水线和在沙箱里干活的编码 Agent 是关键瓶颈，而 vgpu 把这条回路变成了可断言的自动化检查。当然，这条路线也有自己的成本：构建期反射在 WGSL 写得过于动态时会解析失败；无头 Dawn 渲染给 CI 增加了额外的环境依赖；跨浏览器的 WebGPU/WGSL 实现差异依然存在（issue 区里 Firefox 的海洋 FFT demo 至今未修复就是例子）。还要注意定位：vgpu 首先是一个 WebGPU 库，README 的第一定位就是"a TypeScript library for WebGPU"；Agent-ready（CLI 文档检索、examples 发现 API、agents.md、llms.txt、只读 MCP 端点）是它的差异化属性，而非全部目的。

Shaders：一个引擎，五个框架，一棵图层树

Shaders 的架构是另一种节俭。引擎只有一个，住在packages/core里，每个组件对应src/shaders/下的一个文件夹；README 明确写道"The framework packages are generated from it"——React、Vue、Svelte、Solid、JS 五个框架包全部由这个核心引擎生成，这就是它能承诺"所有框架同一套 props"的原因 。

渲染模型是声明式的图层树：<Shader>负责创建 canvas，子组件是图层，自顶向下求值并在 GPU 上混合——写法与 stacking div 的心智完全一致。README 反复强调"production-ready"：TypeScript、响应式 props 更新、SSR 安全——这对营销站场景是硬指标，毕竟落地页大多走 SSR 。

值得一提的是它也留了逃生舱：defineShader允许你直接写 WGSL（稳定路径）或用 std 图元组合（实验路径）来构建自定义组件 。加上 CLI（npx shaders connect/install/update把设计编辑器里的作品落成真实组件文件并保持同步）和 MCP server（npx shaders install-mcp支持 Claude Code、Cursor、Codex 等），Shaders 的 Agent 接口与 vgpu 高度对称——差别只在于：Shaders 的 Agent 是"设计师的采购员"（找效果、装组件、保持同步），vgpu 的 Agent 是"工程师的同事"（写 shader、渲染、自检、跑回归）。

表面是竞品，实际是两层

第三方对照表最能说明问题。MarkTechPost 在 vgpu 开源次日发布的逐项对比，把 vgpu 与 three.js、TypeGPU、Use.GPU、ralph-gpu 放在一起——仔细看会发现表里没有 Shaders。这不是媒体的判断，而是我的观察：编辑们选取的都是"开发者手写着色器代码"这一层的工具，而 Shaders 根本不在这一层竞争。

vgpu 与最接近的 WebGPU 库逐项对比（来源：MarkTechPost，2026-08-28）——vgpu 的差异化集中在"无头 Node、确定性 mock、Agent 接口"三行

并排拆开，逻辑就清晰了：

那么"哲学相反"与"大多数人两个都用得上"矛盾吗？不矛盾，因为它们对立在哲学层，互补在架构层。2026 年的"前端"早已不是一个岗位，而是一条流水线。一个典型的协作流程长这样（示意性组合，两个产品目前并无官方集成）：设计师在 Shaders 编辑器里调好 hero 区的效果，导出 Vue 组件提交进仓库；CI 里，平台组用 vgpu/mock 对团队手写的自定义着色器渲染快照、比对回归；最后人类坐在审美判断的终点做终审。同一个项目里，表达端和验证端服务的是同一批"做网站的人"。

更深的一层：工具假设正在从"人读文档"转向"Agent 消费接口"

为什么偏偏是 2026 年？背景板有两块。

第一块是 WebGPU 的主流化。到 2026 年，WebGPU 已在 Chrome、Edge、Firefox、Safari 全家族落地，shader 第一次从游戏 demo 的玩具变成营销页、仪表盘、数据可视化可以正经消费的生产力。

第二块更微妙。vgpu 与 Shaders 的 Agent 化姿势高度对称——MCP、llms.txt、CLI 一应俱全，vgpu 另有 Skill 入口（npx skills add vercel-labs/vgpu）。前沿新库的默认发行物，正在从"文档 + npm 包"变成"文档 + npm 包 + CLI + llms.txt + MCP + Skill"。谁先让自己的工具对 Agent 可编程，谁就拿到了下一代开发者的入口——这是两个项目共同的隐喻：同一束白光进来，棱镜与画布折射出的每一道光谱，都是给机器读的。

当然，这个前提值得保持一点清醒。Agent 生成的 shader 仍有真实的失败模式：WGSL 编译错误、低端设备上的性能悬崖、以及更微妙的视觉回归。vgpu 的check/mock/快照机制提供了验证回路，但要诚实地说：CI 像素快照能验证"没变"，验证不了"好看"；25 KB 预算约束的是工程劣化，约束不了审美劣化。Agent 时代的着色器工作流，依然需要一个人类坐在审美判断的终点——只不过，表达可以委托给 Shaders 这样的画布，验证可以委托给 vgpu 这样的棱镜。

还要交代历史坐标。2014 年是 Vue 对 React，2020 年是 Vite 对 Next.js 的构建体验；2026 年 6 月 4 日，尤雨溪的 VoidZero 被 Cloudflare 收购，Vite、Vitest、Rolldown、Oxc 以 MIT 协议继续中立开源，同期 Vercel Labs 密集开源 eve 与 vgpu。两条精神谱系的竞争焦点，从"谁来写组件"上移到了"谁来生产视觉"。当 AI 能批量生成"decent looking"的页面（shaders.com 首页原话："When anyone can crank out a decent looking page, shaders is what will take your designs to the next level"），视觉本身成了新护城河。一方赌"人通过设计工具表达审美"，另一方赌"流水线通过可验证代码交付视觉"——赌局不同，筹码都押在同一个 GPU 上。

怎么选？

• 快速要给落地页 hero 区加一束会跟着鼠标走的光？Shaders。编辑器里拖五分钟，导出组件收工，引擎与组件 MIT 免费。

• 要把 shader 写进 CI、让 Agent 在无 GPU 沙箱里自检渲染、或者做 GPU 张量/神经网络这类重计算？vgpu。但要记住它仍是 0.x 阶段，API 尚未稳定，跨浏览器兼容性仍在爬坡。

• 两者都不合适？也可能。要完整的 3D 场景（网格、材质、灯光、后处理）请去找 three.js。

参考来源：vgpu（github.com/vercel-labs/vgpu · vgpu.sh）、Shaders（github.com/shader-effects-inc/shaders · shaders.com）、Vercel 官方公告（2026-08-27）、尤雨溪转发推文（2025-09-23）、Cloudflare 官方新闻稿（2026-06-04）、MarkTechPost 对比分析（2026-08-28）、explainx.ai 技术解读（2026-08-28）、Codrops《From Rays to Meshes: Building Vercel's Prism with vgpu》（2026-09-03）。