OpenDesign·你的设计资产库

网页参考

Zen Browser

一款设计优美、注重隐私的浏览器,为更宁静的网络而生。

BrowserProduct
Zen Browser 网站截图

01

设计气质 DNA

宁静隐私优美简洁禅意

一款现代、注重隐私的浏览器,提供宁静的数字环境。

02

色彩

#F76F53Accent
#2E2E2EInk
#F2F0E3BG
#9E9E9EMuted
rgba(46, 46, 46, 0.1)Line

温暖的米白色画布,搭配深灰色文字和单一的暖珊瑚色点缀。

03

字体

transitional-serif · humanist-sans

  • display60px · 500
  • body16px · 400

大号展示标题使用过渡衬线字体,增添优雅与温暖感。 · 正文使用简洁的人文无衬线字体,确保可读性和友好的语调。

04

间距

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

充足的垂直间距(例如 96px, 144px)营造宁静、透气的布局。

05

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

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

使用柔和墨色的微妙 1px 边框,用于轻微分隔。

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 10px 15px -3px rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

首屏采用居中的单栏布局,自然过渡到功能展示区。

07

动效与交互

150msmicro
200mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素和页面展示时,采用流畅的透明度和变换过渡。

交互元素上的微妙背景色变化或轻微缩放/变换效果。 · 通过状态变化提供即时的视觉反馈。

08

组件

  • button 药丸形按钮,采用高对比度(深色背景、浅色文字)或微妙描边。
  • card 圆角容器(24px 圆角),用于展示功能或浏览器窗口。
  • chip 在提供的截图中不显眼。
  • input 在提供的截图中不显眼。
  • hero 居中的大号衬线标题,其中某个关键词使用点缀色,下方跟随副标题和主要操作按钮。

09

文案语气与禁用清单

  • 语气 宁静、令人安心,专注于用户体验与隐私。
  • 标题风格 优雅的大号衬线字体,通过点缀色强调特定关键词。
  • 按钮文案 清晰、行动导向的语言,例如“Beta 版现已推出!”或“支持我们”。
  • 不要使用纯白背景——截图显示使用的是温暖的米白色(#F2F0E3)。
  • 不要在主要元素上使用尖锐的直角——截图显示使用的是圆角(8px, 24px)。
  • 不要使用冰冷的科技蓝作为点缀色——截图显示使用的是温暖的珊瑚色(#F76F53)。
  • 不要使用密集、拥挤的布局——截图显示使用的是充足的垂直间距(96px, 144px)。
  • 不要在首屏使用僵硬、网格化的设计——截图显示使用的是居中、以排版为核心的布局。
  • 不要使用深色背景作为主要画布——截图显示使用的是明亮、温暖的主题。
  • 避免: 侵略性的营销语言
  • 避免: 杂乱的布局
  • 避免: 冰冷、临床般的美学
  • 避免: 喧闹的调色板

10

包内真实截图

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

11

System Prompt

Zen 浏览器的设计优先考虑宁静、优美且注重隐私的体验。调色板基于温暖的米白色背景(#F2F0E3),搭配深灰色文字(#2E2E2E)和单一的珊瑚色点缀(#F76F53)。字体组合采用过渡衬线字体用于优雅标题,以及简洁的人文无衬线字体用于易读的正文。布局宽敞、居中且透气,使用充足的垂直间距和关键组件上的圆角(24px)。关键禁忌:不要使用冰冷的蓝色点缀;不要创建密集、拥挤的布局;不要在主要元素上使用尖锐的 90 度角;不要使用纯白背景;不要使用侵略性、喧闹的排版;不要用不必要的视觉杂乱使界面显得拥挤。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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