技能介绍

为什么值得单独做一个技能

把分析页面当成"截图任务"来做，最常见的结果是：KPI 卡片铺满首屏、图表塞到第五屏还没结论、筛选器一点击整页重排。这个技能要解决的是从需求到可运行原型之间的那段工程工作——先把"用户需要在页面上识别什么、比较什么、判断什么、执行什么操作"说清楚，再决定信息层级，最后才写 HTML。

它的核心工作流

先定层级，再选组件。 上下文与筛选条件、概览指标、分析证据、明细数据、次级操作，这五层是固定骨架。只挑任务真正用到的组件，不为填充页面堆叠无关模块。
规范按内容匹配加载。 所有任务必读 references/foundations.md；涉及卡片、筛选器、按钮、KPI 或状态反馈时加读 references/cards-controls.md；涉及图表、图例、坐标轴、计划、预测、目标或排行时加读 references/charts.md；涉及表格、热力图、层级结构、展开收起、固定区域或全屏时加读 references/tables-interactions.md；收尾前过一遍 references/quality-checklist.md。
从资产开始，而不是从空文档开始。 独立原型基于 assets/analytics-prototype-starter.html 与 assets/ui-tokens.css 起步。简单示意图表用内联 SVG；需要提示信息、动态数据或多系列图表时引入 ECharts，并复用 assets/echarts-options.js 里的组合趋势图与风险排行图预设。
交互要真的能用。 筛选反馈、分段切换、展开收起、提示、横向滚动、全屏进出都需要实现，且展开和全屏时要保留数据状态与滚动位置。
自检在桌面视口完成。 按接近 1440×900 渲染，检查完整滚动范围、密集数据、初始/加载/空/异常四种状态，再验证一种较窄布局。

设计约束与适用边界

中性统计分析画布：白色卡片、克制边框、弱阴影、紧凑间距。语义色竖线只用在指标、流程、分类、告警卡片左侧，筛选、图表、表格保持中性。图表颜色按数据含义分配，不按系列顺序或个人偏好随机配色；实际、计划、预测、目标、历史均值、风险的视觉编码必须稳定。趋势与比较交给图表，精确查找交给表格，同一信息不重复表达。主按钮严格控制数量，展开、全屏、导出、视图切换走次级按钮。缺失数据显示 —，真实零值显示 0；界面文案一律中文，未被明确要求时不提供英文切换。

除非只要单个组件，否则输出完整可运行原型而非零散片段。语义化 HTML 并带上 aria-expanded、aria-pressed 等状态；CSS 变量集中管理，颜色、间距、圆角、字号不散落页面各处。不得用空白矩形冒充图表，也不得引入渐变玻璃、霓虹发光、重阴影、超大营销标题或纯装饰图表。

边界：它解决的是界面设计与交互原型，不负责数据清洗、指标口径或后端接口；业务内容需你提供，技能只替换中性示例并保留组件类名约定与语义色映射。