精選 · 開放 · 免費
Suno
運用 AI,將簡單的文字提示轉化為完整製作的歌曲。
aimusic
01
設計氣質 DNA
AI 音樂創意提示音訊生成對話式
一個透過神奇、沉浸式介面將文字轉化為音樂的數位工作室。
02
色彩
#F7F4EFInk
#101012BG
#9CA3AFMuted
rgba(247, 244, 239, 0.1)Line
電影感的深色模式,搭配高對比的溫暖白色與鮮明的漸層強調色。
03
字型
geometric-sans
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
4px 基礎單位
05
表面 (圓角 / 陰影 / 邊線)
sm · 6px
md · 12px
lg · 24px
pill · 9999px
1px solid rgba(247, 244, 239, 0.1)
0 25px 50px -12px rgba(0,0,0,0.25) · 0 10px 15px -3px rgba(0,0,0,0.1) · -5.37px 0px 40px 0px rgba(255,176,3,0.07) · 5.37px 0px 40px 0px rgba(254,60,125,0.07)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
以 Hero 為核心,搭配懸浮卡片與中央提示輸入框。
07
動效與互動
75msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
流暢的色彩過渡 · hover 時細微的縮放變形 · Hero 文字的打字機效果
按鈕與卡片的細微縮放與色彩過渡。 · 透過變形重置提供即時視覺回饋。
08
組件
- button 膠囊造型,搭配漸層背景或細微邊框。
- card 圓角設計,帶有細微的玻璃擬態或投影效果。
- chip 小型圓角膠囊,採用極簡樣式。
- input 大型圓角輸入欄位,整合操作按鈕。
- hero 置中文字,背景為電影感、模糊的漸層,搭配懸浮的媒體卡片。
09
文案語氣與禁用清單
- 語氣 如同個人音樂製作人般,具有邀請感與創造力。
- 標題風格 大型、對話式且具描述性的提示語。
- 按鈕文案 直接且著重行動(例如:「建立」、「免費加入 Suno」)。
- 勿使用淺色背景——截圖顯示為深暗 (#101012) 底色。
- 勿使用尖銳邊角——截圖顯示大多數元素皆採用圓角(最高可達 999px)。
- 勿在 Hero 區域使用複雜網格——截圖顯示為置中的單欄佈局。
- 勿使用多種鮮豔的強調色——截圖顯示僅有單一主要漸層(橙/粉)用於「建立」按鈕。
- 勿使用過小、擁擠的字型——截圖顯示為大型、粗體的展示文字,字距緊湊。
- 勿到處使用厚重的投影——截圖顯示投影僅用於卡片及特定互動元素。
- 避免: 技術術語
- 避免: 強勢的行銷語言
- 避免: 過於正式的語氣
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Suno 是一個 AI 驅動的音樂創作平台,具有電影感的高級深色模式美學。其設計 DNA 建立在深炭灰色 (#101012) 背景、溫暖白色 (#F7F4EF) 文字,以及用於關鍵操作的鮮明橙粉色漸層之上。字型採用簡潔的幾何無襯線體 (Neue Montreal),並以緊湊的字距呈現粗體標題。關鍵限制包括維持置中的沉浸式 Hero 佈局,並避免淺色主題、尖銳邊角或雜亂的網格。介面透過顯眼的基於提示的輸入系統,強調簡潔性與創作流暢度。
en · zh-CN · zh-TW · ja · ko