Supabase は Postgres を核とするオープンソースの開発プラットフォームで、データベース、認証、即時 API、リアルタイム購読、関数、ストレージ、ベクトル検索をワンストップで提供し、「オープンソース版 Firebase」と見なされています。UI は生まれつきダーク（#0f0f0f/#171717、純黒は決して使わない）で、エメラルド（#3ecf8e）はアイデンティティの標識にのみ抑制して現れます。Circular の丸みあるジオメトリック書体に Source Code Pro の大文字技術ラベル、色彩は HSL トークンと透明度チャンネルで層を重ねます。バックエンドサービスと開発者プラットフォームに適しています。
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 アプリ
WebBuild 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 コーディングツールに渡せます。