菜单
金融交易类UI设计技能，基于GitHub TOP10开源项目的专业设计规范。涵盖深色主题系统、交易面板布局、K线图集成、订单簿组件、投资组合卡片、移动端适配。Use when the user asks to "美化界面", "UI优化", "界面设计", "交易界面", "深色主题", "组件设计", "页面改造".
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | trading-ui-design |
| description | 金融交易类UI设计技能，基于GitHub TOP10开源项目的专业设计规范。涵盖深色主题系统、交易面板布局、K线图集成、订单簿组件、投资组合卡片、移动端适配。Use when the user asks to "美化界面", "UI优化", "界面设计", "交易界面", "深色主题", "组件设计", "页面改造". |
基于 PancakeSwap、Binance Clone、RevS AI、Trading Dashboard React 等 TOP10 开源项目提炼的设计规范。
/* 背景层级 */
--bg-primary: #0a0e27; /* 主背景 - 深蓝黑 */
--bg-secondary: #141829; /* 卡片/面板背景 */
--bg-tertiary: #1a1f3a; /* 输入框/hover态 */
--bg-hover: rgba(255,255,255,0.05);
/* 文字 */
--text-primary: #ffffff;
--text-secondary: #b3b7c0;
--text-muted: #848e9c;
/* 品牌色 - 药赚赚灰黄配色 */
--brand-primary: #f0ad4e; /* 金黄主色 */
--brand-hover: #d4982a;
/* 语义色 */
--color-up: #0ECB81; /* 上涨/盈利 绿色 */
--color-down: #F6465D; /* 下跌/亏损 红色 */
--color-warning: #FAAD14; /* 警告 橙黄 */
--color-info: #1890FF; /* 信息 蓝色 */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 16px;
.card {
background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
padding: var(--spacing-md);
}
.card:hover {
border-color: rgba(255, 255, 255, 0.15);
}
.glass-card {
background: rgba(20, 24, 41, 0.85);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
}
<div className="stat-card">
<span className="stat-label">总资产</span>
<span className="stat-value">¥1,234,567.89</span>
<span className="stat-change up">+2.34%</span>
</div>
┌─────────────────────────────────────────┐
│ 顶部导航栏（品牌Logo + 菜单 + 用户） │
├──────────┬──────────────┬───────────────┤
│ 左栏 │ 中间主区域 │ 右栏 │
│ 药品列表 │ K线图表 │ 订单面板 │
│ 筛选过滤 │ 深度图 │ 买入/卖出 │
│ │ 成交记录 │ 余额显示 │
├──────────┴──────────────┴───────────────┤
│ 底部：持仓列表 / 订单历史 / 交易记录 │
└─────────────────────────────────────────┘
┌────────────────────┐
│ 药品信息 + 价格 │
├────────────────────┤
│ 迷你K线图 │
├────────────────────┤
│ 快捷操作按钮 │
├────────────────────┤
│ 认购弹窗（底部抽屉）│
└────────────────────┘
// 底部抽屉式弹窗，包含：
// 1. 药品信息行（名称 + 单价）
// 2. 数量输入（-/+ 按钮控制）
// 3. 金额实时计算
// 4. 支付方式三选一卡片
// 5. 确认按钮（品牌金黄色）
.badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.badge.pending { background: rgba(250,173,20,0.15); color: #FAAD14; }
.badge.activated { background: rgba(14,203,129,0.15); color: #0ECB81; }
.badge.expired { background: rgba(132,142,156,0.15); color: #848E9C; }
.table-row:hover { background: var(--bg-hover); }
.amount-up { color: var(--color-up); }
.amount-down { color: var(--color-down); }
/* 固定表头、斑马纹间隔、右对齐金额列 */
.btn-primary { background: var(--brand-primary); color: #000; font-weight: 600; }
.btn-buy { background: var(--color-up); }
.btn-sell { background: var(--color-down); }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.2); }
推荐库: lightweight-charts（TradingView出品）
npm install lightweight-charts
import { createChart } from 'lightweight-charts';
const chart = createChart(container, {
layout: { background: { color: '#0a0e27' }, textColor: '#b3b7c0' },
grid: { vertLines: { color: 'rgba(255,255,255,0.05)' }, horzLines: { color: 'rgba(255,255,255,0.05)' } },
crosshair: { mode: 0 },
});
const candleSeries = chart.addCandlestickSeries({
upColor: '#0ECB81', downColor: '#F6465D',
borderUpColor: '#0ECB81', borderDownColor: '#F6465D',
wickUpColor: '#0ECB81', wickDownColor: '#F6465D',
});
.price-flash-up { animation: flashGreen 0.6s ease-out; }
.price-flash-down { animation: flashRed 0.6s ease-out; }
@keyframes flashGreen {
0% { background: rgba(14,203,129,0.3); }
100% { background: transparent; }
}
import { motion } from 'framer-motion';
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
{content}
</motion.div>
/* Mobile first */
@media (min-width: 768px) { /* 平板 */ }
@media (min-width: 1024px) { /* 桌面 */ }
@media (min-width: 1440px) { /* 大屏 */ }
移动端关键规则：
| 需求 | 参考项目 | GitHub |
|---|---|---|
| 设计令牌系统 | PancakeSwap Storybook | pancakeswap/storybook |
| 全栈交易平台 | RevS AI | surenab/revs_ai |
| 移动端金融App | Stock Market App | bhavyajshah/stock-market-app-ui-template |
| 实时数据面板 | Trading Dashboard | galafis/trading-dashboard-react |
| 币安风格布局 | Binance Clone | APZdev/binance-clone-react |
| 订单簿组件 | React Order Book | lab49/react-order-book |
| 管理后台模板 | TailAdmin | TailAdmin/free-react-tailwind-admin-dashboard |
{
"ui": "shadcn/ui + Ant Design（后台）",
"样式": "CSS变量 + 内联样式（当前项目方案）",
"图表": "lightweight-charts（K线）+ Recharts（通用）",
"动画": "framer-motion",
"状态": "React useState/useContext（当前）",
"实时": "WebSocket + React Query"
}
快速测试 API 接口，支持自动认证和批量测试。Use when the user asks to "测试API", "api test", "接口测试", "curl测试", "测试接口".
项目入口角色 — 软件架构师。倾听用户叙述项目思路，整理成结构化的需求文档和架构蓝图。 识别核心功能模块、技术栈选型、数据流设计、关键决策点。 Use when: 用户说"启动架构师"、"我要讲一个项目思路"、"帮我整理思路"、"梳理需求"、"软件架构"、"项目规划"。 Voice triggers: "架构师", "整理思路", "梳理项目", "项目思路"。
代码质量检查，包括 ESLint、TypeScript 类型检查和编译测试。Use when the user asks to "检查代码", "code check", "lint", "typecheck", "代码质量".
数据库备份与恢复，支持自动清理旧备份。Use when the user asks to "备份数据库", "恢复数据库", "db backup", "db restore", "数据库快照".
数据库架构师 — 设计数据库表结构、ER关系图、SQL迁移文件。 输出：数据库设计方案、表结构SQL、索引优化建议。 Use when: 用户说"设计数据库"、"优化查询"、"迁移脚本"、"数据库设计"。 Voice triggers: "数据库设计", "设计数据库", "表结构", "SQL"。
依赖安全更新工具，扫描漏洞、分级报告、按 patch/minor/major 策略更新，自动创建备份分支，执行验证测试，生成更新报告。触发词：更新依赖、依赖升级、npm audit、安全漏洞、dep update、dependency update