提示词
You are an experienced UI designer embracing modern, minimalistic design, shadows, glass, and soft colors.
Your role is to create a professional, beautiful mockup that is ready for delivery based on these requirements:
<requirements>
## 1. Overall Style & Visual Language
This interface represents a premium, modern fintech / crypto trading dashboard using a dark theme.
The visual language combines **soft neumorphism**, and **luxury Web3 aesthetics**.
Core characteristics:
- Warm gold/orange accent highlights
- Monochromatic color palette with minimalistic effects and shadows
- Card-based layout with depth and subtle backgrounds
- Minimal borders, separation via shadows or light backgrounds
Target perception:
- Secure
- Professional
- High-end / institutional-grade
- Optimized for experienced traders
---
## 2. Layout Structure
### Global Layout
- Desktop-first dashboard
- Output proportions: 3:2
- Three main regions:
1. Top navigation bar (horizontal)
2. Left sidebar navigation (vertical)
3. Main content area (multi-column grid of cards)
Spacing is generous, prioritizing clarity and visual breathing room.
---
## 3. Top Navigation Bar
- Height: 72px
- Left:
- Brand logo text "Mevolut"
- Stylized "M"
- Gold/orange accent
- Center:
- Navigation links: Dashboard, Security, Referral, Trading Fees, API management
- Right:
- Order link
- Primary CTA: “Deposit” (gold pill button)
- User avatar (circular)
- Theme toggle (moon icon)
Typography:
- Clean sans-serif
- Medium weight
- White primary text, muted gray inactive states
---
## 4. Left Sidebar Navigation
- Width: 240px
- Background: near-black
- Vertical navigation items with icons:
- Dashboard (active)
- Security
- Referral
- Trading Fees
- API management
- Bottom-aligned:
- Settings
Active item:
- Subtle background highlight
- Slight background tint
- Rounded container
Icons:
- Outline style
- Gold accent on active state
---
## 5. Main Content Area
### 5.1 User Overview Card
- Large rounded card at top
- Left:
- Circular avatar
- Greeting text (“Hello…”)
- User name
- Inline info blocks:
- UID (copy icon)
- Identity verification status
- Security level
- Time zone
- Last login timestamp
- Right:
- “Hide info” toggle
Style:
- Subtle inner shadows
---
### 5.2 Deposit / Buy Card
- Medium-sized card
- Title text explaining deposit options
- Two action rows:
- Deposit (dollars or crypto)
- Buy stocks (local currency)
- Each row:
- Icon
- Label
- Arrow action button (gold accent)
---
### 5.3 Total Asset Card
- Displays USD balance and USD equivalent
- Large, faded Dollar symbol watermark in background
- Action tabs:
- Buy stocks
- Deposit
- Withdraw
- Numeric values are large
---
### 5.4 VIP Level Card
- Shows current VIP level
- Spot and futures fee rates
- Progress bar for token holdings
- “View more” link
Progress bar:
- Rounded
- Dark background track
---
### 5.5 Current Holdings Table
- Card containing a table layout
- Columns:
- Coin (icon + name)
- Price
- 24h Change
- 4h Trend (sparkline)
- Actions (Deposit, Withdraw, Trade)
Sparklines:
- Green for positive trend
- Red for negative trend
Hover:
- Subtle background highlight per row
---
### 5.6 Affiliate Program Card
- Promotional card
- Gold coin illustration
- Short description and CTA button (“Apply now”)
---
### 5.7 Information / News Card
- Vertical list of announcements
- Headline + timestamp
- “View more” link at top
---
## 6. Color Palette
- Primary background: deep charcoal / black
- Card surfaces: slightly lighter
- Accent color: warm gold
- Text hierarchy:
- White (primary)
- Muted gray (secondary)
- Dark gray (disabled)
- Status colors:
- Green for positive
- Red for negative
---
## 7. Effects & Interaction
- Rounded corners throughout (sm)
# Design tokens:
{
// Global theme definition
"theme": {
"mode": "dark",
"style": [
"soft-neumorphism",
"premium-fintech"
]
},
// Layout measurements and structure
"layout": {
"type": "desktop-dashboard",
"grid": "three-column",
"sidebarWidth": 240,
"topbarHeight": 68,
"contentPadding": 24
},
// Color system
"colors": {
"background": "#0B0D10", // Main app background
"primaryAccent": "#F5A623", // Gold/orange highlight
"secondaryAccent": "#FFB547",
"textPrimary": "#FFFFFF",
"textSecondary": "#B0B3B8",
"textMuted": "#6B6F76",
"success": "#22C55E",
"danger": "#EF4444"
},
// Typography scale
"typography": {
"fontFamily": "SF Pro, system-ui, sans-serif",
"weights": {
"heading": 600,
"body": 400,
"numeric": 500
},
"sizes": {
"h1": 24,
"h2": 20,
"h3": 16,
"body": 14,
"caption": 12
}
},
// Core UI components
"components": {
"card": {
"borderRadius": 16,
"shadow": "0 20px 40px rgba(0,0,0,0.4)",
"border": "none",
"background": "#14171C",
},
"button": {
"primary": {
"textColor": "#0B0D10",
"borderRadius": 999,
},
"secondary": {
"background": "transparent",
"textColor": "#F5A623"
}
},
"sidebar": {
"background": "#0E1014",
"itemRadius": 12,
"iconStyle": "outline"
},
"table": {
"rowHeight": 56,
"divider": "subtle",
"hoverHighlight": true,
"sparkline": {
"positiveColor": "#22C55E",
"negativeColor": "#EF4444"
}
},
"progressBar": {
"height": 6,
"radius": 999,
"fillColor": "#22C55E",
"backgroundColor": "#2A2E35"
}
},
// Icon system
"icons": {
"style": "outline",
"size": 18,
"colorInactive": "#6B6F76",
"colorActive": "#F5A623"
}
}
</requirements>译文
您是一位经验丰富的UI设计师，拥抱现代、极简主义设计，阴影、玻璃和柔和的色彩。
您的任务是创建一个专业、美观的mockup，以下是基于这些要求：
<requirements>
## 1. 整体风格与视觉语言
此界面代表了一个使用深色主题的顶级现代金融科技/加密交易仪表板。
视觉语言结合了**柔和的拟态设计**和**奢华的Web3美学**。
核心特征：
- 温暖的金色/橙色强调突出
- 单色调色彩方案，具有极简主义效果和阴影
- 基于卡的布局，具有深度和微妙的背景
- 最小边框，通过阴影或浅色背景进行分隔
目标感知：
- 安全
- 专业
- 高端/机构级
- 适用于经验丰富的交易者
---
## 2. 布局结构
### 全局布局
- 首先考虑桌面仪表板
- 输出比例：3:2
- 三个主要区域：
1. 顶部导航栏（水平）
2. 左侧边栏导航（垂直）
3. 主要内容区域（多列网格的卡片）
间距宽敞，优先考虑清晰度和视觉呼吸空间。
---
## 3. 顶部导航栏
- 高度：72px
- 左侧：
- 品牌logo文字“Mevolut”
- 风格化的“M”
- 金色/橙色强调
- 中间：
- 导航链接：仪表板、安全、推荐、交易费、API管理
- 右侧：
- 订单链接
- 主要CTA：“存款”（金色药丸按钮）
- 用户头像（圆形）
- 主题切换（月亮图标）
字体：
- 清洁的无衬线字体
- 中等重量
- 白色为主要文字，哑光灰色为非活动状态
---
## 4. 左侧边栏导航
- 宽度：240px
- 背景：深黑色
- 垂直导航项带有图标：
- 仪表板（活动）
- 安全
- 推荐
- 交易费
- API管理
- 底部对齐：
- 设置
活动项：
- 微妙的背景高亮
- 轻微的背景色调
- 圆角容器
图标：
- 轮廓风格
- 活动状态下的金色强调
---
## 5. 主要内容区域
### 5.1 用户概览卡
- 顶部的大圆角卡片
- 左侧：
- 圆形头像
- 欢迎文字（“你好…”）
- 用户名
- 内联信息块：
- UID（复制图标）
- 身份验证状态
- 安全级别
- 时区
- 最后登录时间戳
- 右侧：
- “隐藏信息”切换
风格：
- 微妙的内部阴影
---
### 5.2 存款/购买卡
- 中等大小的卡片
- 标题文字解释存款选项
- 两个操作行：
- 存款（美元或加密货币）
- 购买股票（本地货币）
- 每行：
- 图标
- 标签
- 箭头动作按钮（金色强调）
---
### 5.3 总资产卡
- 显示美元余额和美元等值
- 背景中带有大型褪色美元符号水印
- 动作标签：
- 购买股票
- 存款
- 提款
- 数字值很大
---
### 5.4 VIP等级卡
- 显示当前VIP等级
- 即时和期货费率
- 代币持有量的进度条
- “查看更多”链接
进度条：
- 圆形
- 深色背景轨道
---
### 5.5 当前持仓表
- 包含表格布局的卡片
- 列：
- 代币（图标+名称）
- 价格
- 24小时变化
- 4小时趋势（火花线）
- 操作（存款、提款、交易）
火花线：
- 正面趋势为绿色
- 负面趋势为红色
悬停：
- 每行微妙的背景高亮
---
### 5.6 附属计划卡
- 推广卡片
- 金币插图
- 简短描述和CTA按钮（“现在申请”）
---
### 5.7 信息/新闻卡
- 垂直的公告列表
- 标题+时间戳
- 顶部“查看更多”链接
---
## 6. 色彩方案
- 主要背景：深炭黑/黑色
- 卡表面：略浅
- 强调颜色：温暖的金色
- 文字层次：
- 白色（主要）
- 哑光灰色（次要）
- 深灰色（禁用）
- 状态颜色：
- 正面为绿色
- 负面为红色
---
## 7. 特效与交互
- 全部采用圆角（sm）
# 设计令牌：
{
// 全局主题定义
"theme": {
"mode": "dark",
"style": [
"soft-neumorphism",
"premium-fintech"
]
},
// 布局测量和结构
"layout": {
"type": "desktop-dashboard",
"grid": "three-column",
"sidebarWidth": 240,
"topbarHeight": 68,
"contentPadding": 24
},
// 颜色系统
"colors": {
"background": "#0B0D10", // 主应用程序背景
"primaryAccent": "#F5A623", // 金色/橙色强调
"secondaryAccent": "#FFB547",
"textPrimary": "#FFFFFF",
"textSecondary": "#B0B3B8",
"textMuted": "#6B6F76",
"success": "#22C55E",
"danger": "#EF4444"
},
// 字体比例
"typography": {
"fontFamily": "SF Pro, system-ui, sans-serif",
"weights": {
"heading": 600,
"body": 400,
"numeric": 500
},
"sizes": {
"h1": 24,
"h2": 20,
"h3": 16,
"body": 14,
"caption": 12
}
},
// 核心UI组件
"components": {
"card": {
"borderRadius": 16,
"shadow": "0 20px 40px rgba(0,0,0,0.4)",
"border": "none",
"background": "#14171C",
},
"button": {
"primary": {
"textColor": "#0B0D10",
"borderRadius": 999,
},
"secondary": {
"background": "transparent",
"textColor": "#F5A623"
}
},
"sidebar": {
"background": "#0E1014",
"itemRadius": 12,
"iconStyle": "outline"
},
"table": {
"rowHeight": 56,
"divider": "subtle",
"hoverHighlight": true,
"sparkline": {
"positiveColor": "#22C55E",
"negativeColor": "#EF4444"
}
},
"progressBar": {
"height": 6,
"radius": 999,
"fillColor": "#22C55E",
"backgroundColor": "#2A2E35"
}
},
// 图标系统
"icons": {
"style": "outline",
"size": 18,
"colorInactive": "#6B6F76",
"colorActive": "#F5A623"
}
}
</requirements>
桃子AI画廊Tao Image Gallery