④段整套同步（六节＋ 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,366 @@
+# System Projektowania Inspirowany Nike
+
+> Category: E-Commerce & Retail
+> Sprzedaż sportowa. Monochromatyczny interfejs, masywna typografia wersalikami, fotografia pełnokadrowa.
+
+## 1. Motyw Wizualny i Atmosfera
+
+Nike.com to kinetyczna katedra handlu detalicznego — witryna, która przekształca wybuchową energię sportu w cyfrowe doświadczenie zakupowe. Projekt opiera się na zasadzie radykalnej prostoty: wszystko sprowadza się do czerni, bieli i szarości, by fotografii sportowej i kolorom produktów dać przestrzeń do dominowania bez konkurencji. Efekt przypomina nie tyle stronę internetową, co sportową edycję magazynu złożoną z precyzją luksusowego periodyku. Każdy piksel powierzchni albo sprzedaje produkt, albo ku niemu kieruje.
+
+„Podium CDS" (wewnętrzny Core Design System Nike) ustanawia agresywnie monochromatyczną podstawę. Interfejs znika w tekście w kolorze czerni (`#111111`) i białych powierzchniach, pozwalając fotografii bohaterów — pocącym się atletom, butom w locie, energii stadionu — nieść ciężar emocjonalny. Gdy kolor pojawia się w interfejsie, pełni niemal wyłącznie funkcję informacyjną: czerwony dla błędów, niebieski dla linków, zielony dla potwierdzeń. Sam produkt jest historią koloru. Ta powściągliwość tworzy wizualny paradoks: najbardziej kolorowe strony w internecie wyglądają najbardziej minimalistycznie, bo wszelka żywość pochodzi z towaru, a nie z interfejsu.
+
+System typograficzny to druga połowa wizualnej tożsamości Nike. Masywne nagłówki wersalikami w Nike Futura ND — specjalnie skrojonej, zwężonej odmianie Futury z niemożliwie ciasną interlinią (0.90) — przebijają się przez obrazy bohaterów niczym typograficzny wstrząs. Poniżej nagłówków rodzina Helvetica Now obsługuje wszystko — od nawigacji po opisy produktów — ze szwajcarską precyzją i czytelnością. Ten podział między ekspresywną typografią wyświetlaczy a funkcjonalnym tekstem podstawowym odzwierciedla dwoistość marki Nike: inspiracja spotyka się z wykonaniem.
+
+**Kluczowe Cechy Charakterystyczne:**
+- Monochromatyczny interfejs (czerń/biel/szarość), w którym jedynym źródłem koloru jest fotografia produktowa
+- Masywna typografia wyświetlaczy wersalikami (96px, interlinia 0.90), przebijająca się przez obrazy bohaterów
+- Fotografia pełnokadrowa bez zaokrągleń narożników — obraz wypełnia każdą dostępną krawędź
+- Przyciski w kształcie pigułki (promień 30px) jako główny element interaktywny
+- Siatka odstępów 8px z atletyczną dyscypliną — każdy pomiar wpasowuje się w system
+- Architektura zakupowa oparta na kategoriach z dużymi kartami nawigacyjnymi ze zdjęciami
+- Model głębokości bez cieni i z minimalną ilością obramowań — zróżnicowanie powierzchni wyłącznie przez przesunięcia w skali szarości
+
+## 2. Paleta Kolorów i Role
+
+### Podstawowe
+
+- **Nike Black** (`#111111`): Fundament — tekst podstawowy, tła przycisków, tekst nawigacji, nakładki na bohaterów. Celowo nie jest czystą czernią (#000000), co tworzy nieco łagodniejsze wrażenia podczas czytania
+- **Nike White** (`#FFFFFF`): Główne tło strony, tekst przycisków na ciemnym tle, powierzchnie kart, tło paska nawigacji
+
+### Powierzchnie i Tła
+
+- **Snow** (`#FAFAFA`): Najjaśniejsza powierzchnia, subtelne zróżnicowanie zbliżone do bieli (--podium-cds-color-grey-50)
+- **Light Gray** (`#F5F5F5`): Tło drugorzędne, wypełnienie pól wyszukiwania, placeholder obrazu, szkielet ładowania (--podium-cds-color-grey-100)
+- **Hover Gray** (`#E5E5E5`): Tło stanu najechania, wypełnienie wyłączonego przycisku (--podium-cds-color-grey-200)
+- **Dark Surface** (`#28282A`): Tło główne w ciemnych/odwróconych sekcjach (--podium-cds-color-grey-800)
+- **Deep Charcoal** (`#1F1F21`): Odwrócone tło podstawowe, najciemniejsza powierzchnia poza czernią (--podium-cds-color-grey-900)
+- **Dark Hover** (`#39393B`): Stan najechania na ciemnych tłach (--podium-cds-color-grey-700)
+
+### Neutralne i Tekstowe
+
+- **Primary Text** (`#111111`): Główny tekst podstawowy, nagłówki, linki nawigacyjne (--podium-cds-color-text-primary)
+- **Secondary Text** (`#707072`): Tekst opisowy, metadane, znaczniki czasu, etykiety cen (--podium-cds-color-text-secondary)
+- **Disabled Text** (`#9E9EA0`): Elementy nieaktywne, opcje niedostępne (--podium-cds-color-text-disabled)
+- **Disabled Inverse** (`#4B4B4D`): Wyłączony tekst na ciemnych tłach (--podium-cds-color-text-disabled-inverse)
+- **Border Primary** (`#707072`): Standardowy kolor obramowania, zgodny z tekstem drugorzędnym
+- **Border Secondary** (`#CACACB`): Subtelne obramowania, obramowania pól, linie podziału (--podium-cds-color-grey-300)
+- **Border Disabled** (`#CACACB`): Nieaktywny stan obramowania
+- **Border Active** (`#111111`): Aktywne/skupione obramowanie, zgodne z tekstem podstawowym
+
+### Semantyczne i Akcentowe
+
+- **Nike Red** (`#D30005`): Krytyczne błędy, plakietki wyprzedaży, pilne powiadomienia (--podium-cds-color-red-600)
+- **Bright Red** (`#EE0005`): Red-500, nieco jaśniejsza czerwień dla podkreślenia
+- **Nike Orange Badge** (`#D33918`): Tekst plakietek, promocyjne oznaczenia (--podium-cds-color-text-badge)
+- **Orange Flash** (`#FF5000`): Wyrazisty akcent pomarańczowy (--podium-cds-color-orange-400)
+- **Success Green** (`#007D48`): Potwierdzenie, dostępność, stany pozytywne (--podium-cds-color-green-600)
+- **Success Inverse** (`#1EAA52`): Sukces na ciemnych tłach (--podium-cds-color-green-500)
+- **Link Blue** (`#1151FF`): Linki tekstowe, informacyjne wyróżnienia (--podium-cds-color-blue-500)
+- **Info Inverse** (`#1190FF`): Linki na ciemnych tłach (--podium-cds-color-blue-400)
+- **Warning Yellow** (`#FEDF35`): Tła ostrzeżeń, banery zwracające uwagę (--podium-cds-color-yellow-200)
+- **Focus Ring** (`rgba(39, 93, 197, 1)`): Pierścień wskaźnika fokusa klawiatury
+
+### Rozszerzone Spektrum Kolorów (Podium CDS)
+
+Każda rampa kolorów przebiega od 50 do 900 do ekspresywnego użycia w kampaniach i stronach produktowych:
+
+- **Red**: `#FFE5E5` → `#EE0005` → `#530300`
+- **Orange**: `#FFE2D6` → `#FF5000` → `#3E1009`
+- **Yellow**: `#FEF087` → `#FCA600` → `#99470A`
+- **Green**: `#DFFFB9` → `#1EAA52` → `#003C2A`
+- **Teal**: `#D4FFFB` → `#008E98` → `#043441`
+- **Blue**: `#D6EEFF` → `#1151FF` → `#020664`
+- **Purple**: `#E4E1FC` → `#6E0FF6` → `#1C0060`
+- **Pink**: `#FFE1F3` → `#ED1AA0` → `#4C012D`
+
+### System Gradientów
+
+Nike unika gradientów w interfejsie. Gdy gradienty się pojawiają, mają charakter fotograficzny — nakładane na tła bohaterów produktowych (np. czerwony but na gradiencie od czerwonego do głębszej czerwieni). Sam system projektowania używa wyłącznie jednolitych kolorów.
+
+## 3. Zasady Typografii
+
+### Rodzina Czcionek
+
+**Wyświetlaczy:** Nike Futura ND (specjalna zwężona odmiana Futury, ekskluzywna dla Nike)
+- Zamienniki: Helvetica Now Text Medium, Helvetica, Arial
+- Używana wyłącznie do dużych nagłówków wyświetlanych wersalikami
+- Charakterystycznie ciasna interlinia (0.90) i transformacja na wielkie litery
+
+**Nagłówkowa:** Helvetica Now Display Medium
+- Zamienniki: Helvetica, Arial
+- Używana do nagłówków sekcji i tytułów produktów przy 24–32px
+
+**Treściowa Medium:** Helvetica Now Text Medium (waga 500)
+- Zamienniki: Helvetica, Arial
+- Używana do linków, przycisków, podpisów, wyróżnionego tekstu podstawowego
+
+**Treściowa:** Helvetica Now Text (waga 400)
+- Zamienniki: Helvetica, Arial
+- Używana do standardowego tekstu podstawowego, opisów, metadanych
+
+**Arabska:** Neue Frutiger Arabic — alternatywa specyficzna dla danej lokalizacji
+
+### Hierarchia
+
+| Rola | Rozmiar | Waga | Interlinia | Odstęp liter | Uwagi |
+|------|---------|------|------------|--------------|-------|
+| Wyświetlacza | 96px | 500 | 0.90 | — | Nike Futura ND, wersaliki, nagłówki bohaterów |
+| Nagłówek 1 | 32px | 500 | 1.20 | — | Helvetica Now Display Medium, tytuły sekcji |
+| Nagłówek 2 | 24px | 500 | 1.20 | — | Helvetica Now Display Medium, podsekcje |
+| Nagłówek 3 | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, tytuły kart |
+| Treść | 16px | 400 | 1.75 | — | Helvetica Now Text, opisy produktów |
+| Treść Medium | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, wyróżniony tekst |
+| Link | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, linki nawigacyjne |
+| Link Mały | 14px | 500 | 1.86 | — | Helvetica Now Text Medium, linki stopki/narzędziowe |
+| Przycisk | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, tekst CTA |
+| Przycisk Mały | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, przyciski drugorzędne |
+| Podpis | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, etykiety cen |
+| Mały | 12px | 500 | 1.50 | — | Helvetica Now Text Medium, znaczniki czasu |
+| Bardzo Mały | 12px | 400 | 1.50 | — | Helvetica Now Text, tekst prawny |
+
+### Zasady
+
+Typografia Nike to studium napięcia. Warstwa wyświetlaczy — Nike Futura ND w 96px z druzgocącą interlinią 0.90 — jest zaprojektowana tak, by wyglądała jak tablica wyników na stadionie: masywna, zwężona, pisana wersalikami, niemożliwa do zignorowania. Zmienia nagłówki w bojowe okrzyki. Poniżej warstwy wyświetlaczy Helvetica Now stanowi kliniczny kontrapunkt: szwajcarska precyzja czytelności z hojną interlinią 1.75 dla komfortowego przeglądania produktów. Waga 500 (Medium) dominuje w całym tekście podstawowym, nadając prozie Nike nieznaczną asertywność bez ciężaru pogrubienia — każde zdanie czyta się jak pewna siebie rekomendacja, nie jak krzyk.
+
+## 4. Style Komponentów
+
+### Przyciski
+
+**Podstawowy**
+- Tło: Nike Black (`#111111`)
+- Tekst: Biały (`#FFFFFF`), 16px/500, Helvetica Now Text Medium
+- Obramowanie: brak
+- Promień obramowania: w pełni zaokrąglona pigułka (30px)
+- Padding: ~12px 24px
+- Najechanie: tło zmienia się na Grey-500 (`#707072`), kolor tekstu przy najechaniu
+- Aktywny: efekt ripple scale(0) z opacity 0.5
+- Fokus: 2px box-shadow ring w `rgba(39, 93, 197, 1)`
+- Przejście: background 200ms ease
+
+**Podstawowy na Ciemnym Tle**
+- Tło: Biały (`#FFFFFF`)
+- Tekst: Czarny (`#111111`)
+- Najechanie: tło zmienia się na Grey-300 (`#CACACB`)
+
+**Drugorzędny (Obrysowany)**
+- Tło: przezroczyste
+- Tekst: Nike Black (`#111111`)
+- Obramowanie: 1.5px solid `#CACACB` (grey-300)
+- Promień obramowania: 30px
+- Najechanie: obramowanie ciemnieje do `#707072`, tło do grey-200
+
+**Wyłączony**
+- Tło: Grey-200 (`#E5E5E5`)
+- Tekst: Grey-400 (`#9E9EA0`)
+- Kursor: not-allowed
+
+**Przycisk Ikonowy**
+- Tło: Grey-100 (`#F5F5F5`)
+- Kształt: promień 30px (lub 50% dla okrągłego)
+- Padding: 6px
+- Najechanie: tło Grey-500
+
+### Karty i Kontenery
+
+- Tło: Biały (`#FFFFFF`) — w większości przypadków bez widocznej granicy karty
+- Promień obramowania: 0px dla kart produktów ze zdjęciami (obrazy krawędź do krawędzi), 20px dla interaktywnych kontenerów
+- Cień: brak — Nike w ogóle nie używa cieni kart
+- Najechanie: brak efektu uniesienia na kartach produktów; podkreślenie na linkach tekstowych wewnątrz kart
+- Karty produktów: zdjęcie na górze (bez promienia), metadane tekstowe poniżej z odstępem 12px
+- Karty kategorii: pełnokadrowa fotografia z nakładką tekstową na ciemnym gradiencie
+- Przejście: opacity 200ms ease przy zamianie zdjęcia po najechaniu
+
+### Pola Wejściowe i Formularze
+
+- Tło: Grey-100 (`#F5F5F5`)
+- Obramowanie: 1px solid `#CACACB` gdy widoczne, lub bez obramowania przy wyszukiwaniu
+- Promień obramowania: 24px (pola wyszukiwania), 8px (pola formularzy)
+- Czcionka: Helvetica Now Text, 16px
+- Fokus: obramowanie zmienia się na `#111111` (border-active), 2px focus ring w `rgba(39, 93, 197, 1)`
+- Błąd: obramowanie `#D30005` (krytyczny)
+- Placeholder: Grey-500 (`#707072`)
+- Przejście: border-color 200ms ease
+
+### Nawigacja
+
+- Tło: Biały (`#FFFFFF`), przyklejony
+- Wysokość: ~60px na komputerze
+- Lewa strona: logo Nike Swoosh (SVG 24x24px)
+- Środek: linki kategorii (Nowości i Wyróżnione, Mężczyźni, Kobiety, Dzieci, Wyprzedaż) 16px/500 Helvetica Now Text Medium
+- Prawa strona: Wyszukiwanie (pole wejściowe o promieniu 24px), Ulubione, ikony Koszyka
+- Najechanie: kolor tekstu zmienia się na Grey-500 (`#707072`)
+- Mobilna: hamburger menu, nakładka pełnoekranowa
+- Górny baner: pasek promocyjny z ciemnym tłem (#111111) i białym tekstem
+
+### Obróbka Obrazów
+
+- Obrazy bohaterów: pełnokadrowe, bez promienia obramowania, krawędź do krawędzi
+- Siatka produktów: proporcja kwadratowa (1:1) lub 4:3, bez promienia obramowania
+- Karty kategorii: 16:9 lub 4:3, pełnokadrowe z nakładką tekstową
+- Placeholder obrazu: jednolite tło Grey-100 (`#F5F5F5`)
+- Leniwe ładowanie: natywne loading="lazy", szkielet używa tła #F5F5F5
+- Najechanie na produkt: zamiana na zdjęcie dodatkowe (widok z przodu → z boku)
+
+### Banery Promocyjne
+
+- Ciemne tło pełnej szerokości (`#111111`) z białym tekstem
+- Ciasny padding (8-12px pionowo)
+- Tekst wyśrodkowany, 12px/500 Helvetica Now Text Medium
+- Używane dla promocji wysyłkowych, korzyści członkowskich, ogłoszeń wyprzedaży
+
+## 5. Zasady Układu
+
+### System Odstępów
+
+Jednostka bazowa: 4px (podstawowa siatka to wielokrotności 8px)
+
+| Token | Wartość | Zastosowanie |
+|-------|---------|--------------|
+| space-1 | 4px | Ciasne odstępy ikon, odstępy inline |
+| space-2 | 8px | Jednostka bazowa, odstępy ikon przycisków |
+| space-3 | 12px | Wewnętrzny padding kart, ciasne marginesy |
+| space-4 | 16px | Standardowy padding, odstępy nawigacji |
+| space-5 | 20px | Odstępy kart produktów |
+| space-6 | 24px | Wewnętrzny padding sekcji, odstępy siatki |
+| space-7 | 32px | Podziały sekcji |
+| space-8 | 48px | Główny padding sekcji |
+| space-9 | 64px | Padding sekcji bohaterów |
+| space-10 | 80px | Duże odstępy sekcji |
+
+### Siatka i Kontener
+
+- Maksymalna szerokość kontenera: 1920px
+- Standardowa szerokość treści: ~1440px z poziomym paddingiem
+- Siatka produktów: 3 kolumny na komputerze, 2 kolumny na tablecie, 1 kolumna na urządzeniu mobilnym
+- Siatka kategorii: 3 kolumny z pełnokadrową fotografią
+- Odstęp siatki: 4-12px między kartami produktów (celowo ciasny)
+- Poziomy padding: 48px komputer, 24px tablet, 16px mobilny
+
+### Filozofia Białej Przestrzeni
+
+Strategia białej przestrzeni Nike jest celowo agresywna — nie w luksusowy, swobodny sposób marki modowej, lecz w sprężony, wysokogęstościowy sposób wypełniający każdy piksel treścią lub intencjonalną pustką. Siatki produktów używają minimalnych odstępów (4-12px), by tworzyć poczucie obfitości i wyboru. Podziały sekcji są hojne (48-80px), by oddzielać konteksty zakupowe. Ogólny efekt to sklep wypełniony produktami, który pozostaje jednak czytelny w nawigacji — jak dobrze zorganizowany superstore sportowy.
+
+### Skala Promieni Obramowania
+
+| Wartość | Kontekst |
+|---------|---------|
+| 0px | Zdjęcia produktów, fotografia bohaterów (ostre krawędzie) |
+| 8px | Pola formularzy (inne niż wyszukiwanie) |
+| 18px | Małe elementy interaktywne |
+| 20px | Kontenery, karty z treścią interfejsu |
+| 24px | Pola wyszukiwania, średnie pigułki |
+| 30px | Przyciski, tagi, filtry (pełna pigułka) |
+| 50% | Okrągłe przyciski ikonowe, placeholdery awatarów |
+
+## 6. Głębokość i Elewacja
+
+| Poziom | Obróbka | Zastosowanie |
+|--------|---------|--------------|
+| Płaski | Brak cienia, brak obramowania | Stan domyślny dla wszystkiego |
+| Separator | `0px -1px 0px 0px #E5E5E5 inset` | Subtelna linia wewnętrzna między sekcjami |
+| Fokus | `0 0 0 2px rgba(39, 93, 197, 1)` | Pierścień fokusa klawiatury |
+| Nakładka | Ciemny scrim nad fotografią | Czytelność tekstu na obrazie |
+
+Filozofia elewacji Nike jest radykalnie płaska. Nie ma cieni kart, uniesień po najechaniu ani unoszących się elementów. Głębokość komunikowana jest wyłącznie przez kolor — ciemne sekcje cofają się, jasne sekcje wysuwają się do przodu, przesunięcia szarości wskazują zmiany stanu. Ta płaskość wzmacnia sportową, konkretną osobowość marki: bez wizualnych ozdób, tylko bezpośrednia komunikacja. Jedynym „cieniem" w całym systemie jest 1px wbudowana linia separatora i wymagany przez dostępność pierścień fokusa.
+
+### Dekoracyjna Głębokość
+
+- **Nakładki na fotografię bohaterów**: Ciemne gradienty scrims na pełnokadrowej fotografii dla czytelności tekstu
+- **Tła gradientowe produktów**: Kolorowe tła za głównymi zdjęciami produktowymi (np. czerwony but na czerwonym gradiencie)
+- **Pasy banerów**: Jednolite ciemne paski promocyjne (#111111) na górze strony
+
+## 7. Zasady Do i Nie Rób
+
+### Rób
+
+- Używaj Nike Black (#111111) dla całego tekstu podstawowego — nigdy czystego #000000
+- Utrzymuj przyciski w kształcie pigułki (promień 30px) i ogranicz je do wariantów podstawowego/drugorzędnego
+- Używaj pełnokadrowej fotografii krawędź do krawędzi dla sekcji bohaterów — bez promienia obramowania na obrazach
+- Pozwól, by fotografia produktowa była jedynym źródłem żywości kolorów; utrzymuj interfejs monochromatycznie
+- Używaj Nike Futura ND wersalikami WYŁĄCZNIE dla nagłówków wyświetlaczy (96px+)
+- Zachowuj ciasne odstępy siatki produktów (4-12px) dla gęstego, obfitego wrażenia
+- Używaj Grey-100 (#F5F5F5) dla wszystkich teł pól wejściowych i placeholderów
+- Rezerwuj kolor wyłącznie dla znaczenia semantycznego (czerwony=błąd, zielony=sukces, niebieski=link)
+- Używaj wagi 500 (Medium) dla wszystkich interaktywnych elementów tekstowych
+
+### Nie Rób
+
+- Nie dodawaj cieni do kart — model elewacji Nike jest całkowicie płaski
+- Nie używaj promienia obramowania na zdjęciach produktów — zaokrąglone narożniki mają tylko elementy interfejsu
+- Nie wprowadzaj kolorów marki spoza skali szarości dla elementów interfejsu
+- Nie używaj Nike Futura ND poniżej 24px — to wyłącznie krój wyświetlaczy
+- Nie dodawaj efektów uniesienia przy najechaniu — karty Nike nie animują się po najechaniu
+- Nie używaj wagi zwykłej (400) dla przycisków ani linków — zawsze używaj 500
+- Nie umieszczaj kolorowych teł za elementami interfejsu — kolor jest zarezerwowany dla kontekstów produktowych
+- Nie używaj więcej niż dwóch poziomów hierarchii tekstu na kartę (tytuł + treść)
+- Nie dodawaj dekoracyjnych separatorów — 1px wbudowana linia to jedyny wzorzec separatora
+- Nie zmiękczaj kontrastu — projekt Nike celowo maksymalizuje czerń na bieli
+
+## 8. Zachowanie Responsywne
+
+### Punkty Przełamania
+
+| Nazwa | Szerokość | Kluczowe Zmiany |
+|-------|-----------|-----------------|
+| Mobilny | <640px | Jedna kolumna, nawigacja hamburger, tekst wyświetlacza skaluje się w dół, ciasny padding 16px |
+| Mały Tablet | 640-768px | Zaczyna się siatka produktów 2-kolumnowa, nawigacja nadal zwinięta |
+| Tablet | 768-960px | Siatki 2-kolumnowe, karty kategorii skalują się, poziomy padding 24px |
+| Mały Komputer | 960-1024px | Nawigacja rozwija się do pełnej poziomej, 3-kolumnowa siatka produktów |
+| Komputer | 1024-1440px | Pełny układ, rozwinięta nawigacja, siatki 3-kolumnowe, padding 48px |
+| Duży Komputer | >1440px | Kontener o maksymalnej szerokości wyśrodkowany, zwiększone marginesy, obrazy bohaterów pełnokadrowe |
+
+### Cele Dotykowe
+
+- Minimalny cel dotykowy: 44x44px (WCAG AAA)
+- Ikony nawigacji mobilnej: obszar dotykowy 48x48px
+- Karty produktów: cała powierzchnia jest dotykalna
+- Pigułki filtrów: minimalna wysokość 36px z paddingiem 12px
+
+### Strategia Zwijania
+
+- **Nawigacja**: Pełne linki kategorii → hamburger menu poniżej 960px; ikony wyszukiwania, ulubionych i koszyka pozostają widoczne
+- **Siatki produktów**: 3 kol. → 2 kol. przy 960px → 1 kol. przy 640px
+- **Sekcje bohaterów**: Tekst wyświetlacza skaluje się od 96px → 64px → 48px; obrazy bohaterów pozostają pełnokadrowe we wszystkich rozmiarach
+- **Karty kategorii**: 3 kol. → 2 kol. → 1 kol. z zachowaną pełnokadrową fotografią
+- **Padding sekcji**: 80px → 48px → 32px → 24px w miarę zawężania okna widoku
+- **Baner promocyjny**: tekst zawija lub ucina się, zachowuje ciemne tło
+
+### Zachowanie Obrazów
+
+- Responsywne obrazy przez Nike CDN (`c.static-nike.com`) z parametrami szerokości
+- Obrazy produktów: srcset z wieloma rozdzielczościami (w_320, w_640, w_960, w_1920)
+- Obrazy bohaterów: pełnokadrowe we wszystkich punktach przełamania, proporcje zmieniają się (16:9 komputer → 4:3 mobilny)
+- Leniwe ładowanie: natywne loading="lazy", placeholder grey-100 podczas ładowania
+- Kierowanie artystyczne: kadry bohaterów zmieniają się między kompozycjami na komputerze i urządzeniu mobilnym
+
+## 9. Przewodnik po Promptach dla Agenta
+
+### Szybkie Odniesienie do Kolorów
+
+- Podstawowe CTA: Nike Black (`#111111`)
+- Tło: Biały (`#FFFFFF`)
+- Powierzchnia drugorzędna: Light Gray (`#F5F5F5`)
+- Tekst nagłówków: Nike Black (`#111111`)
+- Tekst podstawowy / najechanie: Secondary Text (`#707072`)
+- Obramowanie: Border Secondary (`#CACACB`)
+- Błąd: Nike Red (`#D30005`)
+- Link: Link Blue (`#1151FF`)
+
+### Przykładowe Prompty Komponentów
+
+- "Utwórz sekcję bohatera produktowego z pełnokadrową fotografią krawędź do krawędzi, bez promienia obramowania, ciemną nakładką gradientową dla tekstu oraz masywnym nagłówkiem 96px/500 wersalikami w stylu Nike Futura z interlinią 0.90 i przyciskiem pigułką Nike Black (#111111) o promieniu 30px"
+- "Zaprojektuj 3-kolumnową siatkę kart produktów z kwadratowymi obrazami (bez promienia obramowania), odstępem 4px między kartami, nazwą produktu 16px/500 Nike Black (#111111), ceną 14px/500 i tekstem drugorzędnym w Grey-500 (#707072)"
+- "Zbuduj przyklejony biały pasek nawigacji z logo wyrównanym do lewej, wyśrodkowanymi linkami kategorii 16px/500 (#111111) z kolorem #707072 po najechaniu oraz wyrównanymi do prawej wyszukiwaniem (promień 24px, tło #F5F5F5), ulubionymi i ikonami koszyka"
+- "Utwórz promocyjny pasek banerowy z tłem #111111, białym wyśrodkowanym tekstem 12px/500 i pionowym paddingiem 8px — pełna szerokość, bez promienia obramowania"
+- "Zaprojektuj obrysowany przycisk drugorzędny z przezroczystym tłem, obramowaniem 1.5px #CACACB, promieniem pigułki 30px, tekstem 16px/500 #111111, obramowaniem ciemniejącym przy najechaniu do #707072"
+
+### Przewodnik po Iteracji
+
+Podczas dopracowywania istniejących ekranów wygenerowanych z tym systemem projektowania:
+1. Skupiaj się na JEDNYM komponencie na raz
+2. Odwołuj się do konkretnych nazw kolorów i kodów hex z tego dokumentu
+3. Pamiętaj: fotografia produktowa jest kolorem — interfejs pozostaje monochromatyczny
+4. Używaj skali szarości do zmian stanu: #F5F5F5 → #E5E5E5 → #CACACB → #707072
+5. Jeśli coś w interfejsie wydaje się zbyt kolorowe, prawdopodobnie tak jest — Nike utrzymuje interfejs w skali szarości
+6. Typografia wyświetlaczy (Nike Futura) powinna ZAWSZE być pisana wersalikami i nigdy poniżej 24px
+7. Typografia treści (Helvetica Now) prawie zawsze powinna mieć wagę 500 dla elementów interaktywnych