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

@@ -0,0 +1,233 @@
+# System Projektowania Inspirowany Pinterestem
+
+> Category: Media & Consumer
+> Wizualne odkrywanie. Czerwony akcent, siatka masonry, obraz na pierwszym planie.
+
+## 1. Motyw Wizualny i Atmosfera
+
+Witryna Pinteresta to ciepłe, inspirujące płótno, które traktuje wizualne odkrywanie jak magazyn lifestyle'owy. Projekt opiera się na miękkim, lekko ciepłym białym tle, z Pinterest Red (`#e60023`) jako jedynym, wyrazistym akcentem marki. W przeciwieństwie do chłodnych błękitów większości platform technologicznych, skala neutralna Pinteresta ma wyraźnie ciepły podton — szarości przechylają się ku oliwce/piaskowi (`#91918c`, `#62625b`, `#e5e5e0`), a nie ku chłodnej stali, tworząc przytulną, rzemieślniczą atmosferę sprzyjającą przeglądaniu.
+
+Typografia używa Pin Sans — niestandardowego, zastrzeżonego kroju pisma z szerokim stosem awaryjnym, obejmującym japońskie czcionki, co odzwierciedla globalny zasięg Pinteresta. W skali wyświetlania (70px, grubość 600) Pin Sans tworzy duże, zachęcające nagłówki. W mniejszych rozmiarach system jest kompaktowy: przyciski 12px, podpisy 12–14px. System nazewnictwa zmiennych CSS (`--comp-*`, `--sema-*`, `--base-*`) ujawnia zaawansowaną, trójpoziomową architekturę tokenów projektowych: tokeny na poziomie komponentu, semantycznym i bazowym.
+
+To, co wyróżnia Pinterest, to hojny system zaokrągleń (12px–40px plus 50% dla kół) oraz ciepło zabarwione tła przycisków. Przycisk drugorzędny (`#e5e5e0`) ma wyraźnie ciepły, piaskowobeżowy ton, a nie zimną szarość. Główny czerwony przycisk używa promienia 16px — zaokrąglony, ale nie w kształcie pigułki. W połączeniu z ciepłymi tłami odznak (`hsla(60,20%,98%,.5)` — subtelna żółtawa poświata) i układami zdominowanymi przez fotografię efektem jest projekt, który wygląda rzemieślniczo i osobiście, a nie korporacyjnie i sterylnie.
+
+**Kluczowe Cechy:**
+- Ciepłe białe płótno z neutralnymi tonami oliwkowymi/piaskowymi — przytulne, nie kliniczne
+- Pinterest Red (`#e60023`) jako jedyny wyrazisty akcent — nigdy subtelny, zawsze pewny siebie
+- Niestandardowa czcionka Pin Sans z globalnym stosem awaryjnym (w tym CJK)
+- Trójpoziomowa architektura tokenów: `--comp-*` / `--sema-*` / `--base-*`
+- Ciepłe powierzchnie drugorzędne: piaskowa szarość (`#e5e5e0`), ciepła odznaka (`hsla(60,20%,98%,.5)`)
+- Hojne zaokrąglenia: 16px standardowe, do 40px dla dużych kontenerów
+- Treść na pierwszym planie — piny/obrazy są głównym elementem wizualnym
+- Ciemnofioletowy tekst (`#211922`) — ciepły, z nutą śliwki
+
+## 2. Paleta Kolorów i Role
+
+### Główna Marka
+- **Pinterest Red** (`#e60023`): Główne CTA, akcent marki — odważna, pewna siebie czerwień
+- **Green 700** (`#103c25`): `--base-color-green-700`, akcent sukcesu/natury
+- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, wciśnięta zieleń
+
+### Tekst
+- **Śliwkowa Czerń** (`#211922`): Tekst główny — ciepła, prawie czarna z podtonem śliwki
+- **Czerń** (`#000000`): Tekst drugorzędny, tekst przycisków
+- **Oliwkowa Szarość** (`#62625b`): Opisy drugorzędne, wyciszony tekst
+- **Ciepłe Srebro** (`#91918c`): `--comp-button-color-text-transparent-disabled`, tekst wyłączony, obramowania pól
+- **Biel** (`#ffffff`): Tekst na ciemnych/kolorowych powierzchniach
+
+### Interaktywne
+- **Niebieski Fokus** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, pierścienie fokusu
+- **Fiolet Wydajności** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, funkcje wydajności
+- **Fiolet Rekomendacji** (`#7e238b`): `--sema-color-hover-text-recommendation`, rekomendacja AI
+- **Niebieski Linków** (`#2b48d4`): Kolor tekstu linków
+- **Niebieski Facebooka** (`#0866ff`): `--facebook-background-color`, logowanie społecznościowe
+- **Wciśnięty Niebieski** (`#617bff`): `--base-color-pressed-blue-200`, stan wciśnięty
+
+### Powierzchnia i Obramowanie
+- **Piaskowa Szarość** (`#e5e5e0`): Tło przycisku drugorzędnego — ciepłe, rzemieślnicze
+- **Ciepłe Światło** (`#e0e0d9`): Tła okrągłych przycisków, odznaki
+- **Ciepły Napar** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, subtelne ciepłe tło odznaki
+- **Mgła** (`#f6f6f3`): Jasna powierzchnia (przy 50% kryciu)
+- **Obramowanie Wyłączone** (`#c8c8c1`): `--sema-color-border-disabled`, wyłączone obramowania
+- **Szarość Hover** (`#bcbcb3`): `--base-color-hover-grayscale-150`, obramowanie hover
+- **Ciemna Powierzchnia** (`#33332e`): Tła ciemnych sekcji
+
+### Semantyczne
+- **Czerwień Błędu** (`#9e0a0a`): Stany błędów pól wyboru/formularzy
+
+## 3. Zasady Typografii
+
+### Rodzina Czcionek
+- **Główna**: `Pin Sans`, zamienniki: `-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`
+
+### Hierarchia
+
+| Rola | Czcionka | Rozmiar | Grubość | Wysokość Linii | Odstęp Liter | Uwagi |
+|------|----------|---------|---------|----------------|--------------|-------|
+| Nagłówek Główny | Pin Sans | 70px (4.38rem) | 600 | normalny | normalny | Maksymalny impact |
+| Nagłówek Sekcji | Pin Sans | 28px (1.75rem) | 700 | normalny | -1.2px | Ujemne śledzenie |
+| Treść | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normalny | Standardowy odczyt |
+| Pogrubiony Podpis | Pin Sans | 14px (0.88rem) | 700 | normalny | normalny | Wyraziste metadane |
+| Podpis | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normalny | Mały tekst, tagi |
+| Przycisk | Pin Sans | 12px (0.75rem) | 400 | normalny | normalny | Etykiety przycisków |
+
+### Zasady
+- **Kompaktowa skala typograficzna**: Zakres to 12px–70px z dramatycznym skokiem — większość tekstu funkcjonalnego to 12–16px, tworząc gęstą, aplikacyjną hierarchię informacji.
+- **Ciepły rozkład grubości**: 600–700 dla nagłówków, 400–500 dla treści. Bez ultralekkich grubości — typografia zawsze wydaje się solidna.
+- **Ujemne śledzenie w nagłówkach**: -1.2px w nagłówkach 28px tworzy przytulne, bliskie tytuły sekcji.
+- **Pojedyncza rodzina czcionek**: Pin Sans obsługuje wszystko — nie wykryto drugorzędnej czcionki wyświetlania ani o stałej szerokości.
+
+## 4. Stylizacja Komponentów
+
+### Przyciski
+
+**Główny Czerwony**
+- Tło: `#e60023` (Pinterest Red)
+- Tekst: `#000000` (czarny — niezwykły wybór dla kontrastu na czerwonym)
+- Padding: 6px 14px
+- Promień: 16px (hojnie zaokrąglony, nie w kształcie pigułki)
+- Obramowanie: `2px solid rgba(255, 255, 255, 0)` (przezroczysty)
+- Fokus: semantyczne obramowanie + kontur przez zmienne CSS
+
+**Drugorzędny Piaskowy**
+- Tło: `#e5e5e0` (ciepła piaskowa szarość)
+- Tekst: `#000000`
+- Padding: 6px 14px
+- Promień: 16px
+- Fokus: ten sam semantyczny system obramowania
+
+**Okrągła Akcja**
+- Tło: `#e0e0d9` (ciepłe światło)
+- Tekst: `#211922` (śliwkowa czerń)
+- Promień: 50% (koło)
+- Zastosowanie: Akcje pinów, elementy sterowania nawigacją
+
+**Duch / Przezroczysty**
+- Tło: przezroczysty
+- Tekst: `#000000`
+- Brak obramowania
+- Zastosowanie: Trzeciorzędne akcje
+
+### Karty i Kontenery
+- Karty pinów na pierwszym planie fotografii z hojnym promieniem (12px–20px)
+- Brak tradycyjnego box-shadow na większości kart
+- Białe lub ciepłe mgłowe tła
+- Białe grube obramowanie 8px na niektórych kontenerach obrazów
+
+### Pola Wejściowe
+- Pole e-mail: białe tło, obramowanie `1px solid #91918c`, promień 16px, padding 11px 15px
+- Fokus: semantyczny system obramowania + konturu przez zmienne CSS
+
+### Nawigacja
+- Czysty nagłówek na białym lub ciepłym tle
+- Logo Pinteresta + pasek wyszukiwania wyśrodkowany
+- Pin Sans 16px dla linków nawigacyjnych
+- Akcenty Pinterest Red dla aktywnych stanów
+
+### Obróbka Obrazów
+- Siatka masonry w stylu pinów (charakterystyczny układ Pinteresta)
+- Zaokrąglone rogi: 12px–20px na obrazach
+- Fotografia jako główna treść — każdy pin to obraz
+- Grube białe obramowania (8px) na wyróżnionych kontenerach obrazów
+
+## 5. Zasady Układu
+
+### System Odstępów
+- Jednostka bazowa: 8px
+- Skala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
+- Duże skoki: 32px → 80px → 100px dla odstępów sekcji
+
+### Siatka i Kontener
+- Siatka masonry dla treści pinów (charakterystyczny układ)
+- Wyśrodkowane sekcje treści z hojną maksymalną szerokością
+- Pełnoszerokie ciemne stopka
+- Pasek wyszukiwania jako główny element nawigacji
+
+### Filozofia Białej Przestrzeni
+- **Gęstość inspiracji**: Siatka masonry pakuje piny ciasno — gęstość treści JEST propozycją wartości. Biała przestrzeń istnieje między sekcjami, nie wewnątrz siatki.
+- **Oddech powyżej, gęstość poniżej**: Sekcje hero/funkcje mają hojny padding; siatka pinów jest kompaktowa i immersywna.
+
+### Skala Zaokrągleń
+- Standardowe (12px): Małe karty, linki
+- Przycisk (16px): Przyciski, pola wejściowe, średnie karty
+- Komfortowe (20px): Karty funkcji
+- Duże (28px): Duże kontenery
+- Sekcja (32px): Elementy zakładek, duże panele
+- Hero (40px): Kontenery hero, duże bloki funkcji
+- Koło (50%): Przyciski akcji, wskaźniki zakładek
+
+## 6. Głębokość i Elewacja
+
+| Poziom | Leczenie | Zastosowanie |
+|--------|----------|--------------|
+| Płaski (Poziom 0) | Brak cienia | Domyślny — piny opierają się na treści, nie na cieniu |
+| Subtelny (Poziom 1) | Minimalny cień (z tokenów) | Podwyższone nakładki, rozwijane menu |
+| Fokus (Dostępność) | Pierścień `--sema-color-border-focus-outer-default` | Stany fokusu |
+
+**Filozofia Cieni**: Pinterest używa minimalnych cieni. Siatka masonry opiera się na treści (fotografii) do tworzenia zainteresowania wizualnego, a nie na efektach elewacji. Głębokość pochodzi z ciepła kolorów powierzchni i hojnego zaokrąglenia kontenerów.
+
+## 7. Co Robić i Czego Unikać
+
+### Robić
+- Używaj ciepłych neutralów (`#e5e5e0`, `#e0e0d9`, `#91918c`) — ciepły oliwkowo/piaskowy ton to tożsamość marki
+- Stosuj Pinterest Red (`#e60023`) tylko dla głównych CTA — jest odważny i wyjątkowy
+- Używaj wyłącznie Pin Sans — jedna czcionka do wszystkiego
+- Stosuj hojne zaokrąglenia: 16px dla przycisków/pól, 20px+ dla kart
+- Utrzymuj gęstą siatkę masonry — gęstość treści to wartość
+- Używaj ciepłych teł odznak (`hsla(60,20%,98%,.5)`) dla subtelnych ciepłych przemyceń
+- Używaj `#211922` (śliwkowej czerni) dla tekstu głównego — jest cieplejsza niż czysta czerń
+
+### Unikać
+- Nie używaj chłodnych szarości neutralnych — zawsze ciepłe/oliwkowe tony
+- Nie używaj czystej czerni (`#000000`) jako tekstu głównego — używaj śliwkowej czerni (`#211922`)
+- Nie używaj przycisków w kształcie pigułki — promień 16px jest zaokrąglony, ale nie w kształcie pigułki
+- Nie dodawaj ciężkich cieni — Pinterest jest z założenia płaski, głębokość pochodzi z treści
+- Nie używaj małego promienia zaokrąglenia (<12px) na kartach — hojne zaokrąglenie jest podstawą
+- Nie wprowadzaj dodatkowych kolorów marki — czerwień + ciepłe neutralne to kompletna paleta
+- Nie używaj cienkich grubości czcionek — Pin Sans minimum 400
+
+## 8. Responsywne Zachowanie
+
+### Punkty Przerwania
+| Nazwa | Szerokość | Kluczowe Zmiany |
+|-------|-----------|-----------------|
+| Mobilny | <576px | Jedna kolumna, kompaktowy układ |
+| Duży Mobilny | 576–768px | Siatka pinów 2-kolumnowa |
+| Tablet | 768–890px | Rozszerzona siatka |
+| Mały Desktop | 890–1312px | Standardowa siatka masonry |
+| Desktop | 1312–1440px | Pełny układ |
+| Duży Desktop | 1440–1680px | Rozszerzone kolumny siatki |
+| Ultraszeroki | >1680px | Maksymalna gęstość siatki |
+
+### Strategia Zwijania
+- Siatka pinów: 5+ kolumn → 3 → 2 → 1
+- Nawigacja: pasek wyszukiwania + ikony → uproszczona nawigacja mobilna
+- Sekcje funkcji: bok do boku → ułożone
+- Hero: 70px → skaluje się proporcjonalnie
+- Stopka: ciemna wielokolumnowa → ułożona
+
+## 9. Przewodnik Promptów Agenta
+
+### Szybka Referenca Kolorów
+- Marka: Pinterest Red (`#e60023`)
+- Tło: Biały (`#ffffff`)
+- Tekst: Śliwkowa Czerń (`#211922`)
+- Tekst drugorzędny: Oliwkowa Szarość (`#62625b`)
+- Powierzchnia przycisku: Piaskowa Szarość (`#e5e5e0`)
+- Obramowanie: Ciepłe Srebro (`#91918c`)
+- Fokus: Niebieski Fokus (`#435ee5`)
+
+### Przykładowe Prompty Komponentów
+- "Stwórz hero: białe tło. Nagłówek 70px Pin Sans grubość 600, śliwkowa czerń (#211922). Czerwony przycisk CTA (#e60023, promień 16px, padding 6px 14px). Drugorzędny piaskowy przycisk (#e5e5e0, promień 16px)."
+- "Zaprojektuj kartę pinu: białe tło, promień 16px, brak cienia. Fotografia wypełnia górę, opis 16px Pin Sans grubość 400 poniżej w #62625b."
+- "Zbuduj okrągły przycisk akcji: tło #e0e0d9, promień 50%, ikona #211922."
+- "Stwórz pole wejściowe: białe tło, 1px solid #91918c, promień 16px, padding 11px 15px. Fokus: niebieski kontur przez tokeny semantyczne."
+- "Zaprojektuj ciemną stopkę: tło #33332e. Logo Pinteresta w bieli. Linki 12px Pin Sans w #91918c."
+
+### Przewodnik Iteracji
+1. Ciepłe neutralne wszędzie — oliwkowe/piaskowe szarości, nigdy chłodna stal
+2. Pinterest Red tylko dla CTA — odważny i wyjątkowy
+3. Promień 16px na przyciskach/polach, 20px+ na kartach — hojny, ale nie w kształcie pigułki
+4. Pin Sans to jedyna czcionka — kompaktowy 12px dla UI, 70px dla wyświetlania
+5. Fotografia niesie projekt — UI pozostaje ciepłe i minimalne
+6. Śliwkowa czerń (#211922) dla tekstu — cieplejsza niż czysta czerń