mcpField
B
beautiful-shadows

beautiful-shadows

github.com/mengto设计与 UI7.1k2.2k 次安装3 天前更新
代码仓库

关于 beautiful-shadows

Beautiful Shadows 是一项提供中性色分层 Tailwind 阴影样式的设计技能，供界面表面使用。它帮助设计者为控件、卡片、面板和主视觉媒体选择一致的层级。

主要功能

  1. 01提供三种阴影层级
  2. 02给出 Tailwind 工具类
  3. 03按组件类型说明用法
  4. 04规定一致的阴影使用方式

适用场景

  1. 01为表单控件添加轻微层次
  2. 02统一卡片和弹出面板样式
  3. 03增强主视觉媒体的悬浮感

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mengto/skills --skill beautiful-shadows

安装后在 Claude Code 中输入/beautiful-shadows确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

demo/
index.html
PROMPT.md
source.json

详细介绍

精致阴影

使用场景

  • 表面需要精致、层次分明的立体感。
  • 默认的 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