网页设计风格参考指南

# 极简主义网页设计 请使用纯 HTML + CSS 实现一个极简主义风格的 [产品/作品集/品牌] 落地页，要求： 【色彩】 - 背景：纯白 #FFFFFF 或米白 #FAFAF9 - 文字：纯黑 #111111，辅助色仅允许一种灰 - 禁止使用任何彩色 【字体】 - 标题：Noto Serif SC 300 或 Playfair Display - 正文：系统字体栈，font-weight: 300-400 - 字号层级严格只用 3 级 【布局】 - 最大宽度 680px，水平居中 - 段落间距 ≥ 2rem，行高 ≥ 1.8 - 唯一装饰元素：1px 细线分隔符 【禁止项】 - 不得使用渐变、阴影、圆角卡片 - 不得使用图标或插画 - 不得使用任何动画效果 核心原则：每删去一个元素，页面就更完整一分。

# 暗金奢华风格网页设计 请实现一个黑金奢华风格的[品牌/会所/餐厅]官网首页： 【色彩系统】 - 背景：#080808 纯黑（非深灰） - 主金色：#C9A84C（用于标题、边框） - 亮金：#E8C97D（hover 状态） - 暗金：#8A6A2A（次要文字、装饰线） - 正文：#6A5030（段落描述） 【字体与排版】 - 标题：Cormorant Garamond 或 Noto Serif SC，超细字重 300 - 字距极宽：letter-spacing: 0.1em ~ 0.3em - 全大写副标题 + Space Mono 等宽字体 【装饰元素】 - 细金线：0.5px solid #8A6A2A - 渐变金线：linear-gradient(90deg, transparent, #C9A84C, transparent) - 菱形/星形分隔符：◆ ✦ - 双边框：外框 + 内框，两者均为金色 【动效】 - 仅允许 fade-in（透明度渐变，duration ≥ 1.5s） - 光泽扫过动画（shimmer）可选 调性：安静、克制、昂贵。绝不使用霓虹或彩色。

# 毛玻璃风格 UI 组件 请用 HTML + CSS 实现毛玻璃（Glassmorphism）风格的 [登录卡片/控制面板/通知组件]： 【背景层（必须）】 - 使用鲜艳渐变作为底层背景（cards 浮在其上） - 推荐：linear-gradient(135deg, #1a1060, #4a1080, #1a4060) - 加 2-3 个彩色模糊色块（blob）增加层次 【玻璃卡片核心 CSS】 background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 16px; 【分层规则】 - 背景层：z-index 0（渐变 + blobs） - 内容层：z-index 1（玻璃卡片） - blobs 必须用 filter: blur(40px)，不能锐利 【按钮样式】 - 白色半透明：rgba(255,255,255,0.20) 背景 - 悬停：rgba(255,255,255,0.30) - 边框：1px solid rgba(255,255,255,0.35) 【注意兼容】 - 添加 -webkit- 前缀 - 提供 backdrop-filter 不支持时的降级样式 关键：玻璃感来自背景的丰富色彩，卡片本身保持透明克制。

# 野兽派（Brutalism）网页设计 请实现一个 Brutalist 风格的[品牌/活动/作品集]页面： 【核心原则：打破所有「好」设计规则】 【色彩】 - 底色：米白 #F2EDE4 或纯白 #FFFFFF - 文字：纯黑 #000000（不是深灰，是纯黑） - 强调：荧光黄 #FFFF00、红 #FF0000（选其一） - 禁止渐变 【排版】 - 标题：font-weight: 900，font-size: clamp(48px, 10vw, 120px) - 全大写（text-transform: uppercase） - letter-spacing: -0.02em（紧密，而非宽松） - 允许文字重叠、溢出容器 【边框与形状】 - 所有边框：border: 3px solid #000（或更粗） - 严禁 border-radius（全部方角） - 按钮：纯色块 + 粗边框，hover 反色 【布局】 - 非对称、故意倾斜（transform: rotate(-2deg)） - 元素之间不留"够用"的间距，要么极密要么极疏 - 允许使用 outline 代替 border 目标：让用户第一眼觉得「这是故意的」，而非做错了。

# 新拟物（Neumorphism）UI 组件 请实现新拟物风格的[播放器/控制面板/卡片]组件： 【铁律：背景色 = 组件色】 - 定义一个基础色变量：--base: #DDE3ED - 所有元素背景都使用 var(--base) - 层次只靠阴影区分，不靠颜色 【凸起阴影（pressed out）】 box-shadow: 8px 8px 14px #b5bbc8, -5px -5px 10px #ffffff; - 暗色阴影 = base 色调深 15% - 亮色阴影 = 纯白或 base 色调浅 10% 【凹陷阴影（pressed in / active）】 box-shadow: inset 4px 4px 8px #b5bbc8, inset -3px -3px 6px #ffffff; 【进度条/滑块】 - 轨道：inset 阴影（凹陷） - 填充：单一纯色（唯一允许的彩色点缀） - 按钮圆形：凸起阴影 【禁止项】 - 严禁不同背景色的卡片 - 严禁边框（border: none） - 不要过多彩色，最多一种强调色 【深色模式适配】 - dark 下 base 改为 #2a2d35 - 暗影改为 #1e2028，亮影改为 #363a44 成功标准：组件看起来像从背景里长出来的，而非放在上面的。

# Material Design 风格应用页面 请按照 Google Material Design 3 规范实现 [任务管理/数据看板/设置页面]： 【色彩系统（M3 Baseline）】 - Primary：#1565C0（AppBar、FAB、强调按钮） - Surface：#F5F5F5（页面背景） - Surface Variant：#E8EDF5（卡片） - On-Primary：#FFFFFF - Error：#B00020 【间距系统】 - 基础单位：8px（使用 8 的倍数） - 组件内边距：16px 或 24px - 列表行高：56px（dense: 48px） 【组件规范】 - AppBar：固定顶部，primary 色背景，白色标题 - FAB：圆形（56px），primary 色，box-shadow 两层 - Chip：36px 高，border-radius 18px - Card：white bg，border-radius 4px，box-shadow: 0 2px 4px rgba(0,0,0,0.15) 【涟漪点击效果】 - 点击时用 JS 动态添加 ::after 伪元素 - 从点击坐标向外扩散，opacity 0→0.15→0 【严格遵守】 - 所有圆角使用固定值（4px 或 8px），不使用百分比 - 阴影层级：Elevation 1=2px, 2=4px, 3=8px 参考：m3.material.io — 功能明确，信息架构清晰。

# 编辑/杂志风格网页 请实现编辑杂志风格的[文章页/新闻首页/媒体网站]： 【核心：Typography-First 设计】 【字体配对（必须）】 - 标题：Playfair Display 或 Noto Serif SC（衬线，weight 600-900） - 正文：Source Serif Pro 或 Georgia（阅读友好） - 标注/导航：Space Mono 或 Letter Gothic（等宽/几何） - 三种字体各司其职，不混用 【版式结构】 - 12列网格（CSS Grid，gap: 20px） - 主文章：8列；侧边栏：4列 - 分类标签：全大写，字重800，letter-spacing: 0.2em，加颜色强调 - 首字下沉（::first-letter）：font-size: 4em，float: left，margin: 0.1em 0.1em 0 0 【色彩】 - 黑白为主，只选一种强调色（例：深红 #C0392B） - 强调色只用于：分类标签、期数、链接hover 【分隔与边框】 - 垂直分隔：border-right: 2.5px solid #000（双栏之间） - 水平分隔：border-top: 1px solid #ddd 或 3px solid #000（重要分区） 【图片处理】 - 全出血（100%宽，无圆角，无阴影） - 图注：12px，灰色，左对齐，斜体 原则：读者的眼睛应该知道下一步该看哪里，版式引导视线流动。

# 暗色开发者风格网页/文档站 请实现面向开发者的暗色风格[文档站/API页面/工具落地页]： 【色彩系统（仿 VS Code Dark+）】 - 编辑器背景：#0D1117（GitHub Dark） - 侧边栏：#161B22 - 悬停/选中：#21262D - 语法高亮（必须实现至少 4 种）： · 关键字 #569CD6（蓝） · 字符串 #CE9178（橙） · 函数名 #DCDCAA（黄） · 类型/类 #4EC9B0（青） · 注释 #6A9955（绿） · 数字 #B5CEA8（浅绿） · 变量 #9CDCFE（浅蓝） 【字体】 - 代码块：'Fira Code', 'JetBrains Mono', monospace - 启用连字（font-variant-ligatures: common-ligatures） - 正文：system-ui 或 Inter 【代码块组件】 - 带标题栏（文件名 + 三点按钮） - 行号列（灰色，user-select: none） - 复制按钮（右上角，hover 显示） - 不同语言 tab 切换 【细节】 - 光标闪烁动画（1s blink）在终端区域 - 滚动条：细（4px）+ 暗色轨道 原则：每个开发者看到这个页面应该感觉「这是同类做的」。

# 复古 Y2K / Windows 98 风格网页 请实现一个 Windows 98 / 早期互联网风格的 [个人网站/作品集/游戏页面]： 【灵魂：Bevel 3D 边框】 /* 凸起按钮 */ border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; background: #c0c0c0; /* 凹陷输入框 */ border-color: #808080 #ffffff #ffffff #808080; 【色彩系统】 - 桌面/背景：#008080（经典 teal） - 窗口主体：#C0C0C0（系统灰） - 标题栏：linear-gradient(90deg, #000080, #1084D0) - 标题栏文字：#FFFFFF，字体 Courier New / Space Mono 【窗口组件】 - 实现可拖拽的「窗口」（mousedown + mousemove） - 标题栏：左图标+标题，右[_][□][✕]按钮 - 菜单栏：File / Edit / View / Help - 状态栏：底部，显示选中数/进度条 【字体】 - 系统字体：'Courier New', monospace 或 VT323（Google Fonts） - font-size: 11-13px（还原低分辨率感） 【彩蛋加分项】 - 桌面图标可双击打开 - 右键菜单（preventDefault 后自定义） - 开始按钮弹出菜单 - 错误对话框（带惊叹号图标） 目标：让 90 后看到立刻产生童年回忆，让 00 后感到新奇。

# 插画/趣味风格落地页 请实现活泼插画风格的[教育平台/创意工具/消费品]落地页： 【色彩：高饱和度但不刺眼】 - 背景：#FEF6EE（暖米白）或 #F0F9FF（冷白） - 主色：从下列选 2-3 种搭配 · 珊瑚红 #EF476F · 金黄 #FFD166 · 薄荷绿 #06D6A0 · 天蓝 #118AB2 · 紫 #845EC2 - 文字：深色（#264653），非纯黑 【有机形状（Blob）】 用 CSS border-radius 实现： border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; - 放置在角落，position: absolute，z-index: 0 - opacity: 0.5-0.7，尺寸 80-200px - 加 @keyframes 缓慢变形（morphing blob） 【字体】 - 标题：Nunito / Poppins / Sora（圆润 sans-serif） - font-weight: 700-800 - 禁止使用尖锐的几何字体 【按钮】 - 圆形/胶囊状（border-radius: 999px） - 带颜色阴影：box-shadow: 0 6px 16px rgba(主色, 0.4) - hover 时上浮：transform: translateY(-2px) 【插图替代方案（无图片素材时）】 - 用 SVG 绘制简单 flat 图标 - 用 emoji 作为插图元素（font-size: 40-80px） - 用色块堆叠模拟插图氛围 调性：看到第一眼就想点击，读起来像朋友在说话，不像品牌在营销。

# 清爽专业工具站风格（yymuse 类） 请实现一个专业工具/资源目录类网站[参考 yymuse.com 风格]： 【双色分区结构】 - 顶部导航：深色背景 #1A1A2E，高度 48-56px · Logo（浅色，font-weight 600） · 导航链接（低饱和浅灰） · 右侧搜索图标 / 用户头像 - 内容区：白色 #FFFFFF 或 #F9F9FC · 两区颜色对比要明确，形成视觉层次 【分类侧边栏（可选）】 - 固定左侧，宽 200px - 分类 item：hover 变浅紫色背景 - 当前选中：左侧 2px 主题色竖线 【工具卡片网格】 - grid: repeat(auto-fill, minmax(160px, 1fr)) - 每张卡片： · 图标（emoji 或 SVG，24-32px） · 工具名称（14px，font-weight 500） · 标签/分类（12px，灰色） · hover：border-color 变主题色，轻微上浮 【搜索功能】 - 页面内即时搜索（JS filter） - 搜索框居中，宽 480px - 无结果时显示友好提示 【色彩规范】 - 主题色：#5B5EF4（紫蓝）或自定义 - 卡片边框：#EAEAF5 - hover 边框：#9898E8 - 文字三级：#333 / #666 / #AAA 核心：用户在 5 秒内找到想要的工具，界面不成为障碍。

# 沉浸式/3D 视觉冲击风格网页 请实现沉浸式空间感风格的[产品首页/Web3官网/创意作品集]： 【背景层次（3层）】 1. 最深层：纯黑/深紫 #0D001F 2. 中间层：径向发光 blob（CSS） background: radial-gradient(ellipse 400px 200px at 50% 40%, rgba(138,43,226,0.5), transparent); 3. 顶层内容：高亮卡片 / 文字 【发光元素系统】 - 主光源：紫 rgba(138,43,226,0.5) - 副光源：青 rgba(78,205,196,0.3) - 边缘光：粉 rgba(255,107,157,0.2) - 光晕要叠加，不要孤立 【卡片/元素样式】 background: linear-gradient(135deg, rgba(60,20,100,0.95), rgba(20,5,40,0.95)); border: 1px solid rgba(180,100,255,0.3); border-radius: 16px; box-shadow: 0 0 40px rgba(138,43,226,0.2), inset 0 1px 0 rgba(255,255,255,0.08); 【文字处理】 - 主标题渐变：background: linear-gradient(90deg, #e0b3ff, #ffffff); 配合 -webkit-background-clip: text - 副标签：letter-spacing 宽，小字全大写 【动效（加分）】 - 鼠标跟随：卡片轻微 3D 倾斜（perspective + rotateX/Y） - 滚动视差：背景光源随 scrollY 移动 - 粒子：用 canvas 绘制漂浮小点 警示：克制用色，3 种主色足够。过度发光反而失去高级感。