OpenDesign·你的设计资产库

网页参考

Urbanwoodsystems

一个基于网格、拥有超大排版和中性配色的大胆硬件产品网站。

HardwareCleanProductGeometricMinimal
Urbanwoodsystems 网站截图

01

设计气质 DNA

高端工业感极简都市功能性

一本极简主义的瑞士设计杂志与一本高端硬件目录的结合。

02

色彩

#000000Ink
#E6E6DDBG
rgba(0,0,0,0.1)Line

高对比度的单色系配色方案,搭配温暖的中性背景。

03

字体

grotesque-sans

  • display140px · 500
  • body11px · 500

所有文本严格设置为中等字重(500)。 · 所有元素使用紧凑的字间距(-0.1px至-2px)。 · 不使用字体字重变化;层次完全通过巨大的尺度差异来建立。

04

间距

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

严格的4px网格,交互元素周围仅有最小内边距。

05

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

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

除标准的1px系统默认值外,无可见边框;完全依赖布局和间距。

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

桌面端为不对称双栏网格,移动端堆叠为单栏。

07

动效与交互

0msmicro
200mssmall
0msmedium
lineareasing

交互元素的颜色过渡(0.2秒)。 · 未见复杂的入场动画或运动模式。

可点击元素上为标准指针光标。 · 无。

08

组件

  • button 大型白色圆形容器,作为主要导航中心。
  • card 无;导航通过大型几何形状处理。
  • chip 无。
  • input 无。
  • hero 不对称分割布局,一侧是大型产品摄影,另一侧是超大的排版区块。

09

文案语气与禁用清单

  • 语气 自信、含蓄且功能性强。
  • 标题风格 超大、加粗且字间距紧凑。
  • 按钮文案 微妙,整合于大型几何导航中心中。
  • 不要使用细体或轻字重——截图显示所有文本均为500字重。
  • 不要为表面添加投影或景深——截图显示为完全扁平的元素。
  • 不要使用纯白背景——截图显示为温暖的中性色(#E6E6DD)。
  • 不要在按钮上使用复杂的圆角——截图显示为大型药丸/圆形形状(300px半径)。
  • 不要使用明亮或多彩的强调配色——截图为严格的单色系黑色墨迹。
  • 不要使用宽松或舒缓的字间距——截图显示为紧凑、压缩的排版。
  • 避免: 过多的形容词或营销套话。
  • 避免: 复杂或多步骤的导航菜单。
  • 避免: 鲜艳或霓虹色的配色方案。
  • 避免: 装饰性元素或不必要的UI修饰。
  • 避免: 斜体或手写体排版。

10

包内真实截图

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

11

System Prompt

这是一个用于高端自行车硬件的极简主义、高端产品网站。它采用大胆的工业美学,搭配温暖的中性背景(#E6E6DD)和深邃的黑色墨迹(#000000)。排版仅使用中等字重(500)的怪诞无衬线字体(Unica77),为标题使用巨大的显示尺寸(最大140px),为正文使用非常小的尺寸(11px),形成鲜明的层次对比。关键约束包括:永远不使用500以外的字体字重,保持严格的单色系配色而不使用鲜艳强调色,并保持表面完全扁平而无阴影。导航通过大型白色圆形中心而非传统菜单实现。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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