OpenDesign·你的设计资产库

网页参考

Kevinbrenkman

一个为创意伙伴服务的设计驱动型网页开发实践。

AgencyPortfolioCleanTypographyStudio
Kevinbrenkman 网站截图

01

设计气质 DNA

设计驱动网页开发实践创意伙伴

一个精致、极简的 Studio Portfolio,让作品自己说话。

02

色彩

#000000Ink
#3B3B3BInk soft
#FFFFFFBG
#F8F8F8BG soft
#DFDFDFMuted
rgba(0, 0, 0, 0.1)Line

高对比度的单色基础,完全服务于项目图像。

03

字体

grotesque-sans · monospace

  • display32px · 400
  • body14px · 400

所有主要文本使用 grotesque-sans 字体。 · 所有元素保持统一的 400 字重。 · 所有正文和展示文本应用一致的 0.25px 字间距。

04

间距

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

严格的 4px 基准单位,文本元素周围采用紧凑、一致的 padding。

05

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

sm · 2px
md · 0px
lg · 0px
pill · 999px

采用 rgba(59, 59, 59, 0.3) 的 1px 细实线边框,用于实现微妙的视觉分隔。

无

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全宽通边距布局,项目图像横跨整个视口宽度,文本则限定在舒适的阅读宽度内。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing

hover 状态下的 padding 和 opacity 过渡。 · 交互元素的 Transform 动画。

通过细微的 padding 或 opacity 过渡来指示可交互性。 · 即时响应,无复杂状态变化。

08

组件

  • button 极简的内联文本链接,采用 2px border radius 和微妙的 hover 状态。
  • card 全出血的项目条目,包含标题、分类、描述及一张大型主视觉图片。
  • chip 小型、药丸状的标签,采用微妙的背景填充色来区分分类。
  • input 在提供的截图中未出现。
  • hero 全宽项目图像,无传统 padding 或边框装饰。

09

文案语气与禁用清单

  • 语气 专业、直接且克制。
  • 标题风格 清晰、简洁、描述性的项目标题。
  • 按钮文案 微妙的、内联的文本链接,而非突出的按钮。
  • 不要使用明亮的强调色——截图显示的是严格单色的调色板,没有主导性的高饱和度颜色。
  • 不要使用粗重的字体字重——截图显示所有文本的字重统一为 400。
  • 不要使用复杂的阴影或深度效果——截图显示的是平面化、无边框或仅带微妙边框的布局。
  • 不要大量使用圆角——截图显示的是锐利、最小化的 2px border radius。
  • 不要使用激进的行动号召——截图显示的是微妙的、内联的文本链接,而非突出的按钮。
  • 不要使用装饰性字体——截图显示的是干净、一致的 grotesque sans-serif 字体。
  • 避免: 营销术语或激进的销售语言。
  • 避免: 过度装饰的元素或令人分心的动画。
  • 避免: 与项目图像竞争的明亮、饱和的强调色。

10

包内真实截图

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

11

System Prompt

为一个创意工作室设计一个干净、专业的 Portfolio 网站。使用高对比度的单色调色板,背景为白色(#FFFFFF),文本为黑色(#000000),辅以微妙的灰色(#F8F8F8,#DFDFDF)。主字体设为 grotesque-sans 类别,字重统一为 400,字间距一致为 0.25px。布局应为全宽、通边距,项目图像占据视觉中心,UI 元素极简、克制。关键禁忌:切勿使用明亮、饱和的强调色;切勿使用粗体或重字重;切勿添加复杂的阴影或装饰性 UI 元素;切勿使用激进的行动号召;切勿使用超过 2px 最小值的圆角;切勿使用装饰性字体。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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