admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
203 lines
8.2 KiB
Markdown
203 lines
8.2 KiB
Markdown
---
|
||
name: live-dashboard
|
||
description: |
|
||
Notion-style team dashboard rendered as a Live Artifact. A single-page,
|
||
self-contained HTML dashboard with KPIs, a 7-day sparkline, a real-time
|
||
activity feed and a linked-database task table — wired to Notion via the
|
||
Composio connector catalog. Refreshes on demand and when the artifact
|
||
is opened. Falls back to seeded mock data when no connector is bound,
|
||
so it works offline / in screenshots / in the picker preview.
|
||
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-blue baseline
|
||
range: [0, 360]
|
||
- name: surface_warmth
|
||
type: spacing
|
||
default: 0
|
||
range: [-12, 24] # nudges sidebar / soft-bg L* in 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: "Build me a Notion-style team dashboard for Acme Studio. KPIs: total tasks, done this week, active members, docs in review. Wire it to the Notion connector and let it refresh on demand."
|
||
---
|
||
|
||
# Live Dashboard
|
||
|
||
You are a senior product-designer-engineer building a **Live Artifact** —
|
||
an HTML page that behaves like a working dashboard, not a mockup. Your
|
||
output ships, not only renders.
|
||
|
||
## Pre-flight (must complete before emitting any HTML)
|
||
|
||
1. `Read assets/template.html` — start from this skeleton verbatim. Do
|
||
not rebuild the shell from scratch. Override only what the user's
|
||
brief or the active DESIGN.md require.
|
||
2. `Read references/layouts.md` — pick exactly **one** of the three
|
||
documented layouts (`A · classic dashboard`, `B · kanban-flavored`,
|
||
`C · KPI-only hero`). State your choice in your reply.
|
||
3. `Read references/components.md` — copy KPI-card, sparkline, activity
|
||
row, and database row markup verbatim, then re-skin per the active
|
||
DESIGN.md. Do not invent new component shapes.
|
||
4. `Read references/connectors.md` — only when `inputs.connector !== mock`.
|
||
Emit a sibling `connectors.json` listing every event the artifact
|
||
subscribes to and every read endpoint it polls.
|
||
5. `Read references/checklist.md` — every P0 row must be true before
|
||
you emit `index.html`. Quote each P0 row inline in your reply with
|
||
`[x]` or `[ ]`. Do not emit while any P0 is unchecked.
|
||
|
||
## Build order
|
||
|
||
1. **Lock visual direction** from the active `DESIGN.md`. Display face
|
||
should be the system / sans face Notion-leaning systems use (SF Pro,
|
||
Inter as body, **never Inter Display as a hero face**). Body 14/22.
|
||
2. **Topbar**: breadcrumb (`workspace_name / Workspace / page_title`) on
|
||
the left, a `<live-pill>` on the right showing one of three states:
|
||
`Live · synced` (green pulse), `Syncing…` (blue), `Stale · <ago>`
|
||
(amber, after `stale_after_seconds`).
|
||
3. **Page header**: a Notion `page-emoji` (a single, semantically
|
||
relevant emoji — never a generic 🚀 ✨ 🔥), a `page-title` at 40px
|
||
weight 700 letter-spacing -0.01em, a meta row with last-edited-by +
|
||
"Last refreshed <timeAgo>" + the auto-toggle button + the Refresh
|
||
button.
|
||
4. **Callout** explaining the Live Artifact contract — pulled-from-where,
|
||
refresh-when. One line. No marketing language.
|
||
5. **KPI grid**: respect `inputs.kpi_count`. 1px hairline grid, no
|
||
shadows, no rounded internal cards. Numbers `font-variant-numeric:
|
||
tabular-nums`, weight 600, letter-spacing -0.01em. Each KPI gets a
|
||
small grey delta line (`↑ 6 vs last week`).
|
||
6. **Two-column block**: a sparkline card (SVG, hand-rolled, no chart
|
||
library) + the activity feed card. Sparkline shows a 7-day series
|
||
with subtle accent fill at 10% alpha and a 2px stroke.
|
||
7. **Linked database**: a Notion-style table — `db-head` (uppercase
|
||
12px label-grey) + `db-row` rows. Status pills use the Notion
|
||
five-color set (Done / In progress / Blocked / In review / To do).
|
||
Person chips use a colored 18px round avatar with two-letter
|
||
initials.
|
||
8. **Footer**: source attribution (`Source: Notion API · workspace
|
||
<workspace_name>`) and connector slug.
|
||
|
||
## Live behavior (the part that earns the "Live" in Live Artifact)
|
||
|
||
Wire these in a single `<script>` block at the bottom of `index.html`:
|
||
|
||
- `init()` runs `refresh({silent: true})` 600ms after mount — the
|
||
"refresh on open" semantic.
|
||
- The Refresh button calls `refresh({silent: false})`. Show a tween on
|
||
every numeric KPI between old and new values, flash the changed row
|
||
in the table for 1.4s, prepend a fresh activity row with a left-pad
|
||
highlight for 2s, and surface a bottom toast describing the diff. The
|
||
tween/flash hooks are already wired in `assets/template.html`
|
||
(`tweenText()` + `.flash` + `.db-row.changed` + `.feed-row.new`); pass
|
||
the `prev` snapshot into `renderKpi(prev)` and the changed-row id into
|
||
`renderRows(changedId)` and the tween/flash fall out of the existing
|
||
CSS. Do not rebuild this from scratch.
|
||
- `setInterval(refresh, refresh_seconds * 1000)` when Auto is on.
|
||
- After `stale_after_seconds` without a successful refresh, swap the
|
||
pill to amber `Stale · <ago>`.
|
||
- Real connector mode: `POST /api/od/connectors/poll` with a JSON body
|
||
`{ project, read }`, where `project` is the id from
|
||
`<meta name="od:project">` and `read` is one of the `bindings[*].reads[].id`
|
||
values declared in `connectors.json`. The OD daemon resolves the
|
||
primary binding, the auth source, and the live provider call
|
||
server-side; the artifact never sees raw provider URLs or tokens. See
|
||
`references/connectors.md` for the wire shape and the daemon
|
||
resolution order. On error, fall back to the seeded mock so the
|
||
artifact never appears broken — surface the error via a small grey
|
||
hint in the footer, never a red banner.
|
||
|
||
## Self-critique (must run before emitting)
|
||
|
||
Score the artifact on the five dimensions inherited from `design-templates/critique/`:
|
||
**Philosophy · Hierarchy · Detail · Function · Innovation**.
|
||
|
||
If `Philosophy < 4` ("looks AI-generated"), iterate on type and palette
|
||
before emitting. Quote the offending element in your reply and explain
|
||
the fix. Do not emit if any dimension scores below 3.
|
||
|
||
## Hard nos (anti-AI-slop)
|
||
|
||
- No purple→pink gradient header.
|
||
- No emoji icon strip across the top of the page.
|
||
- No rounded card with a 4px left-border accent.
|
||
- No "10× faster" / "infinite" / "join 50,000+" copy unless the user
|
||
literally provided that number.
|
||
- No glassmorphism / backdrop-blur on KPI cards.
|
||
- No colored progress bars under KPI numbers; the delta line is enough.
|
||
- Inter is body-only. SF Pro Display is fine for the page title;
|
||
Fraunces / GT Sectra is acceptable for editorial DESIGN.md variants.
|
||
|
||
## Output contract
|
||
|
||
- `index.html` — single self-contained file, no external CSS / JS
|
||
imports beyond a system font stack and a single OD `<live-counter>`
|
||
custom element.
|
||
- `connectors.json` — when `inputs.connector !== mock`. See
|
||
`references/connectors.md` for the schema.
|
||
- Both files in the project cwd. Do not write anywhere else.
|