黏土风
Claymorphism
别名:黏土风黏土拟物软糖质感设计膨胀立体卡片3D黏土按钮橡皮泥风格Clay 3DPuffy UI
这是什么
把控件捏成软黏土的视觉语言：大圆角、柔和粉彩底色，双重阴影——向内的内 凹阴影加向外的膨胀投影——让元素像充了气的黏土块，圆润 饱满 软乎乎。 它是新拟物与 3D 卡通之间的一种手感化中间态。
开发规格
字体
圆体无衬线
色彩
淡紫底 #EDF0FF × 白卡 × 紫 #6C7BFF
边框
几乎无边框，大圆角 22px
阴影
外投影 + inset 内阴影 = 黏土感
间距
蓬松间距，元素相互分离
动效
180–240ms 的柔和弹性按压过渡，尊重 prefers-reduced-motion
状态反馈
hover 轻微上浮并加深外阴影；focus 用紫色可见柔框；active 转为 inset 内陷；disabled 变扁降饱和；error 用珊瑚红内陷
风格演示
同一张页面，直接操作捏一下进入黏土小屋，选择颜色、反复捏压并同步计数和角色结果，可收藏到小屋；主页、小屋、商店、小熊入口均有内容，不真实购买。
整页预览 · 直接交互
使用时关注什么
- 01逐一操作 Claymates 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。
- 02完成上述 Claymates 操作后修改输入或撤销，检查结果与状态同步。
- 03用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。
✓ 适用场景
- 儿童 教育 休闲游戏类产品，需要亲和与手感
- 轻松的社交 消费品牌，传达可爱与松弛感
- 强调触觉反馈的移动端轻交互场景
✕ 不适用场景
- 专业 金融 企业级场景，软糖感削弱专业信号
- 信息密集的后台界面，膨胀阴影消耗空间与注意力
- 深色重度使用场景，粉彩膨胀感不易维持
常见形式
软黏土
Soft Clay
经典粉彩加膨胀双影，最常见配方
糖果黏土
Candy Clay
更高饱和的果冻色，接近游戏 UI
深色黏土
Dark Clay
深灰底上的哑光黏土，膨胀感保留
实现要点
border-radius: 20pxbox-shadow: inset 0 -6px 12pxbox-shadow: 0 12px 24pxpastel膨胀公式 = 大圆角（20～32px）+ 三重阴影：外侧大模糊同色系投影（如 0 14px 28px 主色 35%）、内侧下压暗影（inset 0 -8px 16px）、内侧顶部 高光（inset 0 3px 6px 白）。底色与投影必须同色系，投影带色而不发灰。 按下时缩小外投影并加强内凹，形成"捏下去"的反馈。深色黏土用深灰底 加更深一号的同色投影。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
用当前风格完成 Claymates 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。 保留 Claymates 淡紫底、白色 22px 圆角卡、紫色操作和右侧立体设备面板。沿用 token 的外投影与 inset 内影，不把所有按钮替换成另一套 18px 黏土按钮。小屋中的 .gs-blob 保留不规则软圆形、顶部/底部内影与带色外投影，捏压只触发原 .35s 形变。 复用当前 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)。 dark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。 完整页面操作： 捏一下进入黏土小屋，选择颜色、反复捏压并同步计数和角色结果，可收藏到小屋；主页、小屋、商店、小熊入口均有内容，不真实购买。 静态封面、详情演示与 /style-scenes/claymorphism/（英文 /en/style-scenes/claymorphism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。 操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。 提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。 不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。
风格相似概念用粗黑描边、高饱和撞色与生硬的偏移实心阴影构成的高对比视觉语言：元素像彩色 贴纸一样直接砸在页面上，配合夸张的圆角与醒目标签。它刻意拒绝精致与圆滑， 以"丑得理直气壮"的态度换取强烈的记忆点与年轻个性。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件影响组件