精選 · 開放 · 免費

Udio

創作任何歌曲。只需想像。

01

設計氣質 DNA

一個在昏暗、有氣氛的俱樂部中的 AI 音樂工作室介面。

02

色彩

高對比度的深色模式，搭配單一、具侵略性的亮粉色強調色，以展現創意能量。

03

字型

geometric-sans · humanist-sans

• display64px · 500
• h230px · 400
• body16px · 400
• caption12px · 400

使用幾何無襯線字體作為標題，以傳達現代科技感。 · 在所有文字中保持一致的 0.48px 字距。

04

間距

靈活的 4px 基礎網格，搭配寬鬆的區塊內距。

05

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

使用纖細、半透明白色或深色邊框以進行細微的區分。

rgba(227, 11, 94, 0.9) 0px 0px 204px 0px · rgba(0, 0, 0, 0.2) 1px 2px 8px 0px

06

版面

一個置中的首頁區塊，後接一個功能網格和動態的音訊波形元素。

07

動效與互動

針對顏色和背景的細微懸停過渡效果，以及主要按鈕上的發光脈衝效果。

互動元素上的細微背景色變化或發光強度增加。 · 按鈕和卡片的平滑過渡狀態。

08

組件

• button 藥丸形狀，帶有亮粉色漸層和發光陰影，或是透明的「幽靈」按鈕，帶有纖細邊框。
• card 深色背景，帶有細微邊框，通常具有圓角和內部陰影。
• chip 小型、藥丸形狀的徽章，用於狀態或標籤。
• input 深色背景的欄位，帶有細微邊框。
• hero 大而置中的標題，背景為深色，並帶有一個動態的、發光的音訊波形圖形。

09

文案語氣與禁用清單

• 語氣 具邀請性、富有創造力且輕鬆有力。
• 標題風格 大而粗體且直接，專注於用戶的創作潛力。
• 按鈕文案 具鼓勵性且以行動為導向，通常使用「開始」或「想像」。

• 不要使用淺色背景 — 截圖顯示為深黑色（#000000）主題。
• 不要使用藍色或綠色作為主要強調色 — 截圖顯示為主導的亮粉色（#E30B5D）。
• 不要在標題中使用襯線字體 — 截圖顯示為乾淨的幾何無襯線字體排印。
• 不要在主要按鈕上使用平面、銳利的角落 — 截圖顯示為圓角、藥丸形狀的按鈕（border-radius: 9999px）。
• 不要使用高對比度的白色作為次要文字 — 截圖顯示為柔和的灰色（#808080）。
• 不要使用密集、雜亂的佈局 — 截圖顯示為寬鬆的留白和聚焦的中央構圖。
• 避免: 技術術語
• 避免: 被動語態
• 避免: 過於企業化的語言

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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