Sanity は AI 時代のコンテンツオペレーティングシステムで、Web、モバイル、エージェントアプリにコンテンツバックエンドを提供します。UI は「ダークモード」としてではなく、ほぼ黒(#0b0b0b)をデフォルトのアイデンティティとして採用します。waldenburgNormal は見出しサイズで極端な負のトラッキングを使い精密なエンジニアリング感を表現し、グレースケールは暖寒どちらにも寄らない純粋なものです。ネオングリーン、エレクトリックブルー(#0052ef)、コーラルレッド(#f36458)が句読点のように暗い場を照らし、メインボタンは全ピル型、二次操作は 3〜6px の小さな角丸です。CMS とコンテンツインフラのプロダクトに適しています。
Sanityバックエンドとデータ
プロンプトテンプレート
基本テンプレート
Design a Sanity-inspired interface. - Near-black canvas (#0b0b0b) as the default, natural environment -- not a dark "mode" but the primary identity; - waldenburgNormal with extreme negative tracking at display sizes, creating a precision-engineered typographic voice; - Pure achromatic gray scale -- no warm or cool undertones, pure neutral discipline; - Vivid accent punctuation: neon green, electric blue (#0052ef), and coral-red (#f36458) against the dark field; - Pill-shaped primary buttons (99999px radius) contrasting with subtle rounded rectangles (3-6px) for secondary actions. Colors: #0b0b0b, #000000, #f36458, #0052ef with #f36458 accent. Typography: - Background: Sanity Red (.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Sanity aesthetics. Use Sanity color identity with #f36458 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Sanity style. Use Sanity color identity with #f36458 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Sanity design language. Use Sanity color identity with #f36458 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Sanity visual identity. Use Sanity color identity with #f36458 accents. Compelling, conversion-focused.
使用例
Sanity アプリ
WebBuild a web app with Sanity design language and #f36458 color system.
Sanity ダッシュボード
ダッシュボードCreate a dashboard using Sanity style with data visualization and - Background: Sanity Red ( typography.
✅ 適した用途
- バックエンドシステム
- コンテンツ管理と編集のワークスペース
- 編集駆動のプロダクト公式サイト
❌ 適さない用途
- 高頻度アニメーションのゲームページ
- ダークネオンのテック UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。