精选 · 开放 · 免费
TAG Heuer
奢华瑞士制表商，通过纯黑单色基底与手术刀红点缀，强调精准、传承与大胆极简主义
watchesluxury
01
设计气质 DNA
奢华精准汽车传承瑞士
高端汽车仪表盘邂逅瑞士精密工程
02
色彩
#E31937Accent
#000000Ink
#808080Ink soft
#FFFFFFBG
#F5F5F5BG soft
rgba(0,0,0,0.1)Line
高对比度单色基底，辅以单一手术刀红作为主要操作色，确保奢华克制感与最大可读性
03
字体
geometric-sans
- display
32px · 900 - body
16px · 400 - caption
12px · 400
导航与章节标题采用全大写，字距2px · 粗体字重严格保留给主要行动号召标题 · 正文保持严格的400字重以确保最大可读性
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
4px基准单位，构建严格的模块化比例尺，配合充裕留白以塑造奢华定位
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
极简的1px实线边框，主要用于模态框包裹与输入框，其余依赖留白分隔
0 0 20px rgba(0,0,0,1) · none
06
布局
1440container
12columns
24pxgutter
768 / 1024 / 1440breakpoints
全宽英雄图像叠加居中模态容器，背景为基于网格的产品展示
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
0.3秒 ease-in-out 用于主要状态变化 · 0.5秒 ease-out 用于模态淡入淡出过渡 · 基于变换的交互用于按钮悬停状态
0.15秒 ease-in-out 内微妙的背景色与边框色过渡 · 通过颜色反转或微缩放变换提供即时视觉反馈
08
组件
- button 棱角分明的矩形主按钮，高对比黑白填充，12px大写文字，字距2px
- card 以图像为主的产品卡片，配以极简文字叠加与干净边框
- input 极简文本输入框，带干净边框与12px大写标签
- hero 全视窗产品摄影，搭配透明导航覆盖层与醒目的居中行动号召
09
文案语气与禁用清单
- 语气 权威、精准、自信，情感化语言极少
- 标题风格 粗体大写宣言式标题，几何感精准，负字距
- 按钮文案 直接的祈使命令，全大写，配以充裕字距以实现最大清晰度
- 不要使用圆角——截图显示的是棱角分明的矩形按钮和模态容器
- 不要为主要元素添加投影——截图显示的是扁平、无阴影的界面
- 不要使用衬线字体——截图显示的是纯几何无衬线字体
- 不要引入次要点缀色——截图仅使用黑、白、灰与手术刀红
- 不要使用随意的的小写标题——截图显示导航采用严格的大写处理
- 不要添加装饰性元素——截图显示的是干净、极简、注重留白的界面
- 避免: 随意或对话式的语言
- 避免: 装饰性或手写体字体
- 避免: 柔和的色彩组合或渐变
- 避免: 圆角或趣味性元素
- 避免: 简单操作的复杂多步骤流程
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
TAG Heuer 奢华腕表电商网站，通过纯黑单色设计体现瑞士精准与汽车传承。核心色彩：纯白 (#FFFFFF) 背景，绝对黑 (#000000) 用于文本和主按钮，中灰 (#808080) 用于次要内容，手术刀红 (#E31937) 用于关键行动号召元素。字体严格采用几何无衬线，粗体字重 (900) 保留给关键标题，常规字重 (400) 用于所有正文，导航与标签采用严格的大写处理和2px字距。核心设计原则：极致克制，零装饰元素，全程棱角分明（无圆角），充裕留白塑造奢华定位，高对比色块实现即时视觉层次。避免：任何趣味或随意元素，圆角UI组件，红色以外的次要点缀色，衬线或手写体字体，以及可能损害专注精准的品牌形象的复杂动画。
en · zh-CN · zh-TW · ja · ko