OpenDesign·你的设计资产库

网页参考

MotherDuck

驱动答案的基础设施。

DataDB
MotherDuck 网站截图

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 — 移动首屏
移动首屏

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

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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