OpenDesign·你的设计资产库

网页参考

Cubitts

一个精致的英伦眼镜品牌,将镜框提升至手工艺品的地位。

EditorialProductTypographyCleanCuration

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

01

设计气质 DNA

匠心传承精准英伦

犹如眼镜的定制裁缝,将现代极简主义与传统工艺融为一体。

02

色彩

#0B0B0BInk
#FFFFFFBG
#F5F5F5BG soft
#7A7575Muted
rgba(11,11,11,0.15)Line

高对比度的极简主义,黑色墨色奠定空间基调,温暖的灰色提供微妙的深度。

03

字体

geometric-sans

  • display32px · 400
  • body16px · 400
  • caption12px · 400

标题使用标准句首大写,不过度调整字间距。 · 正文保持一致的 400 字重以确保可读性。 · 小号文本仅限于法律声明和实用标签。

04

间距

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

灵活的 4px 基线网格,根据不同布局密度适配 64px 和 12px 的间距。

05

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

sm · 4px
md · 24px
lg · 32px
pill · 999px

使用 #0B0B0B 或 #D8D8D8 色的 1px 细实线边框来界定输入框和交互区域。

0px 0px 30px 0px rgba(0, 0, 0, 0.15)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

简洁的 12 栏网格系统,优先保障充足的留白和居中的内容块。

07

动效与交互

220msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

用于交互反馈的平滑透明度与背景色过渡。 · 基于变换的动画,用于较大规模的结构变化。

按钮上微妙的背景色变化或色彩反转。 · 通过背景变暗或结构变化提供即时的视觉反馈。

08

组件

  • button 胶囊形或圆角矩形按钮,采用黑色背景和白色文字。
  • card 简洁的无边框容器,通过微妙的背景色变化 (#F5F5F5) 来分组内容。
  • chip 小型圆角胶囊组件,用于标签或交互切换。
  • input 极简的矩形输入框,配有细边框和内边距,呈现干净外观。
  • hero 大尺寸的分栏或全宽图片区域,搭配醒目的排版。

09

文案语气与禁用清单

  • 语气 精致、自信且富有信息量,偶尔融入叙事性讲述。
  • 标题风格 简洁直接,聚焦于工艺或特定的品牌故事。
  • 按钮文案 行动导向且清晰,常使用“立即进入”或“允许全部”等标准动词。
  • 不要使用过于装饰性的衬线字体——截图显示其以几何无衬线体为主。
  • 不要依赖厚重的投影——截图显示仅使用非常微妙、大半径的阴影来营造深度。
  • 不要使用宽广的鲜艳色彩范围——截图显示以近单色系为主,偶尔点缀源自产品的色彩。
  • 不要用密集的信息块使布局杂乱——截图显示元素周围有大量留白。
  • 不要在主要交互元素上使用尖锐的方形圆角——截图显示一致地使用圆形或胶囊形圆角。
  • 不要在大号展示标题中使用全大写——截图显示主标题使用句首大写。
  • 避免: 避免使用过于随意的俚语或激进的营销术语。
  • 避免: 避免使用与工艺或光学无关的复杂技术术语。

10

包内真实截图

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

11

System Prompt

此设计系统代表一个精致的英伦眼镜品牌(Cubitts),将极简主义与传统传承相融合。其视觉语言以 #0B0B0B 墨色置于 #FFFFFF 背景上的高对比度单色方案为锚点,#F5F5F5 用于柔和表面,#7A7575 用于柔和的实用文本。主要字体为几何无衬线体(Fold Grotesque),用于展示和正文文本,字重为 400。布局依赖于充足的留白和 12 栏网格系统。关键的禁止事项包括:避免装饰性衬线体、避免鲜艳的多色彩色盘、以及避免在交互组件上使用尖锐的方形圆角。该系统通过克制与精准的间距强调高端、精选的质感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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