精选 · 开放 · 免费

PocketBase

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

01

设计气质 DNA

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

02

色彩

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

03

字体

humanist-sans · monospace

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

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

04

间距

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

05

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

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

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 有帮助、直接且开发者导向。
• 标题风格 简洁有力，强调核心价值主张。
• 按钮文案 行动导向且直接（例如：“阅读文档”、“实时演示”）。

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

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko