0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ 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。

2026-10-15 21:17:28 +08:00

17 KiB

Raw Blame History

System Designu Inspirowany przez Cohere

Kategoria: AI i LLM Platforma AI dla przedsiębiorstw. Żywe gradienty, estetyka pulpitu nawigacyjnego bogatego w dane.

1. Motyw Wizualny i Atmosfera

Interfejs Cohere to dopracowany pulpit dowodzenia klasy enterprise — pewny siebie, czysty i zaprojektowany tak, by AI sprawiało wrażenie poważnej infrastruktury, a nie produktu konsumenckiego. Doświadczenie rozgrywa się na jasnym, białym tle, gdzie treść organizowana jest w hojnie zaokrąglone karty (promień 22px), tworzące organiczny, chmuropodobny język konteneryzacji. To witryna skierowana do CTO i architektów korporacyjnych: profesjonalna, ale nie zimna; wyrafinowana, ale nie onieśmielająca.

Język projektowy łączy dwa światy dzięki systemowi podwójnych krojów pisma: CohereText — niestandardowy szeryfowy krój wyświetlaczowy o ciasnym śledztwie — nadaje nagłówkom powagę technologicznego manifestu, natomiast Unica77 Cohere Web obsługuje wszystkie teksty treści i UI z geometryczną szwajcarską precyzją. Ta para szeryfowo-bezszeryfowa tworzy osobowość „pewnego autorytetu spotkającego inżynierską klarowność", doskonale odzwierciedlającą platformę AI dla przedsiębiorstw.

Kolor stosowany jest z ekstremalnym umiarkowaniem — interfejs jest niemal całkowicie czarno-biały z chłodnymi szarymi obramowaniami (#d9d9dd, #e5e7eb). Fioletowo-śliwkowy pojawia się wyłącznie w fotograficznych pasmach hero, sekcjach gradientowych oraz interaktywnym błękicie (#1863dc) sygnalizującym stany hover i focus. Ta chromatyczna powściągliwość sprawia, że kiedy kolor JUŻ się pojawia — na zrzutach ekranu produktu, fotografii biznesowej i w głębokiej fioletowej sekcji — niesie maksymalną wagę wizualną.

Kluczowe Cechy:

Jasne białe tło z chłodnymi szarymi obramowaniami kontenerów
Sygnaturowy promień obramowania 22px — charakterystyczne „zaokrąglenie kart Cohere"
Podwójny niestandardowy krój pisma: CohereText (wyświetlaczowy szeryfowy) + Unica77 (bezszeryfowy do treści)
Chromatyczna powściągliwość klasy enterprise: czerń, biel, chłodne szarości, minimalistyczny akcent fioletowo-niebieski
Głęboko fioletowe/śliwkowe sekcje hero zapewniające dramatyczny kontrast
Przyciski ghost/przezroczyste, które na hover zmieniają się na niebieski
Fotografia biznesowa ukazująca zróżnicowane zastosowania w rzeczywistym świecie
CohereMono dla kodu i etykiet technicznych z transformacjami na wielkie litery

2. Paleta Kolorów i Role

Podstawowe

Czerń Cohere (#000000): Tekst głównych nagłówków i elementy o maksymalnym znaczeniu.
Prawie Czerń (#212121): Standardowy kolor linków treści — nieco łagodniejszy niż czysta czerń.
Głęboka Ciemność (#17171c): Prawie czerń z niebieskim odcieniem, przeznaczona dla nawigacji i tekstu w ciemnych sekcjach.

Drugorzędne i Akcentowe

Błękit Interakcji (#1863dc): Główny interaktywny akcent — pojawia się na hover przycisków, stanach focus i aktywnych linkach. Jedyny chromatyczny kolor akcji.
Pierścień Niebieski (#4c6ee6 przy 50%): Kolor pierścienia Tailwind dla wskaźników fokusa klawiaturowego.
Fiolet Fokusa (#9b60aa): Kolor obramowania fokusa pola tekstowego — stonowany fiolet.

Tło i Powierzchnie

Czysta Biel (#ffffff): Główne tło strony i powierzchnia kart.
Śnieg (#fafafa): Subtelnie wyniesione powierzchnie i jasne tła sekcji.
Najjaśniejsza Szarość (#f2f2f2): Obramowania kart i najdelikatniejsze linie kontenerów.

Neutralne i Tekstowe

Stonowany Łupek (#93939f): Odpominięte linki stopki i tekst trzeciorzędny — chłodna szarość z lekkim niebiesko-fioletowym odcieniem.
Chłodne Obramowanie (#d9d9dd): Standardowe obramowania sekcji i elementów listy — chłodna, lekko fioletowa szarość.
Jasne Obramowanie (#e5e7eb): Jaśniejszy wariant obramowania — standardowa gray-200 z Tailwind.

System Gradientów

Pasmo Hero Fioletowo-Śliwkowe: Głęboko fioletowe sekcje gradientowe tworzące dramatyczny kontrast na tle białego tła. Pojawiają się jako pełnoszerokościowe pasma mieszczące zrzuty ekranu produktu i kluczowe komunikaty.
Gradient Ciemnej Stopki: Strona przechodzi przez głęboki fiolet/antracyt do czarnej stopki, tworząc efekt „zmierzchu".

3. Zasady Typografii

Rodzina Czcionek

Wyświetlaczowa: CohereText, z rezerwowymi: Space Grotesk, Inter, ui-sans-serif, system-ui
Treść / UI: Unica77 Cohere Web, z rezerwowymi: Inter, Arial, ui-sans-serif, system-ui
Kod: CohereMono, z rezerwowymi: Arial, ui-sans-serif, system-ui
Ikony: CohereIconDefault (niestandardowa czcionka ikonograficzna)

Hierarchia

Rola	Czcionka	Rozmiar	Grubość	Interlinia	Śledzenie	Uwagi
Wyświetlaczowy / Hero	CohereText	72px (4.5rem)	400	1.00 (ciasna)	-1.44px	Maksymalny impakt, autorytet szeryfowy
Wyświetlaczowy Drugorzędny	CohereText	60px (3.75rem)	400	1.00 (ciasna)	-1.2px	Duże nagłówki sekcji
Nagłówek Sekcji	Unica77	48px (3rem)	400	1.20 (ciasna)	-0.48px	Tytuły sekcji funkcji
Podnagłówek	Unica77	32px (2rem)	400	1.20 (ciasna)	-0.32px	Nagłówki kart, nazwy funkcji
Tytuł Funkcji	Unica77	24px (1.5rem)	400	1.30	normal	Mniejsze tytuły sekcji
Treść Duża	Unica77	18px (1.13rem)	400	1.40	normal	Akapity wprowadzające
Treść / Przycisk	Unica77	16px (1rem)	400	1.50	normal	Standardowa treść, tekst przycisku
Przycisk Średni	Unica77	14px (0.88rem)	500	1.71 (rozluźniona)	normal	Mniejsze przyciski, wyróżnione etykiety
Podpis	Unica77	14px (0.88rem)	400	1.40	normal	Metadane, opisy
Etykieta Wersalikami	Unica77 / CohereMono	14px (0.88rem)	400	1.40	0.28px	Etykiety sekcji pisane wersalikami
Mały	Unica77	12px (0.75rem)	400	1.40	normal	Najmniejszy tekst, linki stopki
Kod Mikro	CohereMono	8px (0.5rem)	400	1.40	0.16px	Tiny uppercase code labels

Zasady

Szeryfowy do deklaracji, bezszeryfowy do użytku: CohereText niesie głos marki w skali wyświetlaczowej — jego szeryfy nadają nagłówkom autorytet opublikowanych badań. Unica77 obsługuje wszystko, co funkcjonalne, z geometryczno-szwajcarską neutralnością.
Ujemne śledzenie w dużej skali: CohereText używa śledzenia -1.2px do -1.44px przy 60–72px, tworząc gęste, efektowne bloki tekstowe.
Jedna grubość treści: Niemal cały tekst Unica77 ma grubość 400. Grubość 500 pojawia się wyłącznie dla wyróżnienia małych przycisków. System opiera się na rozmiarze i odstępach, a nie na kontraście grubości.
Etykiety kodu wersalikami: CohereMono używa wersalików z dodatnim śledzeniem (0.16–0.28px) dla tagów technicznych i znaczników sekcji.

4. Style Komponentów

Przyciski

Ghost / Przezroczysty

Tło: przezroczyste (rgba(255, 255, 255, 0))
Tekst: Czerń Cohere (#000000)
Brak widocznego obramowania
Hover: tekst zmienia się na Błękit Interakcji (#1863dc), krycie 0.8
Focus: pełne obramowanie 2px w Błękicie Interakcji
Główny styl przycisku — niewidoczny dopóki nie zostanie poddany interakcji

Ciemny Pełny

Tło: ciemne/czarne
Tekst: Czysta Biel
Do CTA na jasnych powierzchniach
Pigułkowy lub standardowy promień

Obramowany

Kontener oparty na obramowaniu
Używany w działaniach drugorzędnych

Karty i Kontenery

Tło: Czysta Biel (#ffffff)
Obramowanie: cienka linia Najjaśniejszej Szarości (1px solid #f2f2f2) dla subtelnych kart; Chłodne Obramowanie (#d9d9dd) dla wyróżnionych
Promień: 22px — sygnaturowy promień Cohere dla głównych kart, obrazów i kontenerów dialogowych. Również 4px, 8px, 16px, 20px dla mniejszych elementów
Cień: minimalny — Cohere opiera się na kolorze tła i obramowaniach, a nie na cieniach
Specjalny: promień 0px 0px 22px 22px (zaokrąglenie tylko od dołu) dla kontenerów sekcji
Dialog: promień 8px dla okienek modalnych/dialogowych

Pola Tekstowe i Formularze

Tekst: biały na ciemnym polu, czarny na jasnym
Obramowanie fokusa: Fiolet Fokusa (#9b60aa) z 1px solid
Cień fokusa: czerwony pierścień (rgb(179, 0, 0) 0px 0px 0px 2px) — prawdopodobnie dla sygnalizacji stanu błędu
Obrys fokusa: Błękit Interakcji, linia 2px

Nawigacja

Czysta pozioma nawigacja na białym lub ciemnym tle
Logo: wordmark Cohere (niestandardowe SVG)
Linki: ciemny tekst, 16px Unica77
CTA: ciemny pełny przycisk
Mobile: zwijanie do hamburgera

Obróbka Obrazów

Fotografia biznesowa z różnorodną tematyką i środowiskami
Fioletowo odcieniona fotografia hero dla dramatycznych sekcji
Zrzuty ekranu UI produktu na ciemnych powierzchniach
Obrazy z promieniem 22px odpowiadającym systemowi kart
Sekcje z pełnoszerokościowym fioletowym gradientem

Charakterystyczne Komponenty

System Kart 22px

Promień obramowania 22px to sygnatura wizualna Cohere
Wszystkie główne karty, obrazy i kontenery używają tego promienia
Tworzy chmuropodobną, organiczną miękkość wyróżniającą się spośród typowych 8–12px

Pasek Zaufania Enterprise

Logo firm wyświetlane w poziomym pasku
Demonstruje adopcję przez przedsiębiorstwa
Czyste, monochromatyczne traktowanie logotypów

Fioletowe Pasma Hero

Pełnoszerokościowe, głęboko fioletowe sekcje mieszczące prezentacje produktów
Tworzą dramatyczne przerwy wizualne w białym układzie strony
Zrzuty ekranu produktu unoszą się wewnątrz fioletowego środowiska

Tagi Kodu Wersalikami

CohereMono wersalikami ze śledzeniem
Używane jako znaczniki sekcji i etykiety kategoryzacji
Tworzy techniczną, ustrukturyzowaną hierarchię informacji

5. Zasady Układu

System Odstępów

Jednostka bazowa: 8px
Skala: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
Padding przycisku zmienia się w zależności od wariantu
Wewnętrzny padding karty: około 24–32px
Pionowe odstępy sekcji: hojne (56–60px między sekcjami)

Siatka i Kontener

Maksymalna szerokość kontenera: do 2560px (bardzo szeroka) z responsywnym skalowaniem
Hero: wyśrodkowany z dramatyczną typografią
Sekcje funkcji: wielokolumnowe siatki kart
Sekcje enterprise: pełnoszerokościowe fioletowe pasma
Wykryto 26 punktów przełamania — ekstremalnie granularny system responsywny

Filozofia Przestrzeni Białej

Klarowność enterprise: Każda sekcja prezentuje jedną wyraźną propozycję z przestrzenią do oddychania.
Fotografia jako bohater: Duże sekcje fotograficzne zapewniają zainteresowanie wizualne bez potrzeby dekoracyjnych elementów projektowych.
Grupowanie kartami: Powiązana treść grupowana jest w karty z zaokrągleniem 22px, tworząc naturalne klastry informacyjne.

Skala Promienia Obramowania

Ostry (4px): Elementy nawigacji, małe tagi, paginacja
Komfortowy (8px): Okna dialogowe, kontenery drugorzędne, małe karty
Hojny (16px): Wyróżnione kontenery, średnie karty
Duży (20px): Duże karty funkcji
Sygnaturowy (22px): Główne karty, obrazy hero, główne kontenery — TEN promień Cohere
Pigułkowy (9999px): Przyciski, tagi, wskaźniki statusu

6. Głębia i Elewacja

Poziom	Traktowanie	Zastosowanie
Płaski (Poziom 0)	Brak cienia, brak obramowania	Tło strony, bloki tekstowe
Obramowany (Poziom 1)	`1px solid #f2f2f2` lub `#d9d9dd`	Standardowe karty, separatory listy
Pasmo Fioletowe (Poziom 2)	Pełnoszerokościowe ciemne fioletowe tło	Sekcje hero, prezentacje funkcji

Filozofia Cieni: Cohere jest niemal wolny od cieni. Głębia komunikowana jest poprzez kontrast koloru tła (białe karty na fioletowych pasmach, biała powierzchnia na śniegu), konteneryzację obramowaniem (chłodne szare obramowania) i dramatyczne naprzemienne przejścia sekcji od jasnych do ciemnych. Gdy elementy wymagają elewacji, osiągają ją przez bycie białymi na ciemnym tle, a nie przez rzucanie cieni.

7. Nakazy i Zakazy

Nakazy

Używaj promienia obramowania 22px na wszystkich głównych kartach i kontenerach — to sygnatura wizualna
Używaj CohereText dla nagłówków wyświetlaczowych (72px, 60px) z ujemnym śledzeniem
Używaj Unica77 dla całego tekstu treści i UI przy grubości 400
Utrzymuj paletę czarno-białą z chłodnymi szarymi obramowaniami
Używaj Błękitu Interakcji (#1863dc) wyłącznie dla interaktywnych stanów hover/focus
Używaj głęboko fioletowych sekcji dla dramatycznych przerw wizualnych i prezentacji produktów
Stosuj wersaliki + śledzenie w CohereMono dla etykiet sekcji
Utrzymuj fotografię odpowiednią dla przedsiębiorstw z różnorodną tematyką

Zakazy

Nie używaj promienia obramowania innego niż 22px na głównych kartach — sygnaturowy promień ma znaczenie
Nie wprowadzaj ciepłych kolorów — paleta jest ściśle chłodnotonalna
Nie używaj mocnych cieni — głębia pochodzi z kontrastu kolorów i obramowań
Nie używaj grubości pogrubionej (700+) dla tekstu treści — zakres to 400–500
Nie pomijaj hierarchii szeryfowo/bezszeryfowej — CohereText dla nagłówków, Unica77 dla treści
Nie używaj fioletu jako koloru powierzchni kart — fiolet zarezerwowany jest dla pełnoszerokościowych sekcji
Nie redukuj odstępów sekcji poniżej 40px — układy enterprise potrzebują przestrzeni do oddychania
Nie dodawaj dekoracji do przycisków domyślnie — ghost/przezroczysty to stan bazowy

8. Zachowanie Responsywne

Punkty Przełamania

Nazwa	Szerokość	Kluczowe Zmiany
Małe Mobile	<425px	Kompaktowy układ, minimalne odstępy
Mobile	425–640px	Jedna kolumna, karty układane w stos
Duże Mobile	640–768px	Drobne korekty odstępów
Tablet	768–1024px	Rozpoczynają się siatki 2-kolumnowe
Desktop	1024–1440px	Pełny układ wielokolumnowy
Duży Desktop	1440–2560px	Maksymalna szerokość kontenera

Wykryto 26 punktów przełamania — jedna z najbardziej granularnie responsywnych witryn w zbiorze danych.

Cele Dotykowe

Przyciski odpowiednio zwymiarowane dla interakcji dotykowej
Linki nawigacji z komfortowymi odstępami
Powierzchnie kart jako cele dotykowe

Strategia Zwijania

Nawigacja: Pełna nawigacja zwija się do hamburgera
Siatki funkcji: Wielokolumnowy → 2-kolumnowy → jedna kolumna
Tekst hero: 72px → 48px → 32px progresywne skalowanie
Sekcje fioletowe: Utrzymują pełną szerokość, treść układana w stos
Siatki kart: 3 → 2 → 1 kolumna

Zachowanie Obrazów

Fotografia skaluje się proporcjonalnie wewnątrz kontenerów z promieniem 22px
Zrzuty ekranu produktu zachowują proporcje
Sekcje fioletowe skalują tło proporcjonalnie

9. Przewodnik po Promptach dla Agenta

Szybkie Odniesienie do Kolorów

Tekst Główny: „Czerń Cohere (#000000)"
Tło Strony: „Czysta Biel (#ffffff)"
Tekst Drugorzędny: „Prawie Czerń (#212121)"
Akcent Hover: „Błękit Interakcji (#1863dc)"
Stonowany Tekst: „Stonowany Łupek (#93939f)"
Obramowania Kart: „Najjaśniejsza Szarość (#f2f2f2)"
Obramowania Sekcji: „Chłodne Obramowanie (#d9d9dd)"

Przykładowe Prompty Komponentów

„Utwórz sekcję hero na Czystej Bieli (#ffffff) z CohereText przy 72px grubości 400, line-height 1.0, letter-spacing -1.44px. Tekst w Czerni Cohere. Podtytuł w Unica77 przy 18px grubości 400, line-height 1.4."
„Zaprojektuj kartę funkcji z promieniem obramowania 22px, obramowaniem 1px solid Najjaśniejszej Szarości (#f2f2f2) na białym tle. Tytuł w Unica77 przy 32px, letter-spacing -0.32px. Treść w Unica77 przy 16px, Stonowany Łupek (#93939f)."
„Zbuduj przycisk ghost: przezroczyste tło, tekst w Czerni Cohere w Unica77 przy 16px. Na hover tekst zmienia się na Błękit Interakcji (#1863dc) z kryciem 0.8. Focus: obrys 2px solid Błękit Interakcji."
„Utwórz głęboko fioletową pełnoszerokościową sekcję z białym tekstem. CohereText przy 60px dla nagłówka. Zrzut ekranu produktu unosi się wewnątrz z promieniem obramowania 22px."
„Zaprojektuj etykietę sekcji używając CohereMono przy 14px, wersaliki, letter-spacing 0.28px. Tekst w Stonowanym Łupku (#93939f)."

Przewodnik po Iteracji

Skup się na JEDNYM komponencie na raz
Zawsze używaj promienia 22px dla głównych kart — „zaokrąglenie kart Cohere"
Określaj krój pisma — CohereText dla nagłówków, Unica77 dla treści, CohereMono dla etykiet
Elementy interaktywne używają Błękitu Interakcji (#1863dc) wyłącznie na hover
Utrzymuj białe powierzchnie z chłodnymi szarymi obramowaniami — bez ciepłych tonów
Fiolet jest przeznaczony dla pełnoszerokościowych sekcji, nigdy dla teł kart

17 KiB Raw Blame History Unescape Escape