OpenDesign·你的设计资产库

网页参考

Rainbow

一款富有表现力且安全的加密货币钱包，优先考虑趣味性和易用性。

CryptoWalletColorful

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

01

设计气质 DNA

平易近人色彩丰富web3令人愉悦安全

一个用于多彩加密世界的、有趣的日常钱包

02

色彩

#FF8A00Accent
#000000Ink
#777885Ink soft
#F1F3F6BG
#FFFFFFBG soft
rgba(15,16,26,0.1)Line

一个充满活力、多色的调色板，以干净、浅色的中性背景为基调，使用饱和渐变和3D元素来传达趣味性和易用性。

03

字体

geometric-sans

  • display72px · 900
  • headline48px · 800
  • body20px · 400

标题使用粗重的圆角几何无衬线字体，以最大化亲和力 · 大号文本使用紧凑的字距，营造大胆、现代的视觉效果 · 正文使用干净、易读的无衬线字体，以保持可读性

04

间距

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

在大型、圆角的UI元素内使用充裕的内边距，以保持宽敞、整洁的感觉。

05

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

sm · 12px
md · 24px
lg · 32px
pill · 999px

无可见的硬边框；深度通过柔和的阴影和3D元素上的内发光来实现。

inset 0px 0.48px 0.87px -1px rgba(255, 255, 255, 0.59) · inset 0px 8px 14.4px -3px rgba(255, 255, 255, 0.4) · 0px 0.6px 0.6px -1.25px rgba(15, 16, 26, 0.086) · 0px 2.29px 2.29px -2.5px rgba(15, 16, 26, 0.075)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

不对称的网格布局，包含浮动的3D元素和重叠的UI组件。

07

动效与交互

200msmicro
300mssmall
800msmedium
cubic-bezier(0.44, 0, 0.56, 1)easing

交互元素上的平滑hover过渡 · 按钮上微妙的缩放和颜色变化 · 布局暗示的3D物体浮动或视差效果

主按钮和导航链接上的平滑颜色和缩放过渡。 · 通过标准按钮按压状态提供即时视觉反馈。

08

组件

  • button 大型、圆角的药丸形按钮，带有鲜艳的渐变（橙色、粉色）和柔和的内发光，并配有插画风格的3D图标。
  • card 圆角矩形容器，带有柔和的阴影和偶尔的渐变背景，用于展示功能。
  • chip 使用较少；信息徽章和功能描述中的内联链接。
  • input 干净、内边距良好的输入框，具有圆角，通常嵌套在更大的功能卡片UI内。
  • hero 一个大型、富有表现力的首屏区域，包含巨大的3D资产、超大号的粗体字体和醒目的CTA按钮。

09

文案语气与禁用清单

  • 语气 热情、有趣且令人安心。
  • 标题风格 直接、以行动为导向且富有表现力，使用大型、粗体字体。
  • 按钮文案 清晰且以行动为导向（例如，“下载 Rainbow 扩展”），以大型、友好的药丸形按钮呈现。
  • 不要使用尖角——截图显示的是大型、圆角的药丸形状（32px+ 半径）
  • 不要使用单一的扁平强调色——截图显示CTA上使用了鲜艳的多色渐变（橙色、粉色）
  • 不要使用纤细、精致的字体——截图显示的是粗重、大胆的几何无衬线字体
  • 不要使用沉重、深色的背景——截图显示的是以浅色、明亮的调色板为主（白色、浅灰色）
  • 不要使用扁平的2D图标——截图突出展示了光滑的3D插画元素
  • 不要使用严格、刚性的网格——截图显示的是一个富有表现力、略带不对称的布局，包含浮动元素
  • 避免: 过于专业的术语
  • 避免: 企业式的刻板
  • 避免: 沉闷或单色的视觉语言
  • 避免: 具有攻击性或紧迫感的措辞

10

包内真实截图

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

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

11

System Prompt

定位：一个有趣且易于使用的加密货币钱包，专为日常使用而设计。关键十六进制颜色：#FF8A00（橙色 CTA），#FF54BB（粉色 CTA），#000000（墨色），#F1F3F6（背景）。字体类别：粗体几何无衬线用于展示，干净的几何无衬线用于正文。关键禁忌：不要使用尖角；不要使用单一的扁平强调色；不要使用纤细、精致的字体；不要使用沉重、深色的背景；不要使用扁平的2D图标；不要使用严格、刚性的网格。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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