可直接运行的单文件 HTML 的 16 种常见的 UI 设计风格设计提示词。
一、项目目标
制作一个“UI 设计风格展示库”网站，通过 16 个独立的风格案例，让用户能够直观了解不同 UI 风格的视觉特征、配色方式、组件形态和适用场景。
页面主要面向：
- UI/UX 设计师
- 产品经理
- 前端开发者
- 独立开发者
- 对网站设计感兴趣的用户
网站重点是视觉效果和风格差异，具体文案内容可以自由设计，但必须真实、完整、有设计感，不能使用大量无意义占位文字。
二、技术要求
- 使用原生 HTML、CSS 和 JavaScript 编写。
- 所有代码必须放在一个 HTML 文件中。
- 不依赖 React、Vue、Bootstrap、Tailwind CSS 等框架。
- 页面保存为
.html文件后，可以直接在浏览器中打开运行。 - 不要省略任何代码，不要只提供局部示例。
- 不要输出代码解释，只输出完整 HTML 代码。
- 页面必须兼容 Chrome、Edge、Safari 等现代浏览器。
- 页面必须支持电脑、平板和手机访问。
- 所有按钮、导航、切换功能都必须真实可用。
- 使用语义化 HTML，并保证代码结构清晰、易于后续修改。
三、整体页面结构
页面采用完整的作品展示网站结构，至少包含：
1. 顶部导航栏
包含：
- 网站 Logo 或文字标识
- 首页
- 风格展示
- 风格对比
- 设计说明
- 深色模式切换按钮
导航栏需要具有吸顶效果，滚动页面时保持可见。
2. 首屏区域
设计一个具有视觉冲击力的 Hero 区域，包含：
- 主标题：16 种 UI 设计风格
- 简短介绍
- “浏览全部风格”按钮
- “随机查看风格”按钮
- 一个能够体现多种 UI 风格融合效果的视觉装饰区域
3. 风格筛选区域
提供分类筛选按钮，例如：
- 全部
- 极简类
- 科技类
- 复古类
- 商业类
- 自然类
- 实验类
点击分类后，可以筛选对应的风格卡片。
4. 风格展示区域
展示 16 张大型设计风格卡片。
每张卡片不能只更换背景颜色，而是要真正体现该风格的：
- 字体排版
- 色彩体系
- 按钮样式
- 卡片结构
- 图标语言
- 边框效果
- 阴影效果
- 装饰元素
- 页面层级
- 动效方式
每张风格卡片中至少包含：
- 中文名称
- 英文名称
- 风格编号
- 简短说明
- 一个迷你网页或产品界面 Demo
- 2—4 个代表性标签
- “查看详情”按钮
点击“查看详情”后，使用弹窗展示：
- 风格特点
- 推荐配色
- 常用设计元素
- 适用网站类型
- 使用注意事项
5. 风格对比区域
加入一个简单的风格对比功能。
用户可以选择两种风格，对比以下内容：
- 主色调
- 字体特征
- 圆角大小
- 阴影方式
- 信息密度
- 适用场景
6. 页面底部
包含：
- 网站简介
- 风格分类链接
- 使用说明
- 版权信息
- 返回顶部按钮
四、需要展示的 16 种 UI 风格
01. 极简主义 Minimalism
参考 Google、Notion、ChatGPT 等产品的简洁设计语言。
特点：
- 大量留白
- 黑、白、灰为主要颜色
- 内容优先
- 字体清晰
- 装饰元素较少
- 强调排版、间距和信息层级
Demo 可以设计成简洁的 AI 笔记或效率工具界面。
02. 玻璃态 Glassmorphism
特点：
- 半透明卡片
- 背景模糊
- 磨砂玻璃质感
- 紫蓝色、粉紫色或青蓝色渐变
- 细腻高光
- 柔和边框
- 悬浮式组件
必须使用 backdrop-filter 实现真实的玻璃效果。
Demo 可以设计成音乐播放器、数据面板或个人中心。
03. 新拟物 Neumorphism
特点：
- 柔和的背景颜色
- 双向阴影
- 元素像从背景中凸起或凹陷
- 低对比度
- 圆润按钮
- 强调触感和立体感
Demo 可以设计成智能家居控制面板。
必须同时展示凸起按钮和凹陷输入框。
04. 赛博朋克 Cyberpunk
特点：
- 深色背景
- 霓虹粉、蓝、紫、绿色
- 发光边框
- 故障艺术效果
- 网格线
- 高对比度
- 科幻终端界面
- 不规则切角
Demo 可以设计成未来城市控制台或游戏角色面板。
05. 暗黑奢华 Dark Luxury
特点：
- 黑色、深灰或墨色背景
- 金色、银色或香槟色点缀
- 高级衬线字体
- 大面积图片区域
- 克制的动画
- 精致细线
- 高端、沉稳、奢华
Demo 可以设计成腕表、珠宝、香水或高级时装官网。
06. 美式风格 American Style
特点：
- 简洁直接
- 粗体标题
- 清晰的功能分区
- 强烈的行动按钮
- 大尺寸图片
- 强调实用性和商业转化
- 信息表达直观
Demo 可以设计成户外品牌、运动品牌或生活方式品牌官网。
07. 千禧年 Y2K
特点：
- 明亮鲜艳的颜色
- 银色、粉色、蓝色
- 圆润组件
- 星星、爱心、气泡等装饰
- 复古电脑和互联网元素
- 像素图标
- 活泼、可爱、略带未来感
Demo 可以设计成潮流社区、音乐网站或个人主页。
08. 卡片式布局 Card-based Design
特点：
- 内容以卡片为主要容器
- 大圆角
- 柔和阴影
- 清晰的信息分组
- 模块化结构
- 适合数据展示
- 方便响应式排列
Demo 可以设计成 SaaS 产品后台或项目管理系统。
09. 北欧自然风 Nordic Nature
特点：
- 米白、浅灰、原木色、鼠尾草绿
- 自然材质
- 有机曲线
- 简洁排版
- 柔和光影
- 舒适、安静、放松
- 强调环保和生活方式
Demo 可以设计成家居、民宿、家具或自然生活品牌网站。
10. 孟菲斯 Memphis
特点：
- 大胆鲜艳的配色
- 几何图形
- 不规则线条
- 圆点、波浪、三角形
- 强烈的视觉冲突
- 充满趣味和实验感
Demo 可以设计成创意工作室、活动页面或艺术展览网站。
11. 动感渐变 Dynamic Gradients
特点：
- 多色渐变
- 流动色彩
- 模糊光斑
- 动态背景
- 强烈的视觉吸引力
- 现代感和活力感
- 柔和的颜色过渡
Demo 可以设计成创意科技产品、AI 工具或数字服务官网。
渐变背景需要具有缓慢流动的动画效果。
12. 编辑部风格 Editorial Style
特点：
- 模仿报纸和杂志排版
- 超大标题
- 衬线字体与无衬线字体组合
- 多栏布局
- 明确的标题层级
- 信息密度较高
- 图片与文字具有编辑感
Demo 可以设计成时尚杂志、文化媒体或设计新闻网站。
13. 粗野主义 Brutalism
特点：
- 粗黑边框
- 高对比配色
- 原始直接的排版
- 不规则布局
- 大字号文字
- 少量修饰
- 强烈、独立、具有实验性
Demo 可以设计成独立艺术家、音乐节或设计机构网站。
14. Bento Grid 便当盒布局
特点：
- 使用大小不同的矩形模块
- 模块排列紧凑但有秩序
- 大圆角
- 信息分类明确
- 类似 Apple 产品介绍页面
- 适合展示多个功能和数据
Demo 可以设计成个人作品集、应用介绍页或产品功能页面。
15. 黏土拟态 Claymorphism
特点：
- 厚实圆润的组件
- 类似黏土或软塑料的质感
- 柔和阴影
- 鲜艳但不过度刺眼的颜色
- 具有立体卡通感
- 亲切、轻松、趣味化
Demo 可以设计成儿童教育应用、健康应用或轻量社交产品。
16. 复古未来主义 Retro Futurism
特点：
- 复古科幻视觉
- 夕阳渐变
- 紫色、橙色、蓝色
- 透视网格
- 老式电脑字体
- 颗粒噪点
- 80 年代电子音乐封面风格
Demo 可以设计成音乐播放器、未来旅行平台或数字艺术网站。
五、视觉设计要求
- 每种风格必须具有明显差异，不能只替换主题颜色。
- 每张卡片都要像一个独立设计作品。
- 页面整体要统一，但卡片内部可以保留各自风格。
- 注意字体大小、间距、留白和视觉层级。
- 避免页面看起来像普通后台模板。
- 不要过度使用 Emoji。
- 可以使用 CSS 图形、渐变、阴影和 SVG 图标。
- 图标风格需要与对应 UI 风格一致。
- 不要依赖无法稳定访问的外部图片。
- 图片区域可以使用 CSS 渐变、内嵌 SVG 或可靠的在线图片资源。
- 保证文字和背景之间具有足够的对比度。
- 页面需要具有专业、精致、可用于作品展示的完成度。
六、交互与动画要求
加入适量且流畅的交互效果：
- 卡片悬停动画
- 按钮反馈
- 滚动出现动画
- 导航定位
- 分类筛选
- 风格详情弹窗
- 深色模式切换
- 随机查看一种风格
- 返回顶部
- 风格对比选择
动画应优雅自然，不要过度晃动，不要影响阅读。
同时兼容 prefers-reduced-motion，当用户关闭动画时减少动态效果。
七、响应式要求
电脑端
- 风格卡片采用两列或三列布局
- 保持足够的展示面积
- 导航和对比功能完整显示
平板端
- 调整为两列布局
- 减少装饰元素尺寸
- 保持文字清晰
手机端
- 使用单列布局
- 导航自动转换为移动端菜单
- 卡片内容不能溢出
- 按钮方便触摸
- 弹窗适配小屏幕
- 不出现横向滚动条
- 主要文字字号不能过小
八、代码质量要求
- CSS 使用变量统一管理颜色、圆角、阴影和间距。
- JavaScript 需要添加必要注释。
- 不要出现重复、无效或明显冗余代码。
- 所有 HTML 标签必须正确闭合。
- 不允许存在无法点击的假按钮。
- 筛选、弹窗、主题切换和风格对比功能必须可以正常运行。
- 对话框需要支持点击关闭按钮和遮罩关闭。
- 页面刷新后，可以通过
localStorage保留用户选择的深色或浅色模式。 - 为按钮和交互元素添加适当的无障碍属性。
- 最终输出必须是一份完整、可运行、视觉效果优秀的 HTML 代码。
请严格按照以上要求生成代码，只输出从 <!DOCTYPE html> 开始到 </html> 结束的完整代码，不要添加 Markdown 代码围栏，也不要附加任何解释。