OpenDesign·你的设计资产库

网页参考

Cooper Hewitt

一个大胆的机构化设计博物馆网站,通过厚重的字体和沉浸式图像来呈现展览与项目。

MuseumDesign
Cooper Hewitt 网站截图

01

设计气质 DNA

博物馆设计文化教育展览

一座享有盛誉的设计博物馆,作为文化锚点,运用粗体字排版和沉浸式摄影展现设计卓越。

02

色彩

#FF5700Accent
#FFFFFFInk
#000000BG
#797B79Muted
rgba(255,255,255,0.5)Line

高对比度的机构配色方案,带有标志性的活力橙色点缀。

03

字体

grotesque-sans

  • display40px · 500
  • body18px · 400

所有主要文本均为大写形式。 · 标题使用紧凑的行高。

04

间距

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

在刚性的网格系统内,采用充足的内边距和外边距。

05

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

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

1px solid rgba(255,255,255,0.5)

rgb(255, 255, 255) 5px 0px 0px 0px · rgb(255, 255, 255) -5px 0px 0px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全幅摄影主视觉区域,后接多列网格布局。

07

动效与交互

150msmicro
200mssmall
400msmedium
ease-in-outeasing

悬停时的颜色和边框颜色过渡。 · 简单的轮播滑动动画。

文本链接和边框上的颜色过渡。 · 交互元素使用标准指针光标。

08

组件

  • button 粗体大写文本链接,部分为彩色背景(紫色、蓝色)上的白色文字。
  • card 全出血摄影图块,配有大型白色背景文字标签。
  • chip 小型圆形轮播指示器(橙色/灰色)。
  • input 带有文本和图标的简约搜索栏。
  • hero 全幅电影感图像,叠加大型、大写、白色背景的标题。

09

文案语气与禁用清单

  • 语气 机构化、权威,同时平易近人且富有吸引力。
  • 标题风格 粗体、大写、无衬线字体,通常显示在摄影背景之上。
  • 按钮文案 直接且以行动为导向,常使用橙色以示强调。
  • 不要对主要导航使用小写字母——截图显示菜单项为全大写、粗体文本。
  • 不要使用复杂的渐变背景——截图显示页眉为纯黑色背景。
  • 不要使用没有厚重图像支撑的宽阔、开放布局——截图显示全幅摄影主视觉和紧凑的网格。
  • 不要使用纤细、精致的字体——截图显示展示文本使用厚重的粗体 grotesque-sans 字体。
  • 不要避免使用白色背景的文字叠加——截图显示标题直接置于繁忙照片上的白色矩形上。
  • 不要使用柔和、单一色系的配色方案——截图显示黑白高对比度方案,并辅以活力橙色点缀。
  • 避免: 手写体字体
  • 避免: 柔和或粉彩色系的配色方案
  • 避免: 低对比度文本

10

包内真实截图

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

11

System Prompt

设计一个具有强烈编辑焦点的、稳健的博物馆与文化机构网站。其身份特征应大胆、机构化且具有权威性,采用黑白核心配色方案,并以标志性的橙色作为点缀。字体排版上,展示文本和正文均使用粗体大写的 grotesque-sans 类字体,以创建高冲击力的视觉层次。关键约束:保持所有主要文本为大写形式,使用全幅沉浸式摄影主视觉,并采用白色背景文字叠加以确保最大可读性,同时确保采用刚性的基于网格的布局,以平衡大型图像与清晰的导航。其美学应精致而平易近人,体现世界级设计博物馆的气质。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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