admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

Browse Source 
一、④段整套同步（用户选候选 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。
This commit is contained in:
admin committed 2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
4184 files changed
+326 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

open-design/design-systems/slack/DESIGN-pl.md
+363
View File
@@ -0,0 +1,363 @@
# System Projektowania Inspirowany Slackiem
> Category: Produktywność & SaaS
> Platforma komunikacji w miejscu pracy. Aubergine jako kolor główny, wieloakcentowa paleta logo, jasne powierzchnie z ciemnym paskiem bocznym, ciepły i przystępny charakter.
## 1. Temat Wizualny & Atmosfera
Tożsamość Slacka buduje się wokół idei, że praca powinna być ludzka, a nawet trochę zabawna. Kanoniczna powierzchnia jest **jasna** — białe obszary treści z głębokim paskiem bocznym w kolorze aubergine (`#4A154B`) — co jest odwrotnością narzędzi stawiających na ciemny motyw. Ten kontrast jest zamierzony: pasek boczny to spokojna, zawsze widoczna kotwica nawigacyjna, podczas gdy obszar treści jest jasny i otwarty.
Paleta logo — niebieska, zielona, żółta, czerwona — pojawia się głównie w ikonie hashtagu i materiałach marketingowych, a nie rozrzucona po całym interfejsie. W samym produkcie Slack stosuje powściągliwy, profesjonalny system kolorów z aubergine jako jedyną kotwicą marki.
**Kluczowe Cechy:**
- Jasne powierzchnie treści: biały `#FFFFFF` i prawie biały `#F8F8F8`
- Głęboki aubergine `#4A154B` w pasku bocznym — najbardziej rozpoznawalny element UI marki
- Cztery kolory akcentowe logo (niebieski, zielony, żółty, czerwony) używane oszczędnie tylko jako wyróżniki
- Larsseit dla nagłówków (marketing), systemowy sans-serif dla UI
- Zaokrąglone, ale nie kreskówkowe: promień 4–8px w większości komponentów
- Gęsty, ale oddychający: zwarte wiersze wiadomości z wyraźną hierarchią wątków
- Ciepły i konwersacyjny ton — emoji, reakcje i ilustracje są równoprawnym elementem
---
## 2. Paleta Kolorów & Role
### Kolor Główny Marki
| Token | Hex | Rola |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Tło paska bocznego, główny kolor marki |
| `--color-aubergine-dark` | `#350d36` | Stany hover na powierzchniach aubergine |
| `--color-aubergine-light` | `#611f69` | Podświetlenie aktywnego elementu w pasku bocznym |
### Kolory Akcentowe Logo (używać oszczędnie — tylko wyróżniki, ikony, marketing)
| Token | Hex | Nazwa | Rola |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Błękitny | Ikony kanałów, linki, stany informacyjne |
| `--color-green` | `#2EB67D` | Zieleń morska | Status online, stany sukcesu |
| `--color-yellow` | `#ECB22E` | Złoty | Status nieobecności, ostrzeżenia, wyróżnienia |
| `--color-red` | `#E01E5A` | Rubinowy | Powiadomienia, błędy, badge wzmianek |
### Powierzchnia & Tło
| Token | Hex | Rola |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Główny obszar wiadomości, okna modalne |
| `--bg-secondary` | `#F8F8F8` | Panele wątków, powierzchnie pomocnicze |
| `--bg-tertiary` | `#F1F1F1` | Tła pól wejściowych, stany hover |
| `--bg-sidebar` | `#4A154B` | Lewy pasek boczny (aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Hover elementu paska bocznego |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Aktywny element paska bocznego |
| `--bg-message-hover` | `#F8F8F8` | Hover wiersza wiadomości |
### Kolory Tekstu
| Token | Hex | Rola |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Główny tekst treści (prawie czarny) |
| `--text-secondary` | `#616061` | Znaczniki czasu, wyciszone etykiety |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Nazwy kanałów w pasku bocznym |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Nieaktywne elementy paska bocznego |
| `--text-link` | `#1264A3` | Linki inline w wiadomościach |
| `--text-mention` | `#1264A3` | Kolor tekstu @wzmianki |
### Kolory Semantyczne
| Token | Hex | Rola |
|---|---|---|
| `--color-success` | `#2EB67D` | Toasty sukcesu, stany pozytywne |
| `--color-warning` | `#ECB22E` | Stany ostrzeżeń |
| `--color-danger` | `#E01E5A` | Stany błędów, destrukcyjne akcje |
| `--color-info` | `#36C5F0` | Wyróżnienia informacyjne |
### Obramowanie & Linia Podziału
| Token | Hex | Rola |
|---|---|---|
| `--border-default` | `#DDDDDD` | Standardowe linie podziału, obramowania kart |
| `--border-subtle` | `#F1F1F1` | Subtelne separatory między wierszami |
| `--border-focus` | `#1264A3` | Kolor pierścienia fokusowania |
---
## 3. Zasady Typografii
### Kroje Pisma
| Rola | Oficjalny | Zamiennik Web |
|---|---|---|
| Nagłówki Display / Marketing | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / Treść / Chrome | Slack Lato (własny) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Kod / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack używa **Larsseit** do nagłówków marketingowych i własnego wariantu Lato dla UI wewnątrz produktu. W zastosowaniach webowych `system-ui` jest najbezpieczniejszym zamiennikiem.
### Skala Typograficzna
| Poziom | Rozmiar | Grubość | Wysokość Linii | Odstęp Liter | Zastosowanie |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | Nagłówki hero w marketingu |
| Display L | 36px | 700 | 1.15 | -0.5px | Hero sekcji |
| Nagłówek 1 | 28px | 700 | 1.25 | normal | Tytuły okien modalnych, nagłówki stron |
| Nagłówek 2 | 22px | 700 | 1.3 | normal | Tytuły kart, sekcje ustawień |
| Nagłówek 3 | 18px | 700 | 1.35 | normal | Nagłówki podsekcji |
| Treść L | 16px | 400 | 1.5 | normal | Tekst wiadomości, opisy |
| Treść | 15px | 400 | 1.46667 | normal | Domyślny tekst UI (bazowy rozmiar Slacka) |
| Treść SM | 13px | 400 | 1.38462 | normal | Metadane pomocnicze |
| Podpis | 12px | 400 | 1.33 | normal | Znaczniki czasu, podpowiedzi |
| Kod | 12px | 400 | 1.5 | normal | Kod inline, bloki kodu |
### Zasady Typograficzne
- Bazowy rozmiar treści Slacka to **15px** — nieco mniejszy niż 16px dla większej gęstości
- Nieprzeczytane kanały: grubość 700 — pogrubienie jest głównym wskaźnikiem nieprzeczytania
- Znaczniki czasu: 12px `--text-secondary`, widoczne tylko po najechaniu
- Bloki kodu: tło `#F8F8F8`, obramowanie `1px solid #DDDDDD`, border-radius 4px
- Nigdy nie używać rozmiarów czcionki poniżej 12px
- Nagłówki marketingowe: letter-spacing `-1px` dla dużych rozmiarów display
---
## 4. Style Komponentów
### Przyciski
```css
/* Primary */
.btn-primary {
background: #4A154B;
color: #FFFFFF;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
border: none;
}
.btn-primary:hover { background: #611f69; }
/* Secondary */
.btn-secondary {
background: #FFFFFF;
color: #1D1C1D;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 0 16px;
height: 36px;
font-size: 15px;
font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }
/* Danger */
.btn-danger {
background: #E01E5A;
color: #FFFFFF;
border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```
### Pola Wejściowe
```css
.input {
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
color: #1D1C1D;
font-size: 15px;
padding: 8px 12px;
height: 36px;
}
.input:focus {
border-color: #1264A3;
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
outline: none;
}
```
### Element Kanału w Pasku Bocznym
```css
.channel-item {
height: 28px;
padding: 0 16px;
border-radius: 6px;
color: rgba(255,255,255,0.7);
font-size: 15px;
font-weight: 400;
}
.channel-item:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
.channel-item.active {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
.channel-item.unread {
color: #FFFFFF;
font-weight: 700;
}
```
### Badge Nieprzeczytanych
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Załączniki Wiadomości / Karty
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Reakcje
```css
.reaction {
border: 1px solid #DDDDDD;
border-radius: 24px;
background: #F8F8F8;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
background: rgba(18,100,163,0.1);
border-color: #1264A3;
}
```
---
## 5. Zasady Układu
### Układ Trójkolumnowy
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Pasek Boczny│ Obszar Wiadomości │ Wątek │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ opcjonalny │
└──────────────┴──────────────────────────────┴─────────────┘
```
### System Odstępów (baza 4px)
| Token | Wartość | Zastosowanie |
|---|---|---|
| `--space-1` | 4px | Ciasne odstępy |
| `--space-2` | 8px | Padding komponentów |
| `--space-3` | 12px | Padding pól wejściowych |
| `--space-4` | 16px | Standardowy padding |
| `--space-6` | 24px | Padding kart |
| `--space-8` | 32px | Odstępy sekcji |
### Struktura Paska Bocznego
```
[Nazwa Obszaru Roboczego ▼]
────────────────────
Wątki
Wszystkie DM
Szkice i Wysłane
────────────────────
▼ Kanały
# general
# random
# design ● (nieprzeczytane)
────────────────────
▼ Wiadomości Bezpośrednie
John Doe
Jane Smith
```
### Kompozytor Wiadomości
- Przypięty do dołu obszaru wiadomości
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Pasek narzędzi: emoji, załącz, formatuj, przycisk wyślij
---
## 6. Głębia & Elewacja
Slack używa lekkich cieni na jasnej powierzchni:
| Poziom | Zastosowanie | Cień |
|---|---|---|
| Płaski | Wiersze wiadomości, elementy paska bocznego | none |
| Niski | Karty, pola wejściowe | `0 1px 3px rgba(0,0,0,0.08)` |
| Średni | Listy rozwijane, popovery | `0 4px 12px rgba(0,0,0,0.12)` |
| Wysoki | Okna modalne, dialogi | `0 8px 24px rgba(0,0,0,0.15)` |
| Nakładka | Tła okien modalnych | `rgba(0,0,0,0.5)` |
---
## 7. Zalecenia i Przestrogi
### ✅ Zalecane
- Używaj aubergine `#4A154B` dla paska bocznego — to najbardziej ikoniczny element UI Slacka
- Utrzymuj główny obszar treści biały i jasny
- Używaj `#1D1C1D` (prawie czarny) dla całego tekstu treści, nie czystej czerni
- Pogrubiaj nazwy kanałów, aby pokazać status nieprzeczytania — grubość jest wskaźnikiem
- Używaj czterech kolorów akcentowych tylko dla ról semantycznych (sukces, ostrzeżenie, niebezpieczeństwo, informacja)
- Stosuj `border-left: 4px` na załącznikach wiadomości i osadzonych elementach
- Pokazuj znaczniki czasu tylko po najechaniu
- Używaj `#1264A3` dla linków i stanów fokusowania
- Utrzymuj elementy paska bocznego zwarte: wysokość 28px, border-radius 6px
### ❌ Niezalecane
- Nie używaj ciemnego głównego obszaru treści — Slack preferuje jasny motyw
- Nie rozrzucaj niebieskich/zielonych/żółtych/czerwonych jako dekoracyjnych akcentów
- Nie używaj czystej czerni `#000000` dla tekstu
- Nie używaj dymków mowy — wiadomości to płaskie wiersze
- Nie nadawaj przyciskom dużego promienia — 4px to standard
- Nie pokazuj znaczników czasu na stałe
- Nie używaj WIELKICH LITER dla nazw kanałów
- Nie używaj rozmiarów czcionki poniżej 12px
---
## 8. Zachowanie Responsywne
### Punkty Przełamania
| Punkt Przełamania | Szerokość | Układ |
|---|---|---|
| Mobile | < 768px | Pojedynczy panel, pasek boczny jako lewy drawer |
| Tablet | 768–1024px | Tylko pasek boczny + obszar wiadomości |
| Desktop | > 1024px | Pełny układ trójkolumnowy |
### Adaptacje Mobilne
- Pasek boczny: lewy drawer, przeciągnij w prawo, aby otworzyć
- Dolny pasek zakładek: Dom, DM, Aktywność, Ty
- Panel wątku: nakładka pełnoekranowa
- Kompozytor: przypięty nad klawiaturą
- Elementy listy kanałów: wysokość obszaru dotykowego 44px
- Aubergine górny pasek nagłówka zachowany na urządzeniach mobilnych
---
## 9. Przewodnik po Promptach Agenta
Generując projekty w stylu Slacka, stosuj następujące podejście:
**Zastosowanie kolorów:**
> Ustaw `background: #FFFFFF` jako główne płótno. Użyj `#4A154B` (aubergine) dla paska bocznego. Cały tekst główny to `#1D1C1D`. Linki i pierścienie fokusowania używają `#1264A3`. Cztery kolory logo — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — są wyłącznie semantyczne: informacja, sukces, ostrzeżenie, niebezpieczeństwo.
**Typografia:**
> Używaj `system-ui, -apple-system, sans-serif` dla całego UI. Rozmiar bazowy to 15px. Nieprzeczytane kanały: grubość 700. Tekst treści: grubość 400. Znaczniki czasu: 12px `#616061`, tylko po najechaniu. Kod: `Monaco, Menlo, monospace`, 12px, tło `#F8F8F8`.
**Układ:**
> Trzy kolumny: aubergine pasek boczny 240px + elastyczny biały obszar wiadomości + opcjonalny panel wątku 400px. Elementy paska bocznego: wysokość 28px, promień 6px, pogrubienie gdy nieprzeczytane. Kompozytor: przypięty na dole, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Komponenty:**
> Przyciski: promień 4px, wysokość 36px, aubergine jako główny. Pola wejściowe: obramowanie `1px solid #DDDDDD`, pierścień fokusowania `#1264A3`. Wiersze wiadomości: płaskie, bez dymków, okrągły awatar 36px. Reakcje: pill `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Ton:**
> Slack jest ciepły, profesjonalny i ludzki. Puste stany używają przyjaznych ilustracji. CTA są bezpośrednie: "Wyślij wiadomość", "Zacznij". Komunikaty o błędach są jasne i pomocne. Nigdy nie alarmujące.
**Antywzorce do unikania:**
> Brak ciemnego obszaru treści. Brak dymków mowy. Brak czystego czarnego tekstu. Brak rozproszonych wielokolorowych akcentów. Brak WIELKICH LITER w nazwach kanałów. Brak czcionki poniżej 12px. Brak dużego promienia przycisku.