{ "id": "claymorphism", "type": "styles", "status": "published", "name": { "zh": "黏土风", "en": "Claymorphism" }, "aliases": [ "黏土风", "黏土拟物", "软糖质感设计", "膨胀立体卡片", "3D黏土按钮", "橡皮泥风格", "Clay 3D", "Puffy UI" ], "category": [ "Style", "Visual Language" ], "description": { "zh": "把控件捏成软黏土的视觉语言：大圆角、柔和粉彩底色，双重阴影——向内的内 凹阴影加向外的膨胀投影——让元素像充了气的黏土块，圆润 饱满 软乎乎。 它是新拟物与 3D 卡通之间的一种手感化中间态。", "en": "A visual language that molds controls from soft clay: generous radii on pastel grounds, with a double shadow — an inner concave plus an outer inflated drop — so elements feel like air-puffed clay: round, plump, squishable. A tactile middle ground between neumorphism and 3D cartoon." }, "use_when": [ { "zh": "儿童 教育 休闲游戏类产品，需要亲和与手感", "en": "Kids, education and casual games that want approachable tactility" }, { "zh": "轻松的社交 消费品牌，传达可爱与松弛感", "en": "Relaxed social and consumer brands signaling cuteness and ease" }, { "zh": "强调触觉反馈的移动端轻交互场景", "en": "Mobile touch interactions that want tactile feedback" } ], "avoid_when": [ { "zh": "专业 金融 企业级场景，软糖感削弱专业信号", "en": "Professional, fintech and enterprise contexts — clay reads unserious" }, { "zh": "信息密集的后台界面，膨胀阴影消耗空间与注意力", "en": "Dense dashboards where inflated shadows eat space and focus" }, { "zh": "深色重度使用场景，粉彩膨胀感不易维持", "en": "Heavy dark-mode usage where pastel inflation is hard to sustain" } ], "tags": [ "claymorphism", "clay", "puffy", "pastel", "tactile" ], "variants": [ { "id": "soft-clay", "name": { "zh": "软黏土", "en": "Soft Clay" }, "note": { "zh": "经典粉彩加膨胀双影，最常见配方", "en": "Classic pastel with the inflated double shadow" } }, { "id": "candy-clay", "name": { "zh": "糖果黏土", "en": "Candy Clay" }, "note": { "zh": "更高饱和的果冻色，接近游戏 UI", "en": "Saturated jelly tones close to game UI" } }, { "id": "clay-dark", "name": { "zh": "深色黏土", "en": "Dark Clay" }, "note": { "zh": "深灰底上的哑光黏土，膨胀感保留", "en": "Matte clay on dark grey, inflation kept" } } ], "applicable_components": [ "button", "card", "toast", "badge", "switch" ], "related": [ { "id": "glassmorphism", "relation": "similar_to" }, { "id": "neobrutalism", "relation": "similar_to" }, { "id": "button", "relation": "affects" }, { "id": "card", "relation": "affects" }, { "id": "badge", "relation": "affects" } ], "demo": { "component": "claymorphism", "modes": [ "default", "dark", "variants" ] }, "playground": { "task": { "zh": "捏一下进入黏土小屋，选择颜色、反复捏压并同步计数和角色结果，可收藏到小屋；主页、小屋、商店、小熊入口均有内容，不真实购买。", "en": "Give it a squeeze opens the clay cabin. Pick a color, squeeze repeatedly and update counter and character together, then save to the cabin. Home, Cabin, Shop and the bear entry reveal content without real purchases." }, "checks": [ { "zh": "逐一操作 Claymates 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。", "en": "Use Claymates’s original navigation and primary CTAs; inspect content and return paths, not just click notices." }, { "zh": "完成上述 Claymates 操作后修改输入或撤销，检查结果与状态同步。", "en": "Complete the Claymates task, then change inputs or undo and inspect the matching result/state." }, { "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。", "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries." } ] }, "sources": [ { "name": "Hype4 Academy — Claymorphism in design", "url": "https://www.hype4.academy/articles/design/claymorphism-in-web-design" }, { "name": "MDN — box-shadow", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow" } ], "implementation": { "css": [ "border-radius: 20px", "box-shadow: inset 0 -6px 12px", "box-shadow: 0 12px 24px", "pastel" ], "notes": { "zh": "膨胀公式 = 大圆角（20～32px）+ 三重阴影：外侧大模糊同色系投影（如 0 14px 28px 主色 35%）、内侧下压暗影（inset 0 -8px 16px）、内侧顶部 高光（inset 0 3px 6px 白）。底色与投影必须同色系，投影带色而不发灰。 按下时缩小外投影并加强内凹，形成\"捏下去\"的反馈。深色黏土用深灰底 加更深一号的同色投影。", "en": "Inflation formula = big radii (20–32px) plus three shadows: a large blurred same-hue drop (e.g. 0 14px 28px at 35% of the base color), an inner bottom press (inset 0 -8px 16px), and an inner top light (inset 0 3px 6px white). Tinted shadows must stay in-family — never grey. On press, shrink the drop and deepen the inner shadow to feel squeezed. Dark clay uses deep grey with a darker same-hue drop." } }, "prompts": { "basic": { "zh": "用黏土风（Claymorphism）设计界面：大圆角粉彩元素，外膨胀投影 + 内凹 阴影的双重质感，控件像充气的软黏土块。", "en": "\"Design an interface in Claymorphism style: big-radius pastel elements with an inflated outer drop plus an inner concave shadow — controls like puffed clay.\"" }, "design": { "zh": "黏土风设计规范：底色粉彩（#EAF0FF 等浅底或淡粉 淡绿 淡紫）；主色 #6C8CFF 类柔和饱和色；卡片圆角 24px，阴影三重：0 14px 28px 主色 35%、 inset 0 -8px 16px 主色 30%、inset 0 3px 6px 白 70%；按钮按压时外投影 收缩 内凹加强；文字近黑保证对比；深色模式用深灰底 #23252E 加深一号 同色投影。", "en": "\"Claymorphism spec: pastel grounds (#EAF0FF or soft pink/green/lilac); gentle saturated primary like #6C8CFF; cards at 24px radii with triple shadows — 0 14px 28px primary 35%, inset 0 -8px 16px primary 30%, inset 0 3px 6px white 70%; pressed buttons shrink the drop and deepen the concave; near-black text for contrast. Dark mode: deep grey #23252E with a darker same-hue drop.\"" }, "implementation": { "zh": "用当前风格完成 Claymates 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n保留 Claymates 淡紫底、白色 22px 圆角卡、紫色操作和右侧立体设备面板。沿用 token 的外投影与 inset 内影，不把所有按钮替换成另一套 18px 黏土按钮。小屋中的 .gs-blob 保留不规则软圆形、顶部/底部内影与带色外投影，捏压只触发原 .35s 形变。\n\n复用当前 preview.tokens：背景 #EDF0FF；前景 #3A3F5C；强调 #6C7BFF / #fff；卡面 #FFFFFF；边框 rgba(108,123,255,.18)；圆角 22px；字体 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif；卡影 0 14px 28px rgba(108,123,255,.22), inset 0 -6px 12px rgba(108,123,255,.10)。\n\ndark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。\n\n捏一下进入黏土小屋，选择颜色、反复捏压并同步计数和角色结果，可收藏到小屋；主页、小屋、商店、小熊入口均有内容，不真实购买。\n\n静态封面、详情演示与 /style-scenes/claymorphism/（英文 /en/style-scenes/claymorphism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。", "en": "Build a complete Claymates page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template.\n\nKeep Claymates’ lavender ground, white 22px-radius cards, violet actions and dimensional device panel. Reuse token drop/inset shadows rather than replacing every button with a new 18px clay recipe. The cabin’s .gs-blob retains irregular soft contours, upper/lower inset shadows and a tinted drop; squeezing triggers only the existing .35s deformation.\n\nReuse current preview.tokens: background #EDF0FF; foreground #3A3F5C; accent #6C7BFF / #fff; card #FFFFFF; border rgba(108,123,255,.18); radius 22px; font 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; card shadow 0 14px 28px rgba(108,123,255,.22), inset 0 -6px 12px rgba(108,123,255,.10).\n\nUse generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows.\n\nGive it a squeeze opens the clay cabin. Pick a color, squeeze repeatedly and update counter and character together, then save to the cabin. Home, Cabin, Shop and the bear entry reveal content without real purchases.\n\nShare one renderer between static covers, the detail experience and /style-scenes/claymorphism/ (English /en/style-scenes/claymorphism/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion." }, "agent": { "zh": "用当前风格完成 Claymates 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n保留 Claymates 淡紫底、白色 22px 圆角卡、紫色操作和右侧立体设备面板。沿用 token 的外投影与 inset 内影，不把所有按钮替换成另一套 18px 黏土按钮。小屋中的 .gs-blob 保留不规则软圆形、顶部/底部内影与带色外投影，捏压只触发原 .35s 形变。\n\n复用当前 preview.tokens：背景 #EDF0FF；前景 #3A3F5C；强调 #6C7BFF / #fff；卡面 #FFFFFF；边框 rgba(108,123,255,.18)；圆角 22px；字体 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif；卡影 0 14px 28px rgba(108,123,255,.22), inset 0 -6px 12px rgba(108,123,255,.10)。\n\ndark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。\n\n完整页面操作：\n捏一下进入黏土小屋，选择颜色、反复捏压并同步计数和角色结果，可收藏到小屋；主页、小屋、商店、小熊入口均有内容，不真实购买。\n\n静态封面、详情演示与 /style-scenes/claymorphism/（英文 /en/style-scenes/claymorphism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。", "en": "Build a complete Claymates page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template.\n\nKeep Claymates’ lavender ground, white 22px-radius cards, violet actions and dimensional device panel. Reuse token drop/inset shadows rather than replacing every button with a new 18px clay recipe. The cabin’s .gs-blob retains irregular soft contours, upper/lower inset shadows and a tinted drop; squeezing triggers only the existing .35s deformation.\n\nReuse current preview.tokens: background #EDF0FF; foreground #3A3F5C; accent #6C7BFF / #fff; card #FFFFFF; border rgba(108,123,255,.18); radius 22px; font 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; card shadow 0 14px 28px rgba(108,123,255,.22), inset 0 -6px 12px rgba(108,123,255,.10).\n\nUse generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows.\n\nFull-page operations:\nGive it a squeeze opens the clay cabin. Pick a color, squeeze repeatedly and update counter and character together, then save to the cabin. Home, Cabin, Shop and the bear entry reveal content without real purchases.\n\nShare one renderer between static covers, the detail experience and /style-scenes/claymorphism/ (English /en/style-scenes/claymorphism/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion.\n\nAdd no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results." } }, "style_spec": { "typography": { "zh": "圆体无衬线", "en": "Rounded sans" }, "color": { "zh": "淡紫底 #EDF0FF × 白卡 × 紫 #6C7BFF", "en": "Lavender base #EDF0FF, white cards, violet #6C7BFF" }, "border": { "zh": "几乎无边框，大圆角 22px", "en": "Borderless with 22px+ radius" }, "shadow": { "zh": "外投影 + inset 内阴影 = 黏土感", "en": "Outer + inset shadows create the clay feel" }, "spacing": { "zh": "蓬松间距，元素相互分离", "en": "Puffy spacing, elements float apart" }, "motion": { "zh": "180–240ms 的柔和弹性按压过渡，尊重 prefers-reduced-motion", "en": "180–240ms soft elastic press transitions; honour prefers-reduced-motion" }, "states": { "zh": "hover 轻微上浮并加深外阴影；focus 用紫色可见柔框；active 转为 inset 内陷；disabled 变扁降饱和；error 用珊瑚红内陷", "en": "Hover lifts and deepens the outer shadow; focus shows a visible violet ring; active becomes an inset press; disabled flattens and desaturates; error uses a coral inset" } }, "preview": { "order": 17, "keywords": { "en": "SOFT & PUFFY", "zh": "软糯 · 圆润 · 大圆角" }, "url": "https://claymates.fun", "scene": "generic", "brand": "Claymates", "nav": [ { "zh": "主页", "en": "Home" }, { "zh": "小屋", "en": "Cabin" }, { "zh": "商店", "en": "Shop" } ], "navExt": [ { "zh": "🧸", "en": "🧸" } ], "heroTitle": { "zh": "Soft & Squishy", "en": "Soft & Squishy" }, "heroSub": { "zh": "捏一捏就有好心情。", "en": "A little squeeze, a little joy." }, "cta": { "zh": "捏一下", "en": "Give it a squeeze" }, "heroCaption": { "zh": "内阴影 · 大圆角 · 糖果色", "en": "Inner shadows · Rounded corners · Candy colors" }, "features": [ { "t": { "zh": "软糖按钮", "en": "Gummy buttons" }, "s": { "zh": "按下会回弹", "en": "Bounce back on press" } }, { "t": { "zh": "黏土角色", "en": "Clay characters" }, "s": { "zh": "圆润无棱角", "en": "Soft edges all around" } }, { "t": { "zh": "奶油底色", "en": "Creamy backdrop" }, "s": { "zh": "低饱和背景", "en": "Low-saturation surfaces" } } ], "panel": "device", "tokens": { "bg": "#EDF0FF", "fg": "#3A3F5C", "sub": "#8A90B8", "accent": "#6C7BFF", "accentFg": "#fff", "card": "#FFFFFF", "cardBorder": "rgba(108,123,255,.18)", "radius": "22px", "shadow": "0 14px 28px rgba(108,123,255,.22), inset 0 -6px 12px rgba(108,123,255,.10)", "font": "'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif", "heroSize": "22px" } } }