Best For
拟物 / 写实 / 纹理
Skeuomorphism
A digital design style that simulates real-world objects through textures, lighting, and materials to mimic physical items, bringing familiarity and intuitive experiences.
Best For
拟物 / 写实 / 纹理
Primary Move
Use real material textures (leather, wood, metal)
Watch Out
Do NOT use flat solid color blocks
Showcase Entry
Live preview of the showcase page. Click to explore the full experience.
Color Palette
Primary
#8b7355
Secondary
#d4c4a8
Accent 1
#c9a227
Accent 2
#5c4033
Prompts
Copy and generate 拟物设计 style interfaces with one click. Hard prompts enforce strict consistency, while soft prompts allow flexible implementation within the style direction.
High consistency, strictly enforces style rules
STYLEKIT_STYLE_REFERENCE
style_name: Skeuomorphism
style_slug: skeuomorphism
style_source: /styles/skeuomorphism
# Hard Prompt
Strictly follow the style rules below and maintain consistency. No style drift allowed.
## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.
## Style Rules
# Skeuomorphism (拟物设计) Design System
> 模拟真实世界物体的数字设计风格,通过纹理、光影、材质模仿现实物品,带来熟悉感和直觉性体验。
## 核心理念
Skeuomorphism(拟物设计)是一种模拟真实世界物体外观和行为的设计方法,曾在早期 iOS 和数字产品中广泛使用。
核心理念:
- 真实模拟:界面元素模仿现实物品的外观和触感
- 材质纹理:皮革、木材、金属等真实材质纹理
- 光影深度:通过高光、阴影创造立体感
- 熟悉直觉:利用用户对现实世界的认知减少学习成本
设计原则:
- 视觉一致性:所有组件必须遵循统一的视觉语言,从色彩到字体到间距保持谐调
- 层次分明:通过颜色深浅、字号大小、留白空间建立清晰的信息层级
- 交互反馈:每个可交互元素都必须有明确的 hover、active、focus 状态反馈
- 响应式适配:设计必须在移动端、平板、桌面端上保持一致的体验
- 无障碍性:确保色彩对比度符合 WCAG 2.1 AA 标准,所有交互元素可键盘访问
---
## Token 字典(精确 Class 映射)
### 边框
```
宽度: border
颜色: border-[#a89880]
圆角: rounded-lg
```
### 阴影
```
小: shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)]
中: shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)]
大: shadow-[0_10px_20px_rgba(0,0,0,0.19),0_6px_6px_rgba(0,0,0,0.23)]
悬停: hover:shadow-[0_14px_28px_rgba(0,0,0,0.25),0_10px_10px_rgba(0,0,0,0.22)]
聚焦: focus:shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)]
```
### 交互效果
```
悬停位移: hover:-translate-y-px
过渡动画: transition-all duration-200 ease-out
按下状态: active:translate-y-px
```
### 字体
```
标题: font-sans font-bold
正文: font-sans
```
### 字号
```
Hero: text-3xl md:text-5xl lg:text-6xl
H1: text-2xl md:text-4xl
H2: text-xl md:text-3xl
H3: text-lg md:text-xl
正文: text-sm md:text-base
小字: text-xs md:text-sm
```
### 间距
```
Section: py-10 md:py-16 lg:py-24
容器: px-4 md:px-8 lg:px-12
卡片: p-4 md:p-6
```
---
## [FORBIDDEN] 绝对禁止
以下 class 在本风格中**绝对禁止使用**,生成时必须检查并避免:
### 禁止的 Class
- `bg-white`
- `bg-black`
- `border-black`
- `border-4`
- `shadow-[2px_2px_0px`
- `shadow-[4px_4px_0px`
- `shadow-[8px_8px_0px`
- `rounded-none`
- `font-black`
### 禁止的模式
- 匹配 `^shadow-\[\d+px_\d+px_0px`
- 匹配 `^rounded-none$`
- 匹配 `^bg-(?:white|black)$`
- 匹配 `^border-(?:black|4)$`
### 禁止原因
- `shadow-[4px_4px_0px`: Skeuomorphism uses realistic multi-layer blurred shadows, not hard-edge
- `rounded-none`: Skeuomorphism uses moderate rounding (rounded-lg) for realistic surfaces
- `bg-white`: Skeuomorphism uses textured gradient backgrounds, not flat colors
- `border-black`: Skeuomorphism uses subtle tonal borders matching the surface material
> WARNING: 如果你的代码中包含以上任何 class,必须立即替换。
---
## [REQUIRED] 必须包含
### 按钮必须包含
```
rounded-lg
border border-[#a89880]
shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)]
hover:-translate-y-px
transition-all duration-200 ease-out
font-bold
```
### 卡片必须包含
```
rounded-lg
border border-[#a89880]
shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)]
bg-gradient-to-b from-[#e8dfd1] to-[#d4c4a8]
```
### 输入框必须包含
```
rounded-lg
border border-[#a89880]
bg-[#f5efe6]
font-sans
focus:shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)]
focus:outline-none
```
---
## [COMPARE] 错误 vs 正确对比
### 按钮
[WRONG] **错误示例**(使用了圆角和模糊阴影):
```html
<button class="rounded-lg shadow-lg bg-blue-500 text-white px-4 py-2 hover:bg-blue-600">
点击我
</button>
```
[CORRECT] **正确示例**(使用硬边缘、无圆角、位移效果):
```html
<button class="rounded-lg border border-[#a89880] shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)] hover:-translate-y-px transition-all duration-200 ease-out font-bold bg-[#ff006e] text-white px-4 py-2 md:px-6 md:py-3">
点击我
</button>
```
### 卡片
[WRONG] **错误示例**(使用了渐变和圆角):
```html
<div class="rounded-xl shadow-2xl bg-gradient-to-r from-purple-500 to-pink-500 p-6">
<h3 class="text-xl font-semibold">标题</h3>
</div>
```
[CORRECT] **正确示例**(纯色背景、硬边缘阴影):
```html
<div class="rounded-lg border border-[#a89880] shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)] bg-gradient-to-b from-[#e8dfd1] to-[#d4c4a8] p-4 md:p-6">
<h3 class="font-sans font-bold text-lg md:text-xl">标题</h3>
</div>
```
### 输入框
[WRONG] **错误示例**(灰色边框、圆角):
```html
<input class="rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500" />
```
[CORRECT] **正确示例**(黑色粗边框、聚焦阴影):
```html
<input class="rounded-lg border border-[#a89880] bg-[#f5efe6] font-sans focus:shadow-[0_3px_6px_rgba(0,0,0,0.16),0_3px_6px_rgba(0,0,0,0.23)] focus:outline-none px-3 py-2 md:px-4 md:py-3" placeholder="请输入..." />
```
---
## [TEMPLATES] 页面骨架模板
使用以下模板生成页面,只需替换 `{PLACEHOLDER}` 部分:
### 导航栏骨架
```html
<nav class="bg-white border-b-2 md:border-b-4 border-black px-4 md:px-8 py-3 md:py-4">
<div class="flex items-center justify-between max-w-6xl mx-auto">
<a href="/" class="font-black text-xl md:text-2xl tracking-wider">
{LOGO_TEXT}
</a>
<div class="flex gap-4 md:gap-8 font-mono text-sm md:text-base">
{NAV_LINKS}
</div>
</div>
</nav>
```
### Hero 区块骨架
```html
<section class="min-h-[60vh] md:min-h-[80vh] flex items-center px-4 md:px-8 py-12 md:py-0 bg-{ACCENT_COLOR} border-b-2 md:border-b-4 border-black">
<div class="max-w-4xl mx-auto">
<h1 class="font-black text-4xl md:text-6xl lg:text-8xl leading-tight tracking-tight mb-4 md:mb-6">
{HEADLINE}
</h1>
<p class="font-mono text-base md:text-xl max-w-xl mb-6 md:mb-8">
{SUBHEADLINE}
</p>
<button class="bg-black text-white font-black px-6 py-3 md:px-8 md:py-4 border-2 md:border-4 border-black shadow-[4px_4px_0px_0px_rgba(255,0,110,1)] md:shadow-[8px_8px_0px_0px_rgba(255,0,110,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all text-sm md:text-base">
{CTA_TEXT}
</button>
</div>
</section>
```
### 卡片网格骨架
```html
<section class="py-12 md:py-24 px-4 md:px-8">
<div class="max-w-6xl mx-auto">
<h2 class="font-black text-2xl md:text-4xl mb-8 md:mb-12">{SECTION_TITLE}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
<!-- Card template - repeat for each card -->
<div class="bg-white border-2 md:border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] p-4 md:p-6 hover:shadow-[4px_4px_0px_0px_rgba(255,0,110,1)] md:hover:shadow-[8px_8px_0px_0px_rgba(255,0,110,1)] hover:-translate-y-1 transition-all">
<h3 class="font-black text-lg md:text-xl mb-2">{CARD_TITLE}</h3>
<p class="font-mono text-sm md:text-base text-gray-700">{CARD_DESCRIPTION}</p>
</div>
</div>
</div>
</section>
```
### 页脚骨架
```html
<footer class="bg-black text-white py-12 md:py-16 px-4 md:px-8 border-t-2 md:border-t-4 border-black">
<div class="max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<span class="font-black text-xl md:text-2xl">{LOGO_TEXT}</span>
<p class="font-mono text-sm mt-4 text-gray-400">{TAGLINE}</p>
</div>
<div>
<h4 class="font-black text-lg mb-4">{COLUMN_TITLE}</h4>
<ul class="space-y-2 font-mono text-sm text-gray-400">
{FOOTER_LINKS}
</ul>
</div>
</div>
</div>
</footer>
```
---
## [CHECKLIST] 生成后自检清单
**在输出代码前,必须逐项验证以下每一条。如有违反,立即修正后再输出:**
### 1. 圆角检查
- [ ] 搜索代码中的 `rounded-`
- [ ] 确认只有 `rounded-none` 或无圆角
- [ ] 如果发现 `rounded-lg`、`rounded-md` 等,替换为 `rounded-none`
### 2. 阴影检查
- [ ] 搜索代码中的 `shadow-`
- [ ] 确认只使用 `shadow-[Xpx_Xpx_0px_0px_rgba(...)]` 格式
- [ ] 如果发现 `shadow-lg`、`shadow-xl` 等,替换为正确格式
### 3. 边框检查
- [ ] 搜索代码中的 `border-`
- [ ] 确认边框颜色是 `border-black`
- [ ] 如果发现 `border-gray-*`、`border-slate-*`,替换为 `border-black`
### 4. 交互检查
- [ ] 所有按钮都有 `hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]`
- [ ] 所有卡片都有 hover 效果(阴影变色或位移)
- [ ] 都包含 `transition-all`
### 5. 响应式检查
- [ ] 边框有 `border-2 md:border-4`
- [ ] 阴影有 `shadow-[4px...] md:shadow-[8px...]`
- [ ] 间距有 `p-4 md:p-6` 或类似的响应式值
- [ ] 字号有 `text-sm md:text-base` 或类似的响应式值
### 6. 字体检查
- [ ] 标题使用 `font-black`
- [ ] 正文使用 `font-mono`
> CRITICAL: **如果任何一项检查不通过,必须修正后重新生成代码。**
---
## [EXAMPLES] 示例 Prompt
### 1. 复古音乐播放器
仿真实收音机的音乐播放界面
```
用 Skeuomorphism 风格创建一个复古音乐播放器界面,要求:
1. 背景:模拟木质或金属材质
2. 按钮:带有真实按压感的 3D 效果
3. 旋钮:模拟真实旋钮的外观
4. 显示屏:模拟 LCD 或复古显示器
5. 整体有复古电子设备的质感
```
### 2. SaaS 着陆页
生成 拟物设计风格的 SaaS 产品着陆页
```
Create a SaaS landing page using Skeuomorphism style with hero section, feature grid, testimonials, pricing table, and footer.
```
### 3. 作品集展示
生成 拟物设计风格的作品集页面
```
Create a portfolio showcase page using Skeuomorphism style with project grid, about section, contact form, and consistent visual language.
```Preserves style direction, allows flexible implementation
STYLEKIT_STYLE_REFERENCE
style_name: Skeuomorphism
style_slug: skeuomorphism
style_source: /styles/skeuomorphism
# Soft Prompt
Maintain the overall style essence. Implementation details can be adjusted flexibly, but do not deviate from the core visual language.
## Style Signals
- 拟物
- 写实
- 纹理
- 质感
- 真实
- 3D
## Prefer
- Use real material textures (leather, wood, metal)
- Add realistic light and shadow effects
- Simulate physical button press feedback
- Use gradients to create dimensionality
## Avoid
- Do NOT use flat solid color blocks
- Do NOT omit shadows and highlights
- Do NOT use overly simplified icons
## Output Guidance
- Ensure overall style recognizability first, then refine details.
- Avoid over-engineering; maintain readability and maintainability.Component Templates
拟物风格按钮
/* Skeuomorphism 全局样式 */
:root {
--skeu-leather: #8b7355;
--skeu-wood: #d4c4a8;
--skeu-metal: #c0c0c0;
--skeu-paper: #f5f5dc;
}
/* 金属质感按钮 */
.skeu-metal-button {
background: linear-gradient(180deg, #e8e8e8 0%, #c0c0c0 50%, #a8a8a8 100%);
border: 1px solid #888;
box-shadow:
0 4px 8px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.8),
inset 0 -1px 0 rgba(0,0,0,0.2);
}
/* 凹陷效果 */
.skeu-inset {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), inset 0 -1px 0 rgba(255,255,255,0.5);
}
/* 凸起效果 */
.skeu-raised {
box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
}
@keyframes skeuomorphism-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes skeuomorphism-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.skeuomorphism-card {
position: relative;
overflow: hidden;
}
.skeuomorphism-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
background: linear-gradient(135deg, rgba(139, 115, 85, 0.05), transparent);
pointer-events: none;
}
.skeuomorphism-card:hover::before {
opacity: 1;
}
.skeuomorphism-frosted {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(139, 115, 85, 0.08);
}
.skeuomorphism-accent-corner {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}
.skeuomorphism-animate-in {
animation: skeuomorphism-fade-in 0.5s ease-out both;
}
.skeuomorphism-focus { outline: 2px solid var(--skeuomorphism-primary, currentColor); outline-offset: 2px; }IDE Integration
Download configuration files for AI coding assistants to generate code in this style.
Style Pack
Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.
Metadata
Style metadata including version information
Design Tokens
Compatible with Figma / Style Dictionary / Tokens Studio
Tailwind Preset
Tailwind CSS theme preset, import directly in config
Global CSS
CSS variables and base styles
shadcn Theme
shadcn/ui theme configuration
CSS Variables
Pure CSS variables, works with any project
SKILL.md
Loadable skill pack for Cursor / Claude Code / VS Code
Skeuomorphism is a design approach that simulates the appearance and behavior of real-world objects, widely used in early iOS and digital products.
WCAG 2.1 compliance analysis based on color contrast and typography readability.
Overall Score
Grade: D - Poor
Contrast Ratios
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#3a2f22 / #e8dfd1 | 9.88:1 | ||
| Secondary text on background | /#6b5b45 / #e8dfd1 | 4.96:1 | ||
| Muted text on background | /#8b7355 / #e8dfd1 | 3.4:1 | ||
| Text on secondary background | /#3a2f22 / #8b7355 | 2.91:1 | ||
| Secondary text on secondary | /#6b5b45 / #8b7355 | 1.46:1 | ||
| Text on accent 1 | /#3a2f22 / #b8a88a | 5.6:1 | ||
| Alt text on accent 1 | /#6b5b45 / #b8a88a | 2.81:1 | ||
| Text on accent 2 | /#3a2f22 / #6b5b45 | 1.99:1 | ||
| Alt text on accent 2 | /#6b5b45 / #6b5b45 | 1:1 | ||
| Text on accent 3 | /#3a2f22 / #c9b896 | 6.7:1 | ||
| Alt text on accent 3 | /#6b5b45 / #c9b896 | 3.36:1 | ||
| Text on accent 4 | /#3a2f22 / #a0926e | 4.24:1 | ||
| Alt text on accent 4 | /#6b5b45 / #a0926e | 2.13:1 |
Readability
Score
90/100
Font Size
text-sm md:text-base
Font Weight
font-sans font-bold
Line Height
default
Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.