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。
7.8 KiB
7.8 KiB
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.