OpenDesign·你的设计资产库

网页参考

Zaha Hadid Architects

一个身临其境的、以摄影为核心的享誉世界的建筑工作室数字档案馆。

ArchitectureStudio
Zaha Hadid Architects 网站截图

01

设计气质 DNA

参数化雕塑感未来主义建筑

一座可交互的参数化建筑结构

02

色彩

#ffffffInk
#000000BG
#1d1d1dBG soft
#d0d0d0Muted
rgba(0, 0, 0, 0.1)Line

高对比度的单色基底,完全服务于全出血的建筑摄影。

03

字体

geometric-sans · humanist-sans

  • display48px · 300
  • heading16px · 700
  • body12px · 400

主标签和导航链接严格使用大写字母 · 主品牌标识使用轻量字重(300),以保持优雅、轻盈的感觉

04

间距

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

不规则的、基于模块的布局,由图像构图而非严格的垂直韵律驱动

05

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

sm · 2px
md · 6px
lg · 8px
pill · 50px

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

4px 4px 8px 0px rgb(0, 0, 0) · 0px 32px 68px 0px rgba(0, 0, 0, 0.3)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

自由形式的覆盖层模块,定位在全视窗摄影背景之上

07

动效与交互

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

带方向箭头导航的背景图片轮播 · 基于滚动的垂直展开,揭示额外的模块

所有交互元素的鼠标指针变为手形;文字链接有细微的透明度变化 · 触发模块展开或背景切换

08

组件

  • button 透明的文字链接,采用大写样式,并带有可选的细底部边框
  • card 半透明的深色叠加层,包含文字和辅助图像
  • input 简约的文本输入框,配有极简的 'Go' 触发按钮
  • hero 全视窗建筑摄影,配以悬浮的、相互重叠的信息模块

09

文案语气与禁用清单

  • 语气 权威、有远见且具有机构感
  • 标题风格 粗体、大写且极简
  • 按钮文案 低调的大写文字链接或简单的 'Go' 按钮
  • 不要使用明亮的点缀色——截图显示了严格的黑、白、灰单色调色板。
  • 不要将所有文本居中对齐——截图显示主要文本模块采用左对齐文本。
  • 不要使用过重的字体字重——截图显示标志使用字重 300,正文使用 400。
  • 不要使用标准的网格布局——截图显示在照片上使用自由、重叠的模块化布局。
  • 不要使用纯色背景——截图显示整个背景是一张摄影图像。
  • 不要在内容模块中使用大的内边距——截图显示使用如 6px 10px 这样的紧凑内边距。
  • 避免: 友好或随意的语言
  • 避免: 过于描述性或冗长的句子
  • 避免: 明亮、饱和的色彩点缀

10

包内真实截图

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

11

System Prompt

这是一个高端建筑工作室的作品集网站。它使用全视窗的摄影背景,并配以深色、半透明的悬浮内容模块。调色板严格单色:#000000、#ffffff 和 #d0d0d0。字体结合了用于展示的几何无衬线体(geometric-sans)和用于正文的人文主义无衬线体(humanist-sans),主要使用大写字母,字号较小(12px)。关键禁忌:不要引入明亮的点缀色。不要使用标准、统一的网格布局。不要为主品牌使用过重的字体字重。布局高度实验性和以摄影为主,要求模块在高对比度的图像上自由悬浮。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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