mirrors / skillhub-034-live-dashboard

项目文件夹

skillhub-034-live-dashboard
文件
main
T
wehub-skill-sync 15235ed7a3 chore: import zh skill live-dashboard
2026-07-13 21:35:48 +08:00

8.7 KiB
原始文件 永久链接 Blame 文件历史

name: live-dashboard description: | Notion 风格团队仪表盘，以 Live Artifact 形式渲染。一个单页、自包含的 HTML 仪表盘，包含 KPI、7 天迷你趋势图、实时活动动态以及关联数据库任务表格——通过 Composio 连接器目录接入 Notion。按需刷新，打开 Artifact 时也会自动刷新。未绑定连接器时回退到种子模拟数据，可在离线、截图或选择器预览中正常工作。 triggers:

  • "team dashboard"
  • "notion dashboard"
  • "live dashboard"
  • "ops dashboard"
  • "team workspace dashboard"
  • "团队仪表盘"
  • "Notion 仪表盘"
  • "Live Artifact dashboard" od: mode: prototype platform: desktop scenario: operation fidelity: high preview: type: html entry: index.html reload: debounce-100 design_system: requires: true sections: [color, typography, layout, components, anti-patterns] craft: requires: [typography, color, anti-ai-slop, motion-discipline, state-coverage] inputs:
    • name: workspace_name type: string required: true
    • name: page_title type: string default: "Team Dashboard"
    • name: connector type: enum values: [notion, linear, stripe, posthog, mock] default: notion
    • name: refresh_seconds type: integer default: 30 min: 10 max: 300
    • name: stale_after_seconds type: integer default: 90 min: 30 max: 600
    • name: kpi_count type: enum values: [2, 4, 6] default: 4
    • name: include_activity_feed type: boolean default: true
    • name: include_task_table type: boolean default: true parameters:
    • name: accent_hue type: hue default: 198 # Notion 蓝基调 range: [0, 360]
    • name: surface_warmth type: spacing default: 0 range: [-12, 24] # 调整侧边栏 / 软背景的 L* 值（OKLch 空间）
    • name: density type: spacing default: 18 range: [8, 36]
    • name: display_scale type: font-scale default: 1.0 range: [0.85, 1.4] outputs: primary: index.html secondary: [connectors.json] capabilities_required:
    • file_write
    • surgical_edit example_prompt: "给我为 Acme Studio 搭建一个 Notion 风格的团队仪表盘。KPI：总任务数、本周完成数、活跃成员数、审核中的文档数。接入 Notion 连接器，开启按需刷新。"

Live Dashboard（实时仪表盘）

你是一名资深的产品设计工程师，正在构建一个 Live Artifact —— 一个像真实仪表盘一样运行的 HTML 页面，而非模拟稿。你的产出应当 可交付使用，而不仅仅是渲染效果。

起飞前检查（在输出任何 HTML 之前必须完成）

  1. Read assets/template.html —— 以此骨架为基础，逐字沿用。不要 从头重建外壳。只覆盖用户需求或当前 DESIGN.md 所要求的内容。
  2. Read references/layouts.md —— 从三种已文档化的布局中精确选择 一种（A · 经典仪表盘、B · 看板风格、C · 仅 KPI 首屏）。在回复中 说明你的选择。
  3. Read references/components.md —— 逐字复制 KPI 卡片、迷你趋势图、 活动动态行以及数据库行的标记，然后根据当前 DESIGN.md 重新定制外观。 不要发明新的组件形态。
  4. Read references/connectors.md —— 仅在 inputs.connector !== mock 时 执行。生成一个同级的 connectors.json，列出该 Artifact 订阅的每个事件 以及它轮询的每个读取端点。
  5. Read references/checklist.md —— 每个 P0 项在你输出 index.html 之前 必须为真。在回复中逐行引用每个 P0 项，标注 [x] 或 [ ]。若存在未勾选 的 P0 项，不得输出。

构建顺序

  1. 锁定视觉方向，依据当前的 DESIGN.md。正文显示字体应采用系统 / sans 字体 —— 即 Notion 风格系统所用的字体（SF Pro、Inter 作为正文字体， 切勿使用 Inter Display 作为标题字体）。正文 14px/22px 行高。
  2. 顶栏：左侧为面包屑导航（workspace_name / Workspace / page_title）， 右侧为一个 <live-pill>，显示三种状态之一：Live · 已同步（绿色脉冲）、 正在同步…（蓝色）、已过期 · <距上次时间>（琥珀色，超过 stale_after_seconds 后显示）。
  3. 页面标题：一个 Notion 风格的 page-emoji（单个语义相关的 emoji —— 切勿使用通用的 🚀 ✨ 🔥），page-title 字号 40px、字重 700、 字间距 -0.01em，一个元信息行，包含最后编辑者 + "上次刷新 " + 自动切换按钮 + 刷新按钮。
  4. 提示框：解释 Live Artifact 合约 —— 数据来源、刷新时机。一行即可。 不使用营销语言。
  5. KPI 网格：遵循 inputs.kpi_count。1px 细线网格，无阴影，内部卡片 无圆角。数字使用 font-variant-numeric: tabular-nums，字重 600， 字间距 -0.01em。每个 KPI 附带一个灰色小号差值行（↑ 6 对比上周）。
  6. 两列区块：迷你趋势图卡片（SVG，手写实现，不依赖图表库）+ 活动动态卡片。迷你趋势图展示 7 天序列，浅色填充区域 10% 透明度、 2px 描边。
  7. 关联数据库：Notion 风格表格 —— db-head（大写 12px 灰色标签）+ db-row 数据行。状态药丸使用 Notion 五色体系（已完成 / 进行中 / 已阻塞 / 审核中 / 待办）。人员标签使用 18px 彩色圆形头像加两个字母 的姓名首字母。
  8. 页脚：来源归属（来源：Notion API · 工作区 <workspace_name>） 和连接器标识。

实时行为（"Live Artifact" 中 "Live" 的体现）

在 index.html 底部的单个 <script> 块中接入以下功能：

  • init() 在挂载后 600ms 执行 refresh({silent: true}) —— 即"打开时刷新" 的语义。
  • 刷新按钮调用 refresh({silent: false})。在每个数字型 KPI 新旧值之间显示 补间动画，表格中发生变化的行闪烁 1.4s，在活动动态顶部追加一条新行并 在左侧高亮 2s，在底部显示一个描述变更差异的 toast。补间/闪烁钩子已在 assets/template.html 中预先接入（tweenText() + .flash + .db-row.changed + .feed-row.new）；将上一帧快照传入 renderKpi(prev)，将变更行的 id 传入 renderRows(changedId)，补间和 闪烁效果即可通过现有 CSS 自动生效。请勿从头重建。
  • 当自动模式开启时，setInterval(refresh, refresh_seconds * 1000)。
  • 在 stale_after_seconds 内未成功刷新时，将药丸切换为琥珀色 已过期 · <距上次时间>。
  • 真实连接器模式：POST /api/od/connectors/poll，请求体为 JSON { project, read }，其中 project 为 <meta name="od:project"> 的 id， read 为 connectors.json 中声明的 bindings[*].reads[].id 值之一。 OD 守护进程在服务端解析主绑定、认证源和实时提供商调用；Artifact 不会接触 原始提供商 URL 或令牌。详见 references/connectors.md 中的交互格式和 守护进程解析顺序。出错时回退到种子模拟数据，确保 Artifact 不会显示为 损坏状态 —— 通过页脚中的灰色小提示显示错误，切勿使用红色横幅。

自我评审（输出前必须执行）

从继承自 skills/critique/ 的五个维度对 Artifact 进行评分： Philosophy（理念）· Hierarchy（层级）· Detail（细节）· Function（功能）· Innovation（创新）。

若 Philosophy < 4（"看起来像 AI 生成的"），在输出前迭代调整字体和 调色板。在回复中引用违规元素并说明修复方式。若有任一维度得分低于 3， 不得输出。

硬性禁止项（反 AI 痕迹）

  • 禁止紫色→粉色的渐变标题。
  • 禁止页面顶部使用 emoji 图标条。
  • 禁止带有 4px 左侧边框强调色的圆角卡片。
  • 禁止 "10× faster" / "infinite" / "join 50,000+" 等文案，除非用户明确 提供了该数字。
  • 禁止 KPI 卡片上的毛玻璃效果 / backdrop-blur。
  • 禁止在 KPI 数字下方使用彩色进度条；差值行已足够。
  • Inter 仅限正文使用。页面标题可使用 SF Pro Display； Fraunces / GT Sectra 可在编辑类 DESIGN.md 变体中使用。

输出合约

  • index.html —— 单个自包含文件，不依赖外部 CSS / JS 导入（系统字体栈和 单个 OD <live-counter> 自定义元素除外）。
  • connectors.json —— 当 inputs.connector !== mock 时生成。 架构详见 references/connectors.md。
  • 两个文件均放在项目的当前工作目录下。不得写入其他位置。
在新工单中引用 查看 Git Blame 复制永久链接