跳到主要内容
界面图谱Interface Atlas
☰
EN
风格Style / Visual Language

赛博朋克

Cyberpunk

别名:赛博朋克赛博风格霓虹故障风黑底荧光紫青数字废土风黑客终端风Cyberpunk UINeon Glitch

这是什么

"High tech, low life" 的视觉语言:近黑的深底上,霓虹青与品红发光描边切割 界面,等宽字体与终端符号贯穿,扫描线 故障位移 毛刺纹理营造信息系统过载 的压抑未来感。光是从黑暗里切出来的,界面像一台被劫持的显示器。

开发规格

字体

等宽字体 + 霓虹发光标题

色彩

深夜蓝黑 #0B0F1A × 青色 #00E5FF

边框

1px 霓虹青色边框,小圆角

阴影

青色霓虹光晕 box-shadow

间距

终端式紧凑排布

动效

120ms 的霓虹瞬时点亮过渡,尊重 prefers-reduced-motion

状态反馈

hover 增亮青色霓虹;focus 用 2px 青色可见描边;active 反向闪烁一次;disabled 降为暗灰去光;error 用洋红霓虹

风格演示

先看整页效果,再试交互场景

整页预览

⌄ https://neon.city:2077⋮
NEON://CITY接入网络

WAKE UP,
SAMURAI

霓虹永不熄灭。

高对比 · 霓虹边框 · 全息投影

接入网络 →
周一周三周五周日
◆义体改造

+15% 神经速率

▲黑客接口

破防只要 3 秒

●黑市信用

匿名交易

© 2024 NEON://CITY◦◦◦

交互场景

正在加载演示…

✓ 适用场景

  • 游戏 科幻项目 黑客主题社区,风格即世界观
  • 音乐 夜店 电竞品牌,需要强烈的亚文化信号
  • 深色为主的产品,可低成本叠加霓虹点缀

✕ 不适用场景

  • 无障碍要求高的正文阅读,荧光色对比闪烁伤眼
  • 企业级正式场景,亚文化气质会削弱信任
  • 浅色底为主的现有体系,硬切赛博朋克成本高

常见形式

霓虹都市

Neon City

青品红双色霓虹,攻壳机动队式夜景

终端黑客

Terminal Hacker

单色荧光绿或琥珀,CRT 磷光屏

故障艺术

Glitch Art

RGB 错位位移与撕裂条纹为主角

实现要点

box-shadow: 0 0 8px #0fftext-shadowclip-path@keyframes glitchrepeating-linear-gradient

深底用 #0a0a12~#12101f;霓虹色必须同时给发光(box-shadow/text-shadow 0 0 8px 同色)与实体描边,只有光晕会糊。面板用 clip-path 切角(单角或 对角切 8~12px)代替圆角。扫描线用 repeating-linear-gradient 叠加层, opacity 控制在 0.06 以下。故障动画是文本双层 RGB 错位,播放频率低、 时长短,并尊重 prefers-reduced-motion。

交给 AI

四层 Prompt 从「它是什么」一路写到「可直接执行的任务」;切到 Agent 任务层,还能叠加视觉风格与附加要求,再一键复制给你的 Coding Agent。

在当前项目中用赛博朋克风格(Cyberpunk)实现一个终端式输入与面板区块。

先检查现有主题体系,深色霓虹主题以独立 class 作用域隔离,不污染默认主题。
要求:
- 近黑深底 + 霓虹青/品红描边与发光,切角面板用 clip-path
- 等宽字体与终端符号(> _)贯穿
- 扫描线叠层 opacity ≤ 0.06,故障动画低频短促且尊重 prefers-reduced-motion
- 关键正文对比度达标,霓虹只做点缀不做正文色
- 不新增任何依赖
完成后运行项目现有检查,并列出修改的文件。

附加要求:
- 支持深色模式
- 尊重 prefers-reduced-motion
- 不新增依赖
- 完成后运行现有检查并列出修改文件

可直接交给 Coding Agent,可叠加风格与附加要求

相关概念

Y2K 千禧美学Y2K Aesthetic

复刻千禧年前后数码乐观主义的视觉语言:镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感,甜腻、闪亮、毫不克制。

风格相似概念
复古未来主义Retro-Futurism

"过去的人想象中的未来"的视觉语言:奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光,乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。

风格相似概念
新粗野主义Neobrutalism

用粗黑描边、高饱和撞色与生硬的偏移实心阴影构成的高对比视觉语言:元素像彩色 贴纸一样直接砸在页面上,配合夸张的圆角与醒目标签。它刻意拒绝精致与圆滑, 以"丑得理直气壮"的态度换取强烈的记忆点与年轻个性。

风格相似概念
输入框Input

用一条带边框的水平输入区收集单行文本,是表单的基本单元。 占位符提示期望格式,聚焦时高亮边框引导视线,校验失败时切换错误色 并附提示文案;可内嵌前后缀图标与清除按钮,受控管理输入值。

组件影响组件
卡片Card

用圆角边框或底色围出一块自包含内容的矩形容器,一块卡片聚合一组相关信息: 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。

组件影响组件

参考来源

Markdown 版(给 Agent) · JSON