精选 · 开放 · 免费
Virtual Plus Ex
一个鲜明、高对比度的交互体验,优先考虑粗体排版和简单、受控的导航。
Dark ModeExperimentalApp UIBold TypographyClean
01
设计气质 DNA
交互式极简大胆实验性沉浸式
一个极简主义的交互式画廊或展厅,专注于用户控制和粗体排版。
02
色彩
#FF5C00Accent
#FFFFFFInk
rgba(255,255,255,0.4)Ink soft
#000000BG
rgba(255,255,255,1)Line
严格的高对比度单色,配以单一醒目的点缀色用于强调。
03
字体
grotesque-sans · monospaced
- display
60px · 500 - subheading
16px · 500 - body
12px · 500 - label
10px · 500
所有文本均为大写。 · 标题使用紧凑的负字间距。 · 正文始终使用等宽字体以营造技术感。
04
间距
4px
8px
10px
16px
24px
30px
32px
35px
36px
48px
60px
交互元素周围留有充足的内边距,通常为25-36px。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 10px
lg · 0px
pill · 0px
按钮为2px实心白色描边,装饰性元素为细微的1px线条。
06
布局
初始模式选择采用居中垂直堆叠,过渡为全屏滚动式布局。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
悬停状态所有属性的过渡。 · 根据说明推断的平滑滚动或滑动。
推断交互元素有指针光标和过渡效果。 · 启动和选择模式的主要交互方式。
08
组件
- button 大型、圆角矩形描边按钮,全大写文本,内部填充充足。
- card 在提供的截图中未显示,但推断为主要的内容容器。
- chip 未显示。
- input 未显示。
- hero 全屏黑色画布,配有居中的大型排版和极简的装饰性线条元素。
09
文案语气与禁用清单
- 语气 直接、极简且具有指导性。
- 标题风格 粗体、全大写、紧凑字间距。
- 按钮文案 醒目按钮内的清晰、大号、全大写文本。
- 不要使用衬线或手写字体——截图仅显示无衬线和等宽字体。
- 不要添加背景图像或渐变——截图显示为纯黑色背景。
- 不要使用低对比度文本——截图显示为黑底上的高对比度白色文本。
- 不要使用复杂的阴影或景深效果——截图显示为仅有描边的扁平组件。
- 不要使用多种强调色——截图仅显示一种强调色(橙色)。
- 不要对UI元素使用小写文本——截图显示所有文本均为大写。
- 避免: 柔和或俏皮的语言。
- 避免: 杂乱的布局或多个竞争性元素。
- 避免: 衬线或装饰性字体。
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个极简主义的实验性交互式展厅网站。它使用鲜明的黑白配色方案,配以单一醒目的橙色点缀用于关键说明。排版采用粗体、全大写,标题使用无衬线字体,正文使用等宽字体,营造出一种直接的技术感。主要交互通过大型描边按钮和滚动控制。关键设计规则:仅使用指定的字体类别,保持高对比度,避免装饰性元素,保持布局居中且宽敞,并始终使用大写文本。切勿添加阴影、渐变或多种强调色。交互模型简单,专注于滚动和点击。
en · zh-CN · zh-TW · ja · ko