精选 · 开放 · 免费

Udio

创作任何歌曲。只需想象。

01

设计气质 DNA

一个处于深沉、氛围感俱乐部中的AI驱动音乐工作室仪表盘。

02

色彩

高对比度的深色模式，搭配一个极具张力的霓虹粉色作为创意能量的强调色。

03

字体

geometric-sans · humanist-sans

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

标题使用几何无衬线字体，以传达现代科技感。 · 所有文本的 letter-spacing 保持一致的 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