④段整套同步（六节 ＋ 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/opencode-ai/tokens.css

@@ -0,0 +1,126 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/opencode-ai/tokens.css
+ *
+ * Structured token bindings for "Design System Inspired by OpenCode".
+ * Terminal-native dark theme: warm near-black canvas, Berkeley Mono as
+ * the sole typeface, flat depth (no shadows), Apple HIG semantic colors.
+ *
+ * Key brand decisions encoded here:
+ *   - Dark-on-dark: #201d1d (warm near-black) as page bg, #302c2c for surface
+ *   - #fdfcfc (barely-warm off-white) as primary text — never pure white
+ *   - Berkeley Mono ONLY — no second typeface, no typographic variation
+ *   - FLAT depth system — zero shadows; depth via borders and bg shifts
+ *   - Warm borders: rgba(15,0,0,0.12) — subtle red tint ties to warm palette
+ *   - Apple HIG semantic colors (#007aff, #ff3b30, #30d158, #ff9f0a)
+ *   - Narrow reading column (~880px) — single-column, text-centric
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (dark theme) ────────────────────────────────────────
+   * Warm near-black → slightly lighter dark surface.
+   * The reddish warmth (rgb(32,29,29)) is subtle but essential. */
+  --bg: #201d1d;             /* OpenCode Dark — warm near-black with reddish undertone */
+  --surface: #302c2c;        /* Dark Surface — elevated containers, slight differentiation */
+  --surface-warm: var(--surface); /* alias — no separate warm tier needed */
+
+  /* ─── Foreground (on dark) ────────────────────────────────────────
+   * Warm off-white text — never clinical pure white. */
+  --fg: #fdfcfc;             /* OpenCode Light — barely-warm off-white primary text */
+  --fg-2: #c8c6c4;           /* Warm light gray — secondary on dark */
+  --muted: #9a9898;          /* Mid Gray — secondary text, muted links */
+  --meta: #6e6e73;           /* Text Muted — disabled text, placeholders */
+
+  /* ─── Border (warm transparent) ──────────────────────────────────
+   * The warm red tint (rgba(15,0,0,...)) in borders ties them to the
+   * overall warm dark palette. Use #646262 for visible outlines. */
+  --border: #464343;         /* Warm dark border — visible against bg */
+  --border-soft: #302c2c;    /* Same as surface — barely-visible inner separator */
+
+  /* ─── Accent ──────────────────────────────────────────────────────
+   * Apple system blue — #007aff. Familiar, trustworthy, high-contrast
+   * on the warm dark canvas. The full three-stage hover sequence:
+   * #007aff → #0056b3 (hover) → #004085 (active). */
+  --accent: #007aff;
+  --accent-on: #ffffff;
+  --accent-hover: #0056b3;   /* Accent Blue Hover — explicitly defined */
+  --accent-active: #004085;  /* Accent Blue Active — deeply pressed */
+
+  /* ─── Semantic (Apple HIG palette) ────────────────────────────────
+   * Familiar trustworthy signals on a dark terminal canvas. */
+  --success: #30d158;        /* Apple system green */
+  --warn: #ff9f0a;           /* Apple system orange */
+  --danger: #ff3b30;         /* Apple system red */
+
+  /* ─── Typography ──────────────────────────────────────────────────
+   * Berkeley Mono is the ONLY font. No typographic variation — no
+   * display face, no body face — "everything is code" philosophy.
+   * Hierarchy via size and weight alone (400 / 500 / 700). */
+  --font-display: "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --font-body: "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --font-mono: "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+
+  /* Type scale — DESIGN.md §3. Heading 1 at 38px, rest at 16px variants.
+   * The system is intentionally compressed — terminal scale. */
+  --text-xs: 12px;
+  --text-sm: 14px;           /* Caption — footnotes, metadata (lh 2.0) */
+  --text-base: 16px;         /* Body — standard text (weight 400 or 500) */
+  --text-lg: 18px;
+  --text-xl: 22px;
+  --text-2xl: 28px;
+  --text-3xl: 38px;          /* Heading 1 — hero headlines (weight 700, lh 1.5) */
+  --text-4xl: 48px;          /* Extended display if needed */
+
+  --leading-body: 1.5;       /* Monospace grid breathes at 1.5 */
+  --leading-tight: 1.0;      /* Compact labels, tab items */
+  --tracking-display: 0em;   /* Monospace doesn't need letter-spacing manipulation */
+
+  /* ─── Spacing ─────────────────────────────────────────────────────
+   * 8px base unit. Generous extended scale (up to 96px) for sections.
+   * Sections separated by spacing alone — no decorative dividers. */
+  --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-y-desktop: 80px; /* Terminal-like generous spacing between sections */
+  --section-y-tablet: 64px;
+  --section-y-phone: 48px;
+
+  /* ─── Radius ──────────────────────────────────────────────────────
+   * Minimal: 4px everywhere, 6px for form inputs (the roundest element).
+   * "Terminals don't have rounded corners" — utilitarian aesthetic. */
+  --radius-sm: 4px;          /* Default for all elements */
+  --radius-md: 6px;          /* Form inputs — slightly more approachable */
+  --radius-lg: 8px;          /* Rare — largest container radius */
+  --radius-pill: 9999px;     /* Declared but not part of the OpenCode aesthetic */
+
+  /* ─── Elevation (FLAT) ────────────────────────────────────────────
+   * Zero shadows — consistent with the terminal aesthetic.
+   * Depth via border treatments and background color shifts ONLY.
+   * All three levels use rings/outlines, never blur shadows. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 0 0 2px var(--border); /* Slightly more prominent ring — no blur */
+
+  /* ─── Focus ring ──────────────────────────────────────────────────
+   * Accent blue focus ring — no shadow-based ring (flat system). */
+  --focus-ring: 0 0 0 2px var(--accent);
+
+  /* ─── Motion ──────────────────────────────────────────────────────
+   * Terminal-inspired: instant state changes. 100ms for snappy feedback. */
+  --motion-fast: 100ms;
+  --motion-base: 150ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ──────────────────────────────────────────────────────
+   * Narrow reading column (880px) — single-column, text-centric.
+   * Generous side margins focus attention on the content. */
+  --container-max: 880px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet: 20px;
+  --container-gutter-phone: 16px;
+}