OpenDesign·你的设计资产库

网页参考

Column

一家为构建和资助新型金融产品而设立的全国性特许银行。

FintechBank

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

01

设计气质 DNA

金融科技银行基础设施API扩展

银行领域的Stripe

02

色彩

#121620Ink
#7C7F88Ink soft
#F6F6F8BG
#FFFFFFBG soft
#7EADFFMuted
rgba(227, 228, 232, 1)Line

简洁、高对比度的中性色，搭配单一的蓝色点缀。

03

字体

geometric-sans · monospace

  • display56px · 500
  • body16px · 400

04

间距

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

8px 基础单位

05

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

sm · 3px
md · 8px
lg · 12px
pill · 999px

1px solid #E3E4E8

rgba(1, 24, 33, 0.05) 0px 0px 0px 1px · rgba(17, 26, 74, 0.1) 0px 1px 3px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

12列网格

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.76, 0, 0.24, 1)easing

微妙的透明度渐隐。

微妙的颜色过渡。 · 即时响应。

08

组件

  • button 极简主义，采用文字按钮或幽灵按钮。
  • card 微妙阴影与边框。
  • chip 简单的圆角标签。
  • input 标准表单元素。
  • hero 标题与插图分栏布局。

09

文案语气与禁用清单

  • 语气 专业且权威。
  • 标题风格 简短、有力、以价值为导向。
  • 按钮文案 清晰直接。
  • 不要使用装饰性图案——截图显示的是一个干净的点状世界地图。
  • 不要使用厚重的投影——截图显示的是非常微妙的多层盒子阴影。
  • 不要使用斜体文字——截图只显示常规和粗体字重。
  • 不要使用多种点缀色——截图显示的是基于蓝色的调色板。
  • 不要使用圆角卡片——截图显示的是直角或略带圆角的边角。
  • 不要使用过于活泼的字体——截图显示的是专业的几何无衬线字体。
  • 避免: 术语
  • 避免: 模糊的承诺
  • 避免: 复杂的语言

10

包内真实截图

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

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

11

System Prompt

设计是一个面向开发者的高端金融科技平台。关键颜色为浅灰色（#F6F6F8）背景、深海军蓝（#121616）文本和亮蓝色（#7EADFF）点缀。字体使用几何无衬线字体用于标题和正文，使用等宽字体用于代码片段。关键禁忌包括：避免厚重的投影，避免活泼的字体，避免复杂的装饰元素，避免低对比度，避免明亮或霓虹色，以及避免过度圆润的形状。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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