现在让 AI 做一个网页不难。难的是让它别再做出那种“按钮加卡片”的标准答案。
流动渐变、磨砂玻璃、图片扭曲、跟着鼠标移动的光影，这类效果很容易让网站显得不一样。可真要自己动手实现，往往会撞上一堆图形编程术语。
10 月 6 日，Shaders 宣布开源。它把渲染引擎、全部特效组件和不同前端框架的适配代码，都放到了 GitHub 上，采用 MIT 许可证。
项目地址：https://github.com/shader-effects-inc/shaders
官网：https://shaders.com
它不是滤镜 App，而是一盒网页“特效积木”
Shaders 做的是网页里的实时视觉效果。
它提供 200 多个组件，包括渐变、噪点、玻璃、金属、光线、模糊、扭曲、转场和鼠标互动效果。开发者不必从头研究每个像素怎么画，只要像叠图层一样组合这些组件就行。
背后用的是 WebGPU。简单说，它能让网页调用显卡来绘制更复杂的实时画面。过去，这类效果通常要求开发者会写专门的着色器代码；Shaders 把它们包装成了普通网页项目可以直接调用的组件。
它支持 React、Vue、Svelte、Solid 和原生 JavaScript。也就是说，无论 AI 帮你生成的是哪一类主流前端项目，都有现成的接入方式。
这次免费开放的，到底有哪些？
第一部分是核心软件。
渲染引擎、全部组件、框架适配代码和 npm 包都使用 MIT 许可证。个人网站、客户项目、公司内部工具和 SaaS 产品都可以使用，也允许修改和再发布。
第二部分是可视化设计器和代码导出。
你可以在网页上调颜色、移动滑块、叠加效果，看到满意的结果后，再导出对应框架的代码。官方说明，设计和导出现在免费且不限次数，但需要账号。在线设计平台本身并没有开源。
第三部分是给 AI 编程工具准备的接口。项目提供 CLI、Agent Skill 和 MCP，可以让 Claude Code、Cursor、Codex 等工具查找、安装和修改这些效果。
这点很实用。你不一定要记住每个组件叫什么，可以直接告诉编程 Agent：“给首页加一个跟随鼠标的柔和光晕，别影响正文阅读。”它可以从组件库里找合适的效果，再写进项目。
199 美元的 Pro，并没有变成免费
这里最容易产生误解。
Shaders 的 Pro 目前仍是 199 美元一年，官方公告也明确说价格不变。官网还列出了 399 美元的终身版。
继续收费的是“做好的成品库”和附加服务：1000 多个预设、55 个以上完整网站区块、无水印高清图片和视频导出、无限版本历史，以及通过 Framer、CLI 和 MCP 使用 Pro 内容等。
你可以这样理解：基础积木和组装工具免费开源了；别人已经搭好的精致样板、成套页面和省时间的服务，仍然收费。
这也意味着，“Shaders 全部免费”并不准确。GitHub 上的软件是 MIT，但官网的预设、合集和页面区块有单独的许可，不能拿出来重新打包销售。
普通人能不能直接用？
如果你正在用 AI 写网站，Shaders 的门槛已经比自己学图形编程低很多。先在设计器里试效果，再让 AI 帮忙接入，是更现实的用法。
但它还不是点一下就能发布的网站美化工具。你仍然需要一个网页项目，也要处理代码接入和部署。
兼容性也要注意。Shaders 依赖 WebGPU，没有 WebGPU 的设备不会显示特效，只会留下透明画布。复杂滤镜、全屏动画和多层嵌套还会增加显卡负担，手机和旧设备尤其需要实测。
另外，组件会抽样发送匿名性能数据，包括帧率、使用的组件、网站 hostname、浏览器和设备类型。官方提供了 disableTelemetry 选项，可以手动关闭。
开源之后，网页审美也会变成 AI 的能力包
这次开源真正有意思的地方，不只是省下 199 美元。
AI 会写 HTML 和 CSS 之后，基础网页已经不稀缺了。接下来拉开差距的，是字体、排版、动效和互动这些更接近设计判断的部分。
Shaders 正在把其中一块变成标准组件：人可以在编辑器里拼，AI 也可以通过 MCP 和 Skill 调用。以前需要专门图形知识的效果，现在更像一盒能直接交给编程 Agent 的积木。
它不会自动让一个网站变好看。至少，它让“我想要这种感觉”到“页面上真的出现这个效果”之间，少绕了不少路。
你更想把哪种效果加到自己的网站里：流动渐变、磨砂玻璃，还是跟随鼠标的光影？打开设计器试一下，组合几个组件，应该能对它的能力有个直观感受。
发表于 16 小时前
|
查看: 7|
回复: 0
