OpenDesign·你的设计资产库

网页参考

Glob Land

一款注重易访问性的精致生活方式产品电商体验。

EditorialRefinedRestraintProductGallery

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

01

设计气质 DNA

高端功能性易访问注重材质简洁

一本展示高品质实体产品的高端设计杂志。

02

色彩

#574CD5Accent
#212121Ink
#474747Ink soft
#FFFFFFBG
#EFF1F7BG soft
#F8F9FCBG quiet
#69727BMuted
rgba(71, 71, 71, 0.1)Line

以单色为主,搭配纯净白与冷灰色调,功能型 UI 元素采用单一醒目的紫色。

03

字体

humanist-sans

  • display32px · 500
  • heading18px · 600
  • body16px · 400
  • small14px · 400
  • tiny12px · 400

04

间距

4px
8px
10px
12px
15px
20px
24px
25px
50px

所有间距、内边距和布局结构均基于统一的 4px 网格。

05

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

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

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

shadow-sm: 0 0 5px 0 rgba(25, 27, 30, 0.03) · shadow-lg: 0 4px 40px 0 rgba(25, 27, 30, 0.2)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

宽敞整洁的布局,充分留白,优先考虑可读性与清晰的内容层次。

07

动效与交互

250msmicro
500mssmall
1000msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing

UI 元素的淡入与淡出 · 状态切换的平滑过渡 · 交互反馈的细微动效

通过边框颜色或背景透明度的细微变化来体现,保持精致感。 · 通过轻微的缩放或透明度变化提供即时视觉反馈,随后平滑过渡回初始状态。

08

组件

  • button 极简的药丸形按钮,采用浅色边框或实心紫色背景,搭配大写文本。
  • card 简洁的容器,带有柔和的圆角和细微阴影,常用于网格布局。
  • chip 纤细的矩形元素,带细边框,通常用于导航或筛选。
  • input 表单字段设计简洁,带有浅色边框和圆角,聚焦功能清晰度。
  • hero 全宽或大尺寸的图像,叠加醒目、简洁的排版与单一明确的行动号召。

09

文案语气与禁用清单

  • 语气 友好、乐于助人且专业。
  • 标题风格 直接、清晰,常通过标准与粗体字重混用实现强调。
  • 按钮文案 行动导向且简洁,常在药丸形按钮中使用大写文本。
  • 避免使用浓重的投影阴影 —— 截图显示的是非常细微、低透明度的阴影以营造深度。
  • 避免使用鲜艳、冲突的配色 —— 色彩体系限定于白色、灰色和单一紫色点缀。
  • 避免使用过度装饰性的字体 —— 排版简洁、功能性强且高度易读。
  • 避免用过多元素使布局显得拥挤 —— 设计采用了充足的留白和清晰的层次结构。
  • 避免使用尖锐、生硬的转角 —— 设计偏好柔和的圆角(5px 至 8px)或完全圆润的药丸形状。
  • 不要忽视易访问性 —— 界面包含一个专用、全面的易访问性选项面板。
  • 避免: 过于技术化的术语
  • 避免: 激进或喧闹的营销语言
  • 避免: 模糊或含混的表述

10

包内真实截图

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

11

System Prompt

一个精致、易访问的高端生活方式产品电商网站。主色调为纯净白(#FFFFFF)、深墨色(#212121)以及功能性的紫色点缀(#574CD5)。排版采用 humanist-sans 字体(Neue Haas Unica),基础字号 16px,行高紧凑为 1.2。布局宽敞,基于 4px 网格,使用细微阴影。关键禁忌:避免浓重投影、避免冲突配色、避免布局拥挤。本系统专为清晰、精致和包容性访问而设计。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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