OpenDesign·你的设计资产库

网页参考

Copilot Money

一款高端的个人理财应用，将账户、消费与投资汇总至单一、美观且有序的视图中。

FintechDark ModeCleanPremiumProductivity
Copilot Money 网站截图

01

设计气质 DNA

个人理财财富追踪极简主义井然有序

一个时尚、暗色主题的个人财富管理驾驶舱

02

色彩

#1C6CFFAccent
#FFFFFFInk
#11263BInk soft
#000F24BG
#F5F7FABG soft
#597CAAMuted
rgba(0,0,0,0.07)Line

深海军蓝暗色模式，搭配清晰的白色字体与用于主要操作的活力蓝色强调色

03

字体

geometric-sans · humanist-sans · sans-serif

  • display80px · 600
  • heading32px · 500
  • body16px · 400

标题文字采用紧凑字距以增强视觉冲击 · 正文保持舒适的行高以提升可读性 · 数字数据采用统一字重以建立视觉层次

04

间距

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px

基于 4px 的统一网格系统，留有充足空白以营造高级感

05

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

sm · 8px
md · 12px
lg · 16px
xl · 24px
pill · 999px

使用低透明度的微妙 1px 边框来定义卡片

0 3px 5.4px -3px rgba(0,0,0,0.05) · 0 4px 10.4px -2px rgba(0,0,0,0.04) · 按钮与卡片内嵌阴影以增加深度感

06

布局

1200container
12columns
24pxgutter
768 / 1024breakpoints

灵活的网格布局，在移动端折叠为单列，卡片垂直堆叠

07

动效与交互

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

所有交互元素采用平滑过渡 · 分类胶囊标签带有轻柔的浮动动画 · 图表数据点带有微妙的动态变化

链接与按钮采用 0.4 秒的颜色过渡 · 通过微妙的缩放或透明度变化提供即时视觉反馈

08

组件

  • button 圆角胶囊形主按钮，蓝色背景配白色文字
  • card 浅色背景卡片，带有微妙阴影与圆角，置于深色区域之上
  • chip 分类标签，采用胶囊形状与活力色彩区分不同消费类别
  • input 简洁的输入框，带有微妙边框与圆角
  • hero 全宽深色背景，搭配大号字体、浮动 3D 分类胶囊标签与居中行动号召

09

文案语气与禁用清单

  • 语气 自信、清晰，让用户对财务组织感到安心
  • 标题风格 简短有力的陈述，强调简单性与掌控感
  • 按钮文案 以行动为导向，主行动号召为“立即开始”
  • 不要在深色区域使用亮白色背景——截图显示为深海军蓝背景（#000F24）配浅色文字
  • 不要为主行动号召使用多种强调色——截图显示所有主按钮均为单一蓝色（#1C6CFF）
  • 不要为标题使用装饰性字体——截图显示为干净的几何无衬线字体
  • 不要用密集的信息使界面显得拥挤——截图显示充足的留白和基于卡片的布局
  • 不要在交互元素上使用尖锐的角——截图显示按钮和卡片采用圆角（24px）
  • 不要为重要信息使用低对比度的文字——截图显示深色背景上的高对比度白色文字
  • 不要为卡片组件添加不必要的边框——截图使用微妙的阴影而非硬边框
  • 避免: 过于技术化的金融术语
  • 避免: 激进的销售语言
  • 避免: 复杂冗长的价值主张
  • 避免: 不清晰或模糊的功能描述

10

包内真实截图

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

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

11

System Prompt

这是一款用于个人理财追踪与财富管理的高端金融科技应用。其设计基因以深海军蓝暗色模式（#000F24）为主背景，搭配清晰的白色字体以实现高可读性。强调色为活力蓝色（#1C6CFF），用于“立即开始”等主要操作按钮。字体方面，标题使用几何无衬线字体，正文使用人文主义无衬线字体，以保持干净、现代的美感。布局采用充足留白、圆角（24px 半径）以及带有微妙阴影的卡片式组件。关键禁忌包括：切勿在深色区域使用亮白色背景，避免为行动号召使用多种强调色，不要使用装饰性字体，并保持元素间的充足间距。界面优先考虑清晰与有序，体现了产品“美观地组织”金融数据的核心价值主张。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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