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

@@ -0,0 +1,296 @@
+# System Projektowy Inspirowany NVIDIA
+
+> Kategoria: Media i Konsument
+> Obliczenia GPU. Zielono-czarna energia, estetyka technicznej siły.
+
+## 1. Motyw Wizualny i Atmosfera
+
+Strona internetowa NVIDIA to doświadczenie wysokiego kontrastu, zorientowane technologicznie, które komunikuje surową moc obliczeniową poprzez powściągliwość projektową. Strona zbudowana jest na surowym fundamencie czerni (`#000000`) i bieli (`#ffffff`), urozmaiconym charakterystyczną zielenią NVIDIA (`#76b900`) -- kolorem tak specyficznym, że pełni funkcję odcisku palca marki. To nie jest soczysta zieleń natury; to elektryczna, limonkowa zieleń światła renderowanego przez GPU, kolor sytuujący się pomiędzy chartreuse a kelly green, który dla każdej osoby z branży technologicznej natychmiast sygnalizuje „NVIDIA".
+
+Rodzina czcionek NVIDIA-EMEA (z awaryjnymi Arial i Helvetica) tworzy czysty, industrialny głos typograficzny. Nagłówki 36px pogrubione z ciasnym interlinią 1.25 tworzą gęste, autorytatywne bloki tekstu. Czcionka pozbawiona jest geometrycznej swawolności charakterystycznej dla sans-serifów z Doliny Krzemowej -- jest europejska, pragmatyczna i skoncentrowana na inżynierii. Tekst główny ma 15-16px, komfortowy do czytania, lecz nierozrzutny, co utrzymuje wrażenie, że przestrzeń ekranu jest optymalizowana jak pamięć GPU.
+
+To, co wyróżnia projekt NVIDIA spośród innych technologicznych stron z ciemnym tłem, to zdyscyplinowane użycie zielonego akcentu. `#76b900` pojawia się w obramowaniach (`2px solid #76b900`), podkreśleniach linków (`underline 2px rgb(118, 185, 0)`) i przyciskach CTA -- lecz nigdy jako tła czy duże powierzchnie w głównej treści. Zieleń to sygnał, nie powierzchnia. W połączeniu z głębokim systemem cieni (`rgba(0, 0, 0, 0.3) 0px 0px 5px`) i minimalnym promieniem zaokrąglenia (1-2px), całościowy efekt to precyzyjny sprzęt inżynieryjny oddany w pikselach.
+
+**Kluczowe Cechy:**
+- Zieleń NVIDIA (`#76b900`) jako czysty akcent -- wyłącznie obramowania, podkreślenia i interaktywne wyróżnienia
+- Czarne (`#000000`) dominujące tło z białym (`#ffffff`) tekstem na ciemnych sekcjach
+- Niestandardowa czcionka NVIDIA-EMEA z awaryjnym Arial/Helvetica -- industrialna, europejska, czysta
+- Ciasne interlinie (1.25 dla nagłówków) tworzące gęste, autorytatywne bloki tekstu
+- Minimalny promień zaokrąglenia (1-2px) -- ostre, inżynieryjne narożniki w całym projekcie
+- Przyciski z zielonym obramowaniem (`2px solid #76b900`) jako główny wzorzec interaktywny
+- System ikon Font Awesome 6 Pro/Sharp przy wadze 900 dla wyraźnej ikonografii
+- Architektura wieloframeworkowa (PrimeReact, Fluent UI, Element Plus) umożliwiająca bogate komponenty interaktywne
+
+## 2. Paleta Kolorów i Role
+
+### Główna Marka
+- **Zieleń NVIDIA** (`#76b900`): Sygnatura -- obramowania, podkreślenia linków, kontury CTA, wskaźniki aktywności. Nigdy nie używana jako duże wypełnienia powierzchni.
+- **Czysta Czerń** (`#000000`): Główne tło strony, tekst na jasnych powierzchniach, dominujący ton.
+- **Czysta Biel** (`#ffffff`): Tekst na ciemnych tłach, jasne tła sekcji, powierzchnie kart.
+
+### Rozszerzona Paleta Marki
+- **Jasna Zieleń NVIDIA** (`#bff230`): Jasny limonkowy akcent dla wyróżnień i stanów hover.
+- **Pomarańcz 400** (`#df6500`): Ciepły akcent dla alertów, wyróżnionych odznak lub kontekstów związanych z energią.
+- **Żółty 300** (`#ef9100`): Drugorzędny ciepły akcent, wyróżnienia kategorii produktów.
+- **Żółty 050** (`#feeeb2`): Jasna ciepła powierzchnia dla teł wyróżnień.
+
+### Stany i Semantyka
+- **Czerwony 500** (`#e52020`): Stany błędów, działania destrukcyjne, alerty krytyczne.
+- **Czerwony 800** (`#650b0b`): Głęboka czerwień dla teł poważnych ostrzeżeń.
+- **Zielony 500** (`#3f8500`): Stany sukcesu, pozytywne wskaźniki (ciemniejszy niż zieleń marki).
+- **Niebieski 700** (`#0046a4`): Akcenty informacyjne, alternatywny hover linków.
+
+### Dekoracyjne
+- **Fioletowy 800** (`#4d1368`): Głęboki fiolet dla końców gradientów, kontekstów premium/AI.
+- **Fioletowy 100** (`#f9d4ff`): Jasny fioletowy odcień powierzchni.
+- **Fuksjowy 700** (`#8c1c55`): Bogaty akcent dla specjalnych promocji lub wyróżnionych treści.
+
+### Skala Neutralna
+- **Szary 300** (`#a7a7a7`): Stonowany tekst, wyłączone etykiety.
+- **Szary 400** (`#898989`): Drugorzędny tekst, metadane.
+- **Szary 500** (`#757575`): Trzeciorzędny tekst, symbole zastępcze, stopki.
+- **Szary Obramowania** (`#5e5e5e`): Subtelne obramowania, linie podziałowe.
+- **Prawie Czarny** (`#1a1a1a`): Ciemne powierzchnie, tła kart na czarnych stronach.
+
+### Stany Interaktywne
+- **Link Domyślny (ciemne tło)** (`#ffffff`): Białe linki na ciemnych tłach.
+- **Link Domyślny (jasne tło)** (`#000000`): Czarne linki z zielonym podkreśleniem na jasnych tłach.
+- **Hover Linku** (`#3860be`): Przesunięcie w niebieską stronę przy hover dla wszystkich wariantów linków.
+- **Hover Przycisku** (`#1eaedb`): Turkusowe wyróżnienie dla stanów hover przycisków.
+- **Aktywny Przycisk** (`#007fff`): Jaskrawy niebieski dla aktywnych/wciśniętych stanów przycisków.
+- **Pierścień Focusu** (`#000000 solid 2px`): Czarny kontur dla focusu klawiatury.
+
+### Cienie i Głębia
+- **Cień Karty** (`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`): Subtelny cień otoczenia dla podniesionych kart.
+
+## 3. Zasady Typografii
+
+### Rodzina Czcionek
+- **Główna**: `NVIDIA-EMEA`, z awaryjnymi: `Arial, Helvetica, sans-serif`
+- **Czcionka Ikon**: `Font Awesome 6 Pro` (waga 900 dla ikon wypełnionych, 700 dla regularnych)
+- **Ikony Sharp**: `Font Awesome 6 Sharp` (waga 300 dla lekkich ikon, 400 dla regularnych)
+
+### Hierarchia
+
+| Rola | Czcionka | Rozmiar | Waga | Interlinia | Odstęp Liter | Uwagi |
+|------|------|------|--------|-------------|----------------|-------|
+| Wyświetlacz Hero | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (ciasna) | normal | Nagłówki o maksymalnym wpływie |
+| Nagłówek Sekcji | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (ciasna) | normal | Tytuły sekcji, nagłówki kart |
+| Podnagłówek | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (rozluźniona) | normal | Opisy funkcji, podtytuły |
+| Tytuł Karty | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (ciasna) | normal | Nagłówki kart i modułów |
+| Duże Ciało | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (rozluźniona) | normal | Wyróżnione ciało tekstu, akapity wiodące |
+| Ciało | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | Standardowy tekst do czytania |
+| Pogrubione Ciało | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | Mocne etykiety, elementy nawigacji |
+| Małe Ciało | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (rozluźniona) | normal | Treści drugorzędne, opisy |
+| Małe Pogrubione Ciało | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | Wyróżnione treści drugorzędne |
+| Duży Przycisk | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (ciasna) | normal | Główne przyciski CTA |
+| Przycisk | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (ciasna) | normal | Standardowe przyciski |
+| Kompaktowy Przycisk | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (ciasna) | 0.144px | Małe/kompaktowe przyciski |
+| Link | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | Linki nawigacyjne |
+| Link Wielkie Litery | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`, etykiety nawigacji |
+| Podpis | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | Metadane, znaczniki czasu |
+| Mały Podpis | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (ciasna) | normal | Drobny druk, informacje prawne |
+| Mikro Etykieta | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`, małe odznaki |
+| Mikro | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (ciasna) | normal | Najmniejszy tekst interfejsu |
+
+### Zasady
+- **Pogrubienie jako domyślny głos**: NVIDIA mocno opiera się na wadze 700 dla nagłówków, przycisków, linków i etykiet. Waga 400 zarezerwowana jest dla tekstu głównego i opisów -- wszystko inne jest pogrubione, projeku­jąc pewność siebie i autorytet.
+- **Ciasne nagłówki, rozluźnione ciało**: Interlinia nagłówków konsekwentnie wynosi 1.25 (ciasna), podczas gdy tekst główny rozluźnia się do 1.50-1.67. Ten kontrast tworzy wizualną gęstość na górze bloków treści i komfortową czytelność w akapitach.
+- **Wielkie litery dla nawigacji**: Etykiety linków używają `text-transform: uppercase` z wagą 700, tworząc głos nawigacyjny czytany jak etykiety specyfikacji sprzętowej.
+- **Brak dekoracyjnego odstępu**: Odstęp liter jest normalny w całym projekcie, z wyjątkiem kompaktowych przycisków (0.144px). Sama czcionka niesie industrialny charakter bez żadnych manipulacji.
+
+## 4. Style Komponentów
+
+### Przyciski
+
+**Główny (Zielone Obramowanie)**
+- Tło: `transparent`
+- Tekst: `#000000`
+- Padding: 11px 13px
+- Obramowanie: `2px solid #76b900`
+- Promień: 2px
+- Czcionka: 16px waga 700
+- Hover: tło `#1eaedb`, tekst `#ffffff`
+- Aktywny: tło `#007fff`, tekst `#ffffff`, obramowanie `1px solid #003eff`, scale(1)
+- Focus: tło `#1eaedb`, tekst `#ffffff`, kontur `#000000 solid 2px`, opacity 0.9
+- Użycie: Główne CTA ("Learn More", "Explore Solutions")
+
+**Drugorzędny (Cienkie Zielone Obramowanie)**
+- Tło: transparent
+- Obramowanie: `1px solid #76b900`
+- Promień: 2px
+- Użycie: Akcje drugorzędne, alternatywne CTA
+
+**Kompaktowy / Wbudowany**
+- Czcionka: 14.4px waga 700
+- Odstęp liter: 0.144px
+- Interlinia: 1.00
+- Użycie: Wbudowane CTA, kompaktowa nawigacja
+
+### Karty i Kontenery
+- Tło: `#ffffff` (jasne) lub `#1a1a1a` (ciemne sekcje)
+- Obramowanie: brak (czyste krawędzie) lub `1px solid #5e5e5e`
+- Promień: 2px
+- Cień: `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px` dla podniesionych kart
+- Hover: wzmocnienie cienia
+- Padding: 16-24px wewnętrzny
+
+### Linki
+- **Na Ciemnym Tle**: `#ffffff`, bez podkreślenia, hover przesuwa się do `#3860be`
+- **Na Jasnym Tle**: `#000000` lub `#1a1a1a`, podkreślenie `2px solid #76b900`, hover przesuwa się do `#3860be`, podkreślenie usuwane
+- **Zielone Linki**: `#76b900`, hover przesuwa się do `#3860be`
+- **Stonowane Linki**: `#666666`, hover przesuwa się do `#3860be`
+
+### Nawigacja
+- Ciemnoczarne tło (`#000000`)
+- Logo wyrównane do lewej, wyraźny wordmark NVIDIA
+- Linki: NVIDIA-EMEA 14px waga 700 wielkie litery, `#ffffff`
+- Hover: zmiana koloru, brak zmiany podkreślenia
+- Rozwijane mega-menu dla kategorii produktów
+- Przylepione podczas przewijania z tłem
+
+### Obróbka Obrazów
+- Renderingi produktów/GPU jako obrazy hero, często na pełną szerokość
+- Obrazy zrzutów ekranu z subtelnym cieniem dla głębi
+- Zielone nakładki gradientowe na ciemnych sekcjach hero
+- Okrągłe kontenery awatarów z promieniem 50%
+
+### Charakterystyczne Komponenty
+
+**Karty Produktów**
+- Czysta biała lub ciemna karta z minimalnym promieniem (2px)
+- Zielony akcent obramowania lub podkreślenie tytułu
+- Wzorzec pogrubionego nagłówka i lżejszego opisu
+- CTA z zielonym obramowaniem na dole
+
+**Tabele Specyfikacji Technicznych**
+- Industrialne układy siatki
+- Naprzemienne tła wierszy (subtelna zmiana szarości)
+- Pogrubione etykiety, regularne wartości
+- Zielone wyróżnienia dla kluczowych metryk
+
+**Baner Cookie/Zgody**
+- Stałe pozycjonowanie na dole
+- Zaokrąglone przyciski (promień 2px)
+- Szare obramowania
+
+## 5. Zasady Układu
+
+### System Odstępów
+- Jednostka bazowa: 8px
+- Skala: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px
+- Główne wartości paddingu: 8px, 11px, 13px, 16px, 24px, 32px
+- Odstępy sekcji: 48-80px pionowego paddingu
+
+### Siatka i Kontener
+- Maksymalna szerokość treści: około 1200px (zamknięta)
+- Sekcje hero na pełną szerokość z zamkniętym tekstem
+- Sekcje funkcji: siatki 2-3 kolumn dla kart produktów
+- Jedna kolumna dla treści artykułów/blogów
+- Układy z paskiem bocznym dla dokumentacji
+
+### Filozofia Białej Przestrzeni
+- **Celowa gęstość**: NVIDIA stosuje ciaśniejsze odstępy niż typowe strony SaaS, odzwierciedlając gęstość treści technicznych. Biała przestrzeń istnieje, by oddzielać koncepcje, a nie tworzyć luksusową pustkę.
+- **Rytm sekcji**: Ciemne sekcje naprzemiennie przeplatają się z białymi, używając koloru tła (nie tylko odstępów) do separacji bloków treści.
+- **Gęstość kart**: Karty produktów siedzą blisko siebie z odstępami 16-20px, tworząc poczucie katalogu, a nie galerii.
+
+### Skala Promienia Zaokrąglenia
+- Mikro (1px): Wbudowane rozpiętości, małe elementy
+- Standard (2px): Przyciski, karty, kontenery, pola wprowadzania -- domyślne dla prawie wszystkiego
+- Okrąg (50%): Obrazy awatarów, okrągłe wskaźniki zakładek
+
+## 6. Głębia i Elewacja
+
+| Poziom | Obróbka | Użycie |
+|-------|-----------|-----|
+| Płaski (Poziom 0) | Brak cienia | Tła stron, tekst wbudowany |
+| Subtelny (Poziom 1) | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | Standardowe karty, modale |
+| Obramowanie (Poziom 1b) | `1px solid #5e5e5e` | Podziałki treści, obramowania sekcji |
+| Zielony akcent (Poziom 2) | `2px solid #76b900` | Aktywne elementy, CTA, wybrane pozycje |
+| Focus (Dostępność) | kontur `2px solid #000000` | Pierścień focusu klawiatury |
+
+**Filozofia Cieni**: System głębi NVIDIA jest minimalny i utylitarny. Istnieje zasadniczo jedna wartość cienia -- 5px rozmycie otoczenia przy 30% kryciu -- używana oszczędnie dla kart i modali. Głównym sygnałem głębi nie jest cień, lecz _kontrast kolorów_: czarne tła obok białych sekcji, zielone obramowania na czarnych powierzchniach. Tworzy to wizualną warstwowość podobną do sprzętu, gdzie głębia pochodzi z różnicy materiałów, a nie symulowanego światła.
+
+### Dekoracyjna Głębia
+- Zielone przejścia gradientowe za treściami hero
+- Gradienty od ciemnego do ciemniejszego (czarny do prawie czarnego) dla przejść między sekcjami
+- Brak efektów glassmorphism ani rozmycia -- klarowność ponad atmosferę
+
+## 7. Zachowanie Responsywne
+
+### Punkty Przełamania
+| Nazwa | Szerokość | Kluczowe Zmiany |
+|------|-------|-------------|
+| Mały Mobilny | <375px | Kompaktowa pojedyncza kolumna, zredukowany padding |
+| Mobilny | 375-425px | Standardowy układ mobilny |
+| Duży Mobilny | 425-600px | Szerszy mobilny, niektóre wskazówki 2-kol. |
+| Mały Tablet | 600-768px | Zaczynają się siatki 2-kolumnowe |
+| Tablet | 768-1024px | Pełne siatki kart, rozszerzona nawigacja |
+| Desktop | 1024-1350px | Standardowy układ desktopowy |
+| Duży Desktop | >1350px | Maksymalna szerokość treści, hojne marginesy |
+
+### Cele Dotykowe
+- Przyciski używają paddingu 11px 13px dla komfortowych celów dotykowych
+- Linki nawigacyjne w 14px wielkie litery z odpowiednim odstępem
+- Przyciski z zielonym obramowaniem zapewniają wysokich kontrastów cele dotykowe na ciemnych tłach
+- Mobilny: menu hamburgerowe zwijane z nakładką na pełny ekran
+
+### Strategia Zwijania
+- Hero: nagłówek 36px skaluje się proporcjonalnie w dół
+- Nawigacja: pełna pozioma nawigacja zwija się do menu hamburgerowego przy ~1024px
+- Karty produktów: 3 kolumny → 2 kolumny → pojedyncza układana kolumna
+- Stopka: wielokolumnowa siatka zwija się do pojedynczej ułożonej kolumny
+- Odstępy sekcji: 64-80px redukuje się do 32-48px na urządzeniach mobilnych
+- Obrazy: zachowują proporcje, skalują się do szerokości kontenera
+
+### Zachowanie Obrazów
+- Renderingi GPU/produktów zachowują wysoką rozdzielczość we wszystkich rozmiarach
+- Obrazy hero skalują się proporcjonalnie z oknem przeglądarki
+- Obrazy kart używają spójnych proporcji
+- Ciemne sekcje na pełne krwawienie zachowują obróbkę krawędź do krawędzi
+
+## 8. Zachowanie Responsywne (Rozszerzone)
+
+### Skalowanie Typografii
+- Wyświetlacz 36px skaluje się do ~24px na urządzeniach mobilnych
+- Nagłówki sekcji 24px skalują się do ~20px na urządzeniach mobilnych
+- Tekst główny zachowuje 15-16px we wszystkich punktach przełamania
+- Tekst przycisku zachowuje 16px dla spójnych celów dotykowych
+
+### Strategia Ciemnych/Jasnych Sekcji
+- Ciemne sekcje (czarne tło, biały tekst) naprzemiennie przeplatają się z jasnymi sekcjami (białe tło, czarny tekst)
+- Zielony akcent pozostaje spójny w obu typach powierzchni
+- Na ciemnym: linki są białe, podkreślenia są zielone
+- Na jasnym: linki są czarne, podkreślenia są zielone
+- To naprzemienne przechodzenie tworzy naturalny rytm przewijania i grupowanie treści
+
+## 9. Przewodnik po Promptach Agenta
+
+### Szybka Referencja Kolorów
+- Główny akcent: Zieleń NVIDIA (`#76b900`)
+- Ciemne tło: Czysta Czerń (`#000000`)
+- Jasne tło: Czysta Biel (`#ffffff`)
+- Tekst nagłówka (ciemne tło): Biały (`#ffffff`)
+- Tekst nagłówka (jasne tło): Czarny (`#000000`)
+- Tekst główny (jasne tło): Czarny (`#000000`) lub Prawie Czarny (`#1a1a1a`)
+- Tekst główny (ciemne tło): Biały (`#ffffff`) lub Szary 300 (`#a7a7a7`)
+- Hover linku: Niebieski (`#3860be`)
+- Akcent obramowania: `2px solid #76b900`
+- Hover przycisku: Turkus (`#1eaedb`)
+
+### Przykładowe Prompty Komponentów
+- "Utwórz sekcję hero na czarnym tle. Nagłówek 36px NVIDIA-EMEA waga 700, interlinia 1.25, kolor #ffffff. Podtytuł 18px waga 400, interlinia 1.67, kolor #a7a7a7. Przycisk CTA z przezroczystym tłem, obramowaniem 2px solid #76b900, promieniem 2px, paddingiem 11px 13px, tekst #ffffff. Hover: tło #1eaedb, tekst biały."
+- "Zaprojektuj kartę produktu: białe tło, promień obramowania 2px, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. Tytuł 20px NVIDIA-EMEA waga 700, interlinia 1.25, kolor #000000. Ciało 15px waga 400, interlinia 1.67, kolor #757575. Zielony akcent podkreślenia tytułu: border-bottom 2px solid #76b900."
+- "Zbuduj pasek nawigacyjny: tło #000000, przylepione na górze. Logo NVIDIA wyrównane do lewej. Linki 14px NVIDIA-EMEA waga 700 wielkie litery, kolor #ffffff. Hover: kolor #3860be. Przycisk CTA z zielonym obramowaniem wyrównany do prawej."
+- "Utwórz ciemną sekcję funkcji: tło #000000. Etykieta sekcji 14px waga 700 wielkie litery, kolor #76b900. Nagłówek 24px waga 700, kolor #ffffff. Opis 16px waga 400, kolor #a7a7a7. Trzy karty produktów w rzędzie z odstępem 20px."
+- "Zaprojektuj stopkę: tło #000000. Wielokolumnowy układ z grupami linków. Linki 14px waga 400, kolor #a7a7a7. Hover: kolor #76b900. Dolny pasek z tekstem prawnym 12px, kolor #757575."
+
+### Przewodnik po Iteracji
+1. Zawsze używaj `#76b900` jako akcentu, nigdy jako wypełnienia tła -- to kolor sygnałowy dla obramowań, podkreśleń i wyróżnień
+2. Przyciski są domyślnie przezroczyste z zielonymi obramowaniami -- wypełnione tła pojawiają się tylko w stanach hover/aktywnym
+3. Waga 700 to dominujący głos dla wszystkich elementów interaktywnych i nagłówków; 400 jest tylko dla akapitów treści głównej
+4. Promień obramowania wynosi 2px dla wszystkiego -- to ostre, minimalne zaokrąglenie jest kluczowe dla industrialnej estetyki
+5. Ciemne sekcje używają białego tekstu; jasne sekcje używają czarnego tekstu -- zielony akcent działa identycznie na obu
+6. Hover linku to zawsze `#3860be` (niebieski) niezależnie od domyślnego koloru linku
+7. Interlinia 1.25 dla nagłówków, 1.50-1.67 dla tekstu głównego -- utrzymuj ten kontrast dla hierarchii wizualnej
+8. Nawigacja używa wielkich liter 14px pogrubione -- ta typografia etykiet sprzętowych jest częścią głosu marki