mcpField
S
skeuomorphic-ui

skeuomorphic-ui

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

关于 skeuomorphic-ui

skeuomorphic-ui 是面向界面设计与实现的设计技能，提供制作具有触感和物理深度控件的 CSS 配方与视觉规则。适用于卡片、按钮和输入控件等组件。

主要功能

  1. 01凸起与按压表面样式
  2. 02渐变边缘和阴影层次
  3. 03浮雕文字与图标效果
  4. 04细微表面纹理规则
  5. 05交互状态与可读性检查

适用场景

  1. 01为按钮和标签页制作按压状态
  2. 02为卡片添加实体般的层次
  3. 03为控件设计软塑料或金属质感

安装

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

$npx skills add https://github.com/mengto/skills --skill skeuomorphic-ui

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

包含的文件

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

demo/
index.html
PROMPT.md
source.json

详细介绍

拟物化 UI

适用场景

  • 卡片、按钮、开关、旋钮、输入框、工具栏或控件需要有触感。
  • 扁平表面需要呈现物理深度，但又不想显得光亮或卡通。
  • 设计需要按压、雕刻、凸起、软塑料、软金属或高级硬件般的 UI 效果。

表面配方

  1. 从圆角形状和柔和的垂直渐变开始：顶部较亮，底部较暗。
  2. 添加 1px 渐变边框包裹层，以模拟反光边缘。
  3. 叠加外阴影以营造层次，并用内阴影塑造雕刻般的深度。
  4. 添加细微的顶部边缘高光和较暗的下边缘。
  5. 少量使用文字阴影和图标阴影，营造浮雕感。
  6. 仅在尺寸允许时添加微细节：点、颗粒、接缝或微小的镜面高光。
  7. 过渡应平滑且简短：160ms 至 240ms。

基础令牌

根据品牌和主题调整这些设置。

:root {
  --sk-bg-top: #f8fafc;
  --sk-bg-mid: #e9eef5;
  --sk-bg-bottom: #cfd7e4;
  --sk-edge-top: rgba(255, 255, 255, 0.82);
  --sk-edge-bottom: rgba(79, 93, 122, 0.34);
  --sk-shadow: rgba(31, 41, 55, 0.18);
  --sk-shadow-deep: rgba(31, 41, 55, 0.28);
  --sk-highlight: rgba(255, 255, 255, 0.72);
}

凸起表面

用于卡片、面板、主按钮、选项卡和控件外壳。

.sk-surface {
  position: relative;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(180deg, var(--sk-bg-top), var(--sk-bg-mid) 48%, var(--sk-bg-bottom)) padding-box,
    linear-gradient(180deg, var(--sk-edge-top), rgba(255, 255, 255, 0.22) 45%, var(--sk-edge-bottom)) border-box;
  box-shadow:
    0 18px 34px var(--sk-shadow),
    0 5px 12px rgba(31, 41, 55, 0.12),
    inset 0 1px 0 var(--sk-highlight),
    inset 0 -1px 0 rgba(79, 93, 122, 0.24);
  transition:
    box-shadow 200ms ease,
    transform 200ms ease,
    background 200ms ease;
}

.sk-surface::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 35%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent);
  pointer-events: none;
}

按压表面

用于激活状态的按钮、切换控件、选中的选项卡和内凹区域。

.sk-surface.is-pressed {
  transform: translateY(1px);
  background:
    linear-gradient(180deg, #d5dce8, #eef2f7 52%, #f8fafc) padding-box,
    linear-gradient(180deg, rgba(72, 84, 112, 0.38), rgba(255, 255, 255, 0.62)) border-box;
  box-shadow:
    inset 0 4px 10px rgba(31, 41, 55, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.72),
    0 4px 10px rgba(31, 41, 55, 0.10);
}

浮雕文字和图标

用于触感控件中的标签。效果应保持微妙。

.sk-label {
  color: #334155;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78),
    0 -1px 0 rgba(31, 41, 55, 0.12);
}

.sk-icon {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.78))
    drop-shadow(0 -1px 0 rgba(31, 41, 55, 0.14));
}

微纹理

以低不透明度使用微纹理。应让人感受到，而非察觉到。

.sk-texture {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 65%, rgba(31, 41, 55, 0.08) 0 1px, transparent 1.5px);
  background-size: 18px 18px, 22px 22px;
}

风格规则

  • 每个组件只使用一种物理材质：软塑料、搪瓷、陶瓷、金属或橡胶。
  • 深度方向保持一致：光线来自顶部，阴影位于下方。
  • 避免纯黑阴影；使用带色调的灰色或融入品牌色调的深色。
  • 不要在同一组件中混用玻璃拟态、新拟物主义和拟物化风格。
  • 将强烈的按压效果留给交互状态，不要用于每个表面。
  • 减少小型控件上的纹理，确保 UI 清晰锐利。

快速检查

  • 凸起状态的顶部边缘更亮，下边缘更暗。
  • 按压状态通过内阴影反转深度效果。
  • 圆角在实际渲染尺寸下保持平滑。
  • 渐变边框为 1px，且不会喧宾夺主。
  • 添加阴影效果后，文字和图标仍清晰可读。

评论

支持 Markdown