OpenDesign·你的设计资产库

网页参考

Winamp

一个现代化的音乐平台,通过简洁的设计和富有表现力的摄影,赋能艺术家与听众。

ProductConsumerMusicApp UIClean

封面待补录,可通过原站查看设计。

01

设计气质 DNA

音乐播放器艺术家收入赋能

对经典音乐播放器品牌的现代革新,融合怀旧的温暖感与当代的简洁美学。

02

色彩

#FF5C00Accent
#09090BInk
#71717AInk soft
#FFFFFFBG
#F7F7F7BG soft
#EFEFEFBG quiet
#A1A1AAMuted
rgba(0,0,0,0.08)Line

以洁净的白色为画布,搭配高对比度的深色排版,并以单一暖橙色点缀注入品牌活力。

03

字体

geometric-sans · humanist-sans · geometric-mono

  • display69px · 700
  • h234px · 600
  • body-lg24px · 400
  • body15px · 400
  • caption12px · 400

标题使用紧负字距的粗体几何无衬线字体 · 正文使用高可读性的人文主义无衬线字体,便于长时间阅读 · 导航和界面元素使用小号、常规字重的人文主义无衬线字体

04

间距

4px
8px
10px
12px
16px
20px
24px
32px
40px
56px

基于一致的4px网格,主视觉区域采用40px和56px的宽敞间距,留白充足。

05

表面 (圆角 / 阴影 / 边线)

sm · 6px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(0,0,0,0.08)

0 2px 8px rgba(0,0,0,0.04) · 0 8px 24px rgba(0,0,0,0.08)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

主视觉区域采用分栏布局(左侧文字,右侧重叠图像)。导航栏为全宽,采用标准水平对齐。

07

动效与交互

150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

导航链接和按钮的细微悬停状态 · 交互元素通过 'all' 属性实现平滑过渡

交互元素的颜色变化或细微的透明度调整。 · 通过标准按钮状态提供即时反馈。

08

组件

  • button 主按钮采用描边设计,圆角,白色背景配深色边框。
  • card 以图像为核心的卡片,带有重叠边框和微妙的圆角,用于艺术化表达。
  • chip 简洁的圆角标签,浅色背景,用于分类。
  • input 标准表单输入框,带细微边框,集成于模态对话框中。
  • hero 大尺度分栏布局,结合大号排版与动态、倾斜且重叠的图像拼贴。

09

文案语气与禁用清单

  • 语气 专业、赋能,略带怀旧感,同时保持现代且平易近人。
  • 标题风格 大号、粗体且极简,让排版和图像本身承载重量。
  • 按钮文案 直接清晰,使用标准按钮样式,避免激进的视觉风格。
  • 不要使用霓虹或高饱和度的背景色——截图显示为干净的白色背景(#FFFFFF)。
  • 不要在正文中使用装饰性衬线字体——截图显示为简洁的人文主义无衬线字体。
  • 不要创建杂乱、紧凑的布局——截图显示为留白充足且边距宽松(例如40px、56px)。
  • 不要为交互组件使用尖锐的方形圆角——截图显示为圆角(8px、12px)。
  • 不要将深色模式设为默认主题——截图显示为浅色模式主题搭配黑色文字。
  • 不要在元素上使用浓重的阴影或3D效果——截图显示为扁平、干净的表面及细微边框。
  • 避免: 过于复杂的技术术语
  • 避免: 激进或喧闹的营销语言
  • 避免: 杂乱的布局

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Winamp 是一个赋能艺术家与听众的现代音乐平台。它采用干净的白色背景,辅以单一的暖橙色(#FF5C00)点缀以增添活力。排版结合了粗体几何无衬线字体用于展示,以及人文主义无衬线字体用于正文。布局宽敞,留白充足,并包含重叠图像。关键禁忌:不要使用深色模式,不要使用衬线字体,不要让布局杂乱,不要使用霓虹色,不要使用尖锐的圆角,不要使用浓重的阴影。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。