OpenDesign·你的设计资产库

网页参考

Tate

泰特美术馆的精致文化网站,采用大胆排版、鲜明首屏区域与清晰的网格化布局。

MuseumArt
Tate 网站截图

01

设计气质 DNA

文化机构可访问性现代画廊策展

如同配有大胆编辑摄影的极简画廊图录。

02

色彩

#FFDB23Accent
#1A1A1AInk
#313131Ink soft
#FFFFFFBG
#F8F8F8BG soft
#767676Muted
rgba(26,26,26,0.1)Line

高对比度中性色(黑/白/灰)搭配单一醒目的黄色作为焦点,让摄影作品提供主要视觉丰富度。

03

字体

geometric-sans · humanist-sans

  • display46px · 400
  • h222px · 400
  • body17px · 400
  • caption14px · 400
  • nav14px · 400

章节标题采用加大字距(全大写)建立层级。 · 正文保持17px的舒适阅读尺寸。 · 首屏标题虽大但使用常规字重。

04

间距

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

宽松的垂直节奏,内容块之间保持统一的16px/32px间距。

05

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

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

极少使用边框,主要为导航项或交互元素提供细微下划线(1px)。

rgb(128, 128, 128) 0px 0px 5px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

严格的12栏网格系统,采用居中最大宽度容器。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.58, 0, 0.38, 1.01)easing

交互元素采用标准 hover 过渡。 · 移动菜单显示采用微妙的淡入淡出过渡。

链接和按钮在 hover 时背景色或颜色发生微妙变化。 · 标准按钮按压反馈。

08

组件

  • button 实心黑色或蓝绿色块,搭配白色文字和右箭头,强调明确的行动号召。
  • card 图片优先的卡片,背景样式极简或无背景,依赖网格项间充裕的留白。
  • hero 分屏式首屏:一侧为全出血鲜艳图片,另一侧为纯色块(如黄色)搭配高对比度文字。

09

文案语气与禁用清单

  • 语气 机构化、教育性,同时亲切易懂。
  • 标题风格 大胆、全大写且具描述性,聚焦主题或地点。
  • 按钮文案 直接且行动导向,常与“→”箭头搭配以指示前进方向。
  • 避免使用投影营造层次——设计依赖纯色块与留白建立层级。
  • 避免使用多种冲突的点缀色——配色严格限定为黑、白、灰与特定黄色/蓝绿色。
  • 避免使用衬线字体——排版严格采用无衬线体,强调现代、简洁美感。
  • 避免使用大圆角——按钮和卡片采用极简或尖角。
  • 避免布局中堆砌密集文字块——保持充裕间距,聚焦图像。
  • 避免使用粗体字重——即使最大的展示文本也使用常规(400)字重。
  • 避免: 过于随意或口语化的语言。
  • 避免: 与艺术无关的复杂术语。
  • 避免: 过度使用感叹号。

10

包内真实截图

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

11

System Prompt

泰特美术馆的精致文化网站,优先考虑清晰度、可访问性与简洁的网格化编辑布局。视觉标识建立在高对比度中性色(黑 #1A1A1A、白 #FFFFFF、灰 #767676)之上,以醒目的黄色点缀(#FFDB23)。排版严格采用无衬线体(正文使用人文主义风格,标题使用几何风格),标题字距宽松。关键禁忌:避免衬线字体,不使用多种点缀色,并保持充裕留白以让摄影作品主导视觉层级。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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