01
设计气质 DNA
复古故障赛博朋克VHS实验性开发者
一卷来自未来的开发者作品集VHS录像带,呈现扭曲效果
02
色彩
#ff44ccAccent#e0e0ffInk#1a0a2eBG#8866aaMutedrgba(255, 68, 204, 0.3)Line深空紫色背景,搭配高对比度的青白色文字和鲜明的粉红色点缀
03
字体
- display
48px · 700 - body
18px · 400 - caption
12px · 400
所有文本使用等宽字体族 · 展示性文字全部大写 · 文本应用强烈的扫描线和色差效果
04
间距
4px8px16px24px32px48px64px96px段落间保持充裕的垂直间距,展示性文字则采用紧凑的行高
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
水平扫描线覆盖整个视口
文本阴影使用青色和洋红色偏移以实现色差效果 · 无投影效果
06
布局
1440container
1columns
24pxgutter
768 / 1024breakpoints
全屏背景搭配居中的内容区域,无侧边栏
07
动效与交互
100msmicro
300mssmall
1000msmedium
lineareasing
持续的扫描线动画 · 色差闪烁 · VHS跟踪失真
静态截图无法确定 · 静态截图无法确定
08
组件
- button 极简的基于文本的导航,配有三角形播放指示器
- card 无传统卡片,内容直接在背景上流动
- chip 导航项设计成带有播放箭头的频道指示器样式
- input 截图中未见可见的输入元素
- hero 全视口沉浸式引言区域,带有故障效果
09
文案语气与禁用清单
- 语气 技术感、创意性、略带叛逆
- 标题风格 全大写等宽字体,带有故障失真效果
- 按钮文案 基于文本,配有三角形播放指示器
- 不要使用干净的无衬线字体——截图显示为带有故障效果的等宽字体
- 不要使用白色背景——截图显示为深紫色太空背景
- 不要使用细微的动画——截图显示为强烈的CRT/VHS失真
- 不要使用基于卡片的布局——截图显示为内容直接在背景上流动
- 不要使用柔和的色彩方案——截图显示为鲜艳的青色、洋红色和紫色
- 不要使用极简设计——截图显示为最大主义的复古未来美学
- 不要使用专业摄影——截图使用抽象的宇宙背景
- 避免: 干净的排版
- 避免: 企业化语言
- 避免: 极简主义方法
11
System Prompt
定位:面向创意技术专家的实验性开发者作品集,具有复古VHS/CRT美学。关键色彩:深紫色(#1a0a2e)背景,青白色(#e0e0ff)文字,鲜艳的粉红色(#ff44cc)点缀。字体类别:全局使用等宽字体,并应用色差效果。关键禁忌:绝不使用干净的无衬线排版,绝不使用白色或浅色背景,绝不使用细微的极简动画,绝不使用传统卡片布局,绝不使用企业化专业语言,绝不使用柔和的色彩方案。此设计拥抱有意的瑕疵感和技术怀旧情怀。