OpenDesign·你的设计资产库

网页参考

Rauno Freiberg

一个通过极端尺度与强烈对比定义的大胆排版式作品集网站。

PortfolioMinimalDesign-engineering
Rauno Freiberg 网站截图

01

设计气质 DNA

极简主义大胆排版高对比度开发者

一个用于交互设计作品的、冷峻而粗犷的展览空间。

02

色彩

#FFFF02Accent
#000000Ink
#171717Ink soft
#8f8f8fBG
#edededBG soft
#6f6f6fMuted
rgba(0, 0, 0, 1)Line

以高对比度的单色为基底,搭配单一高饱和度的强调色。

03

字体

grotesque-sans · system-sans · monospace

  • display85px · 400
  • body16px · 400
  • label14px · 400

关键文本元素使用极大的字号。 · 展示文本保持紧凑的行高。 · 字体粗细主要限制为 400。

04

间距

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

容器内部留有宽裕的 padding。

05

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

sm · 4px
md · 12px
lg · 12px
pill · 9999px

部分元素使用 1px solid black 边框。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

不对称的卡片式布局。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

容器的 hover 过渡效果。

交互元素上的光标变为 pointer。 · 标准点击行为。

08

组件

  • button 无明显标准按钮;交互主要通过大型容器的 hover 状态实现。
  • card 灰色背景上的白色矩形卡片。
  • chip 未使用。
  • input 未使用。
  • hero 白色卡片上的大型排版,有时与大型几何图形重叠。

09

文案语气与禁用清单

  • 语气 直接、自信且极简。
  • 标题风格 超大尺寸、小写或句子首字母大写的排版陈述。
  • 按钮文案 细微或无明显设计,依赖视觉层次引导。
  • 不要使用厚重的投影——截图显示的是扁平、无边框的白色卡片。
  • 不要到处使用明亮、饱和的背景色——截图显示以中性灰为主导。
  • 不要使用小而精致的排版作为标题——截图显示的是巨大、粗体的文字。
  • 不要使用多种字体粗细——截图显示主要依赖 400 粗细。
  • 不要使用传统的导航栏——截图显示的是极简的自定义顶部导航。
  • 不要在所有地方使用圆角——截图显示的是尖角或仅略微圆润的角。
  • 避免: 装饰性元素
  • 避免: 复杂渐变
  • 避免: 拥挤的布局

10

包内真实截图

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

11

System Prompt

设计一个极简、以排版为核心的作品集网站,灵感源自粗野主义网页设计。采用冷峻、高对比度的色彩方案,以中性灰(#8f8f8f, #ededed)和纯黑(#000000)为主导,搭配单一、鲜艳的强调色(如电光黄 #FFFF02),并谨慎用于几何图形。排版应粗犷且巨大,展示文本使用 grotesque-sans 类别,正文使用 system-sans,主要保持统一的 400 粗细。布局应采用不对称的卡片式,容器内部留有宽裕的 padding(例如 64px)。关键约束:避免装饰性元素或复杂渐变,绝不使用小而精致的排版作为标题,并始终优先选择大胆、有冲击力的排版陈述而非密集的段落。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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