菜单
Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, realistic, soft-plastic, soft-metal, or premium physical interface styling.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.
Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement.
Create subtle editorial word-by-word text reveal animations where each word fades and rises into place once it enters the viewport. Use for premium portfolio headlines, hero copy, section intros, and short marketing text that needs a cinematic staggered reveal with IntersectionObserver or in-view detection.
Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and restrained gray-white highlights behind framed UI, hero content, or data overlays.
Create a globe-like 3D particle visualization with a dense luminous spherical core and thinner orbital ring or flattened disc. Use when a design needs a premium planetary, orbital, synthesized data-globe effect rendered with real WebGL/Three.js particles, not generic starfields or full page layout changes.
Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain rectangles.
| name | skeuomorphic-ui |
| description | Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, realistic, soft-plastic, soft-metal, or premium physical interface styling. |
160ms to 240ms.Tune these per brand and theme.
: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);
}
Use for cards, panels, primary buttons, tabs, and control housings.
.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;
}
Use for active buttons, toggled controls, selected tabs, and inset wells.
.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);
}
Use for labels inside tactile controls. Keep it subtle.
.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));
}
Use micro texture at low opacity. It should be felt, not noticed.
.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;
}