OpenDesign·你的设计资产库

网页参考

Mobbin

一个简洁、以内容为核心的平台，用于发现真实世界中的移动端与网页设计灵感。

ReferenceMobile UILibraryGrid
Mobbin 网站截图

01

设计气质 DNA

设计灵感移动端UI参考资料精选合集资源库

一个专为设计专业人士打造的、高品质且组织有序的画廊。

02

色彩

#141414Ink
#707070Ink soft
#FFFFFFBG
#F5F5F5BG soft
#ADADADMuted
rgba(64, 64, 64, 0.08)Line

采用单色极简风格，以高对比度的黑白色搭配微妙的灰色，让多彩的内容截图得以凸显。

03

字体

grotesque-sans

  • display80px · 652
  • heading56px · 652
  • subheading32px · 456
  • body16px · 400

标题使用紧凑的行高（1.0）和负的字间距 · 正文使用宽松的行高（1.5）以保证可读性 · 字重主要采用400用于正文，600-650用于强调

04

间距

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

基于一致的4px基准，采用16px和24px的标准间距。

05

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

sm · 4px
md · 16px
lg · 24px
pill · 9999px

1px solid rgba(64, 64, 64, 0.08)

0px 1px 2px 0px rgba(0, 0, 0, 0.04) · 0px 8px 40px 0px rgba(0, 0, 0, 0.04)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

采用居中的单列主视觉区，引导至用于展示内容的宽幅多列网格。

07

动效与交互

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

hover时平滑的颜色与背景过渡 · 交互元素的细微淡入淡出效果

微妙的颜色或透明度过渡 · 通过状态变化提供即时视觉反馈

08

组件

  • button 胶囊形主按钮（黑色）和次级按钮（带边框的白色）。
  • card 大尺寸、圆角（24px半径）的卡片，专为展示截图而设计。
  • chip 带有微妙背景色的胶囊形开关或标签。
  • input 极简风格、无边框或边框微妙的输入框。
  • hero 居中标题，上方是循环展示的应用图标，下方是信任合作方标志。

09

文案语气与禁用清单

  • 语气 专业、自信、直接。
  • 标题风格 加粗、简短、有力的价值陈述。
  • 按钮文案 以行动为导向、以利益为驱动（例如：“免费加入”）。
  • 不要为UI框架使用鲜艳的强调色——截图显示的是严格的单色调色板。
  • 不要为标题使用衬线字体——截图显示的是干净的现代无衬线字体。
  • 不要使用阴影过重的卡片——截图显示的是极简、柔和的阴影。
  • 不要为按钮使用直角——截图显示的是胶囊形（9999px）按钮。
  • 不要使用小而拥挤的主标题文案——截图显示的是非常大（80px）的加粗标题。
  • 不要用太多相互竞争的视觉元素使界面显得杂乱——截图显示的是宽敞、居中的布局。
  • 避免: 俏皮或过于随意的语言
  • 避免: 过多的感叹号
  • 避免: 主文案中使用技术术语
  • 避免: 杂乱或拥挤的布局

10

包内真实截图

Mobbin — 桌面首屏（hero）
桌面首屏（hero）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mobbin — 移动首屏
移动首屏

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

11

System Prompt

Mobbin 是一个专为移动端与网页UI打造的高品质设计参考工具。其设计DNA是干净、单色且以内容为核心，采用严格的黑色（#141414）与白色（#FFFFFF）调色板，搭配微妙的灰色（#707070, #ADADAD），让截图成为视觉焦点。字体类别采用干净的无衬线字体，标题极为加粗、紧凑，正文则留有充足空间。关键禁忌包括：绝不使用鲜艳的UI颜色、绝不为标题使用衬线字体、绝不让过多的元素挤占布局。布局遵循从居中主视觉到网格的模式，留白充足，间距基于一致的4px基准。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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