OpenDesign·你的设计资产库

网页参考

Hallucinate Site

一个沉浸式的、以键盘驱动的在线狂欢派对体验,具有黑暗、迷幻的美学风格

Game UIDark ModeExpressiveConsumerPlayful

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

狂欢派对在线交互式游戏多人游戏

数字虚空中霓虹灯照耀的舞池

02

色彩

#e0e0e0Ink
#a0a0a0Ink soft
#0a0a0aBG
#666666Muted
rgba(255, 255, 255, 0.15)Line

在深邃的黑色背景上使用高对比度的霓虹强调色,营造沉浸式的低光俱乐部氛围

03

字体

decorative-gothic · humanist-sans · geometric-sans

  • display72px · 400
  • subtitle28px · 400
  • label11px · 500

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px

慷慨的垂直间距,为交互元素之间创造呼吸空间

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(255, 255, 255, 0.2)

0 0 20px rgba(100, 50, 255, 0.3) · 0 0 40px rgba(255, 50, 100, 0.2) · inset 0 1px 0 rgba(255, 255, 255, 0.1)

06

布局

1200container
12columns
24pxgutter
768 / 1024breakpoints

居中的垂直堆叠布局,键盘控制键分布于两侧

07

动效与交互

150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上的霓虹发光脉冲 · 带有渐变扫动的进度条动画

微妙的亮度提升或发光增强 · 通过缩放或亮度变化提供视觉反馈

08

组件

  • button 带有微妙边框和圆角的键盘键帽样式,下方带有文字标签
  • card 带有微妙边框的深色面板,用于包含键盘快捷键
  • input 圆角输入字段,带有左对齐的图标和占位符文本
  • hero 带有发光效果的大型霓虹渐变标题和装饰性副标题

09

文案语气与禁用清单

  • 语气 趣味且沉浸
  • 标题风格 大型、装饰性的霓虹渐变文本,带有发光效果
  • 按钮文案 带有图标前缀的简单文本输入
  • 不要使用明亮的背景——截图显示通篇使用深黑色(#0a0a0a)
  • 不要为标题使用普通的无衬线字体——截图显示使用装饰性的哥特体展示字体
  • 不要回避霓虹色——截图采用了青色-品红渐变和发光效果
  • 不要让输入框占满全宽——截图显示为受限的、居中的输入字段
  • 不要隐藏键盘控制键——截图在两侧显著显示了按键映射
  • 不要使用平面、静态的元素——截图通过霓虹发光效果暗示了运动感
  • 不要使用复杂的排版层次——截图保持了简单、清晰的文本结构
  • 避免: 企业化语言
  • 避免: 正式语气
  • 避免: 复杂的说明
  • 避免: 明亮的背景
  • 避免: 用于展示文本的无衬线字体

11

System Prompt

这是一个以键盘驱动交互为核心的黑暗、沉浸式在线狂欢派对游戏界面。调色板以深黑色(#0a0a0a)为主,辅以霓虹青色和品红色强调,营造出迷幻的发光效果。排版方面,主标题使用装饰性哥特体,UI元素使用简洁的无衬线体。布局居中,键盘控制键分列两侧,创造出类似游戏的界面。关键设计约束:切勿使用明亮的背景,始终保持黑暗的俱乐部氛围,使用霓虹渐变进行强调,并使键盘控制键清晰可见且突出。该网站融合了游戏UI模式与狂欢派对文化美学。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。