OpenDesign·你的设计资产库

网页参考

Rains

融合北欧极简设计与大胆编辑摄影的高端雨具品牌。

FashionE-commerce

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

01

设计气质 DNA

高端雨具斯堪的纳维亚极简主义户外时尚编辑式电商

一个时尚的斯堪的纳维亚时装屋，简洁字体与电影感摄影相遇功能性雨具。

02

色彩

#10100FInk
#2D2D2DInk soft
#E3E3E3BG
#FFFFFFBG soft
#F5F5F5BG quiet
#B3B3B2Muted
rgba(239, 239, 239, 1)Line

以摄影为主导的色调，采用中性背景、深炭灰色字体及柔和灰色，为产品图像打造干净、高级的画布。

03

字体

geometric-sans

  • display48px · 700
  • display-sm40px · 700
  • body14px · 400
  • caption12px · 400

所有导航与标签采用大写转换并调整字间距 · 标题使用几何无衬线粗体字，行高紧凑 · 正文使用常规字重，字间距宽松以保证可读性 · 文本极少超过 16px，维持编辑网格美学

04

间距

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

以 8px 为基础单位，4px 为增量用于紧凑的 UI 元素，编辑式摄影留白则采用充足的空间。

05

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

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

1px solid rgb(239, 239, 239) 用于分隔线和输入状态，1px solid rgb(45, 45, 45) 用于激活状态

0px 0px 0px 1px rgba(0,0,0,1) inset 用于输入框边框 · 1px 2px 8px 0px rgba(0,0,0,0.35) 用于浮动元素

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽摄影主视觉搭配叠加排版，下方过渡至基于网格的产品版块

07

动效与交互

180msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.6, 1)easing

模态覆盖层的平滑不透明度过渡（0.3s） · 加载状态的 Stroke-dashoffset 动画 · 所有交互元素在 hover 状态使用 0.2s 过渡 · 图片过渡时长 0.5-1 秒以营造电影感

交互元素具有微妙的不透明度降低或颜色偏移，保持在 0.2s 过渡内 · 通过背景色变化或边框强调提供即时视觉反馈

08

组件

  • button 胶囊形按钮（border-radius: 9999px），纯黑填充配白色文字，或透明背景配黑色边框用于次要操作
  • card 以摄影为核心的卡片，界面装饰极少，使用叠加的大号字体作为标题和透明按钮
  • chip 复选框式标签，方形边框（border-radius: 8px）及大写标签，用于 Cookie 同意模态框
  • input 干净的矩形输入框，采用内嵌 box-shadow 边框，充足的内边距，以及大写标签
  • hero 全出血电影感摄影，搭配白色或强调色的大号叠加字体，底部对齐的导航按钮

09

文案语气与禁用清单

  • 语气 自信、极简、具有编辑感与斯堪的纳维亚式的克制
  • 标题风格 简短有力、小写或句首字母大写的短语，旨在唤起情绪而非直接描述产品
  • 按钮文案 以行动为导向的短语，如「探索活动」和「选购系列」，置于干净的胶囊形按钮中
  • 不要使用装饰性手写字体 —— 截图显示全程使用简洁的几何无衬线字体
  • 不要为主视觉图片添加投影 —— 截图显示为平面摄影搭配叠加文字
  • 不要使用明亮的强调色 —— 截图显示为中性色调，仅摄影中偶尔出现红/橙色
  • 不要使导航项色彩丰富 —— 截图显示所有导航均为统一的大写黑色文字
  • 不要大量使用圆角卡片 —— 截图显示卡片为直角或极小圆角
  • 不要将所有内容居中对齐 —— 截图显示为摄影上左对齐排版，搜索/购物车右对齐
  • 不要使用渐变背景 —— 截图显示为纯色中性背景与摄影填充
  • 避免: 过多的感叹号
  • 避免: 促销性销售语言
  • 避免: 冗长的描述性段落
  • 避免: 明亮的霓虹色
  • 避免: 装饰性字体

10

包内真实截图

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

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

11

System Prompt

Rains.com 是一个高端斯堪的纳维亚雨具品牌，融合北欧极简设计与大胆的编辑式摄影。网站使用中性色调（背景 #E3E3E3，主色 #10100F，柔色 #2D2D2D，柔灰 #B3B3B2），摄影提供所有色彩。字体完全使用几何无衬线字体（Europa Grotesk 系列），导航标签大写，标题间距紧凑（48px/1.0），正文为 14px 且字间距 0.4px。关键 UI 模式包括胶囊形按钮（border-radius 9999px）、全出血摄影主视觉搭配叠加大字，以及带内嵌边框的简洁输入框。三个关键禁忌：绝不使用装饰性手写字体，绝不为摄影添加渐变或纹理叠加，绝不为 UI 元素使用明亮的霓虹色或饱和的强调色。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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