精选 · 开放 · 免费
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
以英雄区为核心,配备浮动卡片和中央提示输入框。
07
动效与交互
75msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
平滑的颜色过渡 · 悬停时细微的变换缩放 · 英雄文本的打字机效果
按钮和卡片在悬停时有细微的缩放和颜色过渡。 · 立即提供视觉反馈,变换重置。
08
组件
- button 药丸形状,带有渐变背景或细微边框。
- card 圆角,带有细微的玻璃拟态或投影效果。
- chip 小型圆角药丸,样式简约。
- input 大号圆角输入框,集成操作按钮。
- hero 居中文本,叠加在电影感、模糊的渐变背景上,配有浮动媒体卡片。
09
文案语气与禁用清单
- 语气 富有邀请性和创造性,如同个人音乐制作人。
- 标题风格 大号、对话式、描述性的提示。
- 按钮文案 直接且面向行动(例如,“创作”、“免费加入Suno”)。
- 不要使用浅色背景——截图显示为深色(#101012)基底。
- 不要使用尖锐的圆角——截图显示大多数元素采用圆角(最大999px)。
- 不要为英雄区使用复杂的网格——截图显示为居中的单列布局。
- 不要使用多种鲜艳的强调色——截图显示“创建”按钮使用单一的主渐变(橙色/粉色)。
- 不要使用小而拥挤的排版——截图显示为大号、粗体的显示文字,字间距紧凑。
- 不要到处使用厚重的投影——截图显示投影仅用于卡片和特定的交互元素。
- 避免: 技术术语
- 避免: 激进的营销语言
- 避免: 过于正式的语气
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Suno 是一个AI驱动的音乐创作平台,具有电影感、高级的深色模式美学。其设计DNA建立在深炭灰色(#101012)背景、温暖的白色(#F7F4EF)文字以及用于关键操作的充满活力的橙色到粉色渐变之上。排版采用简洁的几何无衬线字体(Neue Montreal),粗体标题字间距紧凑。关键约束包括保持居中、沉浸式的英雄区布局,并避免使用浅色主题、尖锐圆角或杂乱的网格。界面通过突出的基于提示的输入系统,强调简洁性和创意流程。
en · zh-CN · zh-TW · ja · ko