OpenDesign·你的设计资产库

网页参考

Cash

黑底首屏以手机应用界面居中,左右分布价值标题和补充说明,荧光绿强调行动。

FintechApp UIDark ModeBold TypographyClean
Cash 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 手机界面连接左右叙事
  • 绿色只在标识与关键操作上集中使用

适合什么项目

  • 消费应用介绍
  • 移动金融产品展示

如何带进你的设计

  • 用三列思路安排价值、产品、行动,再为窄屏改成顺序阅读
  • 采用自有品牌强调色

使用边界

  • 金融数字仅是截图内容,不构成产品数据或业务建议
  • 仅依据已检查的历史预览;未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写,尚未经过人工终审;不代表原作者规范或使用授权。

01

设计气质 DNA

金融科技应用金融即时现代

一个流畅、自信的金融科技平台,融合了深色奢华感与充满活力、易于获取的绿色能量。

02

色彩

#00E013Accent
#000000Ink
#FFFFFFBG soft
#F5F5F5BG quiet
#999999Muted
rgba(0,0,0,0.1)Line

在深黑色和鲜亮霓虹绿之间形成极端高对比度,并使用纯净白色作为卡片表面。

03

字体

humanist-sans · monospace

  • display56px · 400

04

间距

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

基于一致的 4px 基础,段落间距采用充裕的垂直内边距(90px)。

05

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

sm · 4px
md · 20px
lg · 48px
pill · 999px

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

rgba(0,0,0,0.1) 0px 8px 20px 0px · rgba(0,0,0,0.1) 0px 24px 48px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

一个对称的分屏首屏,内容居中,随后过渡为堆叠式移动布局。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

流畅的颜色过渡 · 微妙的变换位移

交互元素上出现微妙的亮度或缩放变化。 · 通过颜色反转或轻微压缩提供即时的视觉反馈。

08

组件

  • button 圆角药丸形状,主要使用霓虹绿配黑色文字,或黑色配白色文字。
  • card 大型、圆角的白色卡片,漂浮在深色背景上,用于展示应用界面。
  • chip 简单的矩形标签或状态指示器。
  • input 极简、无边框或带微妙边框的输入框,专注于清晰度。
  • hero 分屏布局,左侧是加粗、左对齐的文字,右侧是动态、居中的应用原型图。

09

文案语气与禁用清单

  • 语气 自信、现代且直接。
  • 标题风格 简洁有力的短语,强调便捷与颠覆性。
  • 按钮文案 以行动为导向,带有方向箭头,使用高对比度色彩。
  • 不要使用柔和、粉彩的配色方案——截图显示的是高对比度的黑色和鲜亮霓虹绿。
  • 不要使用复杂的衬线字体——截图显示的是简洁、现代的无衬线字体类别。
  • 不要用密集文字使布局显得拥挤——截图显示了充裕的留白和清晰的层次。
  • 不要使用微妙、低对比度的边框——截图显示了大胆、清晰的表面和圆角。
  • 不要使用传统的、方正的按钮形状——截图显示的是高度圆角的、药丸形的行动号召按钮。
  • 不要用深灰色代替纯黑色——截图使用的是纯正、深邃的 #000000 背景。
  • 避免: 复杂术语
  • 避免: 拥挤的布局
  • 避免: 单调或柔和的配色

10

包内真实截图

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

11

System Prompt

这是一个采用深色模式美学的高对比度金融科技应用着陆页。调色板以深黑色(#000000)和鲜亮霓虹绿(#00E013)为锚点,应用界面表面使用纯净白色。字体依赖于现代、简洁的无衬线字体类别。关键约束:保持大胆的高对比度美学,为首要操作使用药丸形按钮,并确保布局保持宽敞、整洁且留白充裕。避免使用任何衬线字体、柔和的粉彩色或与流畅、现代品牌身份冲突的方正界面元素。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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