OpenDesign·你的设计资产库

网页参考

Cowboy

一个都市电动自行车公司的精致品牌网站，采用单色系调色板与高品质视觉图像。

ProductHardwareCalmRefinedClean

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

01

设计气质 DNA

高端都市出行极简主义精致生活方式

一个将工业设计与都市生活方式摄影融合的高端欧洲电动自行车品牌。

02

色彩

#1D1D1DInk
#1D1D1D99Ink soft
#FFFFFFBG
#EBEAE7BG soft
#A3A3A3Muted
rgba(229, 231, 235, 1)Line

严格的中性色调色板，以近黑色和白色为主导，使用微妙的暖灰色作为次要元素和边框。

03

字体

humanist-sans · monospace

  • display64px · 400
  • body16px · 400
  • caption12px · 400

04

间距

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

以4px为基础单位，采用标准增量，主要区块内边距使用更大值（48px，64px）。

05

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

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

1px solid rgb(229, 231, 235) 用于输入框和细微分隔线。

rgba(0, 0, 0, 0.1) 0px 10px 15px -3px · rgba(0, 0, 0, 0.06) 0px 1px 6px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

模态框遮罩层在桌面端呈现50/50的图文分栏布局，在移动端垂直堆叠。

07

动效与交互

100msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

颜色、背景和边框变化的平滑过渡 · 微交互采用标准material风格缓动

交互元素上的微妙颜色或背景过渡。 · 激活状态可能包含细微的变换或颜色反转。

08

组件

  • button 全宽胶囊形实心按钮，采用高对比度黑色填充与白色文字。
  • card 模态框式分栏面板，结合全出血生活方式图片与简洁的白色表单容器。
  • chip 主模态框界面中未见此组件。
  • input 简洁的带边框文本输入框，内部留有充足内边距，使用浅灰色占位文本。
  • hero 全出血生活方式摄影融入专注的新闻通讯注册模态框中。

09

文案语气与禁用清单

  • 语气 精致、诱人且略带俏皮。
  • 标题风格 简短、引人联想且口语化，大标题常采用略微收紧的字间距。
  • 按钮文案 直接且以行动为导向，使用全宽胶囊按钮以获得高可见度。
  • 勿使用鲜艳的高饱和度强调色 —— 截图显示严格的单色系调色板
  • 勿使用尖锐的直角 —— 截图显示一致的圆角边框（8px和胶囊形）
  • 勿使用装饰性或展示性字体 —— 截图显示简洁的人文主义无衬线字体
  • 勿使用宽字间距 —— 截图显示大标题采用显著的负字间距
  • 勿在按钮上使用投影 —— 截图显示扁平的纯色按钮
  • 勿使用杂乱的网格 —— 截图显示充足的留白与居中、专注的布局
  • 避免: 技术术语
  • 避免: 过于企业化的语言
  • 避免: 激进的销售推销

10

包内真实截图

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

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

11

System Prompt

这是一个现代电动自行车公司（Cowboy）的高端精致品牌网站。设计DNA是极简且精致的，使用严格的近黑色（#1D1D1D）和白色（#FFFFFF）中性调色板，辅以微妙的暖灰色用于边框和次要文本。字体采用简洁的人文主义无衬线字体（SuisseIntl），配有大号、紧字间距的标题。关键交互通过胶囊形按钮和简洁、内边距充足的表单输入框实现。布局专注且宽敞，常居中。关键禁忌：绝不使用鲜艳的强调色、绝不使用尖锐的直角、绝不使用宽字间距或装饰性排版。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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