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。
147 lines
7.8 KiB
Markdown
147 lines
7.8 KiB
Markdown
# System Projektowy Inspirowany OpenAI
|
||
|
||
> Category: AI i LLM
|
||
> Spokojny, niemal monochromatyczny system zakotwiczony w głębokiej czerni z odcieniem teal, obfitymi białymi przestrzeniami i typografią o charakterze redakcyjnym.
|
||
|
||
## 1. Motyw Wizualny i Atmosfera
|
||
|
||
Warstwa produktowa OpenAI wygląda jak laboratorium badawcze przygotowane na spotkanie z publicznością — kliniczna, powściągliwa, celowo cicha. Tło strony to czysta biel (`#ffffff`) nałożona na niemal czarny atrament (`#0d0d0d`) z subtelnym odcieniem teal, dzięki czemu nawet tekst sprawia wrażenie chłodniejszego, a nie agresywnie ciemnego. Efektem jest chromatyczna neutralność, która wysuwa na pierwszy plan wyniki modeli, kod i prozę — a nie oprawę wokół nich.
|
||
|
||
Charakterystycznym zabiegiem jest zastosowanie **Söhne** (lub systemowego odpowiednika `inter`) w umiarkowanych grubościach — 400 dla treści, 500 dla nawigacji i etykiet, 600 dla wyróżnień — w połączeniu z **Signifier**, współczesnym szeryfem używanym do redakcyjnych nagłówków wyróżniających. Podczas gdy większość marek AI skłania się ku futuryzmowi, szeryfowe nagłówki OpenAI nadają produktowi spokojnie literacki ton, jakby każde ogłoszenie było esejem.
|
||
|
||
System kształtów jest jednolicie miękki: promienie 8px–12px, pigułki 9999px dla tagów i chipów, bez ostrych narożników. Przejścia między sekcjami są zaznaczone białą przestrzenią, a nie separatorami; gdy pojawiają się obramowania, są to linie `#e5e5e5` grubości włosa, które wyglądają raczej jak nieobecność koloru niż jego obecność.
|
||
|
||
**Kluczowe Cechy:**
|
||
- Czyste białe płótno (`#ffffff`) z głębokim atramentowym czarnym z odcieniem teal (`#0d0d0d`)
|
||
- Söhne / Inter w skromnych grubościach (400, 500, 600) — powściągliwość ponad asertywność
|
||
- Szeryfowy Signifier do redakcyjnych nagłówków wyróżniających
|
||
- Miękkie promienie 8–12px wszędzie; pigułki 9999px dla chipów
|
||
- Obramowania grubości włosa (`#e5e5e5`) używane oszczędnie; biała przestrzeń jako główny separator
|
||
- Jednokolorowe ilustracje w głębokim kolorze teal — bez gradientów w znakach
|
||
- Hojny line-height (1.55–1.65) i tracking bliski zeru
|
||
|
||
## 2. Paleta Kolorów i Role
|
||
|
||
### Podstawowe
|
||
- **Czysta Biel** (`#ffffff`): Główne tło, powierzchnia kart, tło przycisków.
|
||
- **Czarny Atrament** (`#0d0d0d`): Główny tekst, znak firmowy, główne CTA.
|
||
- **Miękka Czerń** (`#1a1a1a`): Drugorzędne nagłówki, alternatywny atrament dla mniej istotnego tekstu.
|
||
|
||
### Powierzchnia i Tło
|
||
- **Mgła** (`#fafafa`): Tło przerwy sekcji, powierzchnia stopki.
|
||
- **Perła** (`#f5f5f5`): Powierzchnia kart, podwyższony panel.
|
||
- **Chmura** (`#ececec`): Tło elementów wyłączonych, odcień separatora.
|
||
|
||
### Akcent Marki
|
||
- **OpenAI Teal** (`#10a37f`): Główny kolor marki, linki, wyróżnione odznaki — jedyny kolor w skądinąd neutralnym systemie.
|
||
- **Teal Głęboki** (`#0a7a5e`): Stan najechania i wciśnięcia dla koloru marki.
|
||
- **Teal Miękki** (`#e8f5f0`): Odcień powierzchni dla odznak sukcesu, wyróżnionych objaśnień.
|
||
|
||
### Neutralne i Tekstowe
|
||
- **Grafit** (`#3c3c3c`): Tekst treści, domyślny kolor do czytania.
|
||
- **Łupek** (`#6e6e6e`): Tekst drugorzędny, podpisy, metadane.
|
||
- **Popiół** (`#9b9b9b`): Tekst trzeciorzędny, placeholder, wyłączona etykieta.
|
||
- **Kamień** (`#c4c4c4`): Dekoracyjne separatory, delikatne ikony.
|
||
|
||
### Semantyczne i Obramowania
|
||
- **Obramowanie Włos** (`#e5e5e5`): Standardowy separator grubości włosa.
|
||
- **Obramowanie Miękkie** (`#ededed`): Kontur karty na białej powierzchni.
|
||
- **Błąd** (`#ef4146`): Walidacja, akcja destrukcyjna.
|
||
- **Ostrzeżenie** (`#f5a623`): Miękki bursztyn dla stanów doradczych.
|
||
- **Informacja** (`#2563eb`): Ton linku informacyjnego (używany oszczędnie; teal nadal dominuje).
|
||
|
||
## 3. Zasady Typografii
|
||
|
||
### Rodzina Czcionek
|
||
- **Wyróżniająca / Redakcyjna**: `Signifier`, z awaryjną: `'Source Serif Pro', Georgia, serif`
|
||
- **Treść / UI**: `Söhne`, z awaryjną: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
|
||
- **Kod / Mono**: `Söhne Mono`, z awaryjną: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
|
||
|
||
### Hierarchia
|
||
|
||
| Rola | Czcionka | Rozmiar | Grubość | Line Height | Letter Spacing | Uwagi |
|
||
|------|----------|---------|---------|-------------|----------------|-------|
|
||
| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Redakcyjne hero, tytuły ogłoszeń |
|
||
| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Nagłówek strony |
|
||
| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Nagłówek sekcji |
|
||
| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Podsekcja |
|
||
| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Akapity wprowadzające |
|
||
| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Standardowy tekst do czytania |
|
||
| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Treść kart, gęsty UI |
|
||
| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadane, odznaki |
|
||
| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Eyebrow, linki nawigacji pisane wersalikami |
|
||
| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Bloki kodu, wyjście terminala |
|
||
|
||
### Zasady
|
||
- **Powściągliwość jako tożsamość**: grubości nie przekraczają 600; 700+ wygląda niezgodnie z marką. Hierarchia wynika z rozmiaru i koloru, a nie grubości.
|
||
- **Szeryfowy dla duszy, bezszeryfowy dla systemu**: Signifier pojawia się wyłącznie w redakcyjnych momentach wyróżniających. UI produktu jest wyłącznie bezszeryfowe.
|
||
- **Ujemny tracking w display**: -0.02em dla rozmiarów display; tracking wraca do zera przy 16px.
|
||
|
||
## 4. Style Komponentów
|
||
|
||
### Przyciski
|
||
|
||
**Główny**
|
||
- Tło: `#0d0d0d`
|
||
- Tekst: `#ffffff`
|
||
- Padding: 10px 18px
|
||
- Radius: 9999px (pełna pigułka) dla chipów, 12px dla prostokątnych CTA
|
||
- Najechanie: tło `#1a1a1a`
|
||
- Zastosowanie: Główne CTA, "Wypróbuj ChatGPT", "Zaloguj się"
|
||
|
||
**Drugorzędny**
|
||
- Tło: `#ffffff`
|
||
- Tekst: `#0d0d0d`
|
||
- Obramowanie: 1px solid `#e5e5e5`
|
||
- Padding: 10px 18px
|
||
- Radius: 12px
|
||
- Najechanie: tło `#fafafa`, obramowanie `#d4d4d4`
|
||
|
||
**Akcent Marki**
|
||
- Tło: `#10a37f`
|
||
- Tekst: `#ffffff`
|
||
- Padding: 10px 18px
|
||
- Radius: 12px
|
||
- Najechanie: `#0a7a5e`
|
||
- Zastosowanie: Wyróżnione CTA uaktualnienia, ścieżka sukcesu
|
||
|
||
### Karty
|
||
- Tło: `#ffffff`
|
||
- Obramowanie: 1px solid `#ededed`
|
||
- Radius: 16px
|
||
- Padding: 24px–32px
|
||
- Cień: brak domyślnie; przy najechaniu `0 4px 16px rgba(13,13,13,0.06)`
|
||
|
||
### Pola Wprowadzania
|
||
- Tło: `#ffffff`
|
||
- Obramowanie: 1px solid `#e5e5e5`
|
||
- Radius: 12px
|
||
- Padding: 12px 14px
|
||
- Fokus: obramowanie `#10a37f`, pierścień `0 0 0 3px rgba(16,163,127,0.12)`
|
||
|
||
### Pigułki i Tagi
|
||
- Tło: `#f5f5f5`
|
||
- Tekst: `#3c3c3c`
|
||
- Padding: 4px 10px
|
||
- Radius: 9999px
|
||
- Czcionka: 12px / 500
|
||
|
||
## 5. Odstępy i Układ
|
||
|
||
- **Jednostka bazowa**: 4px. Skala: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
|
||
- **Kontener**: max-width 1200px, guttera 24px na urządzeniach mobilnych, 48px na komputerach.
|
||
- **Rytm sekcji**: 96–128px w pionie między głównymi sekcjami; 64px na urządzeniach mobilnych.
|
||
- **Siatka**: 12 kolumn na komputerze, 4 kolumny na urządzeniach mobilnych, przerwa 24px.
|
||
|
||
## 6. Ruch
|
||
|
||
- **Czas trwania**: 150–220ms dla najechania; 280–360ms dla przejść układu.
|
||
- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (płynne wyjście) dla wejść.
|
||
- **Powściągliwość**: bez paralaksy, bez scroll-jacking. Jedynie subtelne zanikanie i przesunięcie.
|
||
|
||
## 7. Wytyczne Użytkowania
|
||
|
||
- Zachowaj razem neutralną powściągliwość redakcyjną, miękki radius i rzadkie użycie akcentu; same zielone akcenty nie tworzą powierzchni w stylu OpenAI.
|
||
- Używaj momentów wyróżniających w stylu Signifier wyłącznie dla hierarchii redakcyjnej lub ogłoszeń, pozostawiając kontrolki produktu w systemie bezszeryfowym.
|
||
- Unikaj ozdobnego ruchu, ciężkich cieni i przesadnie dużych dekoracyjnych kart; system powinien sprawiać wrażenie spokojnego, czytelnego i przemyślanego.
|