OpenDesign·你的设计资产库

网页参考

Nike

一个大胆、以摄影为主的电商体验，让极具冲击力的图像和简洁的排版来驱动产品叙事。

ProductBold TypographyPhotographicCleanCuration
Nike 网站截图

01

设计气质 DNA

运动高端极简大胆性能

一个高端的运动展厅，配有电影级的产品展示

02

色彩

#111111Ink
#707072Ink soft
#FFFFFFBG
#F5F5F5BG soft
#E5E5E5Muted
rgba(17,17,17,0.15)Line

高对比度的单色调色板，由摄影提供所有色彩能量

03

字体

grotesque-sans · humanist-sans

  • display56px · 500
  • headline32px · 500
  • body16px · 400
  • caption12px · 500

标题使用中等字重（500），而非粗体 · 正文使用常规字重（400）以保证可读性 · 所有展示尺寸的文字都使用紧凑的负字距 · 中文文本使用思源黑体（Noto Sans SC），与拉丁文本保持相同的字重层级

04

间距

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

基于8px的网格，主视觉区域周围留有充足空白

05

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

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

1px实线边框 rgba(17,17,17,0.15)，分隔线使用 0px 0px 2px 模式

rgba(17,17,17,0.06) 0px 4px 8px 0px · rgba(17,17,17,0.03) 0px 0px 24px 4px

06

布局

1920container
12columns
24pxgutter
768 / 1024breakpoints

全宽主视觉图像搭配居中的文字叠加，单列内容流并配有宽阔的页边距

07

动效与交互

220msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

悬停状态下的透明度过渡（0.3秒） · 交互元素的背景颜色过渡（0.5秒） · 滚动显示的变换动画（0.8秒）

导航链接上有细微的透明度降低和颜色过渡 · 除了标准的浏览器默认样式外，无其他可见的激活状态

08

组件

  • button 药丸形（border-radius: 30px），纯黑背景配白色文字，中等字重
  • card 此视图中没有可见的卡片——内容通过全宽图像部分呈现
  • chip 无可见元素
  • input 圆角搜索框，带有占位符文本和细微边框
  • hero 全出血摄影主视觉，居中排版叠加和单个行动号召按钮

09

文案语气与禁用清单

  • 语气 自信、富有抱负、直接
  • 标题风格 大胆、陈述性的语句，辅以最少量的支持文本
  • 按钮文案 紧凑药丸按钮中的行动导向动词（'即刻探索' / '立即购买'）
  • 不要使用装饰性背景——截图显示了干净的白色背景（#FFFFFF），让摄影占据主导
  • 不要使用圆角卡片容器——截图显示了无可见卡片边界的全出血图像
  • 不要使用粗重的字体——截图显示标题最大使用中等字重（500），绝不使用粗体/黑体字重
  • 不要在UI元素上添加强调色——截图显示按钮和链接为纯黑色（#111111），没有颜色高亮
  • 不要使用复杂的多列布局——截图显示单列居中内容，并留有充足空白
  • 不要在文字上添加投影——截图显示文字直接渲染在摄影背景上，无阴影或叠加层
  • 不要使用狭小、拥挤的导航——截图显示标题区域有充足的内边距（36px 0px 12px 0px）
  • 不要混合多种字体——截图显示始终使用一致的思源黑体（Noto Sans SC）字族，并回退到Helvetica Neue
  • 避免: 过多的标点符号
  • 避免: 过于随意的语言
  • 避免: 密集的段落

10

包内真实截图

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

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

11

System Prompt

Nike.com是一个高端的运动电商平台，使用大胆的排版和电影级摄影来展示产品。设计语言简洁而极简，采用单色调色板：主背景白色（#FFFFFF），次要灰色（#F5F5F5），墨黑（#111111）和柔和灰（#707072）。排版在展示部分使用无衬线怪诞体（字重500，负字距），正文使用人文无衬线体（思源黑体）字重400。UI元素如按钮采用药丸形状（border-radius: 30px），纯黑色。布局为全宽，留有充足空白和单列内容流。关键禁忌：绝不使用与摄影竞争的装饰性背景，字体绝不超过中等字重（500），绝不为导航或按钮添加强调色，绝不为文字叠加层使用粗重投影，绝不创建拥挤的多列布局，绝不混合字体字族。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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