OpenDesign·你的设计资产库

网页参考

Nvidia

为领先的硬件和AI基础设施品牌打造的简洁技术设计。

SaaSCleanProductPremiumBold Typography

封面待补录,可通过原站查看设计。

01

设计气质 DNA

技术创新性能工业全球

一家高端工程公司的企业门户

02

色彩

#76B900Accent
#000000Ink
#666666Ink soft
#FFFFFFBG
#EEEEEEBG soft
rgba(0,0,0,0.1)Line

黑色文字搭配白色背景,使用单一高饱和度的绿色作为强调色。

03

字体

humanist-sans

  • display48px · 700
  • heading24px · 700
  • body16px · 400

04

间距

4px
8px
12px
16px
20px
24px
30px
48px

遵循4px的固定倍数

05

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

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

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

rgba(0, 0, 0, 0.3) 0px 0px 5px 0px · rgba(0, 0, 0, 0.16) 0px 1px 5.88px 0.12px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

标准的12栏网格布局,内容居中

07

动效与交互

200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

滚动时淡入 · 平滑的hover过渡效果

交互元素在hover时产生颜色和阴影变化 · 微妙的缩放或颜色反馈

08

组件

  • button 实心绿色背景搭配黑色文字,或绿色描边搭配黑色文字
  • card 白色背景,浅灰色边框,微妙阴影
  • chip 小型大写文字标签
  • input 带浅色边框的标准表单字段
  • hero 全宽图片背景,叠加文字和行动号召按钮

09

文案语气与禁用清单

  • 语气 权威、技术化且具有前瞻性
  • 标题风格 粗体、直接且信息明确
  • 按钮文案 清晰、以行动为导向,通常使用实心绿色按钮
  • 不要使用圆角——截图显示按钮和卡片采用2px的直角
  • 不要使用多种亮色强调色——截图显示仅使用NVIDIA绿作为主强调色
  • 不要使用装饰性字体——截图显示清晰、功能性的humanist sans-serif字体
  • 不要使用深色模式——截图显示以白色背景和黑色文字为主
  • 不要使用复杂的渐变——截图显示使用纯色和摄影背景
  • 不要使用小而密集的文字块——截图显示使用充足的行高和间距
  • 避免: 俏皮语言
  • 避免: 过于随意的语气
  • 避免: 过度装饰

10

包内真实截图

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

11

System Prompt

这是一个为领先的硬件和AI公司打造的简洁、技术化且高端的网站。它使用了由黑色(#000000)和白色(#FFFFFF)构成的高对比度配色方案,并搭配单一的高饱和度绿色强调色(#76B900)。字体采用清晰的humanist sans-serif类别。布局是标准的12栏网格,留有充足的空白。关键禁忌:避免圆角,避免多种强调色,避免装饰性字体,避免深色模式,避免复杂渐变,避免密集的文字块。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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