黏土风
Claymorphism
别名:黏土风黏土拟物软糖质感设计膨胀立体卡片3D黏土按钮橡皮泥风格Clay 3DPuffy UI
这是什么
把控件捏成软黏土的视觉语言：大圆角、柔和粉彩底色，双重阴影——向内的内 凹阴影加向外的膨胀投影——让元素像充了气的黏土块，圆润 饱满 软乎乎。 它是新拟物与 3D 卡通之间的一种手感化中间态。
开发规格
字体
圆体无衬线
色彩
淡紫底 #EDF0FF × 白卡 × 紫 #6C7BFF
边框
几乎无边框，大圆角 22px
阴影
外投影 + inset 内阴影 = 黏土感
间距
蓬松间距，元素相互分离
动效
180–240ms 的柔和弹性按压过渡，尊重 prefers-reduced-motion
状态反馈
hover 轻微上浮并加深外阴影；focus 用紫色可见柔框；active 转为 inset 内陷；disabled 变扁降饱和；error 用珊瑚红内陷
风格演示
先看整页效果，再试交互场景整页预览
Soft & Squishy
捏一捏就有好心情。
内阴影 · 大圆角 · 糖果色
捏一下 →按下会回弹
圆润无棱角
低饱和背景
交互场景
正在加载演示…
✓ 适用场景
- 儿童 教育 休闲游戏类产品，需要亲和与手感
- 轻松的社交 消费品牌，传达可爱与松弛感
- 强调触觉反馈的移动端轻交互场景
✕ 不适用场景
- 专业 金融 企业级场景，软糖感削弱专业信号
- 信息密集的后台界面，膨胀阴影消耗空间与注意力
- 深色重度使用场景，粉彩膨胀感不易维持
常见形式
软黏土
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。
在当前项目中用黏土风（Claymorphism）实现一组膨胀按钮与卡片区块。 先检查现有 Design Token 与阴影变量，膨胀阴影参数做成可配置变量。 要求： - 大圆角 + 三重阴影（外投影带色 内下压 内上高光）模拟黏土膨胀 - 按下态外投影收缩 内凹加强，形成捏压反馈 - 投影与底色同色系，避免灰黑阴影显脏 - 文字对比度达标；支持深色模式（深灰哑光黏土） - 若有动效，尊重 prefers-reduced-motion - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。
风格相似概念用粗黑描边、高饱和撞色与生硬的偏移实心阴影构成的高对比视觉语言：元素像彩色 贴纸一样直接砸在页面上，配合夸张的圆角与醒目标签。它刻意拒绝精致与圆滑， 以"丑得理直气壮"的态度换取强烈的记忆点与年轻个性。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件影响组件