OpenDesign·你的设计资产库

网页参考

On

瑞士工程性能鞋款，以极简、干净的美学呈现。

E-commerceAthletic

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

01

设计气质 DNA

极简主义高性能高端运动

一个高端的瑞士高性能品牌，产品在临床般的白色背景上成为主角。

02

色彩

#000000Ink
#FFFFFFBG
#666666Muted
rgba(0,0,0,0.05)Line

完全聚焦于产品摄影的高对比度单色配色方案。

03

字体

humanist-sans · semi-monospace

  • display56px · 700
  • heading24px · 700
  • body16px · 400
  • caption12px · 400

04

间距

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

干净一致的间距，强调整体对齐网格。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(0,0,0,0.05)

rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

用于产品目录的结构化多列网格。

07

动效与交互

200msmicro
300mssmall
400msmedium
cubic-bezier(0.87, 0, 0.13, 1)easing

用于 hover 状态和背景变化的平滑过渡。 · 用于精准、高质量 UI 动画的 cubic-bezier 缓动。

交互元素上的微妙背景色变化或轻微形变。 · 通过透明度或背景色调整提供即时的视觉反馈。

08

组件

  • button 药丸形状的黑色按钮配白色文字，或极简的文字链接。
  • card 干净的产品卡片，配有大型独立图像、灰色背景和最小的界面元素（如心形图标）。
  • chip 小型、大写、带边框或轮廓的标签，用于如'畅销品'等特性。
  • input 带有清晰边框和极简样式的标准文本输入框。
  • hero 白色背景上的大型产品展示，配以粗体排版。

09

文案语气与禁用清单

  • 语气 专业、直接且聚焦性能。
  • 标题风格 粗体，通常大写或使用重磅无衬线字体。
  • 按钮文案 清晰、高对比度的按钮或简单的文字链接。
  • 不要在产品图片上使用投影——截图显示的是扁平、干净的产品孤立效果。
  • 不要使用高饱和度的强调色——截图显示的是严格的单色配色方案。
  • 不要使用装饰性手写体或展示衬线字体——截图显示的是现代人文主义无衬线体。
  • 不要使用粗重的边框——截图显示的是卡片和输入框上微妙的 1px 边框。
  • 不要使用复杂的多色渐变——截图显示的是纯白色背景。
  • 不要使用活泼或圆润的排版——截图显示的是紧凑、性能导向的字间距。
  • 避免: 杂乱的布局
  • 避免: 厚重的装饰性元素
  • 避免: 过于复杂的配色方案

10

包内真实截图

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

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

11

System Prompt

这是一个高端瑞士运动品牌，拥有干净、极简的电子商务界面。设计依赖于高对比度的单色配色方案，使用纯白色背景 (#FFFFFF) 和深黑色文字 (#000000)，让产品摄影成为主要焦点。排版使用自定义的人文主义无衬线字体系列来制作粗体、自信的标题，以及清晰易读的正文。交互是微妙的，使用 200-400ms 的平滑 cubic-bezier 缓动过渡。关键禁忌：绝不要在产品上使用厚重投影，避免多色渐变，并保持布局宽敞且基于网格。界面既临床又高端，强调工程和性能。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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