OpenDesign·你的设计资产库

网页参考

Makr

一个精致的优质箱包及商品电子商务界面，以克制的色板、干净的排版和大尺度的产品摄影为特征。

PremiumProductRefinedCleanEditorial

封面待补录，可通过原站查看设计。

01

设计气质 DNA

工艺传承实用主义优质商品

一个极简主义、传承灵感的设计工作室，聚焦于触觉材质品质与低调设计。

02

色彩

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

深墨色与明亮背景之间的高对比度，并克制地使用柔和的鼠尾草绿色作为促销版块的强调色。

03

字体

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

  • display32px · 400
  • body16px · 400
  • caption13px · 400

所有次要标签和促销文本使用大写字母 · 所有文本元素保持常规字重 (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

组件

  • button 极简的文本按钮，无背景或边框，依靠文本变换和悬停过渡效果。
  • card 大尺寸、无边框的图片卡片，优先呈现产品摄影而非文本元数据。
  • chip 用于导航和促销横幅的极简大写文本标签。
  • input 单行文本输入框，带 1px 底部边框，无背景填充。
  • hero 全出血图片或颜色区块（如鼠尾草绿色区域），叠加大尺度排版。

09

文案语气与禁用清单

  • 语气 直接、实用且低调
  • 标题风格 简短、有力，常全大写以示重要
  • 按钮文案 简洁、行动导向的文本，无厚重按钮样式
  • 避免使用装饰性或手写体字体——截图显示一致使用中性的几何无衬线字体。
  • 避免使用多种颜色——截图显示非常有限的色板，仅含白色、深墨色和一种柔和的绿色。
  • 避免使用厚重的投影或 3D 效果——截图显示非常扁平、干净的 UI，几乎没有阴影。
  • 避免使用繁杂的背景或图案——截图显示纯色和大尺度的产品摄影。
  • 避免使用复杂的按钮形状——截图显示极简的、基于文本的交互元素。
  • 避免使用两端对齐的文本——截图显示所有内容区块均为左对齐文本。
  • 避免: 过多的感叹号
  • 避免: 模糊的营销术语
  • 避免: 过于复杂的描述

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Makr.com 是一个优质的箱包及商品电子商务网站。它采用精致的极简主义美学，正文字体为新怪诞无衬线字体 (Sohne)，展示字体则为更具几何感的 Akzidenz Grotesk。色板严格中性，以 #FFFFFF、#1C1717 和一种柔和的鼠尾草绿色 (#A9AFA9) 为主。布局宽敞，依赖大尺度摄影和充足留白。关键禁忌：避免高饱和度颜色，避免装饰性字体，避免厚重的 UI 元素（如粗边框或投影）。整体感觉是静谧的奢华与实用主义工艺。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。