前端与 UI

WebGL Laser

全屏着色器光束,核心炽白,雾气染上品牌色。

这是什么

一个原生 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
来自上游 SKILL.md

它对设计意味着什么

  • 光晕和烟雾取自你的品牌强调色,而不是写死的蓝。
  • 核心和辉光宽度分开控制,光束是刀锋而不是条块。
  • 烟雾聚在光束附近、向外消散,保住文案的对比度。

包含哪些内容

  • Scope
  • Visual target
  • Layering
  • Brand color
  • Raw WebGL setup
  • Tuning knobs

如何安装

WebGL Laser

  1. 克隆这个仓库。

    git clone https://github.com/MengTo/Skills
  2. 把 Codex 指向这个 Skill 文件。

    agent-skills/web-design/webgl-laser/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 设一个 --brand-accent 自定义属性,着色器会把它转成 RGB。

  2. 把固定定位的 canvas 放到内容后面,pointer-events 设为 none。

  3. 调 coreWidth、glowWidth、smokeDensity 和 xOffset 来给光束定位。

这里的每个插件都免费开源,并附上真实的上游源地址。

在 codex-design 清单上了解更多 ↗

下一步

用 Open Design 做设计,省掉那些配置

你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。