Supabase 是以 Postgres 為核心的開源開發平台，一站式提供資料庫、認證、即時 API、即時訂閱、函式、儲存與向量檢索，被視作「開源版 Firebase」。其介面天生深色（#0f0f0f/#171717，絕不用純黑），翠綠（#3ecf8e）只在識別標記處克制出現，Circular 圓潤幾何字型配 Source Code Pro 大寫技術標籤，色彩走 HSL token 並帶透明度通道做層疊。適合後端服務與開發者平台。
Supabase後端與資料
提示詞範本
基礎範本
Design a Supabase-inspired interface. - Dark-mode-native: near-black backgrounds (#0f0f0f, #171717) — never pure black; - Emerald green brand accent (#3ecf8e, #00c573) used sparingly as identity marker; - Circular font — geometric sans-serif with rounded terminals; - Source Code Pro for uppercase technical labels (1.2px letter-spacing); - HSL-based color token system with alpha channels for translucent layering. Colors: #3ecf8e, #00c573, #0f0f0f, #171717 with #3ecf8e accent. Typography: Circular.
變體提示詞
📱 行動裝置
Design a mobile app with Supabase aesthetics. Use Supabase color identity with #3ecf8e accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Supabase style. Use Supabase color identity with #3ecf8e accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Supabase design language. Use Supabase color identity with #3ecf8e accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Supabase visual identity. Use Supabase color identity with #3ecf8e accents. Compelling, conversion-focused.
使用範例
Supabase 應用程式
Web 端Build a web app with Supabase design language and #3ecf8e color system.
Supabase 儀表板
儀表板Create a dashboard using Supabase style with data visualization and Circular typography.
✅ 適用情境
- 後端系統
- 開源後端服務與資料庫
- 開發者主控台與文件
❌ 不適用情境
- 奢華零售品牌頁
- 明亮卡通的教育產品
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。