前言¶
做一個財經網站，最容易卡住的地方通常不是「寫出來」，而是幾件更具體的事：行情從哪兒拿、漲紅跌綠怎麼和 CSS 設計系統對齊、十幾個持倉數據怎麼分層、圖表怎麼組合纔不會亂、最後放到哪裏能訪問。靠現搜現拼，往往得到一堆互相打架的片段。
下面介紹的這個 Skill，把這些環節整理成一份可照着做的文檔。它不是模板倉庫，而是一份從真實項目反推出來的完整流程說明。
這是什麼¶
「財經全能網站 — 投資指揮中心建站指南」是一個面向 dev-programming 分類的 Skill 文檔，座標 @user_253cb571/finance-command-center，版本 1.0.0，來源 community，由 user_253cb571 發佈維護，requires_api_key=false。
它要解決的問題很明確：從零構建一個純靜態、雙主題、實時行情驅動的個人 ETF 投資儀表盤，並且目標是按文檔可以復刻出功能相近的網站。
按 SkillHub 頁面信息，評分 100000，下載 1187 次，安裝 0 次。這組數據只能說明分發情況，不能當作質量結論。
核心功能¶
這份文檔覆蓋的是一條完整的建站鏈路，逐個環節拆開講：
1、架構設計：先定純靜態站點的結構，再談具體頁面與數據流。
2、CSS 設計系統：玻璃擬態風格，配色按 A 股慣例走漲紅跌綠，而不是通用的漲綠跌紅。
3、數據層：設計 13 項持倉數據結構，把持倉信息與行情信息分開管理。
4、實時行情雙源接入：通達信走 MCP，騰訊證券走 JSONP，兩路互爲補充。
5、ECharts 圖表矩陣：環形圖、雷達圖、餅圖、面積圖，外加自繪 SVG 迷你走勢。
6、交互打磨：命令面板、滾動揭示動畫、吸頂導航。
7、部署配置：給出 CloudStudio 部署方案。
8、已知 Bug 庫：整理了 8 個實際踩過的坑及對應修復方案。
單獨看每一項都不新鮮，價值在於它們被串成一條順序明確的路徑，並且把踩坑修復一併給出。
安裝與啓用¶
截至抓取時，官方頁面和 API 端點均無法訪問成功，因此本文不給出任何未經覈實的安裝命令。
可以確認的信息只有來源：
官方地址: https://api.skillhub.cn/user_253cb571/finance-command-center
SkillHub 頁面: https://www.skillhub.cn/skills/user_253cb571/finance-command-center
座標: @user_253cb571/finance-command-center
分類: dev-programming
來源: community
拿到文檔後，按你所用的編碼 Agent 的 Skill 加載方式放置即可：Cursor 讀項目內 .cursor/skills 或用戶級 skills 目錄，Codex CLI 與 Claude Code 各自有技能加載約定。文檔本身基於通用 SKILL.md 格式，因此不依賴特定運行時。
典型用法¶
文檔面向的場景是「用戶要求構建、克隆，或瞭解如何創建一個金融儀表盤 / 指揮中心網站」，觸發詞覆蓋中文的「財經網站 / 投資儀表盤 / 持倉看板」。
可復現的使用方式大致是：
1、說明你要構建一個純靜態的個人 ETF 投資儀表盤
2、按文檔順序推進：架構設計 → CSS 設計系統 → 持倉數據層 → 行情接入 → ECharts 圖表 → 交互打磨 → CloudStudio 部署
3、遇到問題時對照已知 Bug 庫逐條排查
其中行情接入需要區分兩個來源：通達信通過 MCP 提供，騰訊證券通過 JSONP 提供，接入方式不同，不要混用同一套調用方式。
適用場景與注意¶
適合的場景：想做一個個人使用的 ETF 持倉看板，希望靜態託管、不需要後端，能接受純前端方案。
需要注意的限制：
1、雙源接入都依賴外部服務可用性，通達信 MCP 與騰訊證券 JSONP 並非長期穩定接口，建議在使用前確認當前是否仍可訪問。
2、漲紅跌綠是 A 股慣例配色，如果面向港股或美股，配色規則需要自行調整。
3、文檔中的 8 個 Bug 修復來自特定項目環境，其他項目可能遇到不同的問題，不能假設照搬即可解決。
4、安裝數據爲 0，說明目前公開使用記錄有限，遇到文檔未覆蓋的情況需要自己排查。
5、官方頁面當前無法訪問，文檔內容的時效性無從覈對，落地前建議先確認關鍵接口和部署方案是否仍然成立。
結尾¶
這份 Skill 的價值在於把一個真實財經項目的建設過程壓縮成一條可執行的路徑，從設計系統到部署方案都給了具體做法，並且附帶了 Bug 修復記錄。適合需要復刻同類持倉看板、又不想從零摸索的人。
官方地址：https://api.skillhub.cn/user_253cb571/finance-command-center
