④段整套同步（六节＋ 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。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,233 @@
+# Von Pinterest inspiriertes Designsystem
+
+> Category: Medien & Konsumenten
+> Visuelle Entdeckung. Roter Akzent, Masonry-Grid, Bild-zuerst.
+
+## 1. Visuelles Thema & Atmosphäre
+
+Pinterests Website ist eine warme, inspirationsgetriebene Leinwand, die visuelle Entdeckung wie ein Lifestyle-Magazin behandelt. Das Design basiert auf einem weichen, leicht warmen weißen Hintergrund mit Pinterest-Rot (`#e60023`) als einzigem, kräftigem Markenakzent. Im Gegensatz zu den kühlen Blautönen der meisten Tech-Plattformen hat Pinterests Neutralskala einen deutlich warmen Unterton — Grautöne neigen eher zu Oliv/Sand (`#91918c`, `#62625b`, `#e5e5e0`) als zu kühlem Stahl, was eine gemütliche, handwerkliche Atmosphäre erzeugt, die zum Stöbern einlädt.
+
+Die Typografie verwendet Pin Sans — eine benutzerdefinierte proprietäre Schrift mit einem breiten Fallback-Stack einschließlich japanischer Schriften, was Pinterests globale Reichweite widerspiegelt. Im Display-Maßstab (70px, Stärke 600) erzeugt Pin Sans große, einladende Überschriften. Bei kleineren Größen ist das System kompakt: Schaltflächen bei 12px, Bildunterschriften bei 12–14px. Das CSS-Variablenbenennungssystem (`--comp-*`, `--sema-*`, `--base-*`) offenbart eine ausgefeilte dreistufige Design-Token-Architektur: Komponenten-, Semantik- und Basistoken.
+
+Was Pinterest auszeichnet, ist sein großzügiges Rahmenradius-System (12px–40px, plus 50% für Kreise) und warme, getönte Schaltflächenhintergründe. Der Sekundärknopf (`#e5e5e0`) hat einen deutlich warmen, sandähnlichen Ton statt kaltem Grau. Der primäre rote Knopf verwendet 16px Radius — gerundet, aber nicht pillenförmig. Kombiniert mit warmen Badge-Hintergründen (`hsla(60,20%,98%,.5)` — ein subtiler gelb-warmer Wash) und fotografiedominierten Layouts entsteht ein Design, das handgefertigt und persönlich wirkt, nicht korporativ und steril.
+
+**Wesentliche Merkmale:**
+- Warme weiße Leinwand mit Oliv/Sand-getönten Neutralfarben — gemütlich, nicht klinisch
+- Pinterest-Rot (`#e60023`) als einziger kräftiger Akzent — niemals subtil, immer selbstbewusst
+- Pin-Sans-Schrift mit globalem Fallback-Stack (einschließlich CJK)
+- Dreistufige Token-Architektur: `--comp-*` / `--sema-*` / `--base-*`
+- Warme Sekundäroberflächen: Sandgrau (`#e5e5e0`), warmes Badge (`hsla(60,20%,98%,.5)`)
+- Großzügiger Rahmenradius: 16px Standard, bis zu 40px für große Container
+- Fotografie-zuerst-Inhalt — Pins/Bilder sind das primäre visuelle Element
+- Dunkler Nah-Lila-Text (`#211922`) — warm, mit einem Hauch von Pflaume
+
+## 2. Farbpalette & Rollen
+
+### Primäre Marke
+- **Pinterest-Rot** (`#e60023`): Primäres CTA, Markenakzent — kräftiges, selbstbewusstes Rot
+- **Grün 700** (`#103c25`): `--base-color-green-700`, Erfolgs-/Naturakzent
+- **Grün 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, gedrücktes Grün
+
+### Text
+- **Pflaumenschwarz** (`#211922`): Primärtext — warmes Nahschwarz mit Pflaumenunterton
+- **Schwarz** (`#000000`): Sekundärtext, Schaltflächentext
+- **Olivgrau** (`#62625b`): Sekundärbeschreibungen, gedämpfter Text
+- **Warmsilber** (`#91918c`): `--comp-button-color-text-transparent-disabled`, deaktivierter Text, Eingaberahmen
+- **Weiß** (`#ffffff`): Text auf dunklen/farbigen Oberflächen
+
+### Interaktiv
+- **Fokusblau** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, Fokusringe
+- **Leistungslila** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, Leistungsmerkmale
+- **Empfehlungslila** (`#7e238b`): `--sema-color-hover-text-recommendation`, KI-Empfehlung
+- **Linkblau** (`#2b48d4`): Linktextfarbe
+- **Facebook-Blau** (`#0866ff`): `--facebook-background-color`, Soziales Login
+- **Gedrücktes Blau** (`#617bff`): `--base-color-pressed-blue-200`, gedrückter Zustand
+
+### Oberfläche & Rahmen
+- **Sandgrau** (`#e5e5e0`): Sekundärer Schaltflächenhintergrund — warm, handwerklich
+- **Warmes Licht** (`#e0e0d9`): Kreisschaltflächenhintergründe, Badges
+- **Warmer Wash** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, subtiler warmer Badge-Hintergrund
+- **Nebel** (`#f6f6f3`): Helle Oberfläche (50% Deckkraft)
+- **Rahmen deaktiviert** (`#c8c8c1`): `--sema-color-border-disabled`, deaktivierte Rahmen
+- **Hover-Grau** (`#bcbcb3`): `--base-color-hover-grayscale-150`, Hover-Rahmen
+- **Dunkle Oberfläche** (`#33332e`): Hintergründe dunkler Abschnitte
+
+### Semantisch
+- **Fehlerrot** (`#9e0a0a`): Kontrollkästchen/Formularfehlerzustände
+
+## 3. Typografieregeln
+
+### Schriftfamilie
+- **Primär**: `Pin Sans`, Fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
+
+### Hierarchie
+
+| Rolle | Schrift | Größe | Stärke | Zeilenhöhe | Buchstabenabstand | Hinweise |
+|------|------|------|--------|-------------|----------------|-------|
+| Display-Hero | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Maximaler Eindruck |
+| Abschnittsüberschrift | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Negativer Tracking |
+| Fließtext | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Standardlesen |
+| Bildunterschrift Fett | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Starke Metadaten |
+| Bildunterschrift | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Kleiner Text, Tags |
+| Schaltfläche | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Schaltflächenbeschriftungen |
+
+### Grundsätze
+- **Kompakter Typmaßstab**: Der Bereich ist 12px–70px mit einem dramatischen Sprung — der meiste Funktionstext liegt bei 12–16px und schafft eine dichte, app-ähnliche Informationshierarchie.
+- **Warme Gewichtsverteilung**: 600–700 für Überschriften, 400–500 für Fließtext. Keine ultraleichten Gewichte — die Schrift fühlt sich immer substanziell an.
+- **Negativer Tracking bei Überschriften**: -1,2px bei 28px-Überschriften erzeugt gemütliche, intime Abschnittstitel.
+- **Einzelne Schriftfamilie**: Pin Sans übernimmt alles — keine Sekundär-Display- oder Monospace-Schrift erkannt.
+
+## 4. Komponentenstile
+
+### Schaltflächen
+
+**Primäres Rot**
+- Hintergrund: `#e60023` (Pinterest-Rot)
+- Text: `#000000` (Schwarz — ungewöhnliche Wahl für den Kontrast auf Rot)
+- Innenabstand: 6px 14px
+- Radius: 16px (großzügig gerundet, nicht pillenförmig)
+- Rahmen: `2px solid rgba(255, 255, 255, 0)` (transparent)
+- Fokus: semantischer Rahmen + Umriss über CSS-Variablen
+
+**Sekundäres Sand**
+- Hintergrund: `#e5e5e0` (warmes Sandgrau)
+- Text: `#000000`
+- Innenabstand: 6px 14px
+- Radius: 16px
+- Fokus: dasselbe semantische Rahmensystem
+
+**Kreisförmige Aktion**
+- Hintergrund: `#e0e0d9` (warmes Licht)
+- Text: `#211922` (Pflaumenschwarz)
+- Radius: 50% (Kreis)
+- Verwendung: Pin-Aktionen, Navigationssteuerelemente
+
+**Ghost / Transparent**
+- Hintergrund: transparent
+- Text: `#000000`
+- Kein Rahmen
+- Verwendung: Tertiäre Aktionen
+
+### Karten & Container
+- Fotografiezuerst-Pin-Karten mit großzügigem Radius (12px–20px)
+- Kein traditioneller Box-Schatten auf den meisten Karten
+- Weiße oder warme Nebelfarbe als Hintergrund
+- 8px weißer dicker Rahmen auf einigen Bild-Containern
+
+### Eingabefelder
+- E-Mail-Eingabe: weißer Hintergrund, `1px solid #91918c` Rahmen, 16px Radius, 11px 15px Innenabstand
+- Fokus: semantisches Rahmen- + Umrisssystem über CSS-Variablen
+
+### Navigation
+- Sauberer Header auf weißem oder warmem Hintergrund
+- Pinterest-Logo + Suchleiste zentriert
+- Pin Sans 16px für Navigationslinks
+- Pinterest-Rot als Akzent für aktive Zustände
+
+### Bildbehandlung
+- Pin-artiges Masonry-Grid (charakteristisches Pinterest-Layout)
+- Abgerundete Ecken: 12px–20px auf Bildern
+- Fotografie als primärer Inhalt — jeder Pin ist ein Bild
+- Dicke weiße Rahmen (8px) auf hervorgehobenen Bild-Containern
+
+## 5. Layoutgrundsätze
+
+### Abstandssystem
+- Basiseinheit: 8px
+- Skala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
+- Große Sprünge: 32px → 80px → 100px für Abschnittsabstände
+
+### Raster & Container
+- Masonry-Grid für Pin-Inhalte (charakteristisches Layout)
+- Zentrierte Inhaltsabschnitte mit großzügiger Maximalbreite
+- Vollbreiter dunkler Footer
+- Suchleiste als primäres Navigationselement
+
+### Weißraum-Philosophie
+- **Inspirationsdichte**: Das Masonry-Grid packt Pins eng — die Inhaltsdichte IST das Wertversprechen. Weißraum existiert zwischen Abschnitten, nicht innerhalb des Grids.
+- **Oben atmen, unten dicht**: Hero-/Feature-Abschnitte erhalten großzügige Abstände; das Pin-Grid ist kompakt und immersiv.
+
+### Rahmenradiusskala
+- Standard (12px): Kleine Karten, Links
+- Schaltfläche (16px): Schaltflächen, Eingaben, mittlere Karten
+- Komfortabel (20px): Feature-Karten
+- Groß (28px): Große Container
+- Abschnitt (32px): Tab-Elemente, große Panels
+- Hero (40px): Hero-Container, große Feature-Blöcke
+- Kreis (50%): Aktionsschaltflächen, Tab-Indikatoren
+
+## 6. Tiefe & Elevation
+
+| Ebene | Behandlung | Verwendung |
+|-------|-----------|-----|
+| Flach (Ebene 0) | Kein Schatten | Standard — Pins setzen auf Inhalt, nicht auf Schatten |
+| Subtil (Ebene 1) | Minimaler Schatten (aus Tokens) | Erhöhte Overlays, Dropdowns |
+| Fokus (Barrierefreiheit) | `--sema-color-border-focus-outer-default` Ring | Fokuszustände |
+
+**Schattenphilosophie**: Pinterest verwendet minimale Schatten. Das Masonry-Grid setzt auf Inhalt (Fotografie), um visuelles Interesse zu erzeugen, statt auf Elevationseffekte. Tiefe entsteht durch die Wärme der Oberflächenfarben und die großzügige Rundung der Container.
+
+## 7. Gebote und Verbote
+
+### Gebot
+- Warme Neutralfarben verwenden (`#e5e5e0`, `#e0e0d9`, `#91918c`) — der warme Oliv/Sand-Ton ist die Identität
+- Pinterest-Rot (`#e60023`) nur für primäre CTAs verwenden — es ist kräftig und einzigartig
+- Pin Sans ausschließlich verwenden — eine Schrift für alles
+- Großzügigen Rahmenradius anwenden: 16px für Schaltflächen/Eingaben, 20px+ für Karten
+- Das Masonry-Grid dicht halten — Inhaltsdichte ist der Wert
+- Warme Badge-Hintergründe (`hsla(60,20%,98%,.5)`) für subtile warme Washes verwenden
+- `#211922` (Pflaumenschwarz) für Primärtext verwenden — wärmer als reines Schwarz
+
+### Verbot
+- Keine kühlen Grauneutralen verwenden — immer warm/olivfarben
+- Kein reines Schwarz (`#000000`) als Primärtext — Pflaumenschwarz (`#211922`) verwenden
+- Keine pillenförmigen Schaltflächen — 16px Radius ist gerundet, aber nicht pillenförmig
+- Keine schweren Schatten hinzufügen — Pinterest ist flach by Design, Tiefe kommt aus dem Inhalt
+- Keinen kleinen Rahmenradius (<12px) auf Karten — die großzügige Rundung ist essenziell
+- Keine zusätzlichen Markenfarben einführen — Rot + warme Neutralfarben ist die vollständige Palette
+- Keine dünnen Schriftstärken verwenden — Pin Sans mindestens 400
+
+## 8. Responsives Verhalten
+
+### Haltepunkte
+| Name | Breite | Wesentliche Änderungen |
+|------|-------|-------------|
+| Mobil | <576px | Einzelne Spalte, kompaktes Layout |
+| Mobil Groß | 576–768px | 2-spaltiges Pin-Grid |
+| Tablet | 768–890px | Erweitertes Grid |
+| Desktop Klein | 890–1312px | Standard-Masonry-Grid |
+| Desktop | 1312–1440px | Vollständiges Layout |
+| Großer Desktop | 1440–1680px | Erweiterte Grid-Spalten |
+| Ultrabreit | >1680px | Maximale Grid-Dichte |
+
+### Reduktionsstrategie
+- Pin-Grid: 5+ Spalten → 3 → 2 → 1
+- Navigation: Suchleiste + Icons → vereinfachte mobile Navigation
+- Feature-Abschnitte: nebeneinander → gestapelt
+- Hero: 70px → skaliert proportional herunter
+- Footer: dunkle Mehrspalten → gestapelt
+
+## 9. Agent-Prompt-Leitfaden
+
+### Schnelle Farbreferenz
+- Marke: Pinterest-Rot (`#e60023`)
+- Hintergrund: Weiß (`#ffffff`)
+- Text: Pflaumenschwarz (`#211922`)
+- Sekundärtext: Olivgrau (`#62625b`)
+- Schaltflächenoberfläche: Sandgrau (`#e5e5e0`)
+- Rahmen: Warmsilber (`#91918c`)
+- Fokus: Fokusblau (`#435ee5`)
+
+### Beispiel-Komponentenprompts
+- „Hero erstellen: weißer Hintergrund. Überschrift bei 70px Pin Sans Stärke 600, Pflaumenschwarz (#211922). Roter CTA-Knopf (#e60023, 16px Radius, 6px 14px Innenabstand). Sekundärer Sandknopf (#e5e5e0, 16px Radius)."
+- „Pin-Karte gestalten: weißer Hintergrund, 16px Radius, kein Schatten. Fotografie füllt oben, 16px Pin Sans Stärke 400 Beschreibung unten in #62625b."
+- „Kreisförmige Aktionsschaltfläche erstellen: #e0e0d9 Hintergrund, 50% Radius, #211922 Symbol."
+- „Eingabefeld erstellen: weißer Hintergrund, 1px solid #91918c, 16px Radius, 11px 15px Innenabstand. Fokus: blauer Umriss über semantische Tokens."
+- „Dunklen Footer gestalten: #33332e Hintergrund. Pinterest-Schriftlogo in Weiß. 12px Pin-Sans-Links in #91918c."
+
+### Iterationsleitfaden
+1. Warme Neutralfarben überall — Oliv/Sandgrau, niemals kühler Stahl
+2. Pinterest-Rot nur für CTAs — kräftig und einzigartig
+3. 16px Radius auf Schaltflächen/Eingaben, 20px+ auf Karten — großzügig, aber nicht pillenförmig
+4. Pin Sans ist die einzige Schrift — kompakt bei 12px für die Benutzeroberfläche, 70px für Display
+5. Fotografie trägt das Design — die Benutzeroberfläche bleibt warm und minimal
+6. Pflaumenschwarz (#211922) für Text — wärmer als reines Schwarz