OpenDesign·你的设计资产库

网页参考

Allbirds

将极简UI与自然摄影融合的纯净、土质电商设计。

E-commerceSustainable

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

01

设计气质 DNA

可持续自然极简生态意识舒适

一个现代、可持续的零售品牌,专注于透明度和天然材料。

02

色彩

#2D383DAccent
#000000Ink
#555555Ink soft
#FFFFFFBG
#E0DACFBG soft
#212121BG quiet
#696969Muted
rgba(0,0,0,0.1)Line

高对比度的自然色系搭配深沉柔和的锚定色

03

字体

humanist-sans · geometric-sans

  • display40px · 500
  • body16px · 400

展示字体:用于首屏标题和主要标语。 · 正文字体:用于常规阅读和描述性文本。 · 等宽字体:用于标签和次要UI元素。

04

间距

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

基于4px的统一基准单位,各部分之间留有充裕空间。

05

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

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

1px solid rgba(0,0,0,0.1),用于微妙分隔。

rgba(0,0,0,0.1) 0px 1px 3px 0px · rgba(0,0,0,0.1) 0px 20px 25px -5px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽首屏配以居中模态覆盖层。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.37, 0, 0.63, 1)easing

hover状态和背景颜色的平滑过渡。

微妙的背景颜色偏移或透明度变化。 · 通过transform或颜色提供直接的视觉反馈。

08

组件

  • button 带微小圆角的纯色填充按钮。
  • card 简洁卡片,搭配大幅产品摄影。
  • chip 极简标签,使用大写文本。
  • input 标准表单输入框,具有清晰的focus状态。
  • hero 大型生活方式摄影,配以居中文本覆盖。

09

文案语气与禁用清单

  • 语气 透明、平易近人、直截了当。
  • 标题风格 简短、有力、以利益为导向。
  • 按钮文案 直接且以行动为导向,具有清晰的视觉权重。
  • 不要使用霓虹色或高饱和度颜色——截图显示的是类似#E0DACF的柔和土质色调
  • 不要使用过度压缩的字体——截图显示的是人文主义无衬线和几何无衬线类别
  • 不要使用厚重的投影——截图显示的是用于提升层次的微妙、柔和阴影
  • 不要使用杂乱的布局——截图显示的是充裕的留白和单一的模态焦点
  • 不要对正文使用全大写——截图将大写保留用于UI标签和简短标题
  • 不要到处使用尖锐的直角——截图显示的是药丸形状和最大16px圆角的混合使用
  • 避免: 充满术语的技术语言。
  • 避免: 激进的销售策略。
  • 避免: 过于复杂的句子结构。

10

包内真实截图

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

11

System Prompt

这是一个专注于天然材料和透明度的可持续电商平台。视觉身份以纯净、极简的美学为核心,采用纯白(#FFFFFF)、柔和土质中性色(#E0DACF)和深沉柔和锚定色(#212121,#2D383D)构成的高对比度调色板。字体依赖人文主义无衬线用于展示和正文,搭配几何无衬线用于UI标签,等宽字体用于次要元素。布局宽敞,采用1280px容器和12列网格。关键约束包括避免霓虹色或高饱和度颜色、抵制过于复杂或杂乱的布局,以及避免使用刺眼的投影或尖锐的直角。保持透明、直截了当的语气,标题简短有力。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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