Discord 是「聊天、語音、組建社群」的平台。其介面深色優先，用 #1e1f22/#2b2d31/#313338 三級深度建構層次，Blurple（#5865f2）是聊天介面裡唯一的飽和強調色，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 應用程式
Web 端Build 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 產品
- 社群與即時聊天產品
- 遊戲玩家的社交介面
❌ 不適用情境
- 嚴肅的政務與公益頁面
- 高階奢侈品電商
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。