精选 · 开放 · 免费
Contract Mdfitalia
一个高端家具合约网站,以沉浸式摄影和克制、优雅的布局为特色。
PremiumGalleryPhotographicCleanCuration
01
设计气质 DNA
家具合约建筑奢华极简主义
一个宁静、高端的家具展厅,优先考虑氛围摄影而非杂乱的UI。
02
色彩
#000000Ink
#141414Ink soft
#FFFFFFBG
#F6F6F6BG soft
#3E3E3EMuted
rgba(229, 231, 235, 1)Line
高对比度、中性的调色板,让产品摄影决定视觉温度。
03
字体
geometric-sans
- display
100px · 500 - heading
50px · 500 - subheading
24px · 500 - body
16px · 500 - small
15px · 400
标题使用紧凑的字间距(例如 -0.4px 至 -1px),以营造精致、现代的外观。 · 正文权重主要为500,相比标准常规权重,营造出更密集、更结构化的感觉。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
一个紧凑、高效的间距系统,优先考虑紧凑布局而非充裕的留白。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 999px
1px solid rgb(229, 231, 235)
rgba(0, 0, 0, 0.03) 0px 4px 40px 0px · rgba(0, 0, 0, 0.3) 0px 30px 70px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全出血摄影布局,搭配干净、顶部对齐的导航和极简的UI元素。
07
动效与交互
200msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
用于微妙UI交互的平滑透明度和变换过渡。
微妙的透明度变化或微小的空间位移,以指示交互性,而不分散对图像的注意力。 · 即时、干净的反馈,无重型动画。
08
组件
- button 极简主义按钮,通常无边框或为轮廓样式,具有精确、小范围的内边距和紧凑的字间距。
- card 干净、无边框的卡片,高度依赖高质量摄影和紧凑的文字叠加。
- input 极简的表单输入框,带有纤细、微妙的边框,无背景填充。
- hero 一个占据主导地位的全视口摄影主视觉,营造出氛围感、沉浸式的基调。
09
文案语气与禁用清单
- 语气 精致、专业且低调,让产品自己说话。
- 标题风格 简洁、现代,并高度依赖强烈的视觉摄影来传达信息。
- 按钮文案 直接且不突兀,通常以简单文本链接或极简轮廓按钮呈现。
- 不要使用明亮的主色——截图显示的是严格的单色基础调色板。
- 不要使用厚重、华丽的边框——截图显示的是无边框或非常纤细、微妙的分隔线。
- 不要使用过宽或松散的字间距——截图显示所有标题都使用紧凑的字间距。
- 不要使用大型、繁杂的UI图案——截图显示的是克制、以摄影为核心的布局。
- 不要在卡片上使用厚重的投影——截图显示的是非常微妙、柔和的提升阴影。
- 不要使用俏皮、圆润的UI元素——截图显示的是尖锐、干净、矩形或最小圆角的组件。
- 避免: 避免使用与产品摄影冲突的明亮、饱和的强调色。
- 避免: 避免使用会分散对布局极简主义注意力的沉重阴影或复杂的UI装饰。
- 避免: 避免使用与几何无衬线系统冲突的过度装饰或手写字体。
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
此设计用于一个高端家具合约网站,优先考虑氛围感、全出血摄影而非复杂UI。调色板严格单色,使用 #FFFFFF 和 #F6F6F6 作为背景色,#000000 作为主要文字颜色,#3E3E3E 用于柔和元素。字体使用干净的几何无衬线字体,搭配紧凑的负字间距,以营造精致、现代的感觉。关键禁忌包括避免使用明亮的强调色、避免使用厚重的UI边框或投影、以及避免使用松散或俏皮的字体。布局开阔且干净,让产品图像主导视觉层次。
en · zh-CN · zh-TW · ja · ko