OpenDesign·你的设计资产库

网页参考

Opal Camera Inc.

一个高端网络摄像头品牌,将温暖的生活方式摄影与清晰、极简的产品设计融为一体。

ProductHardwareMinimal
Opal Camera Inc. 网站截图

01

设计气质 DNA

精准高端极简温度清晰

一个高端硬件工作室,以 Apple 般的清晰与温度,展示尖端科技。

02

色彩

#FFDB01Accent
#000000Ink
#FAFAFABG
#959595Muted
rgba(0,0,0,0.1)Line

以纯净的白色和黑色为基底,搭配单一的亮黄色强调色,形成高对比度。

03

字体

geometric-sans

  • display56px · 500
  • h140px · 500
  • body16px · 400

标题使用紧凑的负字距。 · 导航项尺寸较小,采用大写或混合大小写形式。 · 品牌标识在某些区域会放大呈现。

04

间距

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

充足的 padding 和垂直间距,营造出通透、高端的布局。

05

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

sm · 4px
md · 8px
lg · 20px
pill · 9999px

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.05) 0px 10px 30px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

非对称布局,以大幅生活方式摄影平衡简洁的产品网格。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing

UI 状态变化采用平滑过渡(0.2s)。 · 布局切换采用更缓慢、更具戏剧性的显现动画(0.8s)。 · 可展开区域使用变换和高度动画。

细微的颜色和背景变化,配合平滑的缓动效果。 · 状态立即改变,使用标准指针光标。

08

组件

  • button 高对比度的药丸形按钮(黄色配黑色文字),或透明底色配细微边框。
  • card 简洁的产品卡片,边框极少,留白充足。
  • chip 不适用
  • input 简单的通讯订阅输入框,配以箭头图标。
  • hero 全出血的生活方式摄影,配以醒目、左对齐的排版。

09

文案语气与禁用清单

  • 语气 自信、极简且高端。
  • 标题风格 简短、有力且聚焦产品(例如,'首款为笔记本电脑设计的网络摄像头。')。
  • 按钮文案 直接且带有交易性质(例如,'现已开售,售价 $99。')。
  • 避免使用多种强调色——截图显示只有一种主导的黄色。
  • 避免使用复杂的渐变——截图显示为纯色和摄影图像。
  • 避免使用带重度阴影的圆角卡片——截图使用的是细微边框。
  • 避免使用装饰性手写体或衬线字体——截图使用的是简洁的几何无衬线字体。
  • 避免在布局中堆积过多元素——截图显示有充足的留白。
  • 避免使用鲜艳的霓虹色——截图使用的是克制的黑、白、黄配色。
  • 避免: 过度的技术术语
  • 避免: 杂乱的布局
  • 避免: 过多的装饰元素

10

包内真实截图

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

11

System Prompt

设计一个高端硬件产品网站,专注于清晰的排版、充足的留白和高质量的摄影。使用极简的黑色 (#000000)、白色 (#FAFAFA) 和单一的亮黄色强调色 (#FFDB01) 配色方案。字体使用几何无衬线字体 (Roobert),标题采用紧凑的字距。布局应通透,包含大幅生活方式图片和清晰的产品照片。关键禁忌:不要使用多种强调色,避免复杂的渐变,并通过避免装饰元素或杂乱的布局来保持严格的极简主义。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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