精选 · 开放 · 免费

MotherDuck

驱动答案的基础设施。

datadb

MotherDuck 网站截图

↓ 下载设计系统包 (14 MB)在 OpenDesign 中打开

原站: https://motherduck.com

📦 浏览包内文件 →

01

设计气质 DNA

数据仓库数据分析SQLDuckDB云平台

一个友好、易于上手的复杂数据基础设施实用工具。

02

色彩

#FFDE00Accent

#383838Ink

#F4EFEABG

#666666Muted

rgba(56,56,56,1)Line

高对比度、温暖的中性基底，搭配活力黄色点缀和锐利的2像素黑色描边，营造独特的插画感。

03

字体

monospaced · humanist-sans

display40px · 400
body16px · 400
small14px · 400

所有标题均为大写，并使用等宽字体。 · 正文采用清晰的人文主义无衬线字体以确保可读性。

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

标准4像素基础网格，主要区域周围留有充足内边距。

05

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

sm · 2px

md · 2px

lg · 2px

pill · 999px

2px solid rgb(56, 56, 56)

rgb(56, 56, 56) -8px 8px 0px 0px · rgb(255, 222, 0) -6px 6px 0px 0px

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

居中的主视觉区域，采用堆叠内容，下方是多列Logo网格。

07

动效与交互

120msmicro

200mssmall

400msmedium

cubic-bezier(0.34, 0, 0.12, 1)easing

悬停时的微妙变换效果 · 实现平滑状态切换的缓入缓出过渡

微妙的变换和可能的阴影偏移。 · 标准指针光标。

08

组件

button 实心浅蓝色（#6FC2FF）或带锐利2像素黑色描边的线框样式，并带有微妙的硬偏移阴影。
card 带有硬阴影的插画元素。
input 带圆角的简洁边框输入框。
hero 大号等宽大写标题、简短描述和醒目的双操作CTA按钮。

09

文案语气与禁用清单

语气专业但平易近人，略带俏皮感。
标题风格 直接、大写、等宽字体，传达技术精确性。
按钮文案 清晰、行动导向且具有鼓励性。

不要使用圆角或柔和边角——截图显示的是锐利的2像素边框
不要为正文主体使用白色背景——截图显示的是温暖的米色（#F4EFEA）
不要使用柔和的投影——截图显示的是硬朗的纯色偏移阴影
不要默认使用深色模式——截图显示的是浅色高对比度主题
不要使用活泼或手写风格字体——截图显示的是简洁的等宽字体和人文主义无衬线字体
不要使用微妙的柔和色调点缀——截图使用的是大胆、高饱和度的黄色和亮蓝色
避免: 缺乏上下文的过度复杂术语
避免: 枯燥或过于企业化的措辞
避免: 视觉混乱或过度装饰

10

包内真实截图

MotherDuck — 桌面首屏（hero） — 桌面首屏（hero）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

MotherDuck — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

MotherDuck是一个面向开发者和数据团队的云数据仓库平台，其特征在于友好而精确的技术美学。设计采用温暖的米色背景（#F4EFEA）、深灰色墨迹（#383838）和活力黄色点缀（#FFDE00），并以亮浅蓝色（#6FC2FF）用于主按钮。排版大量使用等宽字体（Aeonik Mono）的大写标题，搭配清晰的人文主义无衬线字体用于正文。关键设计规则包括：保持锐利的2像素黑色边框和硬偏移阴影而非柔和光晕，严格使用大写字体用于展示文字，避免通用圆角或“柔和”UI模式。整体感觉是插画风、结构化且平易近人的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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