admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f2d07b47adde0ca4a04e3af461a1c48e9917cc2d
workbuddy_skills/open-design/design-systems/github/DESIGN-pl.md
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

8.2 KiB
Raw Blame History

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.
Reference in new issue View Git Blame Copy Permalink