精选 · 开放 · 免费

Jams Basicagency

堆叠专辑封面与粗体排版的视觉音乐收藏界面。

ConsumerPhotographicCurationGalleryExperimental
Jams Basicagency 网站截图
↓ 下载设计系统包 (39 MB)在 OpenDesign 中打开

原站: https://jams.basicagency.com

📦 浏览包内文件 →

01

设计气质 DNA

黑胶音乐收藏淘碟视觉

具有怀旧触感的数字黑胶唱片箱界面。

02

色彩

#FFF8F1Ink
#8FCEEEBG
#E5E7EBMuted
rgba(255, 248, 241, 0.15)Line

高对比度柔和色调,以浅蓝色为主导背景,搭配暖调米白色文字。

03

字体

grotesque-sans

文字大量使用大写变换。 · 标题采用极紧凑的负字距,呈现粗犷现代感。 · 大字体作为结构性图形元素,而非单纯内容载体。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

不规则间距,注重大尺寸戏剧性留白,为摄影内容提供呼吸空间。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

采用暖调米白色和中性灰色的实线边框定义层次。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

不对称分层构图,图像通过堆叠与偏移创造类似实体唱片箱的纵深感。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

状态变化采用0.5秒的透明度与变换平滑过渡。 · 可能包含抓取光标提示的拖拽交互。

交互元素切换为指针光标,可拖拽图像切换为抓取光标。 · 激活收藏查看器的交互元素。

08

组件

09

文案语气与禁用清单

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

为音乐或摄影收藏设计的粗犷策展界面,唤起实体淘碟体验。设计大量依赖浅蓝色背景与暖调米白色文字,使用干净无衬线字体呈现超大、紧凑字距的标题。摄影以堆叠偏移图层呈现深度并激发探索欲。关键禁忌:避免深色模式、主容器避免圆角、避免常规首字母大写标题、避免标准按钮组件。布局刻意不对称,大字体作为结构元素使用,需要充足留白与严格的大写变换以维持高端策展感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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