mph-synthwave-theme

mph-synthwave-theme

用于生成网页界面、仪表盘和 UI 组件的核心样式技能，可完美契合“Momentum Phinance”（TraderDaddy）品牌美学。

何时使用此技能

当用户要求构建或设计 UI、仪表盘、小组件或 Web 应用时，或者提到“我的风格”“我的主题”“synthwave”“traderdaddy”“彭博终端”或“霓虹”时，使用此技能。

美学风格

这种视觉语言融合了高性能的 Bloomberg Terminal 与时尚利落的 赛博朋克／Synthwave 设计。它采用极暗背景以减轻交易者的眼部疲劳，并辅以强烈、高对比度的霓虹点缀，突出关键数据。

1. 字体排版

• 主要数据／数字： JetBrains Mono 或 Fira Code。所有表格、股票代码、价格和指标都使用等宽字体，确保列对齐。
• UI／正文文本： Inter、Roboto 或 Outfit。用于一般文本的字体应简洁、清晰易读且为无衬线字体。
• 绝不使用浏览器默认字体。

2. 配色方案

• 背景： 极暗、略带冷调的灰色／黑色。
  • 主体：#0a0a0c
  • 面板／卡片：#121216 或 rgba(20, 20, 25, 0.7)（玻璃拟态）
• 主要点缀色（霓虹）：
  • 霓虹青色： #00f0ff（用于主要边框、激活状态和关键品牌元素）
  • 霓虹粉色： #ff003c（用于警报、空头仓位和破坏性操作）
  • 霓虹绿色： #00ff88（用于多头仓位、正向 PnL 和“EXECUTE”操作）
  • 电光紫色： #b026ff（次要点缀色）
• 文本：
  • 主要文本：#ffffff 或 #eaeaea
  • 次要／弱化文本：#888899

3. 玻璃拟态与层次

• 仪表盘卡片不要使用扁平、纯色的方框。
• 使用半透明背景，并添加微妙的背景滤镜。

  background: rgba(20, 20, 25, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  

4. 微动画与辉光（“突出效果”）

• 交互元素（按钮、激活行、悬停卡片）必须带有明显的霓虹辉光。
• 按钮： 为按钮添加淡淡的霓虹色背景色调（例如 rgba(0, 255, 136, 0.1)）和纯色霓虹边框；悬停时增强背景色，并添加 box-shadow 辉光。

  .btn-execute {
      background: rgba(0, 255, 136, 0.1);
      border: 1px solid #00ff88;
      color: #00ff88;
      box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
      transition: all 0.2s ease;
  }
  .btn-execute:hover {
      background: rgba(0, 255, 136, 0.2);
      box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
  }
  

5. 布局规则

• 密度： 高密度、终端风格。需要比较数据时尽量减少留白，同时确保易读。
• 网格／边框： 使用微妙的细线（1px solid rgba(255,255,255,0.1)）分隔各个区域。
• 圆角： 采用轻微圆角（border-radius: 4px 到 8px），不要做成完整的胶囊形。

实施工作流

1. 如果用户要求使用“他们的风格”设计 UI，则自动应用上述 CSS 规则。
2. 确保通过 Google Fonts 引入 Inter 和 JetBrains Mono 的 <link> 标签。
3. 根据美学规则检查设计：它看起来是否像高端、现代的 Synthwave 交易终端？如果不是，则提高对比度并增加玻璃拟态／辉光效果。