④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 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。

open-design/design-systems/canva/tokens.css

@@ -0,0 +1,147 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/canva/tokens.css
+ *
+ * Structured token bindings for "Design System Inspired by Canva".
+ * Consumer-friendly design platform: white canvas, vivid purple→cyan
+ * gradient, generously rounded geometry, weight-driven hierarchy.
+ *
+ * Key brand decisions encoded here:
+ *   - Pure white canvas (#ffffff) — Canva looks inviting, never tinted
+ *   - Canva Purple (#7d2ae8) as the single accent — gradient origin
+ *   - Four ink tiers (#0e1318 → #3c4043 → #5f6368 → #9aa0a6) — weight
+ *     contrast and ink-tier contrast carry hierarchy together
+ *   - 12px card / 8px button radii — soft, friendly, never sharp
+ *   - Cool soft shadows (rgba(0,0,0,0.06)) — never warm-tinted
+ *   - Compressed type scale (14px body, 18px H3, 64px hero) — cards
+ *     and templates must read at thumbnail scale
+ *   - Material-style easing (0.4,0,0.2,1) at 180ms — friendly micro-lift
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ─────────────────────────────────────────────────────
+   * White canvas with cool-gray subtle break. Canva never tints its
+   * neutral surfaces — the purple/cyan gradient is the only colored
+   * brand moment on an otherwise calm white page. */
+  --bg: #ffffff;             /* Canvas — the primary white background */
+  --surface: #f4f5f7;        /* Surface Subtle — section break, sidebar */
+  --surface-warm: var(--surface); /* alias — Canva has no warm tier; palette is cool-neutral */
+
+  /* ─── Foreground ──────────────────────────────────────────────────
+   * Four-tier ink stack from DESIGN.md §2: Primary → Secondary →
+   * Muted → Faint. Each tier is materially distinct so weight + tier
+   * together carry hierarchy (the palette stays neutral). */
+  --fg: #0e1318;             /* Ink Primary — headings, max-emphasis text */
+  --fg-2: #3c4043;           /* Ink Secondary — body prose */
+  --muted: #5f6368;          /* Ink Muted — captions, descriptions */
+  --meta: #9aa0a6;           /* Ink Faint — placeholder, disabled label */
+
+  /* ─── Border ──────────────────────────────────────────────────────
+   * Cool-gray hairlines. Canva uses two visible border tiers
+   * (Default + Strong on hover); --border-soft has no distinct value
+   * in DESIGN.md, so it aliases to keep the schema satisfied without
+   * inventing a tier the brand does not specify. */
+  --border: #e1e3e6;         /* Border Default — standard card hairline */
+  --border-soft: var(--border); /* alias — DESIGN.md specifies no softer tier */
+
+  /* ─── Accent ──────────────────────────────────────────────────────
+   * Canva Purple — the gradient origin. The full purple→cyan gradient
+   * lives in component CSS as a linear-gradient(135deg, ...) on hero
+   * CTAs and Pro/Magic moments; the token itself is the solid purple
+   * used as the always-resolvable single-value accent. */
+  --accent: #7d2ae8;         /* Canva Purple — gradient origin, solid CTA */
+  --accent-on: #ffffff;
+  --accent-hover: #6815d4;   /* DESIGN.md §4 — explicit hover value */
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ────────────────────────────────────────────────────
+   * Brand-specific semantic palette from DESIGN.md §2. Error reuses
+   * Canva Pink (#ff5757) — the same hue is the tertiary brand accent
+   * (Magic Studio), so destructive feedback inherits brand warmth. */
+  --success: #00b894;        /* Success — saved, exported */
+  --warn: #ffb020;           /* Warning — storage limit, advisory */
+  --danger: #ff5757;         /* Error — also the Magic Studio pink */
+
+  /* ─── Typography ──────────────────────────────────────────────────
+   * Canva Sans for everything — geometric rounded sans, no serifs.
+   * JetBrains Mono only inside devtools / code blocks. */
+  --font-display: "Canva Sans", "YS Text", system-ui, -apple-system, sans-serif;
+  --font-body: "Canva Sans", "YS Text", system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+
+  /* Type scale — DESIGN.md §3. Compressed by design: 64px hero, 36px
+   * H1, then steps of 24/18/16/14/12/11. Tag (11px) is the floor so
+   * uppercase category chips on template tiles stay legible. */
+  --text-xs: 11px;           /* Tag — uppercase category chip */
+  --text-sm: 12px;           /* Caption — metadata, hint text */
+  --text-base: 14px;         /* Body — standard UI prose */
+  --text-lg: 16px;           /* Body Large — lede, marketing body */
+  --text-xl: 18px;           /* H3 — sub-section, card title */
+  --text-2xl: 24px;          /* H2 — section heading */
+  --text-3xl: 36px;          /* H1 — page heading */
+  --text-4xl: 64px;          /* Hero — marketing display, "Design anything." */
+
+  --leading-body: 1.5;
+  --leading-tight: 1.15;     /* H1 baseline — tight enough for 3-line card titles */
+  --tracking-display: -0.02em; /* ≈ -1.28px at 64px — hero only */
+
+  /* ─── Spacing ─────────────────────────────────────────────────────
+   * 4px base unit. Scale 4/8/12/16/20/24/32/48 covers everything in
+   * DESIGN.md §5 except 64 and 96 which surface only as section-y. */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+
+  /* Section rhythm — generous on desktop (96px = scale top) so the
+   * white canvas breathes between marketing bands; compresses on
+   * narrower viewports following the 4px grid. */
+  --section-y-desktop: 96px;
+  --section-y-tablet: 64px;
+  --section-y-phone: 48px;
+
+  /* ─── Radius ──────────────────────────────────────────────────────
+   * Ultra-soft. Buttons / inputs at 8px, cards at 12px (the Canva
+   * template tile), larger panels at 16px. Pills (9999px) reserved
+   * for chips, tags, and the Pro/Magic badge. */
+  --radius-sm: 8px;          /* Buttons, inputs, secondary chrome */
+  --radius-md: 12px;         /* Cards, template tiles — the Canva default */
+  --radius-lg: 16px;         /* Featured panels, hero cards */
+  --radius-pill: 9999px;     /* Chips, tags, Pro/Magic badge */
+
+  /* ─── Elevation ───────────────────────────────────────────────────
+   * Soft cool-toned shadows that grow on hover (DESIGN.md §4 card +
+   * button shadows). --elev-raised matches the resting button shadow
+   * — `0 2px 8px rgba(0,0,0,0.06)`. Components scale up to the hover
+   * variant `0 8px 24px rgba(0,0,0,0.08)` inline. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+  /* ─── Focus ring ──────────────────────────────────────────────────
+   * Purple-tinted 3px ring, taken verbatim from DESIGN.md §4 input
+   * focus spec — `0 0 0 3px rgba(125, 42, 232, 0.16)`. Soft enough to
+   * sit beside a 1px purple border without crowding it. */
+  --focus-ring: 0 0 0 3px rgba(125, 42, 232, 0.16);
+
+  /* ─── Motion ──────────────────────────────────────────────────────
+   * Friendly micro-interactions: 180ms hover (Canva's signature card
+   * lift) and 280ms for menu / dialog open (DESIGN.md §6). Easing is
+   * Material-style cubic-bezier(0.4, 0, 0.2, 1) — eases out softly
+   * rather than the snappier (0.2, 0, 0, 1) used by enterprise brands. */
+  --motion-fast: 180ms;
+  --motion-base: 280ms;
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ─── Layout ──────────────────────────────────────────────────────
+   * 1320px container with 32px gutter (DESIGN.md §5). Wider than
+   * enterprise (Cohere 1440 is editor-led; Canva 1320 fits a 4-col
+   * template grid at 300px per tile + gaps comfortably). */
+  --container-max: 1320px;
+  --container-gutter-desktop: 32px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}