精選 · 開放 · 免費
Xata
現代開發者工具，可即時建立 Postgres 分支
devdb
01
設計氣質 DNA
開發者資料庫postgres分支工具
資料庫工作流程的精密儀器
02
色彩
#FFFFFFInk
#0D0D0DBG
#888888Muted
rgba(255, 255, 255, 0.07)Line
高對比深色模式，具備單色精確性與最小化點綴
03
字型
geometric-sans · monospace
標題使用幾何無襯線字體，字距緊湊 · 內文與介面文字使用等寬字體，確保技術精確性 · 次要資訊使用較柔和的文字
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
8px 基線網格，搭配寬裕的留白以保持清晰
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255, 255, 255, 0.07)
0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset · 0px 4px 6px -1px rgba(0, 0, 0, 0.2) · 0px 2px 4px -2px rgba(0, 0, 0, 0.2) · 0px 0px 2.56702px 0px rgba(52, 211, 153, 0.192)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
固定寬度居中佈局，具備乾淨網格
07
動效與互動
150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
流暢的透明度過渡 · 懸停時的變換效果 · 背景濾鏡過渡
細微的亮度變化與盒子陰影 · 稍微縮小
08
組件
- button 紫色背景搭配白色文字，略帶圓角
- card 深色細微背景，帶有細邊框與柔和陰影
- chip 輪廓樣式，使用柔和文字作為狀態指示
- input 深色背景搭配細微邊框
- hero 大型等寬字體標題，深色背景搭配散佈的介面元素
09
文案語氣與禁用清單
- 語氣 技術性且精確，專業
- 標題風格 直接、大膽的陳述功能
- 按鈕文案 清晰的動詞搭配等寬字體
- 避免使用襯線字體——截圖顯示為等寬與幾何無襯線字體
- 避免使用明亮的主色調——截圖顯示僅在按鈕上使用柔和的紫色點綴
- 避免使用圓角卡片——截圖顯示為帶有小圓角的矩形卡片
- 避免使用複雜背景——截圖顯示為深色純色背景搭配細微圖案
- 避免使用大內邊距——截圖顯示為緊湊的間距以維持密度
- 避免使用斜體文字——截圖顯示為所有文字均為直立排版
- 避免: 行銷術語
- 避免: 過多的驚嘆號
- 避免: 過於隨意的語言
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個用於資料庫管理的開發者工具 SaaS 網站，採用深色模式設計。網站全程使用等寬字體以確保技術精確性，標題則使用幾何無襯線字體。主要顏色包括 #0D0D0D 作為背景、#FFFFFF 作為文字，以及柔和的紫色作為主要按鈕色彩。佈局乾淨居中，搭配寬裕的留白。關鍵禁忌：避免使用襯線字體、避免使用明亮的主色調、避免使用圓角卡片。設計優先考慮清晰度與技術準確性，並盡量減少視覺干擾。
en · zh-CN · zh-TW · ja · ko