精選 · 開放 · 免費

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 用於導覽的簡潔文字標籤，如「唱片箱」與「格狀」。
hero 全出血的堆疊影像構圖，搭配厚重的排版元資料。

09

文案語氣與禁用清單

語氣策展感、直接、略帶地下風格。
標題風格 粗獷、緊密間距的大寫 grotesque 字體。
按鈕文案 極簡風格，依賴指標游標與文字粗細變化。

不要使用深色背景——截圖顯示以淺藍色為主導的畫面。
不要為容器添加柔和圓角——截圖顯示銳利邊緣。
不要使用標準句子大小寫作為標題——截圖顯示專用的大寫處理。
不要為展示型文字使用寬鬆字距——截圖顯示緊密間距的標題。
不要將所有內容置中——截圖顯示非對稱、左側對齊且層疊的佈局。
不要使用單一平面層級呈現內容——截圖顯示堆疊、具深度的空間感。
避免: 避免裝飾性排版；保持嚴格功能性與粗獷感。
避免: 避免複雜的 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

一個粗獷、具策展感的音樂或攝影收藏介面，讓人聯想到實體翻找唱片的體驗。設計大量依賴淺藍色背景與溫暖米白色文字，運用簡潔的 grotesque 無襯線字體呈現大字體、緊密間距的標題。攝影以堆疊、錯位的層次呈現以創造深度並鼓勵探索。關鍵禁忌：避免深色模式、避免主要容器使用圓角、避免標準句子大小寫標題、避免標準按鈕元件。佈局刻意採用非對稱設計，並以大型排版作為結構元素，需要充足的留白空間與嚴格的大寫文字變換，以維持其優質、策展的質感。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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