OpenDesign·你的设计资产库

网页参考

Fillingpieces

简洁、以排版为主导的电子商务设计,兼具高端、低调的美学。

ConsumerPremiumCleanEditorialProduct

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

01

设计气质 DNA

都市街头服饰极简主义高端匠心工艺

一个注重低调优雅的高端街头服饰品牌。

02

色彩

#000000Ink
#FFFFFFBG
#EFEFEFBG soft
#E5E7EBMuted
rgba(0,0,0,0.1)Line

一套高对比度的单色调色板,让产品摄影成为焦点。

03

字体

geometric-sans · humanist-sans

  • display48px · 500
  • body16px · 400
  • caption12px · 400

导航链接、按钮和辅助标签使用大写字母。 · 大尺寸展示文字保持紧凑的字间距。 · 所有UI元素使用简洁的无衬线字体,以维持现代感。

04

间距

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

整个布局使用统一的4px基础网格,以确保视觉和谐。

05

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

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

使用 `1px solid rgba(0,0,0,0.1)` 作为定义边界和输入框的标准。

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1) · 0 20px 25px -5px rgba(0, 0, 0, 0.1)

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

标准的12栏网格系统,包含最大宽度容器和针对平板及桌面设备的响应式断点。

07

动效与交互

150msmicro
500mssmall
1000msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

UI状态变化时使用细微的淡入淡出效果。 · 按钮和链接的悬停效果采用平滑过渡。

交互元素通过透明度或颜色的细微变化进行响应。 · 通过状态变化提供即时的视觉反馈。

08

组件

  • button 简洁的矩形按钮,通常采用大写文本且无圆角,或特定操作使用全圆角药丸形按钮。
  • card 简洁、无边框的卡片,以产品图像为核心焦点,通过充裕留白进行分隔。
  • chip 极简的标签,有时用于筛选,带有简洁边框和简约排版。
  • input 极简的输入框,带有细微的底部边框或浅色背景,专注于清晰度。
  • hero 全宽、高品质的摄影英雄区,文字叠加层居中或左对齐。

09

文案语气与禁用清单

  • 语气 自信、现代、低调。
  • 标题风格 直接、大写,并常使用粗体以示强调。
  • 按钮文案 简洁、清晰,常在简洁按钮内使用大写文本。
  • 不要使用鲜艳、饱和的色彩——调色板严格限定为黑白灰单色调。
  • 不要在按钮上使用圆角——截图显示的是带有直角或微圆角的矩形按钮。
  • 不要使用装饰性或手写字体——排版应始终保持简洁的无衬线风格。
  • 不要在UI元素上使用厚重的投影——阴影应微妙,用于营造层次而非装饰。
  • 不要让布局显得杂乱——设计依赖充裕的留白来营造高端感。
  • 不要使用复杂的渐变——配色方案应为纯色和扁平化。
  • 避免: 避免使用过于装饰性或手写风格的字体。
  • 避免: 避免使用鲜艳、霓虹或冲突的调色板。
  • 避免: 避免使用元素过多、过于杂乱的布局。

10

包内真实截图

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

11

System Prompt

这是一个高端消费电子商务网站,服务于一个街头服饰品牌。其设计基因由严格的单色调色板(黑色 #000000、白色 #FFFFFF 及微妙的灰色如 #EFEFEF 和 #E5E7EB)和简洁的无衬线字体(几何与人文主义类别)定义。布局采用12栏网格,配合充裕留白和高品质摄影。关键禁忌:切勿使用鲜艳或饱和的色彩,避免装饰性或手写字体,且不要用不必要的渐变或厚重阴影破坏干净、极简的美学。所有UI元素都应感觉精致且低调。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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