OpenDesign·你的设计资产库

网页参考

Microwaver59

一个单色、排版驱动、高度交互的作品集界面。

Dark ModeMonochromeExperimentalTypographyRefined

封面待补录,可通过原站查看设计。

01

设计气质 DNA

极简粗野主义实验性单色排版驱动

一个鲜明、实验性的设计工作室着陆页。

02

色彩

#FCFCFAInk
#000000BG
rgba(252, 252, 250, 0.2)Line

高对比度单色,仅使用黑色、白色和一种微妙的灰色。

03

字体

monospace

  • body19px · 700

所有文本均为大写 · 全部使用等宽字体,营造技术感、统一的美感 · 所有文本元素采用宽松的字间距

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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个鲜明、实验性的作品集界面,以严格的单色调色板(黑色 #000000 和灰白色 #FCFCFA)为特征。排版完全采用等宽字体、粗体、大写并收紧字间距,营造出技术和粗野主义美感。布局居中且极简,极度强调交互动画,如变形标志和进度指示器。关键的“不要”包括:避免容器使用圆角、使用彩色渐变、应用标准句子大小写或使用多样的字体粗细。设计依赖于极端对比和微妙、有弹性的过渡,而非装饰性元素或多种颜色。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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