OpenDesign·你的设计资产库

网页参考

Norm Store

一款融合工业极简主义与高科技功能的高端智能办公桌。

ProductPremiumCleanProductivityRefined
Norm Store 网站截图

01

设计气质 DNA

极简主义工业风功能性智能单色

伪装成家具的建筑五金件

02

色彩

#282828Ink
#ffffffBG
rgba(40,40,40,0.1)Line

严格的单色调色板，依赖纯黑、纯白及近黑色文字以强调产品形态。

03

字体

geometric-sans · humanist-sans

  • display48px · 400
  • body16px · 400

字体排印高度依赖充裕的负空间而非字重对比 · 标题使用1.0的紧密行高，营造紧凑的建筑感 · 字间距略为负值，以保持紧凑、高端的外观

04

间距

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

宽松的非对称间距，优先为产品摄影留出呼吸空间。

05

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

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

交互元素（如‘立即获取’按钮与Cookie同意提示）使用1px solid rgba(40,40,40,1)边框。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

垂直居中的单栏布局，大量运用留白来框定产品。

07

动效与交互

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

交互元素上细微的透明度与背景色过渡 · 状态变化的可见性切换

按钮上细微的背景色变化 · 通过标准指针事件提供即时视觉反馈

08

组件

  • button 胶囊形，1px实线边框，透明背景，大写或标准文本
  • card 无传统卡片；布局依赖全出血摄影与超大字体排印
  • chip 未见可见元素
  • input 未见可见元素
  • hero 全宽垂直堆叠布局，展示大型产品抠图，后接超大居中文本

09

文案语气与禁用清单

  • 语气 自信、极简且略带巧思（例如Cookie同意提示）
  • 标题风格 简短、有力、聚焦功能的陈述，读来如建筑规格说明
  • 按钮文案 直接且事务性，使用标准胶囊形按钮
  • 不要使用投影——截图显示完全扁平的产品摄影，无UI阴影
  • 不要使用粗体或特粗字重——截图显示全部为常规（400）字重排版
  • 不要使用彩色点缀——截图显示严格的黑、白、近黑单色调色板
  • 不要用多栏造成杂乱——截图显示严格的居中单栏布局
  • 不要使用尖锐的矩形按钮——截图显示圆角半径为999px的胶囊形‘立即获取’按钮
  • 不要使用两端对齐的文本——截图显示所有文本在其容器内居中或左对齐
  • 避免: 避免响亮的营销术语或过多的感叹号
  • 避免: 避免用多个竞争性行动号召使界面杂乱
  • 避免: 避免使用分散产品形态注意力的次要色或渐变

10

包内真实截图

Norm Store — 桌面首屏（hero）
桌面首屏（hero）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Norm Store — 移动首屏
移动首屏

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

11

System Prompt

此设计DNA描述了一款高端极简主义的智能办公桌产品网站。它采用严格的单色调色板，包括纯白（#ffffff）、近黑色文字（#282828）以及用于边框的次级近黑色。字体排印全系无衬线体，依赖几何与人文无衬线类别，使用-0.4px的紧密字间距和48px以上的超大展示字号，营造自信的建筑感。关键禁忌：绝不使用粗体字重（全部为常规400），绝不引入彩色点缀或渐变，绝不使用投影或厚重的UI装饰以免分散对产品摄影的注意力。布局是宽敞的居中单栏结构，优先考虑留白与大型产品抠图，而非基于网格的传统卡片UI。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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