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

@@ -0,0 +1,313 @@
+# System Projektowania Inspirowany Vercel
+
+> Category: Narzędzia Deweloperskie
+> Wdrożenia frontendowe. Czarno-biała precyzja, czcionka Geist.
+
+## 1. Motyw Wizualny i Atmosfera
+
+Strona Vercel to wizualny manifest infrastruktury deweloperskiej uczynionej niewidzialną — system projektowania tak powściągliwy, że graniczy z filozoficznym. Strona jest przytłaczająco biała (`#ffffff`) z niemal czarnym (`#171717`) tekstem, tworząc galeryjną pustkę, w której każdy element zasługuje na swój piksel. To nie minimalizm jako dekoracja; to minimalizm jako zasada inżynierska. System projektowania Geist traktuje interfejs jak kompilator traktuje kod — każdy zbędny token jest usuwany, aż pozostaje wyłącznie struktura.
+
+Rodzina czcionek Geist to klejnot koronny. Geist Sans używa agresywnego ujemnego śledzenia liter (-2,4px do -2,88px przy rozmiarach wyświetlania), tworząc nagłówki, które wyglądają na skompresowane, pilne i inżynierskie — jak kod zminifikowany do produkcji. Przy rozmiarach treści śledzenie rozluźnia się, ale geometryczna precyzja pozostaje. Geist Mono dopełnia system jako monospacowy towarzysz kodu, danych wyjściowych terminala i etykiet technicznych. Obie czcionki włączają globalnie OpenType `"liga"` (ligatury), dodając warstwę typograficznej wyrafinowania, która nagradza uważne czytanie.
+
+To, co odróżnia Vercel od innych monochromatycznych systemów projektowania, to filozofia cienia-jako-obramowania. Zamiast tradycyjnych obramowań CSS, Vercel używa `box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)` — cienia o zerowym przesunięciu, zerowym rozmyciu i 1px rozproszeniu, który tworzy linię podobną do obramowania bez implikacji dla modelu pudełkowego. Ta technika pozwala obramowaniom istnieć w warstwie cienia, umożliwiając płynniejsze przejścia, zaokrąglone narożniki bez przycinania i subtelniejszy wizualny ciężar niż tradycyjne obramowania. Cały system głębokości opiera się na warstwowych, wielowartościowych stosach cieni, gdzie każda warstwa służy konkretnemu celowi: jedna dla obramowania, jedna dla miękkiego uniesienia, jedna dla otaczającej głębokości.
+
+**Kluczowe Cechy Charakterystyczne:**
+- Geist Sans z ekstremalnym ujemnym śledzeniem liter (-2,4px do -2,88px przy wyświetlaniu) — tekst jako skompresowana infrastruktura
+- Geist Mono dla kodu i etykiet technicznych z globalnym OpenType `"liga"`
+- Technika cienia-jako-obramowania: `box-shadow 0px 0px 0px 1px` zastępuje tradycyjne obramowania wszędzie
+- Wielowarstwowe stosy cieni dla niuansowanej głębokości (obramowanie + uniesienie + otaczające w pojedynczych deklaracjach)
+- Niemal czysto biała kanwa z tekstem `#171717` — nie zupełnie czarny, tworząc mikro-kontrastową miękkość
+- Kolory akcentów specyficzne dla przepływu pracy: Czerwień Wysyłki (`#ff5b4f`), Różowy Podglądu (`#de1d8d`), Niebieski Dewelopmentu (`#0a72ef`)
+- System pierścieni fokusu używający `hsla(212, 100%, 48%, 1)` — nasycony niebieski dla dostępności
+- Znaczniki pigułkowe (9999px) z odcieniowanymi tłami dla wskaźników statusu
+
+## 2. Paleta Kolorów i Role
+
+### Podstawowe
+- **Czerń Vercel** (`#171717`): Podstawowy tekst, nagłówki, ciemne tła powierzchni. Nie czysta czerń — lekkie ciepło zapobiega surowości.
+- **Czysta Biel** (`#ffffff`): Tło strony, powierzchnie kart, tekst przycisków na ciemnym tle.
+- **Prawdziwa Czerń** (`#000000`): Użycie drugorzędne, `--geist-console-text-color-default`, stosowane w konkretnych kontekstach konsoli/kodu.
+
+### Kolory Akcentów Przepływu Pracy
+- **Czerwień Wysyłki** (`#ff5b4f`): `--ship-text`, etap przepływu pracy "wyślij do produkcji" — ciepły, pilny koral-czerwień.
+- **Różowy Podglądu** (`#de1d8d`): `--preview-text`, przepływ wdrożenia podglądu — żywy magentowo-różowy.
+- **Niebieski Dewelopmentu** (`#0a72ef`): `--develop-text`, przepływ pracy deweloperskiej — jasny, skupiony niebieski.
+
+### Kolory Konsoli / Kodu
+- **Niebieski Konsoli** (`#0070f3`): `--geist-console-text-color-blue`, niebieski podświetlenia składni.
+- **Fiolet Konsoli** (`#7928ca`): `--geist-console-text-color-purple`, fiolet podświetlenia składni.
+- **Różowy Konsoli** (`#eb367f`): `--geist-console-text-color-pink`, różowy podświetlenia składni.
+
+### Interaktywne
+- **Niebieski Linku** (`#0072f5`): Podstawowy kolor linku z dekoracją podkreślenia.
+- **Niebieski Fokusu** (`hsla(212, 100%, 48%, 1)`): `--ds-focus-color`, pierścień fokusu na elementach interaktywnych.
+- **Niebieski Pierścienia** (`rgba(147, 197, 253, 0.5)`): `--tw-ring-color`, narzędzie pierścienia Tailwind.
+
+### Skala Neutralna
+- **Szary 900** (`#171717`): Podstawowy tekst, nagłówki, tekst nawigacji.
+- **Szary 600** (`#4d4d4d`): Tekst drugorzędny, tekst opisowy.
+- **Szary 500** (`#666666`): Tekst trzeciorzędny, przyciemnione linki.
+- **Szary 400** (`#808080`): Tekst zastępczy, stany wyłączone.
+- **Szary 100** (`#ebebeb`): Obramowania, kontury kart, separatory.
+- **Szary 50** (`#fafafa`): Subtelny odcień powierzchni, wewnętrzne podświetlenie cienia.
+
+### Powierzchnia i Nakładka
+- **Tło Nakładki** (`hsla(0, 0%, 98%, 1)`): `--ds-overlay-backdrop-color`, tło modalnego/okna dialogowego.
+- **Tekst Zaznaczenia** (`hsla(0, 0%, 95%, 1)`): `--geist-selection-text-color`, podświetlenie zaznaczenia tekstu.
+- **Tło Niebieskiej Odznaki** (`#ebf5ff`): Tło znacznika pigułkowego, odcieniowana niebieska powierzchnia.
+- **Tekst Niebieskiej Odznaki** (`#0068d6`): Tekst znacznika pigułkowego, ciemniejszy niebieski dla czytelności.
+
+### Cienie i Głębokość
+- **Cień Obramowania** (`rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`): Charakterystyczny — zastępuje tradycyjne obramowania.
+- **Subtelne Uniesienie** (`rgba(0, 0, 0, 0.04) 0px 2px 2px`): Minimalne uniesienie dla kart.
+- **Stos Kart** (`rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px`): Pełny wielowarstwowy cień karty.
+- **Obramowanie Pierścieniowe** (`rgb(235, 235, 235) 0px 0px 0px 1px`): Jasnoszare obramowanie pierścieniowe dla zakładek i obrazów.
+
+## 3. Zasady Typografii
+
+### Rodzina Czcionek
+- **Podstawowa**: `Geist`, z zamiennikami: `Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`
+- **Monospacowa**: `Geist Mono`, z zamiennikami: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`
+- **Funkcje OpenType**: `"liga"` włączone globalnie na całym tekście Geist; `"tnum"` dla tabelarycznych liczb na konkretnych podpisach.
+
+### Hierarchia
+
+| Rola | Czcionka | Rozmiar | Grubość | Wysokość Linii | Odstęp Liter | Uwagi |
+|------|----------|---------|---------|----------------|--------------|-------|
+| Główny Wyświetlacz | Geist | 48px (3.00rem) | 600 | 1.00–1.17 (ciasno) | -2.4px do -2.88px | Maksymalna kompresja, efekt billboardowy |
+| Nagłówek Sekcji | Geist | 40px (2.50rem) | 600 | 1.20 (ciasno) | -2.4px | Tytuły sekcji funkcji |
+| Duży Podnagłówek | Geist | 32px (2.00rem) | 600 | 1.25 (ciasno) | -1.28px | Nagłówki kart, podsekcje |
+| Podnagłówek | Geist | 32px (2.00rem) | 400 | 1.50 | -1.28px | Lżejsze podnagłówki |
+| Tytuł Karty | Geist | 24px (1.50rem) | 600 | 1.33 | -0.96px | Karty funkcji |
+| Lekki Tytuł Karty | Geist | 24px (1.50rem) | 500 | 1.33 | -0.96px | Drugorzędne nagłówki kart |
+| Duże Ciało | Geist | 20px (1.25rem) | 400 | 1.80 (rozluźnione) | normal | Wprowadzenia, opisy funkcji |
+| Ciało | Geist | 18px (1.13rem) | 400 | 1.56 | normal | Standardowy tekst do czytania |
+| Małe Ciało | Geist | 16px (1.00rem) | 400 | 1.50 | normal | Standardowy tekst UI |
+| Średnie Ciało | Geist | 16px (1.00rem) | 500 | 1.50 | normal | Nawigacja, podkreślony tekst |
+| Półgrube Ciało | Geist | 16px (1.00rem) | 600 | 1.50 | -0.32px | Mocne etykiety, aktywne stany |
+| Przycisk / Link | Geist | 14px (0.88rem) | 500 | 1.43 | normal | Przyciski, linki, podpisy |
+| Mały Przycisk | Geist | 14px (0.88rem) | 400 | 1.00 (ciasno) | normal | Kompaktowe przyciski |
+| Podpis | Geist | 12px (0.75rem) | 400–500 | 1.33 | normal | Metadane, tagi |
+| Mono Ciało | Geist Mono | 16px (1.00rem) | 400 | 1.50 | normal | Bloki kodu |
+| Mono Podpis | Geist Mono | 13px (0.81rem) | 500 | 1.54 | normal | Etykiety kodu |
+| Mono Małe | Geist Mono | 12px (0.75rem) | 500 | 1.00 (ciasno) | normal | `text-transform: uppercase`, etykiety techniczne |
+| Mikro Odznaka | Geist | 7px (0.44rem) | 700 | 1.00 (ciasno) | normal | `text-transform: uppercase`, małe odznaki |
+
+### Zasady
+- **Kompresja jako tożsamość**: Geist Sans przy rozmiarach wyświetlania używa odstępu liter -2,4px do -2,88px — najbardziej agresywne ujemne śledzenie spośród wszystkich głównych systemów projektowania. Tworzy to tekst, który czuje się _zminifikowany_, jak kod zoptymalizowany do produkcji. Śledzenie stopniowo rozluźnia się wraz ze zmniejszaniem rozmiaru: -1,28px przy 32px, -0,96px przy 24px, -0,32px przy 16px, a normal przy 14px.
+- **Ligatury wszędzie**: Każdy element tekstowy Geist włącza OpenType `"liga"`. Ligatury nie są dekoracją — są strukturalne, tworząc ciaśniejsze, bardziej efektywne kombinacje glifów.
+- **Trzy grubości, ściśle określone role**: 400 (ciało/czytanie), 500 (UI/interaktywne), 600 (nagłówki/podkreślenie). Brak pogrubienia (700) poza małymi mikro-odznakami. Ten wąski zakres grubości tworzy hierarchię poprzez rozmiar i śledzenie, a nie grubość.
+- **Mono dla tożsamości**: Geist Mono pisane wielkimi literami z `"tnum"` lub `"liga"` służy jako głos "konsoli deweloperskiej" — kompaktowe etykiety techniczne łączące stronę marketingową z produktem.
+
+## 4. Stylizacje Komponentów
+
+### Przyciski
+
+**Podstawowy Biały (Z Obramowaniem Cieniowym)**
+- Tło: `#ffffff`
+- Tekst: `#171717`
+- Wypełnienie: 0px 6px (minimalne — szerokość uzależniona od treści)
+- Promień: 6px (delikatnie zaokrąglony)
+- Cień: `rgb(235, 235, 235) 0px 0px 0px 1px` (obramowanie pierścieniowe)
+- Po najechaniu: tło zmienia się na `var(--ds-gray-1000)` (ciemne)
+- Fokus: kontur `2px solid var(--ds-focus-color)` + cień `var(--ds-focus-ring)`
+- Zastosowanie: Standardowy przycisk drugorzędny
+
+**Podstawowy Ciemny (Wywnioskowany z systemu Geist)**
+- Tło: `#171717`
+- Tekst: `#ffffff`
+- Wypełnienie: 8px 16px
+- Promień: 6px
+- Zastosowanie: Główne wezwanie do działania ("Start Deploying", "Get Started")
+
+**Przycisk Pigułkowy / Odznaka**
+- Tło: `#ebf5ff` (odcieniony niebieski)
+- Tekst: `#0068d6`
+- Wypełnienie: 0px 10px
+- Promień: 9999px (pełna pigułka)
+- Czcionka: 12px grubość 500
+- Zastosowanie: Odznaki statusu, tagi, etykiety funkcji
+
+**Duża Pigułka (Nawigacja)**
+- Tło: przezroczyste lub `#171717`
+- Promień: 64px–100px
+- Zastosowanie: Nawigacja zakładkowa, selektory sekcji
+
+### Karty i Kontenery
+- Tło: `#ffffff`
+- Obramowanie: poprzez cień — `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
+- Promień: 8px (standardowy), 12px (wyróżnione/karty z obrazem)
+- Stos cieni: `rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px`
+- Karty z obrazem: `1px solid #ebebeb` z górnym promieniem 12px
+- Po najechaniu: subtelne intensyfikowanie cienia
+
+### Pola Wejściowe i Formularze
+- Przycisk radiowy: standardowa stylizacja z tłem `var(--ds-gray-200)` przy fokusu
+- Cień fokusu: `1px 0 0 0 var(--ds-gray-alpha-600)`
+- Kontur fokusu: `2px solid var(--ds-focus-color)` — spójny niebieski pierścień fokusu
+- Obramowanie: poprzez technikę cieniową, nie tradycyjne obramowanie
+
+### Nawigacja
+- Czysta pozioma nawigacja na białym tle, przyklejona
+- Logotyp Vercel wyrównany do lewej, 262x52px
+- Linki: Geist 14px grubość 500, tekst `#171717`
+- Aktywny: grubość 600 lub podkreślenie
+- Wezwanie do działania: ciemne przyciski pigułkowe ("Start Deploying", "Contact Sales")
+- Urządzenia mobilne: zwijane menu hamburgerowe
+- Rozwijane menu produktów z wielopoziomowymi menu
+
+### Obróbka Obrazów
+- Zrzuty ekranu produktu z obramowaniem `1px solid #ebebeb`
+- Obrazy zaokrąglone u góry: promień `12px 12px 0px 0px`
+- Zrzuty ekranu pulpitu/kodu zdominują sekcje funkcji
+- Miękkie gradientowe tła za obrazami bohaterskimi (pastelowe wielokolorowe)
+
+### Charakterystyczne Komponenty
+
+**Potok Przepływu Pracy**
+- Trzyetapowy poziomy potok: Develop → Preview → Ship
+- Każdy etap ma własny kolor akcentu: Niebieski → Różowy → Czerwony
+- Połączone liniami/strzałkami
+- Wizualna metafora dla głównej propozycji wartości Vercel
+
+**Pasek Zaufania / Siatka Logo**
+- Logo firm (Perplexity, ChatGPT, Cursor itp.) w skali szarości
+- Poziome przewijanie lub układ siatki
+- Subtelne rozdzielenie obramowaniem `#ebebeb`
+
+**Karty Metryk**
+- Wyświetlanie dużej liczby (np. "10x szybciej")
+- Geist 48px grubość 600 dla metryki
+- Poniżej opis w szarym tekście treści
+- Kontener karty z obramowaniem cieniowym
+
+## 5. Zasady Układu
+
+### System Odstępów
+- Jednostka podstawowa: 8px
+- Skala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 32px, 36px, 40px
+- Godny uwagi skok: przejście z 16px do 32px — brak 20px ani 24px w skali podstawowej
+
+### Siatka i Kontener
+- Maksymalna szerokość treści: około 1200px
+- Bohater: wyśrodkowana pojedyncza kolumna z hojnym górnym wypełnieniem
+- Sekcje funkcji: siatki 2–3 kolumn dla kart
+- Pełnoszerokie separatory używające `border-bottom: 1px solid #171717`
+- Zrzuty ekranu kodu/pulpitu jako pełnoszerokie lub zawarte z obramowaniem
+
+### Filozofia Białej Przestrzeni
+- **Pustka galeryjna**: Masywne pionowe wypełnienie między sekcjami (80px–120px+). Biała przestrzeń JEST projektem — komunikuje, że Vercel nie ma nic do udowodnienia ani ukrycia.
+- **Skompresowany tekst, rozszerzona przestrzeń**: Agresywne ujemne śledzenie liter w nagłówkach jest zrównoważone hojną otaczającą białą przestrzenią. Tekst jest gęsty; przestrzeń wokół niego jest rozległa.
+- **Rytm sekcji**: Białe sekcje przeplatają się z białymi sekcjami — między sekcjami nie ma zróżnicowania kolorystycznego. Separacja pochodzi wyłącznie z obramowań (cieni-obramowań) i odstępów.
+
+### Skala Promieni Obramowania
+- Mikro (2px): Fragmenty kodu inline, małe spany
+- Subtelny (4px): Małe kontenery
+- Standardowy (6px): Przyciski, linki, elementy funkcjonalne
+- Wygodny (8px): Karty, elementy listy
+- Obraz (12px): Wyróżnione karty, kontenery obrazów (zaokrąglone u góry)
+- Duży (64px): Pigułki nawigacji zakładkowej
+- XL (100px): Duże linki nawigacyjne
+- Pełna Pigułka (9999px): Odznaki, pigułki statusu, tagi
+- Okrąg (50%): Przełącznik menu, kontenery awatarów
+
+## 6. Głębokość i Uniesienie
+
+| Poziom | Obróbka | Zastosowanie |
+|--------|---------|--------------|
+| Płaski (Poziom 0) | Brak cienia | Tło strony, bloki tekstowe |
+| Pierścień (Poziom 1) | `rgba(0,0,0,0.08) 0px 0px 0px 1px` | Cień-jako-obramowanie dla większości elementów |
+| Jasny Pierścień (Poziom 1b) | `rgb(235,235,235) 0px 0px 0px 1px` | Jaśniejszy pierścień dla zakładek, obrazów |
+| Subtelna Karta (Poziom 2) | Pierścień + `rgba(0,0,0,0.04) 0px 2px 2px` | Standardowe karty z minimalnym uniesieniem |
+| Pełna Karta (Poziom 3) | Pierścień + Subtelny + `rgba(0,0,0,0.04) 0px 8px 8px -8px` + wewnętrzny pierścień `#fafafa` | Wyróżnione karty, podświetlone panele |
+| Fokus (Dostępność) | kontur `2px solid hsla(212, 100%, 48%, 1)` | Fokus klawiatury na wszystkich elementach interaktywnych |
+
+**Filozofia Cienia**: Vercel posiada prawdopodobnie najbardziej wyrafinowany system cieni we współczesnym projektowaniu webowym. Zamiast używać cieni dla uniesienia w tradycyjnym sensie Material Design, Vercel używa wielowartościowych stosów cieni, gdzie każda warstwa ma odrębny cel architektoniczny: jedna tworzy "obramowanie" (0px rozproszenie, 1px), inna dodaje otaczającą miękkość (rozmycie 2px), jeszcze inna obsługuje głębokość na odległość (rozmycie 8px z ujemnym rozproszeniem), a wewnętrzny pierścień (`#fafafa`) tworzy subtelne podświetlenie sprawiające, że karta "świeci" od wewnątrz. To warstwowe podejście sprawia, że karty wyglądają na zbudowane, a nie unoszące się.
+
+### Ozdobna Głębokość
+- Gradient bohatera: miękka, pastelowa wielokolorowa mgiełka gradientowa za treścią bohatera (ledwo widoczna, atmosferyczna)
+- Obramowania sekcji: `1px solid #171717` (pełna ciemna linia) między głównymi sekcjami
+- Brak zróżnicowania kolorystycznego tła — głębokość pochodzi wyłącznie z warstwowania cieni i kontrastu obramowań
+
+## 7. Co Robić i Czego Nie Robić
+
+### Co Robić
+- Używaj Geist Sans z agresywnym ujemnym śledzeniem liter przy rozmiarach wyświetlania (-2,4px do -2,88px przy 48px)
+- Używaj cienia-jako-obramowania (`0px 0px 0px 1px rgba(0,0,0,0.08)`) zamiast tradycyjnych obramowań CSS
+- Włączaj `"liga"` na całym tekście Geist — ligatury są strukturalne, nie opcjonalne
+- Używaj systemu trzech grubości: 400 (ciało), 500 (UI), 600 (nagłówki)
+- Stosuj kolory akcentów przepływu pracy (Czerwony/Różowy/Niebieski) tylko w ich kontekście przepływu pracy
+- Używaj wielowarstwowych stosów cieni dla kart (obramowanie + uniesienie + otaczające + wewnętrzne podświetlenie)
+- Utrzymuj paletę kolorów achromatyczną — odcienie szarości od `#171717` do `#ffffff` są systemem
+- Używaj `#171717` zamiast `#000000` dla podstawowego tekstu — mikro-ciepłota ma znaczenie
+
+### Czego Nie Robić
+- Nie używaj dodatniego śledzenia liter na Geist Sans — jest zawsze ujemne lub zerowe
+- Nie używaj grubości 700 (pogrubienie) na tekście treści — 600 jest maksimum, używane tylko dla nagłówków
+- Nie używaj tradycyjnego CSS `border` na kartach — używaj techniki cienia-obramowania
+- Nie wprowadzaj ciepłych kolorów (pomarańczowych, żółtych, zielonych) do interfejsu użytkownika
+- Nie stosuj kolorów akcentów przepływu pracy (Czerwień Wysyłki, Różowy Podglądu, Niebieski Dewelopmentu) dekoracyjnie
+- Nie używaj ciężkich cieni (> 0,1 krycia) — system cieni jest na poziomie szeptu
+- Nie zwiększaj odstępu liter tekstu treści — Geist jest zaprojektowany do ciasnego biegu
+- Nie używaj promienia pigułki (9999px) na głównych przyciskach akcji — pigułki są tylko dla odznak/tagów
+- Nie pomijaj wewnętrznego pierścienia `#fafafa` w cieniach kart — to blask, który sprawia, że system działa
+
+## 8. Zachowanie Responsywne
+
+### Punkty Przerwania
+| Nazwa | Szerokość | Kluczowe Zmiany |
+|-------|-----------|-----------------|
+| Małe Urządzenie Mobilne | <400px | Ciasna pojedyncza kolumna, minimalne wypełnienie |
+| Urządzenie Mobilne | 400–600px | Standardowe mobilne, układ stosowany |
+| Mały Tablet | 600–768px | Siatki 2-kolumnowe zaczynają się |
+| Tablet | 768–1024px | Pełne siatki kart, rozszerzone wypełnienie |
+| Mały Desktop | 1024–1200px | Standardowy układ desktopowy |
+| Desktop | 1200–1400px | Pełny układ, maksymalna szerokość treści |
+| Duży Desktop | >1400px | Wyśrodkowany, hojne marginesy |
+
+### Cele Dotykowe
+- Przyciski używają wygodnego wypełnienia (8px–16px pionowo)
+- Linki nawigacyjne przy 14px z odpowiednimi odstępami
+- Odznaki pigułkowe mają 10px poziomego wypełnienia dla celów dotykowych
+- Przełącznik menu mobilnego używa okrągłego przycisku z promieniem 50%
+
+### Strategia Zwijania
+- Bohater: wyświetlacz 48px → skaluje się w dół, zachowując ujemne śledzenie proporcjonalnie
+- Nawigacja: poziome linki + wezwania do działania → menu hamburgerowe
+- Karty funkcji: 3-kolumnowe → 2-kolumnowe → pojedyncza kolumna stosowana
+- Zrzuty ekranu kodu: zachowują proporcje, mogą przewijać się poziomo
+- Logo paska zaufania: siatka → poziome przewijanie
+- Stopka: wielokolumnowa → stosowana pojedyncza kolumna
+- Odstępy sekcji: 80px+ → 48px na urządzeniach mobilnych
+
+### Zachowanie Obrazów
+- Zrzuty ekranu pulpitu zachowują obróbkę obramowania we wszystkich rozmiarach
+- Gradient bohatera mięknie/upraszcza się na urządzeniach mobilnych
+- Zrzuty ekranu produktu używają responsywnych obrazów ze spójnym promieniem obramowania
+- Sekcje pełnoszerokie zachowują obróbkę od krawędzi do krawędzi
+
+## 9. Przewodnik po Promptach dla Agenta
+
+### Szybka Referencyjna Paleta Kolorów
+- Główne wezwanie do działania: Czerń Vercel (`#171717`)
+- Tło: Czysta Biel (`#ffffff`)
+- Tekst nagłówków: Czerń Vercel (`#171717`)
+- Tekst treści: Szary 600 (`#4d4d4d`)
+- Obramowanie (cień): `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
+- Link: Niebieski Linku (`#0072f5`)
+- Pierścień fokusu: Niebieski Fokusu (`hsla(212, 100%, 48%, 1)`)
+
+### Przykładowe Prompty Komponentów
+- "Utwórz sekcję bohatera na białym tle. Nagłówek przy 48px Geist grubość 600, wysokość linii 1.00, odstęp liter -2.4px, kolor #171717. Podtytuł przy 20px Geist grubość 400, wysokość linii 1.80, kolor #4d4d4d. Ciemny przycisk wezwania do działania (#171717, promień 6px, wypełnienie 8px 16px) i przycisk ghost (biały, cień-obramowanie rgba(0,0,0,0.08) 0px 0px 0px 1px, promień 6px)."
+- "Zaprojektuj kartę: białe tło, bez obramowania CSS. Użyj stosu cieni: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px. Promień 8px. Tytuł przy 24px Geist grubość 600, odstęp liter -0.96px. Treść przy 16px grubość 400, #4d4d4d."
+- "Zbuduj odznakę pigułkową: tło #ebf5ff, tekst #0068d6, promień 9999px, wypełnienie 0px 10px, 12px Geist grubość 500."
+- "Utwórz nawigację: biały przyklejony nagłówek. Geist 14px grubość 500 dla linków, tekst #171717. Ciemne wezwanie do działania pigułkowe 'Start Deploying' wyrównane do prawej. Cień-obramowanie na dole: rgba(0,0,0,0.08) 0px 0px 0px 1px."
+- "Zaprojektuj sekcję przepływu pracy pokazującą trzy etapy: Develop (kolor tekstu #0a72ef), Preview (#de1d8d), Ship (#ff5b4f). Każdy etap: etykieta uppercase 14px Geist Mono + tytuł 24px Geist grubość 600 + opis 16px grubość 400 w #4d4d4d."
+
+### Przewodnik po Iteracji
+1. Zawsze używaj cienia-jako-obramowania zamiast obramowania CSS — `0px 0px 0px 1px rgba(0,0,0,0.08)` jest fundamentem
+2. Odstęp liter skaluje się z rozmiarem czcionki: -2,4px przy 48px, -1,28px przy 32px, -0,96px przy 24px, normal przy 14px
+3. Tylko trzy grubości: 400 (czytanie), 500 (interakcja), 600 (ogłaszanie)
+4. Kolor jest funkcjonalny, nigdy dekoracyjny — kolory przepływu pracy (Czerwony/Różowy/Niebieski) oznaczają tylko etapy potoku
+5. Wewnętrzny pierścień `#fafafa` w cieniach kart to to, co nadaje kartom Vercel ich subtelny wewnętrzny blask
+6. Geist Mono pisane wielkimi literami dla etykiet technicznych, Geist Sans do wszystkiego innego