OpenDesign·你的设计资产库

网页参考

Herman Miller

平衡传承设计与现代办公解决方案的高端家具品牌

FurnitureDesign
Herman Miller 网站截图

01

设计气质 DNA

高端现代家具设计传承办公空间

建筑事务所作品集与高端电商目录的结合

02

色彩

#252525Ink
#4C4C4CInk soft
#FFFFFFBG
#EBEBEBBG soft
rgba(37, 37, 37, 0.15)Line

高对比度中性色,让产品摄影主导视觉层次

03

字体

humanist-sans

  • display40px · 700
  • heading24px · 700
  • body16px · 400
  • caption14px · 400

所有排版使用人文主义无衬线字体 · 正文保持宽松的行高 (1.625) · 标题应用紧凑的字间距

04

间距

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

8像素基线网格,章节间采用宽松的垂直内边距 (48px-99px)

05

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

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

使用低透明度墨色绘制的纤细、微妙的边框

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

首页与办公空间路径的双栏分区,在移动端堆叠为单栏

07

动效与交互

100msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

悬停时的颜色过渡 · 交互元素的位置过渡

文本链接上的微妙颜色过渡 · 即时的状态变化

08

组件

  • button 基于文本的链接,带向右箭头,无可见按钮容器
  • card 全出血图片,下方配文,无边框或阴影
  • hero 大型标题搭配双栏图片网格

09

文案语气与禁用清单

  • 语气 自信、专业且包容
  • 标题风格 直接而陈述性,使用句子式大小写
  • 按钮文案 带有箭头指示的行动导向文本,无按钮样式
  • 不要使用投影——截图显示为完全扁平、无阴影的布局
  • 不要为按钮使用彩色背景——截图显示为纯文本链接
  • 不要在卡片周围使用粗边框——截图显示为无边框的图片卡片
  • 不要使用繁杂的调色板——截图显示为白色背景的单色方案
  • 不要对标题使用居中对齐——截图显示为左对齐的标题
  • 不要使用装饰性字体——截图显示为功能性的、简洁的人文主义无衬线字体
  • 不要在主要组件上使用圆角——截图显示为锋利的、方形的边缘
  • 避免: 过多的感叹号
  • 避免: 非正式俚语
  • 避免: 术语密集的技术性词汇

10

包内真实截图

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

11

System Prompt

这是一个平衡传承设计与现代办公解决方案的高端家具电商网站。关键色彩包括用于背景的白色 (#FFFFFF)、用于文本的深墨色 (#252525) 以及用于页脚区域的柔灰色 (#EBEBEB)。字体采用人文主义无衬线字体 (Meta),主要使用 400 和 700 字重。布局在桌面端为整洁的双栏分区,在移动端堆叠为单栏。关键禁忌:切勿在扁平布局上添加投影,切勿使用彩色按钮背景(链接为纯文本),切勿在边缘锋利的卡片上应用圆角。设计优先考虑大型产品摄影,而非装饰性的UI元素。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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