这是什么
一组精确的 Tailwind 任意值阴影类,分三档强度。每档叠加几层低透明度的中性阴影,取代 Tailwind 默认的阴影阶梯。
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows wit
它对设计意味着什么
- 高度保持中性,不会有带色光晕染到下面的表面。
- 三档固定强度分别对应控件、卡片和首屏媒体。
- 叠层的低透明度阴影读起来是真纵深,而不是一坨生硬的投影。
包含哪些内容
- Use when
- Shadow utilities
- Examples
- Usage rules
- Avoid
如何安装
Beautiful Shadows
-
克隆这个仓库。
git clone https://github.com/MengTo/Skills -
把 Codex 指向这个 Skill 文件。
agent-skills/web-design/beautiful-shadows/SKILL.md -
然后描述你想要的界面,Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
让 Codex 把 md 那档用在卡片、面板和弹出层上。
-
lg 那档留给首屏媒体和弹窗类容器。
-
每个阴影都配上干净的表面填充和统一的圆角。
这里的每个插件都免费开源,并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗下一步
用 Open Design 做设计,省掉那些配置
你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。