OpenDesign·你的设计资产库

网页参考

PocketBase

一个开发者导向的后端,通过干净、友好的界面强调简洁性和易用性。

Developer ToolsInfra
PocketBase 网站截图

01

设计气质 DNA

开源后端简洁性一体化

一个友好、平易近人的工具包,将复杂的后端基础设施简化为一个单一、易于访问的文件。

02

色彩

#25272dInk
#111b27Ink soft
#ffffffBG
#e8eaeeBG soft
#b8dbd6BG quiet
#617079Muted
rgba(37,39,45,0.12)Line

高对比度、干净且功能性的调色板,带有友好的柔和青色主色调和标准深灰色,以实现最佳可读性。

03

字体

humanist-sans · monospace

  • display48px · 600
  • h228px · 600
  • body15px · 400
  • code14px · 400

主要界面和正文使用 Source Sans Pro。 · 所有代码块和技术片段使用 Ubuntu Mono。 · 保持严格的文本对齐和一致的行高。

04

间距

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

标准 4px 基线网格,配以充裕的章节内边距。

05

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

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

1px solid rgba(37,39,45,0.12)

rgba(0, 0, 0, 0.06) 0px 2px 5px 0px · rgba(0, 0, 0, 0.06) 0px 3px 10px 3px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

落地页采用居中的单栏布局,仪表盘预览使用宽幅容器。

07

动效与交互

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

hover 时平滑的颜色和背景过渡。 · 交互元素的滤镜和底部位置过渡。

交互元素上细微的背景和颜色变化。 · 标准的指针反馈。

08

组件

  • button 干净、略圆(4px)的按钮,带有明显的深色边框和细微阴影;主按钮使用深色背景。
  • card 白色背景,带有细微的投影和柔和、圆润的边框圆角。
  • chip 小型、药丸状标签(999px 圆角),用于功能列表和状态指示器。
  • input 圆角药丸状搜索栏,带有浅色背景。
  • hero 大尺寸柔和青色背景 (#b8dbd6),配以粗体文字和突出的界面截图。

09

文案语气与禁用清单

  • 语气 有帮助、直接且开发者导向。
  • 标题风格 简洁有力,强调核心价值主张。
  • 按钮文案 行动导向且直接(例如:“阅读文档”、“实时演示”)。
  • 不要使用深色主视觉区域——截图显示的是明亮的柔和青色 (#b8dbd6) 背景。
  • 不要使用装饰性、俏皮或手写字体——截图使用干净的人文无衬线字体 (Source Sans Pro) 和等宽字体 (Ubuntu Mono)。
  • 不要使用厚重、发光的渐变——截图使用纯色、细微阴影和干净的边框。
  • 不要使用圆润、气泡状按钮——截图使用略圆(4px)且带有明显深色边框的按钮。
  • 不要依赖单一的高饱和度强调色——截图使用灰色、青色和代码语法颜色的平衡调色板。
  • 不要用过多动画使界面杂乱——截图显示的是非常静态、功能性和干净的界面。
  • 不要使用装饰性图标——截图使用简单的功能性 Remixicon 线性图标。
  • 避免: 过多的营销术语或浮夸语言。
  • 避免: 激进的销售语气或复杂的销售流程。
  • 避免: 缺乏清晰结构的密集、难以阅读的技术文档。

10

包内真实截图

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

11

System Prompt

PocketBase 是一个开源后端,定位为开发者的简单、一体化解决方案,具有干净且功能性的界面。视觉系统使用以柔和青色主色调 (#b8dbd6)、标准深灰色 (#25272d) 和白色表面 (#ffffff) 为基础的明亮、平易近人的调色板,没有单一的主导高饱和度强调色。排版依赖于 Source Sans Pro(人文无衬线字体)用于正文和显示文本,Ubuntu Mono 用于代码片段。布局居中且宽敞,强调清晰度和可读性。关键设计约束:不要使用深色主视觉区域;坚持使用干净的人文无衬线和等宽字体;避免厚重渐变;使用功能性图标;保持 4px 基线网格;避免过多或装饰性动画;确保所有交互元素使用干净、略圆的边框。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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