精选 · 开放 · 免费

Uniswap

一个充满趣味且易于访问的去中心化交易平台，拥有干净、高对比度的设计。

01

设计气质 DNA

一个干净、友好的金融科技界面，感觉像现代银行应用，但具有加密原生美学。

02

色彩

以明亮、干净的基底色为主，搭配鲜艳的洋红色点缀和高对比度文本。

03

字体

Humanist Sans-Serif

• display52px · 500
• headline36px · 500
• body16px · 485
• label14px · 485
• small18px · 485

所有文本使用系统字体栈（Basel, -apple-system, system-ui, sans-serif）。 · 展示标题大小设为52px，字重为500。 · 正文文本大小设为16px，字重为485。 · 大型展示文本使用-1px的负字间距。

04

间距

整体采用4px基础网格，常用间距为8px、16px和24px。

05

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

1px solid rgba(19, 19, 19, 0.12)

rgba(19, 19, 19, 0.04) 0px 6px 12px -3px · rgba(19, 19, 19, 0.03) 0px 2px 5px -2px

06

布局

桌面端为单列居中布局，移动端扩展为全宽布局。

07

动效与交互

微交互使用0.1秒缓入缓出过渡。 · 变换和透明度变化使用0.08秒缓入缓出过渡。 · 交互元素使用0.4秒 cubic-bezier(0.34, 1.56, 0.64, 1) 弹簧动画。

交互元素在悬停时进行微妙的颜色偏移或背景透明度变化。 · 按钮和可点击卡片在点击时产生轻微的缩放或变换效果。

08

组件

• button 药丸形按钮，圆角32px，填充洋红色点缀色。
• card 卡片圆角20px，内边距12px，带有柔和阴影或浅灰色背景。
• chip 小型药丸形徽章，背景颜色浅，文本颜色与其类别匹配。
• input 大型圆角输入框，圆角12px，浅灰色背景。
• hero 一个突出的居中主视觉区域，包含52px大标题和主要的交换组件。

09

文案语气与禁用清单

• 语气 友好、易用、直接，让复杂的DeFi概念变得易于理解。
• 标题风格 大、加粗、清晰，通常使用一句有力的语句。
• 按钮文案 以行动为导向且突出，使用洋红色点缀色吸引注意力。

• 不要使用尖锐的小圆角——截图显示卡片和按钮的圆角在12px到32px之间。
• 不要使用深色背景作为主要画布——截图显示以白色（#FFFFFF）和浅灰色（#F9F9F9）为主的色板。
• 不要在整个界面使用高对比度的深色模式——截图显示的是带有高对比度文本的明亮主题。
• 不要为标题使用纤细、浅色的字体——截图显示52px标题使用500字重。
• 不要使用多种主色——截图显示仅使用一种主要的洋红色（#FF37C7）作为点缀色。
• 不要使用僵硬、过度依赖网格且带有粗边框的布局——截图显示使用柔和阴影和圆角进行视觉分隔。
• 避免: 充斥行话的语言
• 避免: 攻击性的营销语调
• 避免: 密集的文本块

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko