OpenDesign·你的设计资产库

网页参考

Peak Design

一个以视觉为驱动、以产品为中心的品牌,融合了粗犷的户外美学与精致、极简的设计。

HardwareAccessories

封面待补录,可通过原站查看设计。

01

设计气质 DNA

高端摄影实用主义户外探险极简主义

高端户外装备目录与现代设计作品集的结合。

02

色彩

#1A211EInk
#FBFDFCBG
#EEF1F0BG quiet
#606562Muted
rgba(26,33,30,0.12)Line

摄影是主要的色彩来源;UI提供了一个中性、高对比度的深浅灰色框架。

03

字体

geometric-sans · humanist-sans · monospace

  • display40px · 700
  • headline32px · 700
  • body16px · 400

按钮标签和导航链接使用大写和字间距调整。 · 大型展示标题使用紧凑的负字间距。 · 保持墨色与背景元素之间的高对比度比率。

04

间距

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

整个设计中使用统一的4px基础网格作为内边距和间距,确保布局结构化。

05

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

sm · 4px
md · 8px
lg · 32px
pill · 9999px

使用主墨色搭配低透明度的极简1px实线边框,用于微妙的视觉分隔。

0px 0px 4px 0px rgba(0, 0, 0, 0.04)

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

一个全出血的摄影主视觉区,内容居中,并使用12列网格来展示产品列表。

07

动效与交互

150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

叠层和模态框使用平滑的透明度和可见性过渡。 · 交互元素在悬停和点击时使用快速的缩放(transform)过渡。

微妙的透明度变化或背景色转换(0.2s cubic-bezier)。 · 即时的缩放变换(0.15s ease-out),然后触发操作。

08

组件

  • button 高对比度的实心背景(白色或深色),搭配大写文本和充足的内边距(8px 16px 或 12px 24px)。
  • card 简洁、无边框的容器,产品图片是主导元素,并辅以极简的排版。
  • chip 药丸形元素(border-radius: 32px to 9999px),用于分类或标签。
  • input 简单的矩形输入框,带有1px实线边框和4px的圆角。
  • hero 全出血、高质量的摄影背景,配有居中的大号展示文本和醒目的行动号召按钮。

09

文案语气与禁用清单

  • 语气 自信、直接且高端。
  • 标题风格 粗体、大写、高对比度。
  • 按钮文案 以行动为导向、大写且高度易读。
  • 不要使用多色渐变背景——网站依赖于干净的纯色(#FBFDFC)或全出血摄影。
  • 不要使用装饰性衬线字体——字体严格使用几何和人文无衬线类别。
  • 不要使用过于圆润、俏皮的组件——按钮和输入框使用微妙的4px到8px圆角。
  • 不要在行动号召处使用小而低对比度的文本——标题和按钮应粗体、大写且高度易读。
  • 不要使用复杂的、多层的阴影——层次感通过一个非常微妙的单一 box-shadow 实现。
  • 不要使用杂乱、拥挤的布局——每个元素都拥有充足的呼吸空间(16px 到 24px 间距)。
  • 避免: 过度使用明亮、人工的强调色。
  • 避免: 与摄影作品竞争的杂乱布局。
  • 避免: 感觉过于俏皮的圆润、'气泡状'UI元素。
  • 避免: 缺乏冲击力的小而精致的字体。
  • 避免: 复杂的渐变或装饰性背景图案。
  • 避免: 不一致的内边距或间距。

10

包内真实截图

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

11

System Prompt

这是一个以摄影为驱动的高端户外装备电商网站。其设计DNA的特点是极简、中性的色调(深灰色 #1A211E 和米白色 #FBFDFC),作为高质量产品摄影的框架。排版干净且有结构,标题和正文使用几何与人文无衬线字体类别,并着重于大写、带有字间距调整的标签。布局宽敞且基于网格,使用统一的4px/8px间距单元。关键设计规则包括:1)绝不使用明亮、人工的强调色;2)绝不使用复杂的渐变或装饰性背景;3)绝不使用俏皮或气泡状的UI组件;4)所有交互元素保持高对比度;5)焦点严格保持在产品图像上。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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