赛博朋克
Cyberpunk
别名:赛博朋克赛博风格霓虹故障风黑底荧光紫青数字废土风黑客终端风Cyberpunk UINeon Glitch
这是什么
"High tech, low life" 的视觉语言：近黑的深底上，霓虹青与品红发光描边切割 界面，等宽字体与终端符号贯穿，扫描线 故障位移 毛刺纹理营造信息系统过载 的压抑未来感。光是从黑暗里切出来的，界面像一台被劫持的显示器。
开发规格
字体
等宽字体 + 霓虹发光标题
色彩
深夜蓝黑 #0B0F1A × 青色 #00E5FF
边框
1px 霓虹青色边框，小圆角
阴影
青色霓虹光晕 box-shadow
间距
终端式紧凑排布
动效
120ms 的霓虹瞬时点亮过渡，尊重 prefers-reduced-motion
状态反馈
hover 增亮青色霓虹；focus 用 2px 青色可见描边；active 反向闪烁一次；disabled 降为暗灰去光；error 用洋红霓虹
风格演示
同一张页面，直接操作接入网络按所选街区离线接入并可断开；勾选/取消装备后 HUD 同步显示街区、连接和装备状态。街区、装备、黑市、SYS 状态各有本地内容，不真实联网或交易。
整页预览 · 直接交互
使用时关注什么
- 01逐一操作 NEON://CITY 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。
- 02完成上述 NEON://CITY 操作后修改输入或撤销，检查结果与状态同步。
- 03用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。
✓ 适用场景
- 游戏 科幻项目 黑客主题社区，风格即世界观
- 音乐 夜店 电竞品牌，需要强烈的亚文化信号
- 深色为主的产品，可低成本叠加霓虹点缀
✕ 不适用场景
- 无障碍要求高的正文阅读，荧光色对比闪烁伤眼
- 企业级正式场景，亚文化气质会削弱信任
- 浅色底为主的现有体系，硬切赛博朋克成本高
常见形式
霓虹都市
Neon City
青品红双色霓虹，攻壳机动队式夜景
终端黑客
Terminal Hacker
单色荧光绿或琥珀，CRT 磷光屏
故障艺术
Glitch Art
RGB 错位位移与撕裂条纹为主角
实现要点
box-shadow: 0 0 8px #0fftext-shadowclip-path@keyframes signal-connectrepeating-linear-gradientNEON://CITY 使用深夜蓝黑、青色实体细线与高对比等宽字。右侧是标有三个街区的原创城市信号图，装饰地图不充当可点击控件；弱化泛光和卡片底色，保留清楚的层级。工作台以真实连接文字、装备复选框和一次性阶梯信号柱反馈状态，不持续闪烁。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
用当前风格完成 NEON://CITY 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。 NEON://CITY 使用深夜蓝黑、青色实体细线与高对比等宽字。右侧是标有三个街区的原创城市信号图，装饰地图不充当可点击控件；弱化泛光和卡片底色，保留清楚的层级。工作台以真实连接文字、装备复选框和一次性阶梯信号柱反馈状态，不持续闪烁。 复用当前 preview.tokens：背景 #0B0F1A；前景 #EAF6FF；强调 #00E5FF / #050810；卡面 rgba(0,229,255,.06)；边框 rgba(0,229,255,.35)；圆角 4px；字体 'SF Mono', Menlo, monospace；卡影 0 0 14px rgba(0,229,255,.25)。 dark 与 variants 延续已有工作区模式；style-signatures.css 负责本品牌主视觉、续页和微交互，封面与整页共用同一 renderer。 完整页面操作： 接入网络按所选街区离线接入并可断开；勾选/取消装备后 HUD 同步显示街区、连接和装备状态。街区、装备、黑市、SYS 状态各有本地内容，不真实联网或交易。 静态封面、详情演示与 /style-scenes/cyberpunk/（英文 /en/style-scenes/cyberpunk/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。 操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。 提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。 不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
复刻千禧年前后数码乐观主义的视觉语言：镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感，甜腻、闪亮、毫不克制。
风格相似概念"过去的人想象中的未来"的视觉语言：奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光，乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。
风格相似概念用粗黑描边、高饱和撞色与生硬的偏移实心阴影构成的高对比视觉语言：元素像彩色 贴纸一样直接砸在页面上，配合夸张的圆角与醒目标签。它刻意拒绝精致与圆滑， 以"丑得理直气壮"的态度换取强烈的记忆点与年轻个性。
风格相似概念用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件影响组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件