OpenDesign·你的设计资产库

网页参考

Beehome

一个干净、极简的家居用品电子商务界面,具有结构化的网格和克制的调色板。

SaaSConsumerRestraintGridClean

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

极简轻量家居家具现代

一个平静、有序的展厅

02

色彩

#000000Ink
#333333Ink soft
#FFFFFFBG
#F5F5F5BG soft
#E0E0E0BG quiet
#757575Muted
rgba(0, 0, 0, 0.1)Line

纯白背景与深色文本之间的高对比度,以实现最大的可读性和干净的美感。

03

字体

geometric-sans · monospace

  • display48px · 500
  • body16px · 400

04

间距

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

标准 4px 网格系统

05

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

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

1px solid rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

基于网格的产品列表布局,带有固定的页眉导航。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing

微妙的hover状态过渡

按钮和链接上微妙的背景色变化 · 即时状态变化

08

组件

  • button 带有纯色填充的标准矩形按钮
  • card 顶部是图像、下方是文本的简单矩形卡片
  • chip 用于筛选选项
  • input 标准文本输入框
  • hero 带有促销图像的大型全宽横幅

09

文案语气与禁用清单

  • 语气 专业且直接
  • 标题风格 清晰简洁
  • 按钮文案 行动导向且突出
  • 不要使用霓虹色——截图显示的是黑白/柔和色调。
  • 不要使用手写体——截图显示的是几何无衬线字体。
  • 不要使用复杂的3D效果——截图显示的是扁平、干净的表面。
  • 不要使用密集的文本块——截图显示的是清晰的间距和层次结构。
  • 不要使用圆角的药丸形卡片——截图显示的是矩形卡片。
  • 不要使用渐变背景——截图显示的是纯白色背景。
  • 避免: 过于随意的语言
  • 避免: 过度的装饰
  • 避免: 模糊的标签

11

System Prompt

这个网站是一个极简主义的家居用品电子商务平台,强调干净、有序的布局和高可读性。核心颜色是白色(#FFFFFF)和黑色(#000000),灰色用于柔和的元素,营造出高对比度、专业的外观。排版使用几何无衬线字体用于显示文本和正文文本,确保清晰度和现代感。设计避免装饰性元素,依赖严格的网格和简单的边框。关键设计规则:避免使用鲜艳的强调色,保持UI组件扁平且矩形,保留充足的留白,使用简单的hover过渡,并确保清晰、逻辑的视觉层次。避免复杂的阴影、手写体和密集的信息集群。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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