Back to Details

trading-analysis-dashboard-template

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Trading Analysis Dashboard Template

交易分析仪表盘模板

Produce a premium, data-dense, Wall-Street style trading dashboard as a self-contained HTML artifact.
生成一个优质、数据密集的华尔街风格交易仪表盘，作为独立的HTML文件。

Resource map

资源结构

text
trading-analysis-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html
text
trading-analysis-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

工作流程

  1. Read active 
    DESIGN.md
    , then map typography/color/layout into CSS variables.
  2. Copy 
    assets/template.html
    to 
    index.html
    .
  3. Personalize headings, instrument names, and numeric labels to the user brief.
  4. Preserve interaction fidelity:
    • Light/Dark mode switch
    • Live/Demo mode
    • Chart hover crosshair and tooltip
    • Click-to-focus chart (floating modal style)
    • Keyboard command palette (
      /
      )
  5. Keep output single-file HTML (inline CSS + inline JS, no framework dependency).
  6. Keep placeholders honest (
    —
    or neutral labels) where real numbers are unknown.
  7. Validate against 
    references/checklist.md
    before emitting.
  1. 读取当前的
    DESIGN.md
    ，将排版/颜色/布局映射为CSS变量。
  2. 将
    assets/template.html
    复制到
    index.html
    。
  3. 根据用户需求个性化标题、工具名称和数值标签。
  4. 保留交互保真度：
    • 明暗模式切换
    • 实时/演示模式
    • 图表悬停十字线和提示框
    • 点击聚焦图表（浮动弹窗样式）
    • 键盘命令面板（
      /
      ）
  5. 输出保持单文件HTML（内联CSS + 内联JS，无框架依赖）。
  6. 在真实数据未知的位置保留真实占位符（
    —
    或中性标签）。
  7. 输出前根据
    references/checklist.md
    进行验证。

Output contract

输出约定

One sentence before artifact, then:
xml
<artifact identifier="trading-analysis-dashboard" type="text/html" title="Trading Analysis Dashboard">
<!doctype html>
<html>...</html>
</artifact>
在生成产物前添加一句话说明，然后：
xml
<artifact identifier="trading-analysis-dashboard" type="text/html" title="Trading Analysis Dashboard">
<!doctype html>
<html>...</html>
</artifact>