设计系统

Beautiful Shadows

三个现成的 Tailwind 阴影工具类,做中性的分层高度。

这是什么

一组精确的 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
来自上游 SKILL.md

它对设计意味着什么

  • 高度保持中性,不会有带色光晕染到下面的表面。
  • 三档固定强度分别对应控件、卡片和首屏媒体。
  • 叠层的低透明度阴影读起来是真纵深,而不是一坨生硬的投影。

包含哪些内容

  • Use when
  • Shadow utilities
  • Examples
  • Usage rules
  • Avoid

如何安装

Beautiful Shadows

  1. 克隆这个仓库。

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

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

如何配合 Codex 使用

  1. 让 Codex 把 md 那档用在卡片、面板和弹出层上。

  2. lg 那档留给首屏媒体和弹窗类容器。

  3. 每个阴影都配上干净的表面填充和统一的圆角。

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

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

下一步

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

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