admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
251 lines
20 KiB
Markdown
251 lines
20 KiB
Markdown
# System projektowy inspirowany Apple
|
|
|
|
> Category: Media i konsument
|
|
> Elektronika użytkowa. Premium white space, SF Pro, kinowe obrazy.
|
|
|
|
## 1. Motyw wizualny i atmosfera
|
|
|
|
Język webowy Apple to precyzyjny system redakcyjny, który przeplata galeryjny spokój z gęstymi, sklepowymi blokami informacji. Ton wizualny pozostaje powściągliwy: szerokie neutralne płótna, ciche elementy chromu i obrazy produktów, którym przypada niemal cały ciężar ekspresji. Interfejs jest tak zaprojektowany, by zniknąć, aby sprzęt, materiały i opcje wykończenia stały się narracyjnym pierwszym planem.
|
|
|
|
W pięciu przeanalizowanych stronach rytm jest spójny, ale nie monolityczny. Powierzchnie marketingowe (strona główna i Environment) stosują kinowe rozdziały utrzymane w czerni i świetle, podczas gdy powierzchnie handlowe (Store i ścieżki Shop) wprowadzają ciaśniejsze odstępy, więcej kontrolek użytkowych i gęstsze stosy kart, nie łamiąc przy tym podstawowej gramatyki marki. Rezultatem jest jeden system z dwoma biegami: trybem prezentacji i trybem transakcyjnym.
|
|
|
|
Typografia jest stabilizatorem. SF Pro Display niesie hierarchię hero i merchandisingu z kompaktową interlinią i kontrolowanym trackingiem, podczas gdy SF Pro Text obsługuje metadane produktów, nawigację, filtry i gęste interfejsy wyboru. Typografia pozostaje stonowana, ale zakres skali jest na tyle szeroki, by obsłużyć zarówno billboardowe przekazy hero, jak i mikroskopijne etykiety użytkowe.
|
|
|
|
**Kluczowe cechy:**
|
|
- Binarny rytm sekcji: głębokie czarne sceny (`#000000`) przeplatane bladymi neutralnymi polami (`#f5f5f7`)
|
|
- Pojedyncza niebieska rodzina akcentu dla semantyki akcji i linków (`#0071e3`, `#0066cc`, `#2997ff`)
|
|
- Dwa tryby pracy w jednym systemie: kinowe moduły prezentacyjne i gęste konfiguratory handlowe
|
|
- Silne poleganie na obrazach i wykończeniach materiałów; chrom interfejsu pozostaje wizualnie cienki
|
|
- Ciasne metryki nagłówków (SF Pro Display, semibold) w parze z kompaktową typografią tekstu/linków (SF Pro Text)
|
|
- Geometria pigułek i kapsuł jako charakterystyczny język akcji (`18px` do `980px` oraz okrągłe kontrolki)
|
|
- Głębia stosowana oszczędnie; kontrast i separacja powierzchni wykonują większość pracy warstwowania
|
|
- Wielostronicowy rytm bloków kolorystycznych: czarne rozdziały hero -> blade neutralne pola merchandisingowe -> użytkowe białe powierzchnie sklepowe -> ciemne mikropowierzchnie dla kontrolek
|
|
|
|
## 2. Paleta kolorów i role
|
|
|
|
> **Source Pages:** `https://www.apple.com/`, `https://www.apple.com/environment/`, `https://www.apple.com/store`, `https://www.apple.com/shop/buy-iphone/iphone-17-pro`, `https://www.apple.com/shop/accessories/all`
|
|
|
|
### Podstawowe
|
|
- **Absolutna czerń** (`#000000`): Immersyjne płótna hero, dramatyczne rozdziały produktowe, głębokie kotwice interfejsu.
|
|
- **Blada szarość Apple** (`#f5f5f7`): Główna jasna powierzchnia dla pasów funkcji, bloków porównawczych i redakcyjnych przejść.
|
|
- **Niemal czarny atrament** (`#1d1d1f`): Podstawowy kolor tekstu i ciemnego wypełnienia kontrolek na jasnych płótnach.
|
|
|
|
### Drugorzędne i akcentowe
|
|
- **Niebieski akcji Apple** (`#0071e3`): Podstawowe wypełnienie akcji i sygnalizujący fokus akcent marki.
|
|
- **Niebieski linku tekstowego** (`#0066cc`): Kolor linku w tekście zoptymalizowany pod czytelność długich treści.
|
|
- **Wysokoluminancyjny niebieski linku** (`#2997ff`): Jasne traktowanie linku na ciemniejszych scenach, gdzie wymagany jest mocniejszy kontrast.
|
|
|
|
### Powierzchnia i tło
|
|
- **Czyste białe płótno** (`#ffffff`): Tła list sklepowych/produktowych oraz gęste sekcje transakcyjne.
|
|
- **Powierzchnia grafitowa A** (`#272729`): Warstwa kontekstu ciemnej karty i kontrolek mediów.
|
|
- **Powierzchnia grafitowa B** (`#262629`): Nieco głębsza ciemna warstwa użytkowa dla grupowania kontrolek.
|
|
- **Powierzchnia grafitowa C** (`#28282b`): Wyniesione ciemne powierzchnie pomocnicze.
|
|
- **Powierzchnia grafitowa D** (`#2a2a2c`): Najciemniejszy wyniesiony stopień używany do separacji w bogatszych ciemnych scenach.
|
|
|
|
### Neutralne i tekst
|
|
- **Drugorzędna neutralna szarość** (`#6e6e73`): Drugorzędny tekst, opisy pomocnicze, trzeciorzędne metadane.
|
|
- **Miękka szarość obramowania** (`#d2d2d7`): Separatory, subtelne kontury i stonowane ujęcie elementów użytkowych.
|
|
- **Średnia szarość obramowania** (`#86868b`): Mocniejsze kontury pól w kontekstach konfiguracji produktów i filtrów.
|
|
- **Użytkowa ciemna szarość** (`#424245`): Przejście tekst/powierzchnia w ciemnej neutralnej tonacji w kontekstach sklepu.
|
|
|
|
### Semantyczne i akcentowe
|
|
- **Sygnał zaznaczenia/fokusu** (`#0071e3`): Wspólny sygnał fokusu i stanu zaznaczonego w kontekstach marketingowych i handlowych.
|
|
- **Błąd/Ostrzeżenie/Sukces**: W wyodrębnionym zestawie powierzchni nie była konsekwentnie widoczna odrębna paleta semantyczna.
|
|
|
|
### System gradientów
|
|
- Wyodrębnione strony są w przeważającej mierze oparte na jednolitych powierzchniach. Bogactwo wizualne pochodzi z fotografii i renderowania wykończeń, a nie z trwałych gradientów interfejsu.
|
|
|
|
## 3. Zasady typografii
|
|
|
|
### Rodzina czcionek
|
|
- **Rodzina Display:** `SF Pro Display`, zamienniki `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
|
|
- **Rodzina Text:** `SF Pro Text`, zamienniki `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
|
|
- **Podział zastosowań:** Rodzina Display obsługuje nagłówki hero/produktów i nagłówki merchandisingowe; rodzina Text obsługuje nawigację, kontrolki, etykiety i gęste teksty handlowe.
|
|
|
|
### Hierarchia
|
|
| Rola | Rozmiar | Grubość | Interlinia | Odstępy liter | Uwagi |
|
|
|------|------|--------|-------------|----------------|-------|
|
|
| Hero Display XL | 80px | 600 | 1.00-1.05 | -1.2px | Skala hero Environment/store |
|
|
| Hero Display L | 56px | 600 | 1.07 | -0.28px | Momenty hero strony głównej |
|
|
| Section Display | 48px | 500-600 | 1.08 | -0.144px | Główne nagłówki rozdziałów |
|
|
| Product Heading | 40px | 600 | 1.10 | normal | Tytuły sekcji produktów i kampanii |
|
|
| Feature Display | 38px | 600 | 1.21 | 0.152px | Wyróżnienia urządzeń i merchandisingu |
|
|
| Promo Display | 32px | 300-600 | 1.09-1.13 | 0.128px do 0.352px | Pod-hero na poziomie modułu |
|
|
| Card/Product Title | 28px | 600 | 1.14 | 0.196px | Nazewnictwo na poziomie kafelka i kluczowe teksty |
|
|
| Utility Heading | 24px | 600 | 1.17 | 0.216px / -0.2px | Nagłówki konfiguratora i pogrupowanej treści |
|
|
| Link/Action Heading | 21px | 600 | 1.14-1.38 | 0.231px | Większe linki promocyjne |
|
|
| Subhead | 19px | 600 | 1.21 | 0.228px | Kompaktowe wstępy sekcji |
|
|
| Body Primary | 17px | 400 | 1.47 | -0.374px | Standardowy tekst i opisy sklepowe |
|
|
| Body Emphasis | 17px | 600 | 1.24 | -0.374px | Wyróżnione etykiety i kluczowe wartości |
|
|
| Control Label | 14px | 400-600 | 1.29-1.47 | -0.224px | Przyciski, etykiety pomocnicze, kompaktowy tekst nawigacji |
|
|
| Micro UI | 12px | 400-600 | 1.00-1.33 | -0.12px | Drobny druk, mikroetykiety |
|
|
| Legal/Meta | 10px | 400 | 1.30-1.47 | -0.08px | Gęste metadane i tekst wsparcia prawnego |
|
|
|
|
### Zasady
|
|
- **Ciągłość między typami stron:** To samo DNA typograficzne obejmuje kinowe premiery i ścieżki zakupu produktów, zapobiegając rozszczepieniu marki między marketingiem a handlem.
|
|
- **Kompresja w skali:** Poziomy Display używają ciasnej interlinii i kontrolowanego trackingu, by sprawiać wrażenie precyzyjnego i zorientowanego na produkt.
|
|
- **Czytelna gęstość na głębokość sklepową:** SF Pro Text równoważy zwartość z wystarczającym rytmem pionowym dla długich list produktów i macierzy opcji.
|
|
- **Wymierna drabina grubości:** 600 to dominująca grubość wyróżnienia; 700 pojawia się wybiórczo; 300 jest używane oszczędnie dla kontrastu w większych wierszach.
|
|
|
|
### Uwaga o zamiennikach czcionek
|
|
- Najbliższe darmowo dostępne zamienniki: `Inter` dla implementacji bogatych w tekst oraz metryki `SF Pro Display-like` przybliżone przy użyciu `Inter Tight` dla nagłówków.
|
|
- Przy zamianie zwiększ nieco interlinię (+0.02 do +0.06) w rozmiarach tekstu i zmniejsz intensywność ujemnego trackingu, aby zachować czytelność.
|
|
|
|
## 4. Stylizacje komponentów
|
|
|
|
### Przyciski
|
|
- **Podstawowa akcja z wypełnieniem:** tło `#0071e3`, tekst `#ffffff`, promień 8px, kompaktowy poziomy padding (zwykle 8px 15px). Używane do zdecydowanych akcji zakupu/postępu.
|
|
- **Ciemna akcja z wypełnieniem:** tło `#1d1d1f`, tekst `#ffffff`, promień 8px. Używane, gdy jasne powierzchnie potrzebują powściągliwego, wysokokontrastowego elementu podstawowego.
|
|
- **Rodzina akcji pigułka/kapsuła:** duże akcje kapsułowe o promieniach `18px`-`56px` oraz skrajne linki w formie pigułek o `980px`. Ustanawia miękką, lecz precyzyjną sylwetkę wezwania do działania Apple.
|
|
- **Powłoki filtrów/przycisków użytkowych:** jasne powłoki (`#fafafc` lub półprzezroczysta biel) z subtelnymi szarymi obramowaniami (`#d2d2d7` / `#86868b`) dla gęstych kontekstów konfiguracji.
|
|
- **Zachowanie wciśnięcia:** aktywne kontrolki zwykle nieznacznie zmniejszają skalę lub lekko przesuwają wypełnienie, aby zasygnalizować fizyczne potwierdzenie naciśnięcia.
|
|
|
|
### Karty i kontenery
|
|
- **Karty redakcyjne/produktowe:** jasne karty na polach `#f5f5f7` lub białych z minimalnym kadrowaniem i kompozycją zorientowaną na obraz.
|
|
- **Ciemne karty użytkowe:** stopnie grafitowe (`#272729` do `#2a2a2c`) używane do nakładek, kontrolek mediów i modułów w ciemnym kontekście.
|
|
- **Panele konfiguratora:** zaokrąglone kontenery (często 12px-18px) z wyraźną, lecz powściągliwą definicją obramowania.
|
|
- **Moduły karuzeli/spotlight:** większe zaokrąglone powłoki (`28px`-`36px`) dla wyróżnionych pasów treści.
|
|
|
|
### Pola i formularze
|
|
- **Pola wejściowe sklepu:** półprzezroczyste lub białe tła, ciemny tekst (`#1d1d1f`), ujęcie prowadzone obramowaniem (`#86868b`).
|
|
- **Kontrolki wyboru:** okrągła/przełącznikowa geometria kontrolek pojawia się często w interfejsach wyboru produktów.
|
|
- **Strategia gęstości:** pola formularzy pozostają wizualnie ciche, aby obrazy urządzeń i hierarchia cen pozostały dominujące.
|
|
|
|
### Nawigacja
|
|
- **Globalna nawigacja marketingowa:** kompaktowy ciemny, półprzezroczysty pasek z linkami drobnym krojem i powściągliwą ikonografią.
|
|
- **Warstwy nawigacji Store/podsklepu:** dodatkowe paski użytkowe, chipy i kontrolki segmentowane do zawężania kategorii i produktów.
|
|
- **Hierarchia linków:** niebieskie odcienie linków pozostają podstawowym sygnałem interaktywnym, podczas gdy neutralny tekst wspiera gęste zestawy nawigacji.
|
|
|
|
### Traktowanie obrazu
|
|
- **Fotografia zorientowana na obiekt:** sprzęt i akcesoria są eksponowane na pierwszym planie na kontrolowanych jednolitych powierzchniach.
|
|
- **Wysokiej wierności renderowanie wykończeń:** odblaskowe/materiałowe detale są kluczowe dla wizualnej perswazji.
|
|
- **Mieszane kadrowanie:** sceny hero na pełnym spadzie współistnieją z zaokrąglonymi kartami sklepowymi i ciasno przyciętymi miniaturami merchandisingowymi.
|
|
|
|
### Inne charakterystyczne komponenty
|
|
- **Macierz konfiguratora produktu:** stosy opcji i selektory łączące chipy, kontrolki w stylu radiowym oraz kontekstowe bloki cen/podsumowania.
|
|
- **Kropki/strzałki sterowania karuzelą:** okrągłe słownictwo kontrolek w stonowanych nakładkach do przewijania galerii.
|
|
- **Panele narracyjne Environment:** rozdziały narracyjne łączące redakcyjną typografię z kinowymi wizualizacjami produktu/środowiska.
|
|
|
|
## 5. Zasady układu
|
|
|
|
### System odstępów
|
|
- Jednostka bazowa to faktycznie `8px`, ale system obsługuje gęste mikrokroki dla precyzyjnego wyrównania.
|
|
- Często powtarzane wartości odstępów na różnych stronach: `2`, `4`, `6`, `7`, `8`, `9`, `10`, `12`, `14`, `17`, `20` px.
|
|
- Uniwersalne stałe rytmu widoczne zarówno w ścieżkach marketingowych, jak i sklepowych: rusztowanie jednostek `8px` z interwałami użytkowymi `14-20px` dla paddingu komponentów i odstępów list.
|
|
|
|
### Siatka i kontener
|
|
- **Strony prezentacyjne:** duże centralne kolumny z szerokim poziomym oddechem i pełnoszerokimi rozdziałami kolorystycznymi.
|
|
- **Strony handlowe:** ciaśniejsze wielokolumnowe siatki produktów i kontrolek z częstym modularnym układaniem w stosy.
|
|
- **Zachowanie kontenera:** ograniczony czytelny rdzeń z hojnymi marginesami zewnętrznymi przy szerokościach desktopowych.
|
|
|
|
### Filozofia białej przestrzeni
|
|
- **Tempo sceny:** główne rozdziały wizualne stosują szeroki oddech górny/dolny.
|
|
- **Zagęszczenie informacji tam, gdzie potrzeba:** strony sklepowe celowo kompresują odstępy, aby ujawnić więcej użytecznych informacji na widok.
|
|
- **Separacja prowadzona kontrastem:** przejścia między sekcjami opierają się bardziej na zmianach powierzchni niż na dekoracyjnych separatorach.
|
|
|
|
### Skala promienia obramowania
|
|
- **5px:** drobne linki/tagi użytkowe i mniejsze małe powłoki.
|
|
- **8px-12px:** standardowe kontrolki i kompaktowe pola.
|
|
- **16px-18px:** karty, ramy modułów i panele handlowe.
|
|
- **28px-36px:** większe moduły i kontenery spotlight.
|
|
- **56px / 100px / 980px:** kapsuły, duże pigułki i charakterystyczne wydłużone formy CTA.
|
|
- **50%:** okrągłe kontrolki mediów i wyboru.
|
|
|
|
## 6. Głębia i wzniesienie
|
|
|
|
| Poziom | Traktowanie | Zastosowanie |
|
|
|------|-----------|-----|
|
|
| Poziom 0 | Płaskie neutralne powierzchnie (`#ffffff`, `#f5f5f7`, `#000000`) | Główne sceny narracyjne i produktowe |
|
|
| Poziom 1 | Subtelne ujęcie obramowaniem (`#d2d2d7`, `#86868b`) | Filtry, pola wejściowe, karty użytkowe |
|
|
| Poziom 2 | Miękki cień (`rgba(0,0,0,0.08)` do `rgba(0,0,0,0.22)` tam, gdzie występuje) | Wyróżnione karty i wyniesione moduły merchandisingowe |
|
|
| Poziom 3 | Stopniowanie ciemnych powierzchni (`#272729` -> `#2a2a2c`) | Nakładki, kontrolki mediów, ciemne klastry użytkowe |
|
|
| Dostępność | Niebieski sygnał fokusu (`#0071e3`) | Wyróżnienie klawiatury i zaznaczenia |
|
|
|
|
Głębia jest celowo powściągliwa. Apple preferuje kontrast tonalny, stopniowanie powierzchni i hierarchię kompozycyjną nad ciężkimi stosami cieni.
|
|
|
|
### Głębia dekoracyjna
|
|
- Głębia dekoracyjna jest tworzona głównie przez fotograficzny realizm i renderowanie materiałów, a nie przez syntetyczne efekty interfejsu.
|
|
- Półprzezroczyste nakładki i szklane paski użytkowe zapewniają łagodne atmosferyczne warstwowanie w nawigacji i kontrolkach.
|
|
|
|
## 7. Co robić i czego nie robić
|
|
|
|
### Co robić
|
|
- Używaj neutralnej triady (`#000000`, `#f5f5f7`, `#ffffff`) jako strukturalnego fundamentu.
|
|
- Rezerwuj niebieskie akcenty dla autentycznej semantyki akcji i nawigacji.
|
|
- Utrzymuj typografię ciasną i przemyślaną, zwłaszcza w skalach Display.
|
|
- Zachowaj język geometrii kapsuły/koła dla kontrolek i kluczowych akcji.
|
|
- Pozwól, by obrazy produktów niosły dramat wizualny; utrzymuj chrom stonowany.
|
|
- Stosuj ujęcie prowadzone obramowaniem w gęstych kontekstach sklepowych zamiast ciężkiej ornamentyki kart.
|
|
- Zachowaj wyraźną separację między modułami prezentacyjnymi a transakcyjnymi, utrzymując wspólne podstawowe tokeny.
|
|
|
|
### Czego nie robić
|
|
- Nie wprowadzaj szerokich drugorzędnych palet akcentowych, które konkurują z niebieskim Apple.
|
|
- Nie nadużywaj cieni, efektów poświaty ani dekoracyjnych gradientów w podstawowym chromie interfejsu.
|
|
- Nie mieszaj niepowiązanych rodzin czcionek ani nie rozluźniaj trackingu bez rozróżnienia.
|
|
- Nie spłaszczaj wszystkich narożników do jednego promienia; Apple stosuje celowe poziomy promienia.
|
|
- Nie przeciążaj modułów handlowych grubymi obramowaniami ani głośnymi efektami wizualnymi.
|
|
- Nie usuwaj neutralnego rytmu kontrastu między ciemnymi a jasnymi rozdziałami.
|
|
- Nie traktuj ścieżek marketingowych i zakupowych jako odrębnych systemów projektowych.
|
|
|
|
## 8. Zachowanie responsywne
|
|
|
|
### Punkty graniczne
|
|
| Nazwa | Szerokość | Kluczowe zmiany |
|
|
|------|-------|-------------|
|
|
| Mały mobilny | 374px i poniżej | Zacieśnione kontrolki sklepowe, jednokolumnowe stosy produktów |
|
|
| Mobilny | 375px-640px | Jednokolumnowe moduły, kompaktowe wiersze akcji, skondensowane selektory |
|
|
| Tablet | 641px-833px | Rozszerzone karty i mieszane przejścia 1-2 kolumny |
|
|
| Szeroki tablet | 834px-1023px | Stabilniejszy wielokolumnowy merchandising, większe bloki tekstu |
|
|
| Desktop | 1024px-1240px | Pełne układy sklepowe i struktury porównań produktów |
|
|
| Szeroki desktop | 1241px-1440px | Rozszerzenie hero marketingowego i szersze odstępy sekcji |
|
|
| Duży desktop | 1441px+ | Maksymalny oddech rozdziałów i szeroka kompozycja redakcyjna |
|
|
|
|
### Cele dotykowe
|
|
- Akcje podstawowe i drugorzędne są generalnie prezentowane w przyjaznych dotykowi geometriach pigułek/przycisków.
|
|
- Okrągłe kontrolki mediów i wyboru są zgodne z minimalnym zamiarem dotykowym w kontekstach mobilnych.
|
|
- Gęsty interfejs handlowy używa kompaktowych etykiet, ale zachowuje wyraźne obszary trafienia dzięki paddingowi otaczającego kształtu.
|
|
|
|
### Strategia zwijania
|
|
- Typografia hero marketingowego skaluje się w dół w dyskretnych poziomach, zachowując kontrast hierarchii.
|
|
- Siatki produktów i handlu zwijają się z wielokolumnowych do układanych w stosy kart z trwałą widocznością selektorów.
|
|
- Nawigacja użytkowa kompresuje się w prostsze grupowania linków/kontrolek, zachowując kluczowe akcje.
|
|
- Klastry opcji/konfiguracji stają się ułożone pionowo, aby ścieżka zakupu pozostała liniowa na małych ekranach.
|
|
|
|
### Zachowanie obrazu
|
|
- Obrazy produktów zachowują proporcje i centralność przez punkty graniczne.
|
|
- Wizualizacje hero pozostają dominujące na urządzeniach mobilnych, z tekstem repozycjonowanym wokół priorytetu mediów.
|
|
- Miniatury sklepowe pozostają czytelne dzięki ciaśniejszej logice kadrowania i gęstszemu układaniu kart w stosy.
|
|
- Moduły prowadzone obrazem nadal kotwiczą rytm w miarę wzrostu gęstości układu.
|
|
|
|
## 9. Przewodnik promptów dla agenta
|
|
|
|
### Szybkie odniesienie kolorów
|
|
- Niebieski akcji podstawowej: **Niebieski akcji Apple** (`#0071e3`)
|
|
- Niebieski linku tekstowego: **Niebieski linku tekstowego** (`#0066cc`)
|
|
- Płótno ciemnego rozdziału: **Absolutna czerń** (`#000000`)
|
|
- Płótno jasnego rozdziału: **Blada szarość Apple** (`#f5f5f7`)
|
|
- Tekst podstawowy na jasnym: **Niemal czarny atrament** (`#1d1d1f`)
|
|
- Tekst drugorzędny: **Drugorzędna neutralna szarość** (`#6e6e73`)
|
|
- Miękkie obramowanie sklepowe: **Miękka szarość obramowania** (`#d2d2d7`)
|
|
- Mocne obramowanie sklepowe: **Średnia szarość obramowania** (`#86868b`)
|
|
|
|
### Przykładowe prompty komponentów
|
|
- „Zaprojektuj hero produktu w stylu Apple na czarnym płótnie (`#000000`) z nagłówkiem SF Pro Display semibold (48-56px), zwięzłym tekstem wspierającym i dwoma kapsułowymi CTA używającymi `#0071e3` i `#1d1d1f`."
|
|
- „Stwórz panel konfiguracji handlowej na bieli (`#ffffff`) z kartami zaokrąglonymi na 18px, polami z obramowaniem `#86868b`, tekstem SF Pro Text 17px i kompaktowymi selektorami opcji."
|
|
- „Zbuduj siatkę kart merchandisingowych przeplatającą powierzchnie `#f5f5f7` i białe, z kartami zorientowanymi na obraz, powściągliwymi cieniami i metadanymi SF Pro Text 14-17px."
|
|
- „Wygeneruj klaster kontrolek karuzeli używający okrągłych przycisków (promień 50%), stonowanych szarych nakładek i wyraźnej informacji zwrotnej o stanie aktywnym dla nawigacji galerii."
|
|
- „Skomponuj mieszany rytm strony marketing + handel: ciemny rozdział prezentacyjny -> jasny rozdział funkcji -> gęsty moduł listy produktów, zachowując niebieskie akcenty tylko dla akcji i linków."
|
|
|
|
### Przewodnik iteracji
|
|
1. Najpierw zablokuj neutralny fundament (`#000000`, `#f5f5f7`, `#ffffff`) przed dostrajaniem akcentów.
|
|
2. Utrzymuj niebieskie akcenty rzadkie i celowe; jeśli wszystko jest niebieskie, hierarchia się załamuje.
|
|
3. Dostrajaj typografię w tej kolejności: skala Display, czytelność tekstu, a następnie mikroetykiety.
|
|
4. Dopasowuj promień według klasy komponentu (pole, karta, kapsuła, koło), a nie zaokrąglenia uniwersalnego.
|
|
5. Zwiększaj gęstość stopniowo, przechodząc od sekcji prezentacyjnych do handlowych.
|
|
6. Po każdej rewizji sprawdzaj, czy obrazy produktów pozostają najsilniejszą warstwą wizualną.
|
|
|
|
### Znane luki
|
|
- Odrębne semantyczne kolory statusu (błąd/ostrzeżenie/sukces) nie były konsekwentnie widoczne w wyodrębnionym zestawie stron.
|
|
- Niektóre mikrostany interakcji różnią się w zależności od modułu i nie są reprezentowane jako uniwersalne tokeny systemowe.
|
|
- Kilka modułów sklepowych ujawnia kontekstowe nadpisania typografii, które nie pojawiają się na wszystkich pięciu stronach.
|