OpenDesign·你的设计资产库

网页参考

Flos

具有极简主义编辑美学的意大利高端照明品牌。

LightingDesign
Flos 网站截图

01

设计气质 DNA

照明设计意大利建筑灯具

一本高端照明设计的画廊图录。

02

色彩

#FFFFFFInk
#000000BG
#FAFAFABG soft
#666666Muted
rgba(0,0,0,0.15)Line

高对比度摄影主导画面；文字颜色根据明暗语境反转。

03

字体

humanist-sans

  • display64px · 800
  • heading40px · 600
  • body16px · 400

04

间距

4px
8px
16px
24px
32px
40px
48px
64px
96px

充裕的留白与标题紧密的字距。

05

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

sm · 2px
md · 4px
lg · 40px
pill · 999px

1px实线边框，颜色根据语境为#000000或#FFFFFF。

rgba(0, 0, 0, 0.15) 0px 4px 16px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全出血英雄图配叠加文字；基于网格的产品卡片布局。

07

动效与交互

200msmicro
300mssmall
600msmedium
cubic-bezier(0.455, 0.03, 0.515, 0.955)easing

平滑的淡入过渡 · hover时的缩放变换

微妙的透明度或背景色偏移。 · 标准指针光标。

08

组件

  • button 幽灵按钮，1px实线边框，全大写文字。
  • card 图像为主的卡片，无可见边框或阴影。
  • hero 全屏摄影背景配左对齐的白色文字。

09

文案语气与禁用清单

  • 语气 精致、建筑感、克制。
  • 标题风格 粗体、全大写或标题式大小写，标点极简。
  • 按钮文案 全大写，幽灵按钮样式。
  • 不要使用明亮、饱和的色彩——截图显示的调色板以黑、白、柔和灰为主。
  • 不要在主要元素上使用圆角——截图显示边缘锐利或仅有极细微的圆角。
  • 不要给卡片添加厚重的投影——截图显示的是扁平化、以图像驱动的布局。
  • 不要使用装饰性或手写体字体——截图显示所有文字均采用干净的人文主义无衬线字体。
  • 不要在英雄区堆叠多个CTA——截图仅显示一个清晰的‘了解更多’按钮。
  • 不要在文字后方使用杂乱的背景——截图通过深色叠加层或纯色背景确保可读性。
  • 避免: 鲜艳色彩
  • 避免: 装饰性字体
  • 避免: 过度UI装饰
  • 避免: 厚重阴影

10

包内真实截图

Flos — 桌面首屏（hero）
桌面首屏（hero）
Flos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Flos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Flos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Flos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Flos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Flos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Flos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Flos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Flos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Flos — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Flos — 移动首屏
移动首屏

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

11

System Prompt

这是一个具有极简主义编辑美学的意大利高端照明品牌电商网站。设计优先采用高质量摄影，配色为黑(#000000)、白(#FFFFFF)和柔和灰(#666666)的高对比度调色板。字体采用干净的人文主义无衬线字体，用于标题时包含常规与全大写两种字重。关键设计约束：绝不使用明亮或饱和的强调色，保持充裕留白，避免使用粗边框或复杂阴影等厚重的UI元素。布局严格基于网格，重点在于大型全出血图像，以在语境中展示产品。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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