ui-neumorphic-design

name	ui-neumorphic-design
description	Apply soft neumorphism (拟态风格) UI design guidelines. Use when designing UI screens/components or when the user mentions neumorphism/拟态风格/soft UI.

轻拟物（拟态风格）UI 设计

适用场景

• 当需要进行 UI 设计或优化
• 当用户明确要求拟态风格/轻拟物/soft UI

设计步骤

1. 背景与元素关系

   • 背景色与元素色接近，避免强烈对比
   • 例：背景 #F0F0F0，按钮 #F5F5F5
   • 通过阴影与高光让元素“浮”在背景上

2. 双阴影（凸起/凹陷）

   • 浅色高光：向上偏移，#FFFFFF，透明度 20%
   • 深色阴影：向下偏移，#D9D9D9，透明度 20%
   • 用于营造凸起或凹陷的立体效果

3. 按钮与卡片

   • 凸起按钮：双阴影模拟光照
   • 按下时：切换为凹陷效果（内阴影）
   • 卡片：柔和阴影 + 大圆角，增强层次感

4. 图标与文字

   • 图标保持简洁，适度立体感
   • 文字使用无衬线字体
   • 文字颜色与背景形成轻微对比，确保可读性

输出要求

• 输出 UI 方案时，明确说明：背景色、元素色、阴影参数、圆角与字体建议
• 保持整体低对比、柔和、轻盈的视觉风格