skeuomorphic-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skeuomorphic UI

Use this skill to design and implement dark skeuomorphic components with consistent lighting, material depth, and tactile motion.

使用此技能设计并实现具有一致光照、材质深度和触觉动效的暗黑Skeuomorphic组件。

Non-Negotiable Foundations

不可妥协的基础规范

Scene/background must stay in the
```
#080808
```
to
```
#1a1a1a
```
range.
Parent skeuomorphic shell should generally sit around:
```
bg-gradient-to-b from-[#202020] to-[#191919]
```
.
Light direction is from the top.
Every shadow/highlight decision must reinforce top lighting.

场景/背景色必须保持在
```
#080808
```
至
```
#1a1a1a
```
范围内。

父级拟物化外壳通常应使用：

bg-gradient-to-b from-[#202020] to-[#191919]

。

光源方向为顶部。
所有阴影/高光的设计必须强化顶部光照效果。

Core Material Recipes

核心材质配方

1) Raised Shell (main component body)

1) 凸起外壳（主组件主体）

Use for the big parent/control housing.

Base:

bg-gradient-to-b from-[#202020] to-[#191919]

Highlight + depth shadow recipe:

shadow-[0_2px_1px_#ffffff15_inset,0_1px_2px_#ffffff20_inset,{black_shadow}]

{black_shadow}

examples (2-3 layers):

0_10px_20px_-2px_#00000050,0_20px_40px_-4px_#00000030,0_0px_15px_2px_#00000020

Optional crisp raised stack (full one-liner, same black lift as above baked in):
- ```
shadow-[0_2px_1px_#ffffff15_inset,0_1px_2px_#ffffff20_inset,0_10px_20px_-2px_#00000050,0_20px_40px_-4px_#00000030,0_0px_15px_2px_#00000020]
```
- When to use: Only when you deliberately want the surface to read extra crisp—tighter micro-edge and a slightly harder highlight. Skip it for default chrome so every control does not fight for the same razor-sharp read.

Notes:

White inset shadows represent reflected light on upper surfaces.
Black shadows create lift from the scene/background.

用于大型父级/控件外壳。

基础样式：

bg-gradient-to-b from-[#202020] to-[#191919]

高光+深度阴影配方：

shadow-[0_2px_1px_#ffffff15_inset,0_1px_2px_#ffffff20_inset,{black_shadow}]

{black_shadow}

示例（2-3层）：

0_10px_20px_-2px_#00000050,0_20px_40px_-4px_#00000030,0_0px_15px_2px_#00000020

可选的清晰凸起堆叠（完整单行样式，已包含上述黑色阴影效果）：
- ```
shadow-[0_2px_1px_#ffffff15_inset,0_1px_2px_#ffffff20_inset,0_10px_20px_-2px_#00000050,0_20px_40px_-4px_#00000030,0_0px_15px_2px_#00000020]
```
- 适用场景： 仅当你刻意希望表面呈现格外清晰的效果时使用——更紧凑的微边缘和稍强的高光。默认控件请跳过此样式，避免所有控件都追求相同的锐利视觉效果。

注意：

白色内阴影代表上表面的反射光。
黑色阴影营造出与场景/背景分离的悬浮感。

2) Inset Surface (trenches, tracks, wells, recessed buttons)

2) 嵌入式表面（凹槽、轨道、凹坑、凹陷按钮）

Use for slider slots, inset icon wells, internal cavities.

Base color should be darker, within
```
#080808
```
to
```
#1a1a1a
```
.

Recommended inset shadow:

shadow-[0_1px_1px_#ffffff15,0_4px_16px_#00000050_inset]

Notes:

Keep inset surfaces visibly carved into the parent shell.
White edge reflection + dark inner shadow should feel concave.

用于滑块槽、嵌入式图标凹坑、内部空腔。

基础颜色应更深，范围在
```
#080808
```
至
```
#1a1a1a
```
之间。

推荐内阴影：

shadow-[0_1px_1px_#ffffff15,0_4px_16px_#00000050_inset]

注意：

嵌入式表面需明显呈现出嵌入父级外壳的效果。
白色边缘反射+深色内阴影应营造出凹面感。

3) Popping / Raised Objects (dial caps, knobs, protruding controls)

3) 突出/凸起对象（刻度盘盖、旋钮、突出控件）

Use same philosophy as raised shell, with stronger external black depth if needed.

Reuse raised recipe:

shadow-[0_2px_1px_#ffffff15_inset,0_1px_2px_#ffffff20_inset,0_6px_10px_rgba(0,0,0,0.5),0_2px_4px_rgba(0,0,0,0.4)]

You may intensify black shadows for heavier lift.

遵循与凸起外壳相同的设计理念，必要时可增强外部黑色深度阴影。

复用凸起外壳配方：

shadow-[0_2px_1px_#ffffff15_inset,0_1px_2px_#ffffff20_inset,0_6px_10px_rgba(0,0,0,0.5),0_2px_4px_rgba(0,0,0,0.4)]

可强化黑色阴影以增强悬浮感。

Component Architecture Pattern

组件架构模式

When building a complex skeuomorphic control, structure in this order:

Scene background (very dark)
Parent raised shell
Inset zones (track, wells, cavities)
Raised interactive objects (dial/button caps)
Readout/details (numbers, ticks, icon glows)

This layer order is mandatory for believable depth.

构建复杂拟物化控件时，请按以下顺序分层：

场景背景（极深色）
父级凸起外壳
嵌入式区域（轨道、凹坑、空腔）
凸起交互对象（刻度盘/按钮盖）
读数/细节（数字、刻度、图标光晕）

此分层顺序是实现可信深度效果的必要条件。

Interaction Rules

交互规则

Keep tactile cues explicit:
- ```
cursor-grab
```
  while idle
- ```
cursor-grabbing
```
  while dragging
- Do NOT use active scaling for buttons (buttons should remain static on click)
Use spring motion for fill/rotation where possible.
Preserve realistic feedback timing (short, snappy transitions).

保持触觉提示明确：
- 闲置状态下使用
```
cursor-grab
```
- 拖拽状态下使用
```
cursor-grabbing
```
- 按钮点击时请勿使用缩放效果（按钮点击时应保持静态）
尽可能为填充/旋转效果使用弹性动效。
保留真实的反馈时机（短促、敏捷的过渡动画）。

Dial Guidance

刻度盘设计指南

Use perimeter ticks (even angular distribution).
Rotation can be driven by pointer angle delta.
Normalize angle jumps across
```
-180/180
```
crossing.
Map rotation delta to value fill with clamping.
Optional tick audio should be rate-limited (avoid high-frequency spam).

使用周边刻度（均匀角度分布）。
旋转可由指针角度增量驱动。
标准化
```
-180/180
```
交叉点处的角度跳转。
将旋转增量映射到值填充并设置限制。
可选的刻度音效需限制频率（避免高频重复）。

Color and Glow Rules

颜色与光晕规则

Accent gradients can vary by mode (e.g., brightness vs volume), but base shell tones stay dark.
Icon glow must be restrained and mode-aware.
Glow should never overpower material lighting/shadows.

强调色渐变可根据模式变化（例如亮度与音量模式），但外壳基础色调需保持深色。
图标光晕必须克制且适配模式。
光晕绝不能盖过材质的光照/阴影效果。

Reusable Tailwind Tokens

可复用Tailwind令牌

Use these as defaults unless user asks otherwise:

Scene bg:
```
bg-[#0f0f0f]
```
(or any shade inside
```
#080808
```
to
```
#1a1a1a
```
)

Raised shell gradient:

bg-gradient-to-b from-[#202020] to-[#191919]

Raised shell light/depth:

shadow-[0_2px_1px_#ffffff15_inset,0_1px_2px_#ffffff20_inset,0_10px_20px_-2px_#00000050,0_20px_40px_-4px_#00000030,0_0px_15px_2px_#00000020]

Raised shell (crisp — use sparingly):
- ```
shadow-[0_2px_1px_#ffffff15_inset,0_1px_2px_#ffffff20_inset,0_10px_20px_-2px_#00000050,0_20px_40px_-4px_#00000030,0_0px_15px_2px_#00000020]
```
- Reserve this stack for hero pieces or focal controls where an unusually sharp, “cut” top edge is desired. Prefer the default raised shell shadow for routine surfaces.

Inset cavity:

shadow-[0_1px_1px_#ffffff15,0_4px_16px_#00000050_inset]

除非用户另有要求，否则使用以下默认值：

场景背景：
```
bg-[#0f0f0f]
```
（或
```
#080808
```
至
```
#1a1a1a
```
范围内的任意色调）

凸起外壳渐变：

bg-gradient-to-b from-[#202020] to-[#191919]

凸起外壳光照/深度阴影：

shadow-[0_2px_1px_#ffffff15_inset,0_1px_2px_#ffffff20_inset,0_10px_20px_-2px_#00000050,0_20px_40px_-4px_#00000030,0_0px_15px_2px_#00000020]

凸起外壳（清晰样式——谨慎使用）：
- ```
shadow-[0_2px_1px_#ffffff15_inset,0_1px_2px_#ffffff20_inset,0_10px_20px_-2px_#00000050,0_20px_40px_-4px_#00000030,0_0px_15px_2px_#00000020]
```
- 此样式仅用于核心组件或焦点控件，以实现异常锐利的“切割感”顶部边缘。常规表面优先使用默认凸起外壳阴影。

嵌入式空腔：

shadow-[0_1px_1px_#ffffff15,0_4px_16px_#00000050_inset]

Quality Checklist (must pass)

质量检查清单（必须通过）

Background is within
```
#080808
```
to
```
#1a1a1a
```
.
Parent shell uses near
```
#202020 -> #191919
```
gradient.
Light comes from top consistently.
Raised areas have top reflective inset whites plus black lift shadows.
Inset areas look carved in (concave), not flat.
Protruding parts read clearly above parent surface.
Interaction states (hover/active/drag) improve tactility.
Accent glow supports hierarchy, not noise.

背景色在
```
#080808
```
至
```
#1a1a1a
```
范围内。
父级外壳使用接近
```
#202020 -> #191919
```
的渐变。
光源始终来自顶部。
凸起区域带有顶部反射白色内阴影和黑色悬浮阴影。
嵌入式区域呈现凹入效果，而非平面。
突出部件清晰地显示在父级表面之上。
交互状态（悬停/激活/拖拽）增强触觉体验。
强调色光晕强化层级结构，而非产生视觉噪音。

Anti-Patterns

反模式

Flat dark blocks with no layered shadows.
Random light direction between elements.
Overbright glow that kills form.
Insets that look raised (wrong shadow orientation).
Background lighter than component shell.
Adding click effects like
```
active:scale
```
or
```
active:shadow
```
transformations to buttons.

无分层阴影的扁平深色块。
元素间光源方向随机。
过亮的光晕破坏形态。
嵌入式区域看起来像凸起（阴影方向错误）。
背景比组件外壳更亮。
为按钮添加
```
active:scale
```
或
```
active:shadow
```
等点击效果变换。

If User Provides Existing Skeuomorphic Code

若用户提供现有拟物化代码

Preserve the existing depth hierarchy first.
Adjust only tokens needed for consistency.
Do not replace handcrafted shadow stacks with generic presets.

首先保留现有深度层级。
仅调整需要保持一致性的令牌。
不要用通用预设替换手工制作的阴影堆叠。

Typography and Density (Compact Default)

排版与密度（默认紧凑）

Default to compact, UI-realistic scale. Do not oversize text.
Unless the user asks for a hero layout, keep component height and type dense:
- Primary labels: ~
```
20px
```
  to
```
28px
```
- Secondary labels/meta: ~
```
14px
```
  to
```
20px
```
- Numeric emphasis: ~
```
24px
```
  to
```
34px
```
Keep vertical rhythm tight: prefer smaller paddings/gaps before increasing font size.
Scale icons with text hierarchy; avoid icons visually dominating labels.
For skeuomorphic control bars/cards, prioritize compact proportions over dramatic sizing.

默认采用紧凑、贴近真实UI的比例。请勿过度放大文本。
除非用户要求核心布局，否则保持组件高度和文本密度：
- 主标签：约
```
20px
```
  至
```
28px
```
- 次要标签/元信息：约
```
14px
```
  至
```
20px
```
- 数字强调文本：约
```
24px
```
  至
```
34px
```
保持紧凑的垂直节奏：优先缩小内边距/间距，再增大字体大小。
图标大小随文本层级缩放；避免图标在视觉上盖过标签。
对于拟物化控制栏/卡片，优先考虑紧凑比例而非夸张尺寸。

Nested Inset + Popping Button Pattern (Learned Rule)

嵌套嵌入式+凸起按钮模式（经验规则）

When a row has multiple circular action buttons, use individual inset wells per button rather than one shared inset group.

Correct structure:

Outer raised shell

InsetSlot (per button)

CircleBtn (raised/popping)

For visual symmetry in each inset well:
- Button should be flush on Y-axis (touch top and bottom of the inset interior).
- Keep margin/padding mainly on X-axis.
Recommended implementation pattern:
- Inset well:
```
h-full ... p-1.5 ...
```
- Button inside inset:
```
size-full aspect-square rounded-full ...
```
Avoid:
- A single shared inset behind several buttons when the design calls for separated wells.
- Extra top/bottom gap around a popping button inside its inset.

当一行包含多个圆形操作按钮时，为每个按钮使用独立的嵌入式凹坑，而非单个共享嵌入式组。

正确结构：

外部凸起外壳

嵌入式插槽（每个按钮一个）

圆形按钮（凸起/突出）

为保证每个嵌入式凹坑的视觉对称性：
- 按钮应在Y轴上完全贴合（接触嵌入式内部的顶部和底部）。
- 主要在X轴上设置边距/内边距。
推荐实现模式：
- 嵌入式凹坑：
```
h-full ... p-1.5 ...
```
- 嵌入式内部的按钮：
```
size-full aspect-square rounded-full ...
```
避免：
- 当设计需要独立凹坑时，在多个按钮后方使用单个共享嵌入式区域。
- 突出按钮在其嵌入式凹坑内存在额外的上下间距。

Raised Material Consistency (Learned Rule)

凸起材质一致性（经验规则）

Raised child controls (for example circular action buttons) should use the same raised material gradient as the raised parent shell by default.

Default raised material to reuse:

bg-gradient-to-b from-[#202020] to-[#191919]

Do not introduce a lighter/different raised gradient for child buttons unless the user explicitly asks for contrast.

凸起子控件（例如圆形操作按钮）默认应使用与凸起父级外壳相同的凸起材质渐变。

可复用的默认凸起材质：

bg-gradient-to-b from-[#202020] to-[#191919]

除非用户明确要求对比度，否则请勿为子按钮引入更亮/不同的凸起渐变。