OpenDesign·你的设计资产库

网页参考

Ikea

干净、基于网格的编辑式布局,采用功能性排版和克制的配色方案。

EditorialCleanRefinementConsumerGrid

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

01

设计气质 DNA

极简主义干净结构化实用主义可访问

一本组织有序、层次清晰、功能设计的目录手册。

02

色彩

#111111Ink
#FFFFFFBG
#929292Muted
rgba(0,0,0,0.1)Line

以高对比度的黑白为主,辅以中性灰用于次要元素,以实现最佳可读性。

03

字体

humanist-sans

  • display56px · 700

所有文字均使用清晰、高可读性的人文无衬线字体。 · 标题与正文之间具有显著的字重对比。 · 充足的行高以确保舒适的阅读体验。

04

间距

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

一致的间距倍数,创造出可预测的垂直和水平节奏。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

无可见边框;通过间距和色彩对比实现分隔。

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全宽首屏区域与结构化的网格内容块交替出现。

07

动效与交互

150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing

内容过渡使用细微的淡入淡出效果。 · 平滑的滚动行为。

交互式文本元素使用细微的颜色变化或下划线。 · 按钮按下时提供即时的视觉反馈。

08

组件

  • button 简洁的文本链接或无圆角的极简矩形按钮。
  • card 干净的内容卡片,无阴影或边框,依赖间距和图像来呈现。
  • chip 极简的标签或分类,通常仅为文本。
  • input 带有细微边框的标准表单字段。
  • hero 全宽的图片或视频,上覆文字,使用高对比度排版。

09

文案语气与禁用清单

  • 语气 清晰、实用且信息丰富。
  • 标题风格 直接、以行动为导向或以利益为焦点的陈述。
  • 按钮文案 简单的祈使动词(例如“立即购买”、“了解更多”)。
  • 不要在卡片或按钮上使用圆角——截图显示为锐利的直角边缘。
  • 不要在UI元素上添加投影——截图使用干净、扁平的分隔方式。
  • 不要为主内容区域使用彩色背景——截图使用纯白背景。
  • 不要使用装饰性或手写体字体——截图使用干净、功能性的无衬线字体。
  • 不要在图片上使用渐变叠加——截图使用清晰、高质量的摄影作品。
  • 不要创建密集、杂乱的布局——截图使用充足的留白和清晰的网格。
  • 避免: 术语或过于技术性的语言。
  • 避免: 过多的感叹号。
  • 避免: 抽象或诗意的表达。

11

System Prompt

定位:一家专注于可访问、功能性设计的全球家居零售商。关键十六进制颜色:#FFFFFF(背景)、#111111(主文本)、#929292(次要文本)。字体类别:所有文字均使用人文无衬线字体,强调可读性。关键禁忌:不要使用圆角、投影或装饰性字体。保持干净、基于网格的布局和充足的留白。避免杂乱的构图,使用克制的高对比度配色方案以实现最大程度的清晰度和可访问性。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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