精選 · 開放 · 免費

Suno

運用 AI，將簡單的文字提示轉化為完整製作的歌曲。

01

設計氣質 DNA

一個透過神奇、沉浸式介面將文字轉化為音樂的數位工作室。

02

色彩

電影感的深色模式，搭配高對比的溫暖白色與鮮明的漸層強調色。

03

字型

geometric-sans

• display64px · 500

04

間距

4px 基礎單位

05

表面 (圓角 / 陰影 / 邊線)

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

版面

以 Hero 為核心，搭配懸浮卡片與中央提示輸入框。

07

動效與互動

流暢的色彩過渡 · hover 時細微的縮放變形 · Hero 文字的打字機效果

按鈕與卡片的細微縮放與色彩過渡。 · 透過變形重置提供即時視覺回饋。

08

組件

• button 膠囊造型，搭配漸層背景或細微邊框。
• card 圓角設計，帶有細微的玻璃擬態或投影效果。
• chip 小型圓角膠囊，採用極簡樣式。
• input 大型圓角輸入欄位，整合操作按鈕。
• hero 置中文字，背景為電影感、模糊的漸層，搭配懸浮的媒體卡片。

09

文案語氣與禁用清單

• 語氣 如同個人音樂製作人般，具有邀請感與創造力。
• 標題風格 大型、對話式且具描述性的提示語。
• 按鈕文案 直接且著重行動（例如：「建立」、「免費加入 Suno」）。

• 勿使用淺色背景——截圖顯示為深暗 (#101012) 底色。
• 勿使用尖銳邊角——截圖顯示大多數元素皆採用圓角（最高可達 999px）。
• 勿在 Hero 區域使用複雜網格——截圖顯示為置中的單欄佈局。
• 勿使用多種鮮豔的強調色——截圖顯示僅有單一主要漸層（橙/粉）用於「建立」按鈕。
• 勿使用過小、擁擠的字型——截圖顯示為大型、粗體的展示文字，字距緊湊。
• 勿到處使用厚重的投影——截圖顯示投影僅用於卡片及特定互動元素。
• 避免: 技術術語
• 避免: 強勢的行銷語言
• 避免: 過於正式的語氣

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko