OpenDesign·你的设计资产库

网页参考

Honk Me

一个大胆、趣味化的实时聊天界面,采用明亮的蓝色背景与超大字号排版。

Mobile UIConsumerFriendlyPlayfulBold Typography
Honk Me 网站截图

01

设计气质 DNA

实时聊天消息好友趣味

一款充满活力、现代感的通讯应用,具有趣味化、消费者友好的个性。

02

色彩

#FFE03DAccent
#FFFFFFInk
rgba(255, 255, 255, 0.8)Ink soft
#008CFFBG
rgba(255, 255, 255, 0.7)Muted
rgba(255, 255, 255, 0.2)Line

以单一的鲜艳蓝色为主导,白色和黄色作为点缀,实现高对比度与亲和力。

03

字体

geometric-sans

  • display52px · 700
  • body16px · 400
  • caption13px · 400

展示文本采用粗体,字间距紧密。 · 正文采用常规字重,行高宽松。

04

间距

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

以4px为基础单位,8px为增量步进。

05

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

sm · 6px
md · 16px
lg · 24px
pill · 999px

极简处理,卡片和输入框采用柔和的圆角。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

采用左右分栏布局,文本在左,手机模型在右;移动端则垂直堆叠。

07

动效与交互

100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

在悬停和聚焦状态下应用细微过渡效果。

交互元素在悬停时发生微妙的色彩变化或显示下划线。 · 提供即时视觉反馈,无明显延迟。

08

组件

  • button 圆润的胶囊形状,透明背景配白色边框。
  • card 圆角矩形,带有柔和阴影,用于承载公告内容。
  • input 圆角矩形,白色背景搭配深色文字。
  • hero 采用粗体排版与浮动手机模型的分栏布局。

09

文案语气与禁用清单

  • 语气 友好、热情且直接。
  • 标题风格 大号、粗体且充满趣味,常以'Really'开头。
  • 按钮文案 简洁、以行动为导向的短语,配以箭头图标。
  • 不要使用柔和或去饱和的颜色——截图显示的是鲜艳的高饱和度蓝色背景。
  • 不要使用衬线字体或等宽字体——截图显示的是圆润的几何无衬线字体。
  • 不要使用小巧、低调的标题——截图显示的是超大、粗体的展示字体。
  • 不要使用尖锐的直角——截图显示所有界面元素都具有高度圆润的角。
  • 不要使用深色模式——截图显示的是明亮、多彩的浅色主题。
  • 不要使用复杂的多栏网格——截图显示的是移动端简单的单栏流式布局。
  • 避免: 正式或企业化的语言。
  • 避免: 密集的文字段落。
  • 避免: 复杂或杂乱的布局。

11

System Prompt

设计一款趣味化、面向消费者的通讯应用界面,具有充满活力的高能量个性。采用主导的明亮蓝色背景(#008CFF),白色文字(#FFFFFF),以及一抹黄色(#FFE03D)作为点缀。排版应使用粗体、圆润的几何无衬线字体,标题字间距紧密。关键禁忌:避免使用柔和的颜色、避免衬线字体、避免尖锐的直角。布局应简洁聚焦,优先展示一个大型、趣味化的标题和一个浮动的手机模型,以展示产品实际运行中的状态。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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