OpenDesign·你的设计资产库

网页参考

Polaroid

一个为经典模拟摄影硬件打造的精致单色电子商务界面。

HardwareCamera
Polaroid 网站截图

01

设计气质 DNA

怀旧触感即时趣味高端

一个展示多彩产品线的极简黑白画廊

02

色彩

#78BE20Accent
#151515Ink
#FFFFFFBG
#E9E9E9BG soft
#767676Muted
rgba(21, 21, 21, 1)Line

高对比度的单色基底,辅以微妙的绿色点缀和鲜艳的产品图像。

03

字体

humanist-sans · monospace

  • display56px · 600
  • h226px · 600
  • body16px · 400

04

间距

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

基于4px基础网格的充足留白。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

利落的1px纯黑实线边框。

0 30px 70px 0 rgba(0, 0, 0, 0.3)

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全幅主视觉图像,其后是严格、带边框的网格化布局。

07

动效与交互

200msmicro
300mssmall
800msmedium
cubic-bezier(0.45, 0.02, 0.09, 0.98)easing

平滑过渡用于颜色和背景色的变化。 · hover状态下的微妙变换。

颜色与背景色在0.2s内平滑过渡。 · 即时响应。

08

组件

  • button 实心黑色或白色,配1px边框,使用大写等宽字体文本。
  • card 严格带边框的矩形容器,搭配简洁的排版。
  • chip 小型大写标签,使用实心背景色。
  • input 极简风格,无样式或带微妙边框。
  • hero 超大摄影背景,配以粗体、左对齐的排版。

09

文案语气与禁用清单

  • 语气 沉静自信、高端且怀旧。
  • 标题风格 粗体,紧凑字距,小写。
  • 按钮文案 大写,等宽字体,高度易读。
  • 不要使用圆角——截图显示所有按钮和容器均为利落的直角边缘。
  • 不要使用彩色背景——截图显示以白色和黑色为主的单色调色板。
  • 不要使用斜体文本——截图显示所有标题和正文排版均为直立字体。
  • 不要在文本上使用投影——截图显示文本为平实、高对比度,直接置于背景上。
  • 不要使用手写或花体字体——截图显示使用简洁的humanist-sans和monospace字体类别。
  • 不要对按钮使用小写文本——截图显示所有行动号召元素均使用严格的大写文本。
  • 避免: 杂乱的布局
  • 避免: 繁复的渐变
  • 避免: 圆角
  • 避免: Comic Sans字体
  • 避免: 霓虹色

10

包内真实截图

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

11

System Prompt

为经典硬件设计一个高端电子商务界面。基础是严格的单色色调,由纯净的白色和深邃的黑色构成,营造画廊般的氛围,让多彩的产品得以凸显。排版上,标题使用humanist-sans字体,行动号召使用等宽字体,大型展示文本采用紧凑字距。布局严谨且基于网格,使用利落的1px边框而非柔和阴影或圆角,以保持精致的结构美感。避免杂乱和装饰性渐变;焦点应始终保留在简洁的排版和高质量的产品摄影上。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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