关于 beautiful-shadows
beautiful-shadows 是一项设计技能，提供三种中性色的分层 Tailwind 阴影样式，帮助界面设计者为控件、卡片和突出面板选择合适的层级，并说明用法与常见问题。
主要功能
- 01提供 sm、md、lg 三种阴影样式
- 02按组件和层级给出使用建议
- 03说明表面与圆角的搭配
- 04提示避免过度使用和染色
适用场景
- 01为表单控件增加轻微层次
- 02设置卡片、面板和弹出层样式
- 03为主视觉媒体或类模态容器增加凸起感
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/beautiful-shadows确认已加载。
详细介绍
精致阴影
使用场景
- 表面需要精致、层次分明的立体感。
- 默认的 Tailwind 阴影显得过于普通或生硬。
- 设计需要中性、细腻的纵深感，而非彩色光晕。
阴影工具类
使用以下准确的 Tailwind 类。
精致 sm
适用于紧凑卡片、表单控件、胶囊元素和低调的表面。
shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)]
精致 md
适用于卡片、面板、弹出层，以及默认的立体表面样式。
shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]
精致 lg
适用于主视觉媒体、功能亮点区块、类似模态框的容器，以及最强的悬浮效果。
shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]
示例
<div class="rounded-xl bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]">
...
</div>
使用规则
- 紧凑卡片、表单控件、胶囊元素和低调的表面使用
Beautiful sm。 - 卡片、面板、弹出层，以及默认的立体表面样式使用
Beautiful md。 - 主视觉媒体、功能亮点区块、类似模态框的容器，以及需要最强悬浮效果的场景使用
Beautiful lg。 - 搭配干净的表面填充和统一的圆角。
- 除非交互明确改变立体效果，否则每种组件状态使用一种阴影强度。
避免
- 在同一组件上混用这些阴影与默认的 Tailwind 阴影级别。
- 为这些阴影添加浓重的色彩；保持中性、细腻。
- 在密集列表或微小控件上使用
Beautiful lg。 - 在同一元素上叠加多个阴影工具类。
- 在对比度极低的布局中，用这些阴影替代清晰的边框。
评论
支持 Markdown