石板管理台 — 使用指南

你会得到什么

一个表现得像成品 SaaS 管理后台的自包含 HTML 文件：

• Overview — 四张带趋势徽章的指标卡、复合面积/折线活动图表，以及可勾选的近期客户表格
• Analytics — KPI 卡片、可悬停查看数值的 12 周圆角柱状图，以及带占比进度条的热门页面表格
• Finance — 资金卡片、带金额图例的支出构成环形图，以及正负分色的交易流水表
• Customers — 实时搜索框加状态筛选 chips 的完整客户表格，含诚实的空状态
• Kanban — 三列看板，真实拖拽、计数实时更新
• Calendar — 真实月历网格，含事件、今日高亮和上月/今天/下月控件

外壳本身才是重点：精简侧边栏只有两组六项，每一项都可点击（没有禁用行、没有「敬请期待」），可折叠为图标栏；48px 顶栏带命令面板搜索（Ctrl/Cmd K）、主题预设下拉和暗色模式开关。所有颜色都是 oklch 设计 token，中性石板与暖橘 Tangerine 两种预设在明暗模式下都可用，切换主题时所有图表重绘。

零构建、零框架、零网络请求——文件可直接从本地打开，也能在沙箱 iframe 中运行，非常适合产品规格、干系人演示和开工前的脚手架。

如何下需求

给 Skill 四样东西：

1. 产品名和操作者——侧边栏里的品牌和登录用户（保持虚构，.example 邮箱）。
2. 四个 Overview 指标——这门生意真正盯的数字；它们决定指标卡和图表系列名。
3. 业务对象——表格和 Kanban 卡片承载什么（客户、订单、工单、任务…）。
4. 侧边栏选择——六个标准视图选哪些，或换一个（收件箱、日志、设置表单）。侧边栏保持 5–8 项，且每项必须打开真实视图。

缺的部分会用这套风格安静、面向运营的语气帮你起草。

如何使用产物

• 文件是纯 HTML/CSS/JS——数据放在脚本顶部的具名数组里，替换行、卡片和事件都很直接。
• 在项目里工作时，Agent 会用你的技术栈（React/Next、Vue、Svelte、Astro、纯 HTML）生成后台，用真实路由取代视图切换——tokens 和组件保持一致。
• 占位动作（导出、账单、退出登录）会弹出诚实的 toast 提示；接入真实行为后删掉 data-toast 属性即可。
• 手动编辑后运行 node scripts/validate-console.mjs your-file.html——它会复查自包含性、精简侧边栏契约、暗色 token 和禁 emoji 图标规则。