精选 · 开放 · 免费

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

display124px · 700
title48px · 700
body14px · 300

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

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

组件

button 基于文本的导航，采用大写样式与指针光标。
card 分层摄影元素作为主要‘卡片’。
chip 简洁文本标签（如'CRATE'和'GRID'）用于导航。
hero 全出血堆叠图像构图，配合粗重排版的元数据。

09

文案语气与禁用清单

语气策展式、直接、略带地下气质。
标题风格 粗体、紧凑字距、大写无衬线字体。
按钮文案 极简风格，依赖指针光标与字重变化。

不使用深色背景——截图显示浅蓝色为主导色域。
不使用柔和圆角容器——截图显示锋利边缘。
标题不使用常规首字母大写——截图显示全大写处理。
展示字体不使用宽松字距——截图显示紧凑字距标题。
内容不对齐居中——截图显示不对称、左对齐的分层布局。
不使用单一扁平内容层——截图显示堆叠的立体纵深。
避免: 避免装饰性字体；保持纯粹功能性粗体。
避免: 避免复杂UI模式；让图像与超大文字主导。
避免: 避免深色模式美学；设计依赖明亮通透的色调。
避免: 避免柔和圆角UI元素；保持棱角分明或使用简单药丸形。
避免: 避免杂乱布局；大字体周围保留充足留白。
避免: 避免标准按钮样式；优先使用文本链接与光标提示。

10

包内真实截图

Jams Basicagency — 桌面首屏（hero） — 桌面首屏（hero）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jams Basicagency — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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