精選 · 開放 · 免費

Drizzle ORM

適用於 TypeScript 和 JavaScript 的現代、快速 ORM。

devtoolsorm

Drizzle ORM 網站截圖

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

原站: https://orm.drizzle.team

📦 瀏覽包內檔案 →

01

設計氣質 DNA

ORMTypeScriptJavaScript資料庫開發者

如同為開發者打造的乾淨、快速工具包，用於高效管理資料。

02

色彩

#222222Ink

#444444Ink soft

#FFFFFFBG

#FAFAFABG soft

#F1F2F3BG quiet

#71687BMuted

rgba(33, 39, 46, 0.12)Line

乾淨白色背景上的高對比度，搭配微妙的灰色結構元素。

03

字型

sans-serif · monospace

display48px · 700
h232px · 600
body16px · 400
small12px · 400

系統無襯線字型堆疊為主要字型。 · 等寬字型用於程式碼片段和技術標籤。 · 手寫字體選擇性地用於俏皮的註釋。

04

間距

4px

8px

12px

16px

20px

24px

32px

40px

64px

基於一致的 4px 基礎網格，各章節具備充足內距。

05

表面 (圓角 / 陰影 / 邊線)

sm · 2px

md · 8px

lg · 20px

pill · 999px

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.08) 0px 0px 0px 1px · rgba(0, 0, 0, 0.075) 0px 2px 4px 0px · rgb(255, 255, 255) 0px 0px 1px 1px inset

06

版面

1200container

12columns

24pxgutter

768 / 1024breakpoints

置中的內容容器，採用響應式堆疊。

07

動效與互動

200msmicro

300mssmall

800msmedium

ease-in-outeasing

懸停時的平滑顏色轉場 · 透明度淡入

微妙的背景顏色變化或顏色轉場。 · 無戲劇性變化，標準的指標游標。

08

組件

button 透明或外框樣式，帶有圓角。
card 白色表面，搭配微妙邊框與柔和陰影。
chip 小型圓角徽章，帶有背景色。
input 乾淨的外框輸入框，帶有圓角。
hero 大型左對齊文字，搭配俏皮的插圖。

09

文案語氣與禁用清單

語氣技術性但平易近人，略帶俏皮。
標題風格 直接、行動導向且簡潔。
按鈕文案 純文字連結或外框按鈕。

不要使用深色模式 — 截圖顯示明亮的白色背景
不要使用漸層背景 — 截圖顯示平坦的純色
不要在所有地方都使用圓角藥丸型按鈕 — 截圖顯示標準的矩形或略微圓角按鈕
不要在所有元素上都使用陰影 — 截圖顯示大多為平坦表面與微妙邊框
不要使用單一高彩度的強調色 — 截圖顯示以單色調為主的色板
不要使用裝飾性襯線體 — 截圖顯示乾淨的無襯線字型
避免: 過度企業化的語言
避免: 缺乏視覺區隔的密集文字段落
避免: 過於強烈或鮮豔的顏色

10

包內真實截圖

Drizzle ORM — 桌面首屏（hero） — 桌面首屏（hero）

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

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

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

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

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

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

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

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

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

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

Drizzle ORM — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個 ORM 的開發者工具 SaaS 網站，採用乾淨、極簡的設計，背景為白色。關鍵色彩包括深炭灰色文字（#222222）和淺灰色邊框（#E5E7EB）。字型方面，內文使用標準無襯線字型堆疊，程式碼使用等寬字型堆疊。設計依賴充足的留白與微妙的邊框，而非厚重的陰影。關鍵禁忌：不要使用深色模式、不要添加漸層背景、不要使用裝飾性字體。佈局置中且響應式，專注於清晰的層次結構與可讀性。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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