OpenDesign·你的设计资产库

网页参考

Design Museum

一个精致的文化机构网站,优先考虑摄影视觉冲击与大胆的字体标识。

MuseumDesign

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

01

设计气质 DNA

设计博物馆当代伦敦文化

一座大胆、具有建筑感的画廊入口,转化为数字界面。

02

色彩

#E8E316Accent
#000000Ink
#FFFFFFBG
rgba(0,0,0,0.1)Line

高对比度单色系,搭配建筑感黄色强调色与沉浸式摄影。

03

字体

geometric-sans · grotesque-sans

  • display50px · 700
  • heading30px · 700
  • body15px · 400
  • small12px · 500

为大型展示文字使用紧凑的字距,营造建筑张力。 · 导航和操作标签优先采用大写样式。 · 在展示字体与正文字重之间保持高对比度,以建立清晰的层级。

04

间距

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

基于4px的网格,主要区块间保持充裕留白,让摄影画面得以呼吸。

05

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

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

界面元素使用1px黑色实线边框,激活状态使用2px实线。

0px 32px 68px 0px rgba(0,0,0,0.3)

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全宽摄影主视觉区,内容居中,信息布局基于网格。

07

动效与交互

100msmicro
500mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

文本元素在滚动时采用错落淡入与上滑动画。 · 交互元素的平滑悬停过渡效果。 · 主视觉图像上微妙的视差效果。

颜色反转或背景快速切换。 · 提供即时视觉反馈,伴随轻微缩放或透明度变化。

08

组件

  • button 高对比度纯色块(黑/白/黄),棱角分明,文字大写。
  • card 通过锐利边框或极简内边距定义的干净容器。
  • chip 基于文本的简洁标签,可选边框。
  • input 极简表单元素,边框干净,内边距标准。
  • hero 大幅摄影背景,搭配粗体排版覆盖层。

09

文案语气与禁用清单

  • 语气 具有机构感、权威性,同时热情且富有前瞻性。
  • 标题风格 大胆、简洁,措辞常具建筑感。
  • 按钮文案 直接、行动导向,常使用大写以示强调。
  • 不要在主要按钮上使用圆角——截图显示按钮为锐利的矩形形状。
  • 不要为文本使用低对比度颜色——截图显示为白或黄背景上的高对比度黑色文本。
  • 不要使用装饰性或衬线字体——截图显示为几何与怪诞无衬线字体族。
  • 不要使用柔和、粉彩的强调色——截图显示为大胆、高饱和度的黄色强调。
  • 不要让所有元素都居中导航——截图显示为左对齐文本搭配居中的汉堡菜单。
  • 不要在卡片上使用充裕的圆角——截图显示为锐利的边角或极小的圆角。
  • 避免: 避免使用过度装饰或手写风格字体。
  • 避免: 避免使用柔和的粉彩调色板。
  • 避免: 避免在主要按钮上使用圆角。
  • 避免: 避免留白不足的杂乱布局。
  • 避免: 避免使用泛泛的库存摄影。
  • 避免: 避免关键信息使用低对比度文本。

10

包内真实截图

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

11

System Prompt

这是一个为伦敦设计博物馆打造的精致文化机构网站。它采用高对比度单色方案(黑色 #000000,白色 #FFFFFF),并以大胆的建筑黄(#E8E316)作为主要强调色。字体严格使用几何与怪诞无衬线体,可能来自DIN Pro系列,大标题字距紧凑,字号从50px到12px具有清晰的层级。布局基于网格且留白充裕,优先呈现大幅摄影和粗体文字叠加。关键禁忌:切勿在主要按钮上使用圆角,切勿使用低对比度文本,切勿使用装饰性或衬线字体。整体感觉具有机构感、权威性,并且建筑般精确。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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