这是什么
一个 CSS 配方，用 padding-box 和 border-box 叠层做细腻的渐变描边，另有一个遮罩伪元素变体，专对付背景复杂的表面。
Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
它对设计意味着什么
- 给出高级的边缘轮廓，又没有霓虹描边那种刺眼光晕。
- 遮罩变体保住原有背景，而不是把它盖掉。
- 默认把渐变节点压在 0.4 透明度以下，描边是衬托而不是抢戏。
包含哪些内容
- Use when
- Defaults
- Simple CSS pattern
- Masked pattern
- Tailwind shortcut
- Taste rules
如何安装
Border Gradients
-
克隆这个仓库。
git clone https://github.com/MengTo/Skills -
把 Codex 指向这个 Skill 文件。
agent-skills/web-design/css-border-gradient/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
把 Codex 指向一个需要更好边缘的卡片或价格面板。
-
纯色填充选简单版，背景复杂选遮罩版。
-
浅色和深色主题分开检查，透明度很少能直接通用。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。