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

@@ -0,0 +1,269 @@
+# System Designu Inspirowany przez Cohere
+
+> Kategoria: AI i LLM
+> Platforma AI dla przedsiębiorstw. Żywe gradienty, estetyka pulpitu nawigacyjnego bogatego w dane.
+
+## 1. Motyw Wizualny i Atmosfera
+
+Interfejs Cohere to dopracowany pulpit dowodzenia klasy enterprise — pewny siebie, czysty i zaprojektowany tak, by AI sprawiało wrażenie poważnej infrastruktury, a nie produktu konsumenckiego. Doświadczenie rozgrywa się na jasnym, białym tle, gdzie treść organizowana jest w hojnie zaokrąglone karty (promień 22px), tworzące organiczny, chmuropodobny język konteneryzacji. To witryna skierowana do CTO i architektów korporacyjnych: profesjonalna, ale nie zimna; wyrafinowana, ale nie onieśmielająca.
+
+Język projektowy łączy dwa światy dzięki systemowi podwójnych krojów pisma: CohereText — niestandardowy szeryfowy krój wyświetlaczowy o ciasnym śledztwie — nadaje nagłówkom powagę technologicznego manifestu, natomiast Unica77 Cohere Web obsługuje wszystkie teksty treści i UI z geometryczną szwajcarską precyzją. Ta para szeryfowo-bezszeryfowa tworzy osobowość „pewnego autorytetu spotkającego inżynierską klarowność", doskonale odzwierciedlającą platformę AI dla przedsiębiorstw.
+
+Kolor stosowany jest z ekstremalnym umiarkowaniem — interfejs jest niemal całkowicie czarno-biały z chłodnymi szarymi obramowaniami (`#d9d9dd`, `#e5e7eb`). Fioletowo-śliwkowy pojawia się wyłącznie w fotograficznych pasmach hero, sekcjach gradientowych oraz interaktywnym błękicie (`#1863dc`) sygnalizującym stany hover i focus. Ta chromatyczna powściągliwość sprawia, że kiedy kolor JUŻ się pojawia — na zrzutach ekranu produktu, fotografii biznesowej i w głębokiej fioletowej sekcji — niesie maksymalną wagę wizualną.
+
+**Kluczowe Cechy:**
+- Jasne białe tło z chłodnymi szarymi obramowaniami kontenerów
+- Sygnaturowy promień obramowania 22px — charakterystyczne „zaokrąglenie kart Cohere"
+- Podwójny niestandardowy krój pisma: CohereText (wyświetlaczowy szeryfowy) + Unica77 (bezszeryfowy do treści)
+- Chromatyczna powściągliwość klasy enterprise: czerń, biel, chłodne szarości, minimalistyczny akcent fioletowo-niebieski
+- Głęboko fioletowe/śliwkowe sekcje hero zapewniające dramatyczny kontrast
+- Przyciski ghost/przezroczyste, które na hover zmieniają się na niebieski
+- Fotografia biznesowa ukazująca zróżnicowane zastosowania w rzeczywistym świecie
+- CohereMono dla kodu i etykiet technicznych z transformacjami na wielkie litery
+
+## 2. Paleta Kolorów i Role
+
+### Podstawowe
+- **Czerń Cohere** (`#000000`): Tekst głównych nagłówków i elementy o maksymalnym znaczeniu.
+- **Prawie Czerń** (`#212121`): Standardowy kolor linków treści — nieco łagodniejszy niż czysta czerń.
+- **Głęboka Ciemność** (`#17171c`): Prawie czerń z niebieskim odcieniem, przeznaczona dla nawigacji i tekstu w ciemnych sekcjach.
+
+### Drugorzędne i Akcentowe
+- **Błękit Interakcji** (`#1863dc`): Główny interaktywny akcent — pojawia się na hover przycisków, stanach focus i aktywnych linkach. Jedyny chromatyczny kolor akcji.
+- **Pierścień Niebieski** (`#4c6ee6` przy 50%): Kolor pierścienia Tailwind dla wskaźników fokusa klawiaturowego.
+- **Fiolet Fokusa** (`#9b60aa`): Kolor obramowania fokusa pola tekstowego — stonowany fiolet.
+
+### Tło i Powierzchnie
+- **Czysta Biel** (`#ffffff`): Główne tło strony i powierzchnia kart.
+- **Śnieg** (`#fafafa`): Subtelnie wyniesione powierzchnie i jasne tła sekcji.
+- **Najjaśniejsza Szarość** (`#f2f2f2`): Obramowania kart i najdelikatniejsze linie kontenerów.
+
+### Neutralne i Tekstowe
+- **Stonowany Łupek** (`#93939f`): Odpominięte linki stopki i tekst trzeciorzędny — chłodna szarość z lekkim niebiesko-fioletowym odcieniem.
+- **Chłodne Obramowanie** (`#d9d9dd`): Standardowe obramowania sekcji i elementów listy — chłodna, lekko fioletowa szarość.
+- **Jasne Obramowanie** (`#e5e7eb`): Jaśniejszy wariant obramowania — standardowa gray-200 z Tailwind.
+
+### System Gradientów
+- **Pasmo Hero Fioletowo-Śliwkowe**: Głęboko fioletowe sekcje gradientowe tworzące dramatyczny kontrast na tle białego tła. Pojawiają się jako pełnoszerokościowe pasma mieszczące zrzuty ekranu produktu i kluczowe komunikaty.
+- **Gradient Ciemnej Stopki**: Strona przechodzi przez głęboki fiolet/antracyt do czarnej stopki, tworząc efekt „zmierzchu".
+
+## 3. Zasady Typografii
+
+### Rodzina Czcionek
+- **Wyświetlaczowa**: `CohereText`, z rezerwowymi: `Space Grotesk, Inter, ui-sans-serif, system-ui`
+- **Treść / UI**: `Unica77 Cohere Web`, z rezerwowymi: `Inter, Arial, ui-sans-serif, system-ui`
+- **Kod**: `CohereMono`, z rezerwowymi: `Arial, ui-sans-serif, system-ui`
+- **Ikony**: `CohereIconDefault` (niestandardowa czcionka ikonograficzna)
+
+### Hierarchia
+
+| Rola | Czcionka | Rozmiar | Grubość | Interlinia | Śledzenie | Uwagi |
+|------|----------|---------|---------|------------|-----------|-------|
+| Wyświetlaczowy / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (ciasna) | -1.44px | Maksymalny impakt, autorytet szeryfowy |
+| Wyświetlaczowy Drugorzędny | CohereText | 60px (3.75rem) | 400 | 1.00 (ciasna) | -1.2px | Duże nagłówki sekcji |
+| Nagłówek Sekcji | Unica77 | 48px (3rem) | 400 | 1.20 (ciasna) | -0.48px | Tytuły sekcji funkcji |
+| Podnagłówek | Unica77 | 32px (2rem) | 400 | 1.20 (ciasna) | -0.32px | Nagłówki kart, nazwy funkcji |
+| Tytuł Funkcji | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Mniejsze tytuły sekcji |
+| Treść Duża | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Akapity wprowadzające |
+| Treść / Przycisk | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Standardowa treść, tekst przycisku |
+| Przycisk Średni | Unica77 | 14px (0.88rem) | 500 | 1.71 (rozluźniona) | normal | Mniejsze przyciski, wyróżnione etykiety |
+| Podpis | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadane, opisy |
+| Etykieta Wersalikami | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Etykiety sekcji pisane wersalikami |
+| Mały | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Najmniejszy tekst, linki stopki |
+| Kod Mikro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Tiny uppercase code labels |
+
+### Zasady
+- **Szeryfowy do deklaracji, bezszeryfowy do użytku**: CohereText niesie głos marki w skali wyświetlaczowej — jego szeryfy nadają nagłówkom autorytet opublikowanych badań. Unica77 obsługuje wszystko, co funkcjonalne, z geometryczno-szwajcarską neutralnością.
+- **Ujemne śledzenie w dużej skali**: CohereText używa śledzenia -1.2px do -1.44px przy 60–72px, tworząc gęste, efektowne bloki tekstowe.
+- **Jedna grubość treści**: Niemal cały tekst Unica77 ma grubość 400. Grubość 500 pojawia się wyłącznie dla wyróżnienia małych przycisków. System opiera się na rozmiarze i odstępach, a nie na kontraście grubości.
+- **Etykiety kodu wersalikami**: CohereMono używa wersalików z dodatnim śledzeniem (0.16–0.28px) dla tagów technicznych i znaczników sekcji.
+
+## 4. Style Komponentów
+
+### Przyciski
+
+**Ghost / Przezroczysty**
+- Tło: przezroczyste (`rgba(255, 255, 255, 0)`)
+- Tekst: Czerń Cohere (`#000000`)
+- Brak widocznego obramowania
+- Hover: tekst zmienia się na Błękit Interakcji (`#1863dc`), krycie 0.8
+- Focus: pełne obramowanie 2px w Błękicie Interakcji
+- Główny styl przycisku — niewidoczny dopóki nie zostanie poddany interakcji
+
+**Ciemny Pełny**
+- Tło: ciemne/czarne
+- Tekst: Czysta Biel
+- Do CTA na jasnych powierzchniach
+- Pigułkowy lub standardowy promień
+
+**Obramowany**
+- Kontener oparty na obramowaniu
+- Używany w działaniach drugorzędnych
+
+### Karty i Kontenery
+- Tło: Czysta Biel (`#ffffff`)
+- Obramowanie: cienka linia Najjaśniejszej Szarości (`1px solid #f2f2f2`) dla subtelnych kart; Chłodne Obramowanie (`#d9d9dd`) dla wyróżnionych
+- Promień: **22px** — sygnaturowy promień Cohere dla głównych kart, obrazów i kontenerów dialogowych. Również 4px, 8px, 16px, 20px dla mniejszych elementów
+- Cień: minimalny — Cohere opiera się na kolorze tła i obramowaniach, a nie na cieniach
+- Specjalny: promień `0px 0px 22px 22px` (zaokrąglenie tylko od dołu) dla kontenerów sekcji
+- Dialog: promień 8px dla okienek modalnych/dialogowych
+
+### Pola Tekstowe i Formularze
+- Tekst: biały na ciemnym polu, czarny na jasnym
+- Obramowanie fokusa: Fiolet Fokusa (`#9b60aa`) z `1px solid`
+- Cień fokusa: czerwony pierścień (`rgb(179, 0, 0) 0px 0px 0px 2px`) — prawdopodobnie dla sygnalizacji stanu błędu
+- Obrys fokusa: Błękit Interakcji, linia 2px
+
+### Nawigacja
+- Czysta pozioma nawigacja na białym lub ciemnym tle
+- Logo: wordmark Cohere (niestandardowe SVG)
+- Linki: ciemny tekst, 16px Unica77
+- CTA: ciemny pełny przycisk
+- Mobile: zwijanie do hamburgera
+
+### Obróbka Obrazów
+- Fotografia biznesowa z różnorodną tematyką i środowiskami
+- Fioletowo odcieniona fotografia hero dla dramatycznych sekcji
+- Zrzuty ekranu UI produktu na ciemnych powierzchniach
+- Obrazy z promieniem 22px odpowiadającym systemowi kart
+- Sekcje z pełnoszerokościowym fioletowym gradientem
+
+### Charakterystyczne Komponenty
+
+**System Kart 22px**
+- Promień obramowania 22px to sygnatura wizualna Cohere
+- Wszystkie główne karty, obrazy i kontenery używają tego promienia
+- Tworzy chmuropodobną, organiczną miękkość wyróżniającą się spośród typowych 8–12px
+
+**Pasek Zaufania Enterprise**
+- Logo firm wyświetlane w poziomym pasku
+- Demonstruje adopcję przez przedsiębiorstwa
+- Czyste, monochromatyczne traktowanie logotypów
+
+**Fioletowe Pasma Hero**
+- Pełnoszerokościowe, głęboko fioletowe sekcje mieszczące prezentacje produktów
+- Tworzą dramatyczne przerwy wizualne w białym układzie strony
+- Zrzuty ekranu produktu unoszą się wewnątrz fioletowego środowiska
+
+**Tagi Kodu Wersalikami**
+- CohereMono wersalikami ze śledzeniem
+- Używane jako znaczniki sekcji i etykiety kategoryzacji
+- Tworzy techniczną, ustrukturyzowaną hierarchię informacji
+
+## 5. Zasady Układu
+
+### System Odstępów
+- Jednostka bazowa: 8px
+- Skala: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
+- Padding przycisku zmienia się w zależności od wariantu
+- Wewnętrzny padding karty: około 24–32px
+- Pionowe odstępy sekcji: hojne (56–60px między sekcjami)
+
+### Siatka i Kontener
+- Maksymalna szerokość kontenera: do 2560px (bardzo szeroka) z responsywnym skalowaniem
+- Hero: wyśrodkowany z dramatyczną typografią
+- Sekcje funkcji: wielokolumnowe siatki kart
+- Sekcje enterprise: pełnoszerokościowe fioletowe pasma
+- Wykryto 26 punktów przełamania — ekstremalnie granularny system responsywny
+
+### Filozofia Przestrzeni Białej
+- **Klarowność enterprise**: Każda sekcja prezentuje jedną wyraźną propozycję z przestrzenią do oddychania.
+- **Fotografia jako bohater**: Duże sekcje fotograficzne zapewniają zainteresowanie wizualne bez potrzeby dekoracyjnych elementów projektowych.
+- **Grupowanie kartami**: Powiązana treść grupowana jest w karty z zaokrągleniem 22px, tworząc naturalne klastry informacyjne.
+
+### Skala Promienia Obramowania
+- Ostry (4px): Elementy nawigacji, małe tagi, paginacja
+- Komfortowy (8px): Okna dialogowe, kontenery drugorzędne, małe karty
+- Hojny (16px): Wyróżnione kontenery, średnie karty
+- Duży (20px): Duże karty funkcji
+- Sygnaturowy (22px): Główne karty, obrazy hero, główne kontenery — TEN promień Cohere
+- Pigułkowy (9999px): Przyciski, tagi, wskaźniki statusu
+
+## 6. Głębia i Elewacja
+
+| Poziom | Traktowanie | Zastosowanie |
+|--------|-------------|--------------|
+| Płaski (Poziom 0) | Brak cienia, brak obramowania | Tło strony, bloki tekstowe |
+| Obramowany (Poziom 1) | `1px solid #f2f2f2` lub `#d9d9dd` | Standardowe karty, separatory listy |
+| Pasmo Fioletowe (Poziom 2) | Pełnoszerokościowe ciemne fioletowe tło | Sekcje hero, prezentacje funkcji |
+
+**Filozofia Cieni**: Cohere jest niemal wolny od cieni. Głębia komunikowana jest poprzez **kontrast koloru tła** (białe karty na fioletowych pasmach, biała powierzchnia na śniegu), **konteneryzację obramowaniem** (chłodne szare obramowania) i dramatyczne **naprzemienne przejścia sekcji od jasnych do ciemnych**. Gdy elementy wymagają elewacji, osiągają ją przez bycie białymi na ciemnym tle, a nie przez rzucanie cieni.
+
+## 7. Nakazy i Zakazy
+
+### Nakazy
+- Używaj promienia obramowania 22px na wszystkich głównych kartach i kontenerach — to sygnatura wizualna
+- Używaj CohereText dla nagłówków wyświetlaczowych (72px, 60px) z ujemnym śledzeniem
+- Używaj Unica77 dla całego tekstu treści i UI przy grubości 400
+- Utrzymuj paletę czarno-białą z chłodnymi szarymi obramowaniami
+- Używaj Błękitu Interakcji (#1863dc) wyłącznie dla interaktywnych stanów hover/focus
+- Używaj głęboko fioletowych sekcji dla dramatycznych przerw wizualnych i prezentacji produktów
+- Stosuj wersaliki + śledzenie w CohereMono dla etykiet sekcji
+- Utrzymuj fotografię odpowiednią dla przedsiębiorstw z różnorodną tematyką
+
+### Zakazy
+- Nie używaj promienia obramowania innego niż 22px na głównych kartach — sygnaturowy promień ma znaczenie
+- Nie wprowadzaj ciepłych kolorów — paleta jest ściśle chłodnotonalna
+- Nie używaj mocnych cieni — głębia pochodzi z kontrastu kolorów i obramowań
+- Nie używaj grubości pogrubionej (700+) dla tekstu treści — zakres to 400–500
+- Nie pomijaj hierarchii szeryfowo/bezszeryfowej — CohereText dla nagłówków, Unica77 dla treści
+- Nie używaj fioletu jako koloru powierzchni kart — fiolet zarezerwowany jest dla pełnoszerokościowych sekcji
+- Nie redukuj odstępów sekcji poniżej 40px — układy enterprise potrzebują przestrzeni do oddychania
+- Nie dodawaj dekoracji do przycisków domyślnie — ghost/przezroczysty to stan bazowy
+
+## 8. Zachowanie Responsywne
+
+### Punkty Przełamania
+| Nazwa | Szerokość | Kluczowe Zmiany |
+|-------|-----------|-----------------|
+| Małe Mobile | <425px | Kompaktowy układ, minimalne odstępy |
+| Mobile | 425–640px | Jedna kolumna, karty układane w stos |
+| Duże Mobile | 640–768px | Drobne korekty odstępów |
+| Tablet | 768–1024px | Rozpoczynają się siatki 2-kolumnowe |
+| Desktop | 1024–1440px | Pełny układ wielokolumnowy |
+| Duży Desktop | 1440–2560px | Maksymalna szerokość kontenera |
+
+*Wykryto 26 punktów przełamania — jedna z najbardziej granularnie responsywnych witryn w zbiorze danych.*
+
+### Cele Dotykowe
+- Przyciski odpowiednio zwymiarowane dla interakcji dotykowej
+- Linki nawigacji z komfortowymi odstępami
+- Powierzchnie kart jako cele dotykowe
+
+### Strategia Zwijania
+- **Nawigacja**: Pełna nawigacja zwija się do hamburgera
+- **Siatki funkcji**: Wielokolumnowy → 2-kolumnowy → jedna kolumna
+- **Tekst hero**: 72px → 48px → 32px progresywne skalowanie
+- **Sekcje fioletowe**: Utrzymują pełną szerokość, treść układana w stos
+- **Siatki kart**: 3 → 2 → 1 kolumna
+
+### Zachowanie Obrazów
+- Fotografia skaluje się proporcjonalnie wewnątrz kontenerów z promieniem 22px
+- Zrzuty ekranu produktu zachowują proporcje
+- Sekcje fioletowe skalują tło proporcjonalnie
+
+## 9. Przewodnik po Promptach dla Agenta
+
+### Szybkie Odniesienie do Kolorów
+- Tekst Główny: „Czerń Cohere (#000000)"
+- Tło Strony: „Czysta Biel (#ffffff)"
+- Tekst Drugorzędny: „Prawie Czerń (#212121)"
+- Akcent Hover: „Błękit Interakcji (#1863dc)"
+- Stonowany Tekst: „Stonowany Łupek (#93939f)"
+- Obramowania Kart: „Najjaśniejsza Szarość (#f2f2f2)"
+- Obramowania Sekcji: „Chłodne Obramowanie (#d9d9dd)"
+
+### Przykładowe Prompty Komponentów
+- „Utwórz sekcję hero na Czystej Bieli (#ffffff) z CohereText przy 72px grubości 400, line-height 1.0, letter-spacing -1.44px. Tekst w Czerni Cohere. Podtytuł w Unica77 przy 18px grubości 400, line-height 1.4."
+- „Zaprojektuj kartę funkcji z promieniem obramowania 22px, obramowaniem 1px solid Najjaśniejszej Szarości (#f2f2f2) na białym tle. Tytuł w Unica77 przy 32px, letter-spacing -0.32px. Treść w Unica77 przy 16px, Stonowany Łupek (#93939f)."
+- „Zbuduj przycisk ghost: przezroczyste tło, tekst w Czerni Cohere w Unica77 przy 16px. Na hover tekst zmienia się na Błękit Interakcji (#1863dc) z kryciem 0.8. Focus: obrys 2px solid Błękit Interakcji."
+- „Utwórz głęboko fioletową pełnoszerokościową sekcję z białym tekstem. CohereText przy 60px dla nagłówka. Zrzut ekranu produktu unosi się wewnątrz z promieniem obramowania 22px."
+- „Zaprojektuj etykietę sekcji używając CohereMono przy 14px, wersaliki, letter-spacing 0.28px. Tekst w Stonowanym Łupku (#93939f)."
+
+### Przewodnik po Iteracji
+1. Skup się na JEDNYM komponencie na raz
+2. Zawsze używaj promienia 22px dla głównych kart — „zaokrąglenie kart Cohere"
+3. Określaj krój pisma — CohereText dla nagłówków, Unica77 dla treści, CohereMono dla etykiet
+4. Elementy interaktywne używają Błękitu Interakcji (#1863dc) wyłącznie na hover
+5. Utrzymuj białe powierzchnie z chłodnymi szarymi obramowaniami — bez ciepłych tonów
+6. Fiolet jest przeznaczony dla pełnoszerokościowych sekcji, nigdy dla teł kart