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。
162 lines
8.2 KiB
Markdown
162 lines
8.2 KiB
Markdown
# System projektowy inspirowany GitHub
|
|
|
|
> Category: Narzędzia deweloperskie
|
|
> Platforma zorientowana na kod. Gęstość funkcjonalna, precyzja niebieskiego na białym, fundamenty Primer.
|
|
|
|
## 1. Motyw wizualny i atmosfera
|
|
|
|
Powierzchnia GitHub jest zaprojektowana, nie ozdobiona. Każdy piksel wyraża stanowisko: to narzędzie dla osób, którym zależy na diffach, buildach i pull requestach. Tło strony to czysty `#ffffff` (jasny) lub `#0d1117` (ciemny), a treść rozmieszczona jest na gęstych prostokątnych panelach oddzielonych cienkimi ramkami zamiast pustą przestrzenią. Gęstość informacji to marka — wiersze list, linie kodu, nagłówki repozytoriów i karty powiadomień są ściśle upakowane, aby zaawansowany użytkownik mógł przeskanować sto elementów bez przewijania.
|
|
|
|
Charakterystyczne akcenty to **Primer blue** (`#0969da`) dla łączy i podstawowych akcji oraz **GitHub green** (`#1a7f37`) dla scalonych stanów, sukcesów i samego przycisku scalania. Oba wyglądają nieco stonowanie w porównaniu z niebieskim i zielonym w produktach konsumenckich — wystarczająco nasycone, by odczytywać się na tle gęstego szarego tekstu, na tyle powściągliwe, by znikać w tle, gdy kilka z nich pojawi się w jednym widoku.
|
|
|
|
Typografia używa stosu **system-ui** w całym produkcie, dzięki czemu tekst renderuje się ostro na każdym systemie operacyjnym, w parze z **SFMono / Menlo / Consolas** dla kodu. Nie ma editorial display fontu; głosem GitHub jest głos systemu, na którym już pracujesz.
|
|
|
|
**Kluczowe cechy:**
|
|
- Czysto białe płótno (`#ffffff`) lub głęboka granatowa czerń (`#0d1117`) — bez ciepła, bez odcienia
|
|
- Cienkie szare ramki (`#d0d7de`) definiują każdy panel
|
|
- Primer blue (`#0969da`) dla łączy/podstawowych; GitHub green (`#1a7f37`) dla sukcesu/scalania
|
|
- system-ui dla prozy; SFMono dla kodu — brak niestandardowego kroju pisma
|
|
- Gęste wiersze list z minimalnym paddingiem; białe przestrzenie są rzadkością
|
|
- Ikonografia Octicon w rozmiarze 16px / 24px — pojedynczy obrys, geometryczna, spójna
|
|
- Odznaki statusu w kształcie pigułki z mocną semantyką kolorów
|
|
|
|
## 2. Paleta kolorów i role
|
|
|
|
### Podstawowe
|
|
- **Canvas Default** (`#ffffff`): Główne tło strony, jasny motyw.
|
|
- **Canvas Subtle** (`#f6f8fa`): Drugorzędna powierzchnia, pasek boczny, tło pola wprowadzania, pasek nagłówka.
|
|
- **Canvas Inset** (`#eaeef2`): Tło bloku kodu, głęboko wklęsła powierzchnia.
|
|
- **Fg Default** (`#1f2328`): Podstawowy tekst, nagłówki, tusz.
|
|
- **Fg Muted** (`#656d76`): Drugorzędny tekst, podpisy, ścieżki plików.
|
|
|
|
### Akcent marki
|
|
- **Primer Blue** (`#0969da`): Łącza, główne CTA, podstawa pierścienia fokusa — uniwersalny kolor interaktywny.
|
|
- **Primer Blue Hover** (`#0550ae`): Stan najechania/wciśnięcia dla podstawowego niebieskiego.
|
|
- **Accent Subtle** (`#ddf4ff`): Delikatna niebieska powierzchnia dla wyróżnień, banerów informacyjnych.
|
|
|
|
### Semantyczne
|
|
- **Success / Merge Green** (`#1a7f37`): Scalone PR, odznaki sukcesu, przycisk scalania.
|
|
- **Success Subtle** (`#dafbe1`): Odcień powierzchni sukcesu.
|
|
- **Open Green** (`#1a7f37`): Stan „Open" dla issue/PR.
|
|
- **Closed / Danger Red** (`#cf222e`): Zamknięte PR, działanie destrukcyjne, błąd walidacji.
|
|
- **Danger Subtle** (`#ffebe9`): Powierzchnia banera błędu.
|
|
- **Attention / Warning Yellow** (`#9a6700`): Tekst ostrzeżenia na bursztynowej powierzchni.
|
|
- **Attention Subtle** (`#fff8c5`): Powierzchnia banera ostrzeżenia.
|
|
- **Done Purple** (`#8250df`): Scalone i zarchiwizowane, stan „done", odznaka premium.
|
|
- **Sponsor Pink** (`#bf3989`): Serce sponsorów, marka GitHub Sponsors.
|
|
|
|
### Ramka i separator
|
|
- **Border Default** (`#d0d7de`): Standardowa cienka ramka, obrys panelu.
|
|
- **Border Muted** (`#d8dee4`): Wewnętrzne separatory w panelu.
|
|
- **Border Subtle** (`#eaeef2`): Słabe separatory wierszy tabeli.
|
|
|
|
### Ciemny motyw
|
|
- **Dark Canvas** (`#0d1117`): Ciemne tło strony.
|
|
- **Dark Surface** (`#161b22`): Pasek boczny, nagłówek, drugorzędna powierzchnia.
|
|
- **Dark Border** (`#30363d`): Standardowa ramka w trybie ciemnym.
|
|
- **Dark Fg** (`#e6edf3`): Podstawowy tekst na ciemnym tle.
|
|
|
|
## 3. Zasady typografii
|
|
|
|
### Rodzina czcionek
|
|
- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
|
- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
|
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
|
|
|
### Hierarchia
|
|
|
|
| Rola | Czcionka | Rozmiar | Grubość | Wysokość linii | Odstęp liter | Uwagi |
|
|
|------|----------|---------|---------|----------------|--------------|-------|
|
|
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Nagłówek repo, hero marketingowy |
|
|
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Nagłówek strony |
|
|
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Nagłówek sekcji |
|
|
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Podsekcja, nagłówek panelu |
|
|
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Domyślny rozmiar tekstu — nie 16px |
|
|
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Podpisy, metadane pliku |
|
|
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Bloki kodu, diff |
|
|
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Wbudowane fragmenty `code` |
|
|
|
|
### Zasady
|
|
- **14px body, nie 16px**: Gęstość prozy GitHub to jego tożsamość. Produkt renderuje przy 14px, by zmieścić więcej wierszy w widoku.
|
|
- **Grubość binarna**: 400 dla wszystkiego domyślnie; 600 dla nagłówków i wyróżnień. Bez 500, bez 700.
|
|
- **Zawsze czcionki systemowe**: nigdy nie ładuj webfontu dla chrome — tekst musi renderować się natychmiast przy wolnym połączeniu.
|
|
|
|
## 4. Style komponentów
|
|
|
|
### Przyciski
|
|
|
|
**Primary (Green)**
|
|
- Tło: `#1f883d`
|
|
- Tekst: `#ffffff`
|
|
- Ramka: 1px solid `rgba(31, 35, 40, 0.15)`
|
|
- Padding: 5px 16px
|
|
- Radius: 6px
|
|
- Cień: `0 1px 0 rgba(31,35,40,0.1)`
|
|
- Najechanie: tło `#1a7f37`
|
|
- Użycie: „Create repository", „Merge pull request"
|
|
|
|
**Default**
|
|
- Tło: `#f6f8fa`
|
|
- Tekst: `#1f2328`
|
|
- Ramka: 1px solid `#d0d7de`
|
|
- Padding: 5px 16px
|
|
- Radius: 6px
|
|
- Najechanie: tło `#f3f4f6`, ramka `#d0d7de`
|
|
|
|
**Outline (Blue Link Style)**
|
|
- Tło: `#ffffff`
|
|
- Tekst: `#0969da`
|
|
- Ramka: 1px solid `#d0d7de`
|
|
- Najechanie: tło `#0969da`, tekst `#ffffff`
|
|
|
|
**Danger**
|
|
- Tło: `#ffffff`
|
|
- Tekst: `#cf222e`
|
|
- Ramka: 1px solid `#d0d7de`
|
|
- Najechanie: tło `#a40e26`, tekst `#ffffff`, ramka `#a40e26`
|
|
|
|
### Karty / Boksy
|
|
- Tło: `#ffffff`
|
|
- Ramka: 1px solid `#d0d7de`
|
|
- Radius: 6px
|
|
- Padding: 16px (nagłówek) + 16px (treść)
|
|
- Nagłówek ma pasek `#f6f8fa` z dolną ramką.
|
|
|
|
### Pola wprowadzania
|
|
- Tło: `#ffffff`
|
|
- Ramka: 1px solid `#d0d7de`
|
|
- Radius: 6px
|
|
- Padding: 5px 12px
|
|
- Fokus: ramka `#0969da`, pierścień `0 0 0 3px rgba(9,105,218,0.3)`
|
|
|
|
### Odznaki statusu (Issue / PR)
|
|
- **Open**: tło `#1a7f37`, tekst biały, padding 4px 10px, radius 9999px.
|
|
- **Closed**: tło `#cf222e`, tekst biały.
|
|
- **Merged**: tło `#8250df`, tekst biały.
|
|
- **Draft**: tło `#6e7781`, tekst biały.
|
|
|
|
### Etykiety (tagi na Issues/PRach)
|
|
- Padding: 0 7px
|
|
- Radius: 9999px
|
|
- Czcionka: 12px / 500
|
|
- Tło i tekst są programowe (kolor etykiety → tekst obliczany dla kontrastu).
|
|
|
|
## 5. Odstępy i układ
|
|
|
|
- **Jednostka bazowa**: 4px. Skala odstępów: 4, 8, 12, 16, 24, 32, 40, 48.
|
|
- **Maksymalna szerokość strony**: 1280px (`Container-xl`).
|
|
- **Pasek boczny**: 296px na desktopie, zwija się poniżej 1012px.
|
|
- **Padding wiersza**: 16px poziomo, 12px pionowo (listy są gęste z założenia).
|
|
|
|
## 6. Ruch
|
|
|
|
- **Czas trwania**: 80ms dla najechania; 200ms dla otwarcia menu/popovers.
|
|
- **Wygładzanie**: `ease-out` dla otwarć, `ease-in` dla zamknięć.
|
|
- **Unikane**: animacje ładowania strony, parallax, trwałe mikrointerakcje. Rzeczy się pojawiają; nie performują.
|
|
|
|
## 7. Wytyczne użytkowania
|
|
|
|
- Utrzymuj gęste listy, obramowane boksy i czcionki systemowe razem; izolowane zielone przyciski nie wystarczą, by stworzyć powierzchnię produktu podobną do GitHub.
|
|
- Używaj zielonego dla konstruktywnych akcji repozytoriów, niebieskiego dla łączy i fokusa, a czerwonego/fioletowego/szarego wyłącznie dla stanów issue, PR i workflow.
|
|
- Preferuj spokojne chrome, wyraźne ramki i kompaktowe odstępy zamiast dekoracyjnych cieni lub dużych kart w stylu marketingowym.
|