这是什么
一个原生 WebGL 片元着色器,在全屏四边形上画一道细窄竖向激光。核心近白,光晕和 FBM 烟雾跟着你的强调色走。
Create a fixed full-screen WebGL laser background effect with a thin white-hot vertical core, restrained brand-colored halo, and soft smoky fog around the beam. Use only for laser background effects, not full page layout
它对设计意味着什么
- 光晕和烟雾取自你的品牌强调色,而不是写死的蓝。
- 核心和辉光宽度分开控制,光束是刀锋而不是条块。
- 烟雾聚在光束附近、向外消散,保住文案的对比度。
包含哪些内容
- Scope
- Visual target
- Layering
- Brand color
- Raw WebGL setup
- Tuning knobs
如何安装
WebGL Laser
-
克隆这个仓库。
git clone https://github.com/MengTo/Skills -
把 Codex 指向这个 Skill 文件。
agent-skills/web-design/webgl-laser/SKILL.md -
然后描述你想要的界面,Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
设一个 --brand-accent 自定义属性,着色器会把它转成 RGB。
-
把固定定位的 canvas 放到内容后面,pointer-events 设为 none。
-
调 coreWidth、glowWidth、smokeDensity 和 xOffset 来给光束定位。
这里的每个插件都免费开源,并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗下一步
用 Open Design 做设计,省掉那些配置
你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。