精选 · 开放 · 免费

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