精选 · 开放 · 免费
Microwaver59
一个单色、排版驱动、高度交互的作品集界面。
Dark ModeMonochromeExperimentalTypographyRefined
01
设计气质 DNA
极简粗野主义实验性单色排版驱动
一个鲜明、实验性的设计工作室着陆页。
02
色彩
#FCFCFAInk
#000000BG
rgba(252, 252, 250, 0.2)Line
高对比度单色,仅使用黑色、白色和一种微妙的灰色。
03
字体
monospace
所有文本均为大写 · 全部使用等宽字体,营造技术感、统一的美感 · 所有文本元素采用宽松的字间距
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
严格对齐 4px 基础网格,内部间距紧凑且一致。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px 实线边框用于交互元素和结构划分。
0 0 0 1px rgba(252, 252, 250, 1)
06
布局
1440container
1columns
24pxgutter
768 / 1024breakpoints
全出血、单栏布局,各部分采用大量内边距。
07
动效与交互
240msmicro
370mssmall
620msmedium
cubic-bezier(0.68, -0.6, 0.32, 1.6)easing
标志动画变形为进度加载指示器 · 悬停状态下平滑、略带弹性的 cubic-bezier 过渡 · 加载状态的透明度渐隐
交互元素上的微妙透明度或下划线变化。 · 光标在交互元素上变为指针。
08
组件
- button 简洁的矩形按钮,采用大写等宽文本,默认悬停时带下划线。
- card 卡片主要通过排版和微妙的悬停状态来定义,而非厚重的容器。
- chip 在提供的截图中未明显出现。
- input 在提供的截图中未明显出现。
- hero 一个动态、居中的排版标志动画,可变形为进度指示器。
09
文案语气与禁用清单
- 语气 技术性、直接且高度克制。
- 标题风格 全大写、等宽字体、字间距加宽。
- 按钮文案 直接、大写且极简。
- 不要使用彩色渐变 —— 截图显示为严格的黑白单色调色板。
- 不要在主要元素上使用圆角 —— 截图显示为尖锐的矩形边缘。
- 不要使用多样的字体粗细 —— 截图显示几乎所有文本都使用统一的粗体。
- 不要使用左对齐文本 —— 截图显示为居中、对称的布局。
- 不要使用标准句子大小写 —— 截图显示所有内容均为大写。
- 不要使用宽字间距 —— 截图显示文本排列紧密、紧凑。
- 避免: 圆角形状
- 避免: 柔和渐变
- 避免: 装饰性图像
- 避免: 多种颜色
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个鲜明、实验性的作品集界面,以严格的单色调色板(黑色 #000000 和灰白色 #FCFCFA)为特征。排版完全采用等宽字体、粗体、大写并收紧字间距,营造出技术和粗野主义美感。布局居中且极简,极度强调交互动画,如变形标志和进度指示器。关键的“不要”包括:避免容器使用圆角、使用彩色渐变、应用标准句子大小写或使用多样的字体粗细。设计依赖于极端对比和微妙、有弹性的过渡,而非装饰性元素或多种颜色。
en · zh-CN · zh-TW · ja · ko