OpenDesign·你的设计资产库

网页参考

Nintendo

面向游戏硬件和软件的、干净且图像优先的产品展示。

GamingBrand
Nintendo 网站截图

01

设计气质 DNA

游戏任天堂趣味家庭娱乐

一个展示缤纷产品的活力玩具店橱窗。

02

色彩

#E60012Accent
#484848Ink
#727272Ink soft
#FFFFFFBG
#C8C8C8Muted
rgba(200, 200, 200, 1)Line

纯净的白色画布让缤纷的游戏艺术作品脱颖而出,并以标志性的任天堂红色作为锚点。

03

字体

humanist-sans

  • display56px · 600

04

间距

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

标准4px网格,卡片采用宽松的内边距。

05

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

sm · 4px
md · 12px
lg · 12px
pill · 999px

1px solid #C8C8C8

rgba(72, 72, 72, 0.15) 0px 4px 16px 0px · rgba(0, 0, 0, 0.07) 0px 2px 8px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽英雄图,后接多列卡片网格。

07

动效与交互

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

内容区域在滚动时淡入。 · 卡片和按钮的悬停状态进行平滑过渡。

交互元素在悬停时有微妙的抬升或颜色变化。 · 立即响应,并提供微妙的缩放反馈。

08

组件

  • button 带有红色点缀的药丸形轮廓按钮,主要操作使用实心红色。
  • card 图像密集的圆角卡片,无阴影。
  • chip 用于类别筛选的小型圆角方形图标。
  • input 带有圆角和放大镜图标的搜索栏。
  • hero 全出血、高冲击力的插图或截图,占据整个视口宽度。

09

文案语气与禁用清单

  • 语气 热情、友好且适合家庭。
  • 标题风格 醒目、描述性强且以行动为导向。
  • 按钮文案 清晰、紧迫且具有鼓励性。
  • 不要在主界面使用深色背景——截图显示的是干净的白色(#FFFFFF)背景。
  • 不要使用厚重的投影——截图显示的是微妙、柔和的阴影(0px 4px 16px 0px)。
  • 不要所有元素都使用尖锐的圆角——截图显示卡片具有一致的12px border-radius。
  • 不要在英雄区使用宽幅多列布局——截图显示的是全出血、焦点单一的英雄图。
  • 不要为主要按钮使用柔和、低对比度的颜色——截图显示的是醒目的红色(#E60012)点缀。
  • 不要在标题中使用衬线字体——截图显示的是干净的人文无衬线字体。
  • 避免: 过度使用术语
  • 避免: 缺乏上下文的激进或阴暗图像
  • 避免: 杂乱的布局

10

包内真实截图

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

11

System Prompt

这是任天堂官网主页,一个面向游戏硬件和软件的、干净且图像优先的产品展示。它采用白色(#FFFFFF)背景,让缤纷的游戏艺术作品脱颖而出,并以标志性的任天堂红色(#E60012)点缀作为锚点。字体使用干净的人文无衬线字体,并为标题使用粗体字重。关键禁忌:不要在主界面使用深色背景;不要使用厚重的投影;不要在卡片上使用尖锐的圆角。布局为全出血英雄图,后接多列卡片网格,优先考虑视觉内容而非文字。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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