这是什么
一个 canvas 配方，用值噪声、FBM 和 4x4 Bayer 阈值渲染出一片近黑的程序化场，以放大的方形格子绘制。
Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and
它对设计意味着什么
- 放大的格子让抖动矩阵看得清，而不是糊成胶片颗粒。
- 六阶单色配色让前景文字不靠重色遮罩也可读。
- 暗角加偏心的明暗块，给出一个亮焦点，而非均匀亮度。
包含哪些内容
- Visual target
- HTML and CSS
- Canvas recipe
- Tuning knobs
- Composition notes
- Quick checks
如何安装
Dither Background
-
克隆这个仓库。
git clone https://github.com/MengTo/Skills -
把 Codex 指向这个 Skill 文件。
agent-skills/web-design/dither-background/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
把固定定位的 canvas 垫在内容后面，pointer-events 设为 none。
-
把 cellSize 调在 5px 到 10px 之间，保证矩阵清晰。
-
调 wave、cloud、ridge 和 vignette 的值，塑造明暗块的形状。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。