④段整套同步（六节 ＋ 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/discord/DESIGN-de.md

@@ -0,0 +1,168 @@
+# Design System Inspired by Discord
+
+> Category: Produktivität & SaaS
+> Sprach-/Chat-Plattform. Tiefes Blurple, dunkle Oberflächen, verspielter Akzent-Charakter.
+
+## 1. Visuelles Thema & Atmosphäre
+
+Discords Produkt ist für Abende, Raids und Gruppensprache ausgelegt — daher sind alle Oberflächen konsequent dunkel gestaltet. Die Standardfläche ist das tiefe `Background Primary` (`#313338` helles Design, `#1e1f22` dunkles Design), wobei Chat-Spalten auf leicht helleren oder dunkleren Tönen geschichtet werden, um Kanäle, Threads und Seitenpanels zu kennzeichnen. Das charakteristische **Blurple** (`#5865f2`) ist dem Markenzeichen, primären CTAs, Erwähnungen und dem Eigenzuordnungs-Affordance vorbehalten — sparsam eingesetzt, damit es gegen die gedämpften Neutraltöne heraussticht.
+
+Die Typografie setzt auf **gg sans** (Discords individuellen Whitney-Ersatz) für Fließtext und Benutzeroberfläche, mit abgerundeten geometrischen Formen, die zugänglich wirken, aber in den kleinen Größen, die ein Chat-Client erfordert, lesbar bleiben. Überschriften skalieren inkrementell; Chat-Zeilen sind eng gefasst (4–8px zwischen Nachrichtengruppen), damit ein stundenlanges Scrollen nach oben übersichtlich bleibt.
+
+Die Formensprache ist abgerundet, aber nicht ballonweich: 8px Radien auf Karten, 4px auf Eingabefeldern, vollständige Pillen auf Status-Badges und Tags. Server werden als abgerundete quadratische Avatare mit 48px dargestellt, die beim Hover zu Kreisen werden — eine kleine Bewegung, die Teil der Markenidentität geworden ist.
+
+**Key Characteristics:**
+- Dunkle Oberflächen: `#1e1f22` / `#2b2d31` / `#313338` (3-stufige Tiefe)
+- Blurple `#5865f2` als einziger gesättigter Akzent auf der Chat-Oberfläche
+- gg sans (Whitney-Stil) für alle Texte — freundlich, geometrisch, neutral
+- Abgerundete quadratische Server-Avatare (16px Radius), die beim Hover in Kreise wechseln
+- Enger Chat-Zeilenabstand, großzügige Polsterung in Seitenpanels
+- Status-Punkte: grün online, gelb abwesend, rot nicht stören, grau offline
+- Pixel-exakte 1px-Trennlinien in dezenten Off-White-Tönen mit geringem Alpha
+
+## 2. Farbpalette & Rollen
+
+### Primär
+- **Blurple** (`#5865f2`): Markenfarbe, primäre CTA, Erwähnungs-Hervorhebung.
+- **Blurple Hover** (`#4752c4`): Hover/Aktiv-Zustand für Blurple.
+- **Blurple Soft** (`#7289da`): Legacy-Blurple, sekundärer Akzent im Marketing.
+
+### Oberfläche (Dunkles Design — Standard)
+- **Background Tertiary** (`#1e1f22`): Server-Listen-Leiste, tiefster Hintergrund.
+- **Background Secondary** (`#2b2d31`): Kanal-Seitenleiste, Einstellungs-Seitenleiste.
+- **Background Primary** (`#313338`): Chat-Oberfläche, Nachrichtenspalte.
+- **Background Floating** (`#111214`): Schwebende Popovers, Tooltips, Autovervollständigung.
+- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Hover-Überlagerung auf Zeilen.
+- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Aktive Zeile.
+
+### Oberfläche (Helles Design)
+- **Light Bg Primary** (`#ffffff`): Chat-Oberfläche im hellen Design.
+- **Light Bg Secondary** (`#f2f3f5`): Seitenleiste im hellen Design.
+- **Light Bg Tertiary** (`#e3e5e8`): Tiefste helle Oberfläche.
+
+### Text
+- **Header Primary** (`#f2f3f5`): Kanal-Header, Modal-Titel im dunklen Design.
+- **Header Secondary** (`#b5bac1`): Gedämpfte Header.
+- **Text Normal** (`#dbdee1`): Fließtext im dunklen Design — leicht kühler als reines Weiß.
+- **Text Muted** (`#949ba4`): Zeitstempel, Server-Namen, sekundäre Metadaten.
+- **Text Link** (`#00a8fc`): Hyperlinks in Nachrichten — Himmelblau, unterscheidbar von Blurple.
+- **Channels Default** (`#80848e`): Inaktiver Kanalname in der Seitenleiste.
+
+### Status & Semantisch
+- **Status Online** (`#23a55a`): Online-Punkt, Erfolgszustände.
+- **Status Idle** (`#f0b232`): Abwesend-Punkt, Away-Status.
+- **Status DND** (`#f23f43`): Nicht stören, dient auch als destruktives Rot.
+- **Status Streaming** (`#593695`): „Streaming"-Lila.
+- **Status Offline** (`#80848e`): Offline-Grau.
+- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Softer Blurple-Schimmer auf @mention-Zeilen.
+
+### Rahmen & Trennlinien
+- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Standard-Trennlinie im dunklen Design.
+- **Border Subtle** (`#3f4147`): Feste Trennlinie für Karten.
+
+## 3. Typografie-Regeln
+
+### Schriftfamilie
+- **Body / UI / Headings**: `gg sans`, mit Fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`
+- **Display (Legacy / Whitney)**: `Whitney`, mit Fallback: `gg sans`
+- **Code / Mono**: `"gg mono"`, mit Fallback: `Consolas, Andale Mono, Courier New, Courier, monospace`
+
+### Hierarchie
+
+| Rolle | Schrift | Größe | Gewicht | Zeilenhöhe | Zeichenabstand | Hinweise |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Marketing-Hero |
+| Seitenüberschrift | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Einstellungs-/Profil-Titel |
+| Kanalname | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, Kanal-Header |
+| Nachrichtentext | gg sans | 16px (1rem) | 400 | 1.375 | normal | Normaler Chat-Text |
+| Benutzername | gg sans | 16px (1rem) | 500 | 1.25 | normal | Verfasser einer Nachricht |
+| Zeitstempel | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | „Heute um 16:32 Uhr" |
+| Seitenleisten-Kanal | gg sans | 16px (1rem) | 500 | 1.25 | normal | Zeilen der Kanalliste |
+| Server-Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | Server-Header |
+| Bildunterschrift / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Statustext, Bearbeitungs-Tag |
+| Code Inline | gg mono | 0.875em | 400 | inherit | normal | Inline-`Code` |
+| Code-Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```dreifach-umzäunter``` Block |
+
+### Grundsätze
+- **Freundliche Geometrie**: gg sans ersetzt Whitney mit abgerundeten Abschlüssen bei a/g/s — die Marke möchte Wärme vermitteln, ohne die Lesbarkeit zu beeinträchtigen.
+- **Gewichtskontrast statt Farbkontrast**: Hierarchie entsteht durch Gewichtsschritte 400→500→600→700→800; die Oberfläche bleibt neutral.
+- **16px Fließtext**: Chat-Nachrichten werden nicht unter 16px verkleinert. Dichte entsteht durch Zeilenhöhe (1.375), nicht durch Schriftgröße.
+
+## 4. Komponentenstile
+
+### Schaltflächen
+
+**Primär**
+- Hintergrund: `#5865f2`
+- Text: `#ffffff`
+- Innenabstand: 8px 16px
+- Radius: 4px
+- Hover: `#4752c4`
+- Verwendung: Primäre CTAs, „Weiter", „Server beitreten"
+
+**Sekundär**
+- Hintergrund: `#4e5058`
+- Text: `#ffffff`
+- Innenabstand: 8px 16px
+- Radius: 4px
+- Hover: `#6d6f78`
+
+**Tertiär / Dezent (Link-Stil)**
+- Hintergrund: transparent
+- Text: `#dbdee1`
+- Hover: Text unterstrichen, kein Hintergrundwechsel
+
+**Destruktiv**
+- Hintergrund: `#da373c`
+- Text: `#ffffff`
+- Hover: `#a12d2f`
+
+### Eingabefelder
+- Hintergrund: `#1e1f22`
+- Text: `#dbdee1`
+- Rahmen: 1px solid `#1e1f22`
+- Radius: 4px
+- Innenabstand: 10px 12px
+- Fokus: Rahmen `#5865f2`
+
+### Server-Avatare
+- Größe: 48×48px
+- Radius: 16px (abgerundetes Quadrat) standardmäßig; wechselt beim Hover und im aktiven Zustand zu 50%.
+- Aktiver Zustand: 4px weiße Pille an der linken Kante der Symbol-Spalte.
+
+### Status-Punkte
+- Größe: 10×10px
+- Rahmen: 3px solid background-tertiary (erzeugt den „Einschnitt"-Effekt)
+- Position: unten rechts am Avatar.
+
+### Karten / Einbettungen
+- Hintergrund: `#2b2d31` (dunkel) oder `#f2f3f5` (hell)
+- Linker Rahmen: 4px solid Einbettungs-Akzentfarbe.
+- Radius: 4px
+- Innenabstand: 8px 16px
+
+### Erwähnungs-Pille
+- Hintergrund: `rgba(88, 101, 242, 0.3)`
+- Text: `#c9cdfb`
+- Innenabstand: 0 2px
+- Radius: 3px
+
+## 5. Abstände & Layout
+
+- **Basiseinheit**: 4px. Skala: 4, 8, 12, 16, 20, 24, 32, 40.
+- **Server-Leiste**: 72px breit, fest.
+- **Kanal-Seitenleiste**: 240px breit.
+- **Mitgliederliste**: 240px breit auf Desktop.
+- **Chat-Spalte**: fluid, min. 380px.
+
+## 6. Animation
+
+- **Dauer**: 200ms für Hover; 350ms für die Avatar-Kreis-Verwandlung; 80ms für Tooltip-Einblendung.
+- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` für die Avatar-Verwandlung (schneller Einstieg, dann Einpendeln).
+- **Benachrichtigungs-Puls**: 1,4s ease-in-out infinite auf dem Ungelesen-Erwähnungs-Indikator.
+
+## 7. Verwendungsrichtlinien
+
+- Die dunkle Hülle, kompakte Dichte und Blurple-Aktionshierarchie gemeinsam beibehalten; Blurple auf einem hellen Marketing-Layout wirkt dem Discord-Produktgefühl entgegen.
+- Navigationsintensive Oberflächen um Leisten, Seitenleisten und Chat-Spalten strukturieren statt um isolierte dekorative Karten.
+- Die abgerundete quadratische Avatar- und Status-Punkt-Sprache verwenden, wenn Personen, Server oder aktive Präsenz dargestellt werden.