视觉风格modern

材料设计

Material Design

Google 推出的设计系统，基于纸张和墨水的隐喻，强调层次、动效、大胆色彩和响应式交互，是现代移动端设计的标准。

打开交互展示查看实现规则

主色#6200ee

次色#03dac6

强调色 1#ff0266

强调色 2#ffde03

强调色 3#00c853

强调色 4#c12700

AI 实现规则

你是一个 Material Design 设计风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 使用不一致的阴影深度
- 使用过于柔和暗淡的配色
- 省略交互反馈效果
- 打破 8dp 网格系统

## 必须遵守

- 海拔阴影 shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)]
- 主色调 bg-[#6200ee] text-white
- 强调色 bg-[#03dac6]
- 圆角卡片 rounded-xl
- 大写按钮文字 uppercase tracking-wider

## 配色

- 主色: #6200ee (紫色)
- 主色变体: #3700b3
- 次要色: #03dac6 (青色)
- 背景: #fafafa
- 表面: #ffffff
- 错误: #b00020

## 间距

- 基于 8dp 网格
- p-2 (8px), p-4 (16px), p-6 (24px), p-8 (32px)

## Animation & Interaction Rules

- Elevation Physics: hover 时从低海拔阴影抬升到高海拔阴影，可配合轻微 -translate-y-1 强化 Z 轴感。
- Pseudo-Ripple: active 状态至少包含 active:scale-[0.98] 或明暗下压反馈，模拟触控涟漪前奏。
- Deceleration Curve: 交互过渡优先使用 ease-[cubic-bezier(0.4,0,0.2,1)]，时长 200-300ms。
- Input Float: 输入框聚焦时标签必须平滑上浮并缩小，边框高亮同步过渡。

组件预览与实现

组件变体

font-medium uppercase tracking-wide rounded-full transition-all duration-200 bg-[#1976d2] text-white shadow-md hover:shadow-lg hover:brightness-110 active:shadow-sm

button

按钮

Material 风格按钮，强调海拔反馈与下压触感

<button className="
  relative px-6 py-2.5
  bg-[#6200ee] text-white font-medium uppercase tracking-[0.08em] text-sm
  rounded
  shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]
  hover:shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2),0_4px_5px_0_rgba(0,0,0,0.14),0_1px_10px_0_rgba(0,0,0,0.12)]
  hover:bg-[#7528e5]
  active:shadow-[0_5px_5px_-3px_rgba(0,0,0,0.2),0_8px_10px_1px_rgba(0,0,0,0.14),0_3px_14px_2px_rgba(0,0,0,0.12)]
  active:scale-[0.98]
  transition-all duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)]
  overflow-hidden
">
  <span className="relative z-10">Submit</span>
</button>

card

卡片

Material 风格卡片，遵循 Elevation Physics 抬升规则

<div className="
  bg-white rounded-xl
  shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)]
  hover:shadow-[0_14px_28px_rgba(0,0,0,0.25),0_10px_10px_rgba(0,0,0,0.22)]
  hover:-translate-y-1
  transition-all duration-[300ms] ease-[cubic-bezier(0.4,0,0.2,1)]
  overflow-hidden cursor-pointer
">
  <div className="h-48 bg-gradient-to-br from-[#6200ee] to-[#b388ff]" />
  <div className="p-4">
    <h3 className="text-xl font-medium text-black/85 mb-2 leading-tight">
      Material Surface
    </h3>
    <p className="text-black/60 text-sm leading-relaxed">
      Elements express their material nature through elevation and shadow.
    </p>
  </div>
</div>

input

输入框

Material 风格输入框，带浮动标签与标准曲线聚焦反馈

<div className="relative pt-5">
  <input
    type="text"
    placeholder=" "
    className="
      peer w-full px-4 py-3
      bg-gray-50
      border-2 border-gray-400
      rounded-t-md
      text-black/85
      focus:outline-none
      focus:border-[#6200ee]
      focus:bg-gray-100
      transition-colors duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)]
    "
  />
  <label className="
    absolute left-4 top-8
    text-black/60 text-base
    transition-all duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)]
    pointer-events-none
    peer-focus:top-1 peer-focus:text-xs peer-focus:text-[#6200ee]
    peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-xs
  ">
    Email Address
  </label>
</div>

hero

Hero 区块

Material 风格 Hero

<section className="
  min-h-screen
  bg-[#fafafa]
  relative
">
  {/* App Bar */}
  <nav className="fixed top-0 left-0 right-0 h-16 bg-[#6200ee] shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2),0_4px_5px_0_rgba(0,0,0,0.14),0_1px_10px_0_rgba(0,0,0,0.12)] flex items-center px-6 z-50">
    <h1 className="text-white font-medium text-xl">Material Design</h1>
  </nav>

  <div className="pt-24 px-6 max-w-4xl mx-auto">
    <div className="bg-white rounded-xl shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)] overflow-hidden">
      <div className="h-64 bg-gradient-to-br from-[#6200ee] via-[#7c4dff] to-[#b388ff] flex items-center justify-center">
        <h2 className="text-5xl font-bold text-white">Welcome</h2>
      </div>
      <div className="p-8">
        <p className="text-xl text-gray-700 mb-6">
          Build beautiful, usable products faster with Material Design.
        </p>
        <button className="px-6 py-3 bg-[#03dac6] text-black font-medium rounded-full shadow-md hover:shadow-lg transition-all">
          Get Started
        </button>
      </div>
    </div>
  </div>
</section>

交互展示

独立打开展示

适用范围与设计理念

应用场景

视觉关键词

Material Design（材料设计）是 Google 在 2014 年推出的设计语言，将数字界面比作有物理属性的纸张和墨水。

核心理念：

- 材料隐喻：界面如同有厚度的纸张，可堆叠、移动

- 海拔系统：通过阴影表达层次关系

- 大胆色彩：鲜明的主色和强调色

- 有意义的动效：动画传达空间关系和反馈

设计原则：

- 视觉一致性：所有组件必须遵循统一的视觉语言，从色彩到字体到间距保持谐调

- 层次分明：通过颜色深浅、字号大小、留白空间建立清晰的信息层级

- 交互反馈：每个可交互元素都必须有明确的 hover、active、focus 状态反馈

- 响应式适配：设计必须在移动端、平板、桌面端上保持一致的体验

- 无障碍性：确保色彩对比度符合 WCAG 2.1 AA 标准，所有交互元素可键盘访问

应该这样做

使用海拔阴影系统表达层次
应用涟漪效果作为点击反馈
使用大胆鲜明的色彩
保持 8dp 的间距网格
使用 Roboto 字体
添加有意义的微动效
精确双层海拔阴影：hover 时从 dp2 升至 dp8，shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)] → shadow-[0_14px_28px_rgba(0,0,0,0.25),0_10px_10px_rgba(0,0,0,0.22)]（Elevation Physics）
使用 Material 标准缓动曲线 ease-[cubic-bezier(0.4,0,0.2,1)] duration-[250ms]（Deceleration Curve）
按钮 active:scale-[0.98]（Pseudo-Ripple，手指下压的涟漪前奏）
卡片 hover:-translate-y-1 配合海拔阴影升级（Z 轴物理抬升感）

避免这样做

禁止使用不一致的阴影深度
禁止使用过于柔和的配色
禁止省略交互反馈
禁止打破 8dp 网格系统
禁止按钮缺少 active:scale-[0.98]（Material Pseudo-Ripple 是触感真实性的核心）
禁止使用非 Material 标准缓动曲线（必须使用 cubic-bezier(0.4,0,0.2,1)）
禁止卡片 hover 时阴影不变深（海拔变化是 Material 物理规则，不可省略）

全局 CSS

/* Material Design 全局样式 */

:root {
  --md-primary: #6200ee;
  --md-primary-variant: #3700b3;
  --md-secondary: #03dac6;
  --md-secondary-variant: #018786;
  --md-background: #fafafa;
  --md-surface: #ffffff;
  --md-error: #b00020;
}

/* 海拔阴影系统 */
.md-elevation-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.md-elevation-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.md-elevation-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.md-elevation-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

/* 涟漪效果基础 */
.md-ripple {
  position: relative;
  overflow: hidden;
}

/* 浮动标签输入框 */
.md-text-field {
  background: #f5f5f5;
  border-radius: 4px 4px 0 0;
  border: 2px solid #9e9e9e;
}

.md-text-field:focus {
  border-color: var(--md-primary);
}
@keyframes material-design-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes material-design-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.material-design-card {
  position: relative;
  overflow: hidden;
}

.material-design-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(98, 0, 238, 0.05), transparent);
  pointer-events: none;
}

.material-design-card:hover::before {
  opacity: 1;
}

.material-design-gradient {
  background: linear-gradient(135deg, #6200ee, #ff0266);
}

.material-design-gradient-text {
  background: linear-gradient(135deg, #6200ee, #ff0266);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.material-design-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(98, 0, 238, 0.08);
}

.material-design-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.material-design-animate-in {
  animation: material-design-fade-in 0.5s ease-out both;
}

布局、色板与 Tokens

主色#6200ee

次色#03dac6

强调色 1#ff0266

强调色 2#ffde03

强调色 3#00c853

强调色 4#c12700

{
  "border": {
    "width": "border",
    "color": "border-[#e0e0e0]",
    "radius": "rounded-md",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.14)]",
    "md": "shadow-[0_3px_6px_rgba(0,0,0,0.15),0_2px_4px_rgba(0,0,0,0.12)]",
    "lg": "shadow-[0_10px_20px_rgba(0,0,0,0.15),0_3px_6px_rgba(0,0,0,0.1)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_14px_28px_rgba(0,0,0,0.18),0_5px_10px_rgba(0,0,0,0.12)]",
    "focus": "focus:shadow-[0_3px_6px_rgba(0,0,0,0.15),0_2px_4px_rgba(0,0,0,0.12)]",
    "colored": {
      "purple": "shadow-[0_3px_6px_rgba(98,0,238,0.25)]",
      "teal": "shadow-[0_3px_6px_rgba(3,218,198,0.25)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-200 ease-in-out",
    "active": "active:scale-[0.99]",
    "hoverScale": "hover:scale-[1.01]"
  },
  "typography": {
    "heading": "font-sans font-medium tracking-tight",
    "body": "font-sans",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-6xl lg:text-7xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-10 md:py-16 lg:py-24",
    "container": "px-4 md:px-6 lg:px-8",
    "card": "p-4 md:p-6",
    "gap": {
      "sm": "gap-2 md:gap-3",
      "md": "gap-3 md:gap-4",
      "lg": "gap-4 md:gap-6"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-white",
      "secondary": "bg-[#f5f5f5]",
      "accent": [
        "bg-[#6200ee]",
        "bg-[#03dac6]",
        "bg-[#018786]",
        "bg-[#bb86fc]"
      ]
    },
    "text": {
      "primary": "text-[#212121]",
      "secondary": "text-[#757575]",
      "muted": "text-[#9e9e9e]"
    },
    "button": {
      "primary": "bg-[#6200ee] text-white",
      "secondary": "bg-transparent text-[#6200ee] border border-[#6200ee]",
      "danger": "bg-[#b00020] text-white"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-none",
      "border-black",
      "border-4",
      "shadow-[2px_2px_0px",
      "shadow-[4px_4px_0px",
      "shadow-[8px_8px_0px",
      "font-black",
      "font-serif",
      "bg-gradient-to-r",
      "bg-gradient-to-l"
    ],
    "patterns": [
      "^rounded-none$",
      "^shadow-\\[\\d+px_\\d+px_0px",
      "^font-(?:black|serif)$",
      "^border-(?:black|4)$"
    ],
    "reasons": {
      "rounded-none": "Material Design uses subtle rounding (rounded-md) for card elevation",
      "shadow-[4px_4px_0px": "Material Design uses elevation-based blur shadows, not hard-edge",
      "border-black": "Material Design uses subtle gray borders or relies on elevation shadows",
      "font-serif": "Material Design uses clean sans-serif typography (Roboto-style)"
    }
  },
  "required": {
    "button": [
      "rounded-md",
      "shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.14)]",
      "hover:shadow-[0_14px_28px_rgba(0,0,0,0.18),0_5px_10px_rgba(0,0,0,0.12)]",
      "transition-all duration-200 ease-in-out",
      "font-medium"
    ],
    "card": [
      "rounded-md",
      "shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.14)]",
      "bg-white"
    ],
    "input": [
      "rounded-md",
      "border border-[#e0e0e0]",
      "bg-white",
      "font-sans",
      "focus:border-[#6200ee]",
      "focus:outline-none"
    ]
  }
}

示例提示词

任务管理应用

Material 风格的任务管理界面

用 Material Design 创建一个任务管理应用界面，要求：
1. 顶部应用栏带阴影
2. 浮动操作按钮 (FAB)
3. 卡片列表展示任务
4. 使用海拔阴影系统
5. 紫色主色调，青色强调

SaaS 着陆页

生成材料设计风格的 SaaS 产品着陆页

Create a SaaS landing page using Material Design style with hero section, feature grid, testimonials, pricing table, and footer.

作品集展示

生成材料设计风格的作品集页面

Create a portfolio showcase page using Material Design style with project grid, about section, contact form, and consistent visual language.