OpenDesign·你的设计资产库

网页参考

Swoosh Nike

一个极简、图像优先的平台,用于发现和购买高端运动鞋。

SaaSConsumerPremiumClean
Swoosh Nike 网站截图

01

设计气质 DNA

运动鞋发售文化独家

独家运动鞋发售的精选画廊

02

色彩

#111111Ink
#707072Ink soft
#F5F5F5BG
#FFFFFFBG soft
#E5E5E5BG quiet
#9E9EA0Muted
rgba(17,17,17,0.1)Line

米白背景上的高对比度黑色,品牌红色仅在图像中点缀使用

03

字体

grotesque-sans

  • display53px · 500
  • headline20px · 500
  • body16px · 500
  • caption14px · 400
  • label12px · 500

使用 Helvetica Now Text 或等效的 grotesque-sans 字体 · 主要文本保持中等字重(500) · 展示尺寸的字距保持紧凑

04

间距

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

一致的基于4px的间距系统,采用标准增量

05

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

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

1px细边框,颜色为 rgba(17,17,17,0.1)

0px 4px 8px 0px rgba(17,17,17,0.06) · 0px 0px 24px 4px rgba(17,17,17,0.03) · 0px -1px 0px 0px rgb(229,229,229) inset

06

布局

1440container
4columns
24pxgutter
768 / 1024breakpoints

图片卡片下方带文字的四栏网格

07

动效与交互

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

内容加载时的平滑淡入效果 · 细腻的背景过渡

细腻的背景色变化或缩放效果 · 通过降低不透明度提供即时视觉反馈

08

组件

  • button 药丸形按钮,黑色背景,白色文字
  • card 图片优先的卡片,圆角,下方展示产品信息
  • chip 用于分类的简单文字标签
  • input 简洁的文本输入框,带底部边框
  • hero 全宽图像,叠加文字或极简背景

09

文案语气与禁用清单

  • 语气 直接、信息丰富、以产品为中心
  • 标题风格 加粗且简洁的产品名称
  • 按钮文案 行动导向的按钮,如“了解更多”
  • 不要使用渐变背景——截图显示为纯色米白(#F5F5F5)或白色(#FFFFFF)背景
  • 不要使用装饰性衬线字体——截图显示所有文本使用 Helvetica Now(grotesque-sans)
  • 不要使用浓重的投影——截图显示非常细微的阴影(0.06 不透明度)或无阴影
  • 不要将产品文本居中对齐——截图显示产品名称和描述为左对齐
  • 不要使用复杂的卡片布局——截图显示简单的图片卡片,下方带文字
  • 不要使用多种强调色——截图显示中性色板,品牌红色仅出现在产品图像中
  • 避免: 过度热情或促销性的语言
  • 避免: 复杂的技术描述
  • 避免: 非正式俚语,除非是产品名称的一部分

10

包内真实截图

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

11

System Prompt

Nike SNKRS 平台,用于独家运动鞋发售。极简设计,留白充裕,图像优先。主色调:米白背景(#F5F5F5)、近黑色文本(#111111),品牌红色仅在产品图像中出现。字体使用 Helvetica Now Text(grotesque-sans),中等字重(500)。布局为简洁的四栏网格,栏间距24px。关键禁止项:切勿使用渐变背景,避免装饰性衬线字体,不要添加浓重阴影,保持文本左对齐,保持简单的卡片布局,避免使用多种强调色。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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