Agent Skills
› fengshao1227/ccg-workflow
› claymorphism
claymorphism
GitHubClaymorphism设计系统技能，提供软糯、膨胀风格的UI组件规范。包含大圆角、双重内阴影和偏移外阴影三大核心要素，定义了Card、Button等组件的CSS实现及Token，涵盖暗色模式与无障碍访问指南。
Trigger Scenarios
构建具有粘土质感的UI组件
应用Claymorphism设计风格
查询软体拟态设计的CSS实现
Install
npx skills add fengshao1227/ccg-workflow --skill claymorphism -g -y
SKILL.md
Frontmatter
{
"name": "claymorphism",
"license": "MIT",
"description": "Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows.",
"user-invocable": false,
"disable-model-invocation": false
}
Claymorphism Design Spec
3 Core Elements
- Large Radius — Generous
border-radius(20–50px) for a puffy, inflated look - Dual Inner Shadows — Light inset from top-left + dark inset from bottom-right to simulate 3D clay surface
- Offset Outer Shadow — Directional
box-shadowoffset (not centered) to ground the element
CSS Tokens
Reference: references/tokens.css
@import 'references/tokens.css';
.clay-card {
background: var(--clay-bg-card);
border-radius: var(--clay-radius-lg);
box-shadow: var(--clay-shadow);
color: var(--clay-text);
}
Component Examples
Card
.clay-card {
background: var(--clay-bg-card);
border-radius: var(--clay-radius-lg);
box-shadow: var(--clay-shadow);
padding: 1.5rem;
color: var(--clay-text);
}
Button
.clay-btn {
background: var(--clay-bg-button);
border: none;
border-radius: var(--clay-radius-pill);
box-shadow: var(--clay-shadow);
padding: 0.75rem 1.5rem;
color: var(--clay-text);
cursor: pointer;
transition: box-shadow 0.2s;
}
.clay-btn:hover {
box-shadow: var(--clay-shadow-elevated);
}
.clay-btn:active {
box-shadow: var(--clay-shadow-pressed);
}
Input
.clay-input {
background: var(--clay-bg);
border: none;
border-radius: var(--clay-radius);
box-shadow: var(--clay-shadow-pressed);
padding: 0.75rem 1rem;
color: var(--clay-text);
}
.clay-input:focus {
outline: 2px solid var(--clay-accent);
outline-offset: 2px;
}
Toggle
.clay-toggle {
width: 56px;
height: 30px;
background: var(--clay-bg-card);
border-radius: var(--clay-radius-pill);
box-shadow: var(--clay-shadow-pressed);
}
.clay-toggle-knob {
width: 24px;
height: 24px;
background: var(--clay-bg);
border-radius: 50%;
box-shadow: var(--clay-shadow);
transition: transform 0.2s;
}
Dark Mode Notes
- Dark mode reduces inner highlight intensity (
rgba(255,255,255,0.05)vs0.6) to avoid glowing artifacts - Outer shadow opacity increases to maintain depth on dark backgrounds
- Background colors shift to warm dark tones — avoid pure black to preserve the clay feel
- All dark tokens are defined in
[data-theme="dark"]intokens.css
Accessibility Notes
- Ensure contrast ratio ≥ 4.5:1 for text — clay backgrounds are muted, verify against
--clay-text - Provide visible
:focusoutlines since clay shadows alone don't indicate focus - Use
prefers-contrast: moreto flatten shadows and increase text contrast
@media (prefers-contrast: more) {
.clay-card {
box-shadow: 0 0 0 2px var(--clay-text);
}
}
Version History
- cc8cc34 Current 2026-08-20 06:33
