OpenDesign·你的设计资产库

网页参考

Pad Dotincorp

一个清洁、专业的触觉盲文显示设备产品展示。

HardwareProductCleanCalmRefined
Pad Dotincorp 网站截图

01

设计气质 DNA

无障碍设计触觉盲文辅助技术硬件

一个精致的硬件产品页面，感觉像一个清洁、高端的技术文档网站。

02

色彩

#FF5A2FAccent
#1F1F1FInk
#333333Ink soft
#FFFFFFBG
#F5F5F5BG soft
#707070Muted
rgba(229, 231, 235, 1)Line

高对比度与干净留白，以突出硬件产品。

03

字体

humanist-sans

  • display56px · 700
  • heading32px · 700
  • body15px · 600

所有文本使用人文主义无衬线字体。 · 正文基准字号为15px。 · 使用粗体（600-700）进行强调和标题。

04

间距

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

主要布局区块间统一使用40px和60px间距。

05

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

sm · 8px
md · 18px
lg · 20px
pill · 100px

1px solid rgba(229, 231, 235, 1)

0px 4px 10px rgba(0, 0, 0, 0.25) · 0px 5.87px 17.6px rgba(25, 33, 61, 0.06)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽主视觉横幅，后接多栏功能网格。

07

动效与交互

150msmicro
300mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

内容过渡使用透明度淡入淡出 · 悬停状态使用变换效果

交互元素在悬停时发生细微的透明度或背景色变化。 · 所有交互元素使用标准指针光标。

08

组件

  • button 带有高饱和度橙色背景和圆角的主按钮。
  • card 用于功能展示的、带有细微阴影和圆角的清洁卡片。
  • hero 全宽摄影主视觉，文字居中叠加，底部采用圆角。

09

文案语气与禁用清单

  • 语气 专业、信息丰富且清晰。
  • 标题风格 直接且描述性，聚焦产品名称及其主要优势。
  • 按钮文案 清晰且行动导向，使用高对比度颜色。
  • 不要使用装饰性或手写字体——截图显示的是清洁的人文主义无衬线字体。
  • 不要以深色背景作为主画布——截图显示的是以白色为主的背景。
  • 不要使用多种颜色——截图显示的是严格的白、黑及单一橙色点缀的配色。
  • 不要对重要文本使用细字体——截图显示的是600和700的字重。
  • 不要在卡片和按钮上使用尖锐的方形圆角——截图显示的是圆角（18px-20px）。
  • 不要使用复杂或繁忙的背景图案——截图显示的是纯色或清洁的摄影背景。
  • 避免: 非正式语言
  • 避免: 未经解释的过于技术化的术语
  • 避免: 杂乱的布局

10

包内真实截图

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

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

11

System Prompt

此设计是一个针对辅助技术设备的清洁、专业的产品展示。它使用高对比度配色：白色（#FFFFFF）、近黑色（#1F1F1F）和单一高饱和度橙色点缀（#FF5A2F）。字体为基准15px的人文主义无衬线字体，标题和导航使用粗体（600-700）。关键交互效果细腻，悬停时使用0.3s过渡。关键约束包括：保持以白色为主的背景，主要表面使用圆角（18px-20px），并避免装饰性字体或繁忙的布局。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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