精选 · 开放 · 免费

Master & Dynamic

Master & Dynamic 通过简洁、图像驱动的电商体验，以克制的工业美学呈现高端音频硬件。

01

设计气质 DNA

展示精心打造音频硬件的高端设计画廊

02

色彩

极简的黑白灰调色板，让高质量产品摄影驱动视觉体验

03

字体

grotesque-sans · geometric-sans

• display52px · 400
• heading41px · 700
• body-lg20px · 400
• body18px · 400
• body-sm16px · 400

导航与分类标签使用大写转换 · 整体紧凑字间距（负字距） · 单行文本元素的行高与字体尺寸一致

04

间距

基准4px，倍数主要为4x (16px)、6x (24px) 与 12x (48px)

05

表面 (圆角 / 阴影 / 边线)

1px solid rgba(74, 74, 74, 0.12)

rgba(0, 0, 0, 0.5) 0px 5px 15px 0px

06

布局

全宽主视觉图像，居中文本叠加层；三栏功能网格；内容对齐的文本区域

07

动效与交互

菜单与叠加层交互的淡入淡出过渡 · 交互元素平滑的颜色与背景尺寸过渡 · 细微的悬停状态变化，采用150毫秒时序

背景颜色、颜色、box-shadow与边框过渡，时长150毫秒ease-in-out · 细微的缩放或不透明度反馈

08

组件

• button 药丸形状按钮，深色填充配白色文字，或深色边框描边；文字大写
• card 极简卡片，边缘到边缘的产品摄影，基于图像的卡片无可见边框或阴影
• chip 小型药丸形状筛选器，带边框与大写文字
• input 简洁文本输入框，带细微底部边框，样式极简
• hero 全出血高质量产品摄影，左侧对齐的文本叠加于图像之上

09

文案语气与禁用清单

• 语气 自信、高端、简洁；聚焦产品品质与品牌理念
• 标题风格 直接的产品名称与益处陈述，常使用大写或紧凑字距的展示字体
• 按钮文案 简洁、行动导向的动词，如“立即购买”、“了解更多”、“继续”，置于药丸形状按钮内

• 勿使用装饰性衬线字体——截图显示所有展示与正文均使用简洁的无衬线字体系统
• 勿使用高饱和度点缀色——截图显示严格的黑、白、灰单色调色板
• 勿在卡片上使用厚重的投影或边框——截图显示边缘到边缘的产品摄影，表面处理极简
• 勿使用圆润或花哨的圆角——截图显示一致的紧凑圆角（4-8px）或药丸形状（9999px）
• 勿使用宽字间距——截图显示所有文本尺寸均采用紧凑的负字距
• 勿用文字挤占版面——截图显示充裕留白，大型主视觉图像主导视觉层次
• 勿使用多种字重——截图显示主要使用常规字重（400），极少使用粗体（700）
• 勿使用装饰性背景——截图显示纯白、纯黑或灰色背景，让产品摄影提供视觉趣味
• 避免: 技术术语堆砌
• 避免: 销售紧迫性语言
• 避免: 装饰性排版
• 避免: 文本后方杂乱的背景
• 避免: 圆润友好的美学风格
• 避免: 霓虹或高饱和度点缀色

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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