Discord は「チャット、音声、コミュニティづくり」のプラットフォームです。UI はダーク優先で、#1e1f22／#2b2d31／#313338 の 3 段階の深度で階層を構築します。Blurple（#5865f2）はチャット UI で唯一の彩度の高いアクセントカラー。gg sans の書体は親しみやすいジオメトリックで、サーバーアイコンは 16px 角丸の正方形がホバーで真円に変化します。チャットの行間は詰まり、サイドバーの余白はゆったりと確保されています。コミュニティ、ソーシャル、SaaS 系プロダクトに適しています。
Discord生産性と SaaS
プロンプトテンプレート
基本テンプレート
Design a Discord-inspired interface. - Dark-first surfaces: #1e1f22 / #2b2d31 / #313338 (3-step depth); - Blurple #5865f2 as the only saturated accent in the chat surface; - gg sans (Whitney-style) for all text — friendly, geometric, neutral; - Rounded-square server avatars (16px radius) that snap to circles on hover; - Tight chat-row spacing, generous side-panel padding. Colors: #5865f2, #4752c4, #7289da, #1e1f22 with #5865f2 accent. Typography: - Background:.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Discord aesthetics. Use Discord color identity with #5865f2 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Discord style. Use Discord color identity with #5865f2 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Discord design language. Use Discord color identity with #5865f2 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Discord visual identity. Use Discord color identity with #5865f2 accents. Compelling, conversion-focused.
使用例
Discord アプリ
WebBuild a web app with Discord design language and #5865f2 color system.
Discord ダッシュボード
ダッシュボードCreate a dashboard using Discord style with data visualization and - Background: typography.
✅ 適した用途
- SaaS 製品
- コミュニティとリアルタイムチャット製品
- ゲーマー向けソーシャル UI
❌ 適さない用途
- 厳粛な行政・公共ページ
- ハイエンドなラグジュアリー EC
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。