精選 · 開放 · 免費

MotherDuck

為答案而生的基礎架構。

datadb

MotherDuck 網站截圖

↓ 下載設計系統包 (14 MB)在 OpenDesign 中開啟

原站: https://motherduck.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

資料倉儲分析SQLDuckDBCloud

一個友善、易於使用的複雜資料基礎架構實用工具。

02

色彩

#FFDE00Accent

#383838Ink

#F4EFEABG

#666666Muted

rgba(56,56,56,1)Line

高對比、溫潤的中性基底色，搭配充滿活力的黃色點綴，以及銳利的 2px 黑色邊框，營造獨特的插圖感。

03

字型

monospaced · humanist-sans

display40px · 400
body16px · 400
small14px · 400

所有標題均為大寫，並使用等寬字體。 · 內文採用清晰的 humanist-sans 字體以提升可讀性。

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

標準的 4px 基本格線，主要區塊周圍有充裕的 padding。

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

置中的主視覺區塊採用堆疊內容，接著是多欄的商標網格。

07

動效與互動

120msmicro

200mssmall

400msmedium

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

hover 時的細微 transforms · 用於平滑狀態變換的 ease-in-out 過渡效果

細微的 transforms 和可能的陰影位移。 · 標準的指標游標。

08

組件

button 實心淺藍色 (#6FC2FF) 或輪廓樣式，具有銳利的 2px 黑色邊框和細微的硬偏移陰影。
card 帶有硬陰影的插圖元素。
input 帶有圓角的簡潔邊框輸入框。
hero 大型等寬大寫標題、簡短描述，以及顯眼的雙重互動 CTA 按鈕。

09

文案語氣與禁用清單

語氣專業但親切，略帶俏皮感。
標題風格 直接、大寫且採用等寬字體，以傳達技術精準度。
按鈕文案 清晰、以行動為導向且具鼓勵性。

避免使用圓角或柔軟的角落——截圖顯示為銳利的 2px 邊框
避免為主要內文使用白色背景——截圖顯示為溫暖的米色 (#F4EFEA)
避免使用柔和的投影——截圖顯示為硬朗、實色偏移陰影
避免預設使用深色模式——截圖顯示為明亮、高對比度主題
避免使用俏皮或手寫字體——截圖顯示為簡潔的等寬字體與 humanist-sans
避免使用細膩的柔和色調點綴——截圖使用大膽、高飽和度的黃色與明亮藍色
避免: 缺乏脈絡的過度複雜術語
避免: 枯燥或過於嚴肅的企業用語
避免: 視覺混亂或過度裝飾

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) 作為大寫標題，搭配簡潔的 humanist-sans 作為內文。關鍵設計規則包括：保持銳利的 2px 黑色邊框和硬偏移陰影，而非柔和光暈；嚴格使用大寫字體作為展示型文字；避免通用的圓角或「柔軟」UI 模式。整體感覺是插圖化的、結構化的且平易近人的。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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