OpenDesign·你的设计资产库

网页参考

Arc Browser

一个温暖、富有表现力的浏览器体验,融合了俏皮个性与现代效率。

ConsumerWarmFriendlyProduct

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

01

设计气质 DNA

俏皮温暖富有表现力现代亲切易近

一个友好、富有创意的工作室空间,给人以个人化且温馨的感觉。

02

色彩

#3139FBAccent
#000000Ink
#FFFCF7BG
#696969Muted
rgba(0, 0, 0, 0.1)Line

以温暖的米白色为基底,搭配活力十足的蓝色作为强调色,并运用微妙的噪点纹理增添深度。

03

字体

transitional-serif · humanist-sans · monospace

  • display56px · 700
  • heading28px · 700
  • body16px · 400
  • caption12px · 500

为大型展示标题使用过渡衬线字体,以营造温暖感。 · 为正文使用人文主义无衬线字体,以保持可读性。 · 为展示尺寸应用宽松的负字间距。

04

间距

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

基于一致的 4px 基准,围绕交互元素使用充裕的内边距。

05

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

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

微妙的 1px 实线边框,通常使用强调蓝色以突出重点。

0px 5px 5px 0px rgba(0, 0, 0, 0.1) · 0px 2px 8px 0px rgba(0, 0, 0, 0.25)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

标准 12 栏网格,具备响应式行为,并留有充裕的留白。

07

动效与交互

100msmicro
150mssmall
200msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

交互元素在 hover 时进行微妙的 transform 变换。 · 背景颜色的平滑过渡。

交互元素进行微妙的 transform 和 box-shadow 提升。 · 轻微的缩放或透明度变化。

08

组件

  • button 深色填充按钮,采用胶囊形状并整合俏皮图标。
  • card 浅色卡片,带有微妙的噪点纹理和柔和的阴影。
  • chip 小巧的圆角标签,采用强调色。
  • input 简洁的文本输入框,样式极简。
  • hero 富有表现力的大标题,搭配温暖的渐变背景和噪点叠加效果。

09

文案语气与禁用清单

  • 语气 俏皮、友好、对话式。
  • 标题风格 富有表现力的衬线标题,带有个性。
  • 按钮文案 直接且引人入胜,搭配俏皮图标。
  • 避免使用冷灰色 — 截图显示主要背景为温暖的米白色(#FFFCF7)。
  • 避免到处使用尖锐的直角 — 截图显示采用大量的胶囊形状和圆角。
  • 避免使用纯白背景 — 截图显示采用温暖、略带黄色的白色。
  • 避免使用纤细、轻量的字体 — 截图显示使用粗体、富有表现力的衬线标题。
  • 避免使用强烈的阴影 — 截图显示使用柔和、微妙的阴影以营造深度。
  • 避免使用僵硬、企业化的布局 — 截图显示采用俏皮、富有表现力的构图和噪点纹理。
  • 避免: 企业术语
  • 避免: 过于技术化的语言
  • 避免: 冰冷或刻板的语气

10

包内真实截图

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

11

System Prompt

这是一个温暖、友好的浏览器产品网站,使用俏皮的衬线字体和富有表现力的色彩,以营造亲切感。关键颜色包括温暖的米白色(#FFFCF7)、活力十足的蓝色(#3139FB)和黑色文字。字体类别包括用于展示的过渡衬线字体和用于正文的人文主义无衬线字体。关键禁忌:不要使用冷灰色背景,不要到处使用尖锐的直角,不要使用纯白色(#FFFFFF),不要使用纤细的字体,不要使用强烈的阴影,不要使用企业化布局。设计通过噪点纹理和温暖的色调,在现代效率与俏皮个性之间取得了平衡。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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