前言¶
做一个财经网站，最容易卡住的地方通常不是「写出来」，而是几件更具体的事：行情从哪儿拿、涨红跌绿怎么和 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
