精选 · 开放 · 免费
Vitra
一个高端现代家具品牌，通过电影感影像和克制的极简主义展示高端设计。
furnituredesign
01
设计气质 DNA
设计家具现代办公可持续高端建筑感
一本高端建筑图册的网页呈现，融合产品展示与编辑叙事。
02
色彩
#101010Ink
#333333Ink soft
#FFFFFFBG
#F7F7F7BG soft
#E6E6E6BG quiet
#767676Muted
rgba(204,204,204,1.0)Line
严格的单色配色方案，依赖高对比度摄影来创造视觉趣味。
03
字体
geometric-sans
- display
56px · 500 - headline
40px · 500 - body
17px · 500 - small
15px · 500 - micro
13px · 500
通篇使用几何无衬线字体 · 主要文本保持 500 字重 · 小标签使用大写字母间距 · 段落左对齐，并设置宽松的行高
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
以 8px 为基础单元，版块间距宽松，为 64px-96px。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
使用浅灰色的 1px 细实线边框进行微妙分隔，不使用投影。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全出血的主视觉图片搭配居中文本，随后是紧密排列的双列产品网格。
07
动效与交互
150msmicro
400mssmall
800msmedium
cubic-bezier(0.17, 0.16, 0, 0.6)easing
文本叠加层平滑淡入 · 交互元素上线性色彩过渡
文本和图标微妙地变为柔和的灰色。 · 即时响应，仅有最小微交互。
08
组件
- button 纯文本或带细边框的轮廓按钮，标签为大写，并设置宽松的内边距。
- card 以图片为主的卡片，下方居中放置文本说明，无边框或背景。
- chip 不适用
- input 极简的搜索输入框，仅底部有细边框。
- hero 全视口的电影感摄影，文字叠加层在垂直和水平方向均居中。
09
文案语气与禁用清单
- 语气 权威、精致且富有远见。
- 标题风格 简短、有力的产品名称或概念性提问。
- 按钮文案 直接且以行动为导向，例如‘立即探索’或‘更多详情’。
- 不要使用投影 — 截图显示的是依赖摄影景深的扁平设计。
- 不要在按钮或卡片上使用圆角 — 截图显示的是锐利的直角边缘。
- 不要使用明亮的强调色 — 截图显示的是严格的单色配色方案。
- 不要为正文使用粗体字重 — 截图显示所有文本均使用中等字重（500）。
- 不要使用密集的文本块 — 截图显示了宽松的行高和段落间距。
- 不要使用装饰性边框 — 截图显示仅有功能性的 1px 细线。
- 避免: 避免使用随意语言或表情符号
- 避免: 避免因过多文本而打乱视觉层级
- 避免: 避免使用明亮、饱和的强调色
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Vitra 的视觉系统是一个高端、编辑驱动的家具展示平台。它采用严格的单色配色方案，核心色为白色（#FFFFFF）、近黑色墨迹（#101010）和柔和的灰色（#F7F7F7, #333333, #767676）。字体是简洁的几何无衬线字体，始终以中等字重（500）使用，并为标签设置了宽松的行高和字间距。布局以全出血的电影感摄影和极简、直角的 UI 组件为定义。关键约束：绝不使用投影，绝不使用明亮的强调色，且绝不在按钮或卡片等 UI 元素上使用圆角。
en · zh-CN · zh-TW · ja · ko