蒸汽波
Vaporwave
别名:蒸汽波蒸汽波风格粉紫蓝复古未来霓虹网格地平线80年代商场美学vaporwavesynthwave UIretro mall aesthetic
这是什么
用霓虹粉紫青、透视网格地平线、镀铬 3D 字与棕榈树剪影表示「消费主义怀旧」的视觉语言。 拼贴 80-90 年代商场、早期 CGI 与故障信号，甜腻、迷幻、又带着空洞的乐观。
开发规格
字体
镀铬渐变展示字 + 宽字距无衬线
色彩
粉 #FF71CE × 青 #01CDFE × 紫 #B967FF
边框
1px 霓虹描边，胶囊与直角混用
阴影
多层同色霓虹光晕
间距
地平线居中对称，元素悬浮网格上
动效
300–400ms 的霓虹渐亮与地平线滑动，尊重 prefers-reduced-motion
状态反馈
hover 增强多层霓虹光晕；focus 用青色可见亮环；active 压低饱和；disabled 去光降透明；error 用粉红霓虹
风格演示
同一张页面，直接操作步入中庭进入楼层导览，选楼层查看音像、美食等场所，护照打卡且重复不计数；音像、美食广场、关于可返回对应导览，无真实消费。
整页预览 · 直接交互
使用时关注什么
- 01逐一操作 MALL★95 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。
- 02完成上述 MALL★95 操作后修改输入或撤销，检查结果与状态同步。
- 03用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。
✓ 适用场景
- 音乐、夜店、潮牌、复古主题活动，风格即情绪
- 需要强烈亚文化信号与迷幻氛围的营销页
- 播放器、票券、虚拟商品等娱乐向界面
✕ 不适用场景
- 金融、医疗、政务等需要冷静可信的界面
- 长文阅读与表单录入，霓虹与闪烁持续消耗注意力
- 无障碍要求高的场景，粉紫青对比度与闪烁都有风险
常见形式
商场软调
Mall soft
粉彩大理石、希腊柱与 Windows 95 窗口，甜而空
霓虹故障
Neon glitch
粉青霓虹 + RGB 错位与扫描线，信号不稳
全息镀铬
Holographic chrome
液态金属 3D 字与 CD 幻彩反光
实现要点
linear-gradient 粉紫青perspective + rotateX 网格地平线background-clip: text 镀铬字text-shadow 多层霓虹repeating-linear-gradient 扫描线地平线网格是招牌：一个 perspective 容器里放 rotateX(70deg) 的 repeating-linear-gradient 网格 平面，底部渐隐。镀铬字用多段灰阶或粉青渐变 + background-clip: text + 深色描边。 霓虹用 text-shadow 多层同色扩散，色相锁粉 #FF71CE 青 #01CDFE 紫 #B967FF。棕榈树与希腊柱当剪影贴 1～2 处。故障动画短促低频，尊重 prefers-reduced-motion。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
用当前风格完成 MALL★95 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。 保留 MALL★95 原粉紫渐变、青色操作/描边、山景剪影面板及胶囊功能卡；不强制新增透视地平线、镀铬 background-clip 字、棕榈树/罗马柱或故障动画。楼层地图才使用现有横纵重复渐变网格、青色字光晕与三层色相变化；护照列表按正常文档流显示。 复用当前 preview.tokens：背景 linear-gradient(180deg,#2B0F54 0%,#5B1E8C 45%,#FF71CE 100%)；前景 #FFE9FF；强调 #01CDFE / #0A0030；卡面 rgba(255,113,206,.12)；边框 rgba(1,205,254,.55)；圆角 999px；字体 Arial Black, Futura, Helvetica Neue, PingFang SC, sans-serif；卡影 0 0 16px rgba(1,205,254,.45)。 dark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。 完整页面操作： 步入中庭进入楼层导览，选楼层查看音像、美食等场所，护照打卡且重复不计数；音像、美食广场、关于可返回对应导览，无真实消费。 静态封面、详情演示与 /style-scenes/vaporwave/（英文 /en/style-scenes/vaporwave/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。 操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。 提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。 不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
复刻千禧年前后数码乐观主义的视觉语言：镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感，甜腻、闪亮、毫不克制。
风格相似概念"High tech, low life" 的视觉语言：近黑的深底上，霓虹青与品红发光描边切割 界面，等宽字体与终端符号贯穿，扫描线 故障位移 毛刺纹理营造信息系统过载 的压抑未来感。光是从黑暗里切出来的，界面像一台被劫持的显示器。
风格相似概念"过去的人想象中的未来"的视觉语言：奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光，乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。
风格相似概念反功能主义的后现代视觉语言：波浪线 圆点 锯齿 斑点等天真涂鸦元素，与高饱和 撞色、黑色粗描边一起铺满画面，故意打破网格与秩序。它拥抱廉价与热闹，用 "丑得快乐"对抗优雅的现代主义。
风格相似概念用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件