精選 · 開放 · 免費

Makr

一款為頂級皮具與商品設計的精緻電商介面，以克制的色調、簡潔的排版與大尺度產品攝影為特色。

PremiumProductRefinedCleanEditorial
Makr 網站截圖
↓ 下載設計系統包 (52 MB)在 OpenDesign 中開啟

原站: https://makr.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

工藝傳承實用主義頂級商品

一間極簡、承襲傳統的工作室，專注於觸覺材質品質與低調設計。

02

色彩

#1C1717Ink
#FFFFFFBG
#A9AFA9BG soft
rgba(28,23,23,1.0)Line

深色墨與明亮背景形成高對比，柔和鼠尾草綠僅謹慎用於促銷區塊。

03

字型

grotesque-sans · neo-grotesque-sans · geometric-mono

所有次要標籤與促銷文字皆使用大寫字母 · 所有文字元素維持常規字重（400），以保持外觀簡潔統一 · 標題保持緊湊行高，內文保持寬鬆行高，以確保可讀性

04

間距

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

基於嚴格 4px 的系統，提供一致間距，較大的倍數用於界定主要內容區塊與邊距。

05

表面 (圓角 / 陰影 / 邊線)

sm · 2px
md · 4px
lg · 8px
pill · 999px

輸入欄位與分隔線使用 1px solid #1C1717

rgb(128, 128, 128) 0px 0px 5px 0px

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

簡潔的垂直滾動佈局，依賴大型全寬圖片區塊與充足留白引導視覺動線。

07

動效與互動

100msmicro
150mssmall
200msmedium
cubic-bezier(0.55, 0.06, 0.68, 0.19)easing

互動狀態的快速色彩過渡 · 次要 UI 元素的細微透明度淡出

文字連結與互動元素的細微色彩過渡 · 立即回應，除過渡效果外無可見狀態變化

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

Makr — 桌面首屏（hero）
桌面首屏（hero）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Makr — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Makr.com 是一個頂級皮具與商品的電商網站。它採用精緻的極簡美學，內文字體使用新怪誕無襯線體（Sohne），展示字體使用更為幾何的字型（Akzidenz Grotesk）。色調嚴格中性，以 #FFFFFF、#1C1717 與柔和鼠尾草綠（#A9AFA9）為主。佈局寬敞，依賴大尺度攝影與充足留白。關鍵禁忌：避免高飽和度色彩、裝飾性字型，以及厚重 UI 元素如粗邊框或投影。整體感受為靜奢與實用工藝。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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