赛博朋克仪表盘
设计赛博朋克主题的监控仪表盘。基础背景为深色 #0a0a0f，霓虹强调色使用青色 #00f0ff、洋红色 #ff0080 和警告黄色 #ffe600。卡片采用 HUD 风格三角切角与霓虹完整边框，所有文字使用 JetBrains Mono。页面包含带翻页时钟动画的实时数据计数器、用于状态指示的六边形网格、通过 CSS animation 和 clip-path 实现的标题 glitch，以及覆盖全页的扫描线。卡片用 clip-path polygon 制作斜角轮廓。赛博朋克设计提示词
赛博朋克设计从科幻中汲取灵感，创造沉浸式、高科技的界面，特点是暗底霓虹配色、故障和扫描线效果、HUD（平视显示）元素、未来感排版和粗粝的都市美学。这些设计感觉像在霓虹灯城市中操作终端，将功能性与电影式视觉叙事融为一体。
v0 霓虹东京
使用 shadcn/ui 创建 Neon Tokyo 主题活动页。背景使用超深色 #050510，强调色为霓虹粉 #ff2d78 和电光蓝 #2de2e6。hero 使用大型 glitch 文字与动态霓虹招牌效果；活动信息放入带 clip-path 切角的 HUD 卡片；加入霓虹数字倒计时、带赛博朋克边框的人物照片网格，以及使用发光 CTA 按钮的购票区。再用 CSS 添加轻微的雨幕动画叠层。Cursor 科幻 HUD
在 Next.js 中构建科幻 HUD 界面。所有元素采用棱角形状，通过 clip-path 制作菱形切角；primary 霓虹色使用青色 #00f5ff，背景使用深海军蓝 #0a1628。创建 TargetReticle、DataReadout（动态数字计数器）、StatusBar（分段进度）、AlertPanel（闪烁边框）和 RadarChart 组件。用 CSS custom property 定义霓虹光效：--neon-glow: 0 0 10px var(--neon-color), 0 0 20px var(--neon-color), 0 0 40px var(--neon-color)。所有文字使用等宽字体和大写形式，letter-spacing: 0.2em。Claude 故障 UI
生成具有赛博朋克 glitch 美学的 React 组件。创建 GlitchText（通过 CSS animation 随机偏移 RGB 通道的 text-shadow）、NeonButton（发光边框与文字，悬停时播放 pulse 动画）、HUDCard（clip-path 斜角，mount 时播放边框描绘动画）、DataStream（使用等宽字体的滚动文字 ticker）和 CyberInput（仅有下划线，带闪烁光标和青色强调）。提供 useGlitch() hook，按随机间隔触发视觉 glitch。使用 Tailwind CSS 和自定义 animations 实现。赛博朋克游戏落地页
为赛博朋克电子游戏设计落地页。基础背景为 #05050a，叠加 opacity 3% 的轻微扫描线。hero 使用占满视口的 keyart；标题为 96px stencil display font，带青色 #00f0ff 外发光 text-shadow 0 0 20px，并每 6 秒触发一次洋红色 #ff0080 glitch 双重曝光。导航使用 13px 等宽大写文字和 0.25em 字母间距，当前链接由动态 [ ] 包裹。页面包含带 clip-path 切角和 1px 青色完整边框的功能面板、terminal 读数风格的系统需求表，以及使用纯色 #ff0080 与黑字的预购 CTA，保证 7.2:1 对比度。在 prefers-reduced-motion 下关闭 glitch 与扫描线动画。v0 赛博朋克音乐播放器
使用 shadcn/ui 构建 synthwave 音乐播放器。背景使用从 #0a0a14 到 #1a0a2e 的垂直渐变，并加入 opacity 30%、颜色 #ff2d78 的透视网格地面。播放器卡采用 clip-path 斜角和 1px #2de2e6 完整边框，光效为 0 0 12px。专辑封面由动态角括号围合。波形可视化器包含 48 根从青色到洋红色渐变的 bars，并响应模拟 amplitude array。控件包括带脉冲霓虹环的圆形播放按钮，以及使用三角轮廓的上一首、下一首按钮。曲名使用等宽大写文字，溢出时启用 marquee。进度条使用 4px #1f1f33 轨道、#2de2e6 填充和菱形 thumb。图标较抽象，所有控件必须提供 aria-label。Cursor 赛博朋克管理后台
使用 Tailwind 在 Next.js 中构建赛博朋克后台面板。外壳左侧为 64px 宽的 icon-only 导航栏，图标默认使用 #7dd3fc，当前项切换为 #00f5ff 并发光；主区域使用 #0a0f1e 背景和 8px 网格。数据表使用 13px 等宽字体，表头行采用 opacity 40% 的 1px #00f5ff 完整边框，行 hover 背景变为 #101830。状态 chip 分别为 ONLINE #39ff14、DEGRADED #ffe600、OFFLINE #ff3b3b，并始终显示文字标签，不能只依赖颜色。图表使用透明背景与霓虹色板，网格线为 opacity 10% 的 1px 白线。modal 以 HUD 面板滑入，并在 400ms 内播放边框描绘动画。正文使用 14px #d6e4ff，确保与深海军蓝背景达到 4.5:1 对比度。Claude 赛博朋克作品集
生成黑客 terminal 风格的 React 作品集网站。启动序列在 2 秒内逐字显示三行等宽文字，并允许按任意键跳过。布局使用 max-w-4xl，背景为 #050508，全部文字使用 JetBrains Mono。区块标题以 #39ff14 的 shell prompt 形式呈现，例如 '> projects --list'。项目卡默认使用 1px #1f2937 完整边框，hover 时切换为 #00f5ff 并产生 0 0 16px 光效；tag 显示为 #ffe600 的方括号 token。关于区模拟 'whoami' 输出，联系表单的 input 模拟带闪烁块状光标的命令行字段。提供 2px #ff0080 outline 的可见 focus 状态，并加入 'disable effects' toggle，用于关闭全部光效和动画。常见问题
什么是赛博朋克 UI 设计？
赛博朋克 UI 设计创造灵感来自科幻电影（银翼杀手、攻壳机动队、创）的未来感高科技界面。关键元素：暗色背景配霓虹强调色、故障和扫描线效果、HUD 风格的棱角元素、等宽排版和数据密集的显示。它唤起一个技术无处不在且视觉强烈的反乌托邦未来。
如何在 CSS 中创建故障效果？
使用 CSS 动画配合 clip-path 和 text-shadow。文字故障：在 RGB 偏移位置之间动画化 text-shadow（如 '2px 0 red, -2px 0 cyan'）。视觉故障：用 @keyframes 随机改变 clip-path: inset() 值，创造切片式视觉失真。配合 mix-blend-mode 实现色彩通道分离。添加相同文字偏移的伪元素实现重影效果。
哪些霓虹色最适合赛博朋克设计？
经典赛博朋克霓虹配色：青色（#00f5ff）、玫红/品红（#ff0080）、电紫（#bf00ff）、霓虹绿（#39ff14）和警告黄（#ffe600）。在深色背景（#0a0a0f 至 #1a1a2e）上谨慎使用。通过 box-shadow 和 text-shadow 施加发光效果，使用不同模糊级别（10px、20px、40px）的相同霓虹色。
如何让霓虹发光效果满足无障碍要求？
四条规则：第一，对比度按文字本身颜色计算，不算光晕——#00f5ff 青色在 #0a0a0f 上轻松通过（13:1），但 #ff0080 品红在深藏蓝上只有约 4.6:1，应留给大字或配黑字的背景使用。第二，光晕会模糊文字边缘；用 500-600 字重补偿，且 18px 以下的正文绝不加光晕——只给标题和强调元素发光。第三，闪烁和故障循环要包在 @media (prefers-reduced-motion: reduce) 里，任何闪烁保持每秒 3 次以下（WCAG 2.3.1 癫痫阈值）。第四，状态色必须配文字标签，霓虹配色对色盲用户非常不友好。
赛博朋克界面用什么字体？
等宽字体是骨架：数据、标签和正文用 JetBrains Mono、IBM Plex Mono 或 Share Tech Mono，13-15px。展示型标题用棱角或镂空字体：Orbitron、Rajdhani、Chakra Petch 或 Michroma，600-700 字重。标志性处理：结构性文字全大写、标签字距 0.15-0.25em、计数器用等宽数字。严格搭配一个展示字体加一个等宽字体——引入第三种字体会打破终端幻觉。避免圆润的人文字体（Inter、Nunito），它们的柔和感与硬朗的 HUD 语言相矛盾。