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-de.md
+363
View File
@@ -0,0 +1,363 @@
# Von Slack inspiriertes Design-System
> Category: Produktivität & SaaS
> Plattform für die Kommunikation am Arbeitsplatz. Aubergine als Primärfarbe, mehrfarbige Logo-Palette, helle Oberflächen mit dunkler Seitenleiste, warm und einladend.
## 1. Visuelles Thema und Atmosphäre
Slacks Identität basiert auf der Idee, dass Arbeit menschlich und sogar ein bisschen Spaß machen sollte. Die charakteristische Oberfläche ist **hell** — weiße Inhaltsbereiche mit einer tiefen Aubergine-Seitenleiste (`#4A154B`) — das Gegenteil von dunkel-zuerst-Tools. Dieser Kontrast ist bewusst gewählt: Die Seitenleiste ist ein ruhiger, immer präsenter Navigationsanker, während der Inhaltsbereich hell und offen ist.
Die Logo-Palette — blau, grün, gelb, rot — erscheint hauptsächlich im Hashtag-Icon und in Marketingkontexten, nicht verstreut durch die Benutzeroberfläche. Im Produkt selbst verwendet Slack ein zurückhaltendes, professionelles Farbsystem mit Aubergine als einzigem Markenanker.
**Hauptmerkmale:**
- Helle Inhaltsoberflächen zuerst: Weiß `#FFFFFF` und Nahweiß `#F8F8F8`
- Tiefes Aubergine `#4A154B` in der Seitenleiste — das markanteste UI-Element der Marke
- Vier Logo-Akzentfarben (blau, grün, gelb, rot) nur sparsam als Highlights verwendet
- Larsseit für Überschriften (Marketing), System-Serifenlos für die Benutzeroberfläche
- Abgerundet, aber nicht cartoonartig: 4–8px Radius bei den meisten Komponenten
- Dicht, aber luftig: kompakte Nachrichtenzeilen mit klarer Thread-Hierarchie
- Warmer und gesprächiger Ton — Emojis, Reaktionen und Illustrationen sind erstklassig
---
## 2. Farbpalette und Rollen
### Marken-Primärfarbe
| Token | Hex | Rolle |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Seitenleistenhintergrund, Marken-Primärfarbe |
| `--color-aubergine-dark` | `#350d36` | Hover-Zustände auf Aubergine-Oberflächen |
| `--color-aubergine-light` | `#611f69` | Highlight für aktive Elemente in der Seitenleiste |
### Logo-Akzentfarben (sparsam verwenden — nur für Highlights, Icons, Marketing)
| Token | Hex | Name | Rolle |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | Himmelblau | Kanal-Icons, Links, Info-Zustände |
| `--color-green` | `#2EB67D` | Grünblau | Online-Status, Erfolgszustände |
| `--color-yellow` | `#ECB22E` | Gold | Abwesend-Status, Warnungen, Highlights |
| `--color-red` | `#E01E5A` | Rubin | Benachrichtigungen, Fehler, Erwähnungs-Badge |
### Oberfläche und Hintergrund
| Token | Hex | Rolle |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | Hauptnachrichtenbereich, Modals |
| `--bg-secondary` | `#F8F8F8` | Thread-Panels, sekundäre Oberflächen |
| `--bg-tertiary` | `#F1F1F1` | Eingabehintergründe, Hover-Zustände |
| `--bg-sidebar` | `#4A154B` | Linke Seitenleiste (Aubergine) |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Hover auf Seitenleistenelementen |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Aktives Seitenleistenelement |
| `--bg-message-hover` | `#F8F8F8` | Hover auf Nachrichtenzeilen |
### Textfarben
| Token | Hex | Rolle |
|---|---|---|
| `--text-primary` | `#1D1C1D` | Primärer Fließtext (nahschwarz) |
| `--text-secondary` | `#616061` | Zeitstempel, gedämpfte Beschriftungen |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Kanalnamen in der Seitenleiste |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Inaktive Elemente in der Seitenleiste |
| `--text-link` | `#1264A3` | Inline-Links in Nachrichten |
| `--text-mention` | `#1264A3` | @Erwähnungs-Textfarbe |
### Semantische Farben
| Token | Hex | Rolle |
|---|---|---|
| `--color-success` | `#2EB67D` | Erfolgs-Toasts, positive Zustände |
| `--color-warning` | `#ECB22E` | Warnzustände |
| `--color-danger` | `#E01E5A` | Fehlerzustände, destruktive Aktionen |
| `--color-info` | `#36C5F0` | Informations-Highlights |
### Rahmen und Trennlinien
| Token | Hex | Rolle |
|---|---|---|
| `--border-default` | `#DDDDDD` | Standard-Trennlinien, Kartenrahmen |
| `--border-subtle` | `#F1F1F1` | Dezente Trennlinien zwischen Zeilen |
| `--border-focus` | `#1264A3` | Fokusring-Farbe |
---
## 3. Typografie-Regeln
### Schriftarten
| Rolle | Offiziell | Web-Fallback |
|---|---|---|
| Display / Marketing-Überschriften | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / Text / Chrome | Slack Lato (angepasst) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| Code / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack verwendet **Larsseit** für Marketing-Überschriften und eine angepasste Lato-Variante für die produktinterne Benutzeroberfläche. Für Web-Einsatz ist `system-ui` der sicherste Fallback.
### Typografische Skala
| Ebene | Größe | Stärke | Zeilenhöhe | Buchstabenabstand | Verwendung |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | Marketing-Hero-Überschriften |
| Display L | 36px | 700 | 1.15 | -0.5px | Abschnitts-Heroes |
| Heading 1 | 28px | 700 | 1.25 | normal | Modal-Titel, Seitenüberschriften |
| Heading 2 | 22px | 700 | 1.3 | normal | Kartentitel, Einstellungsabschnitte |
| Heading 3 | 18px | 700 | 1.35 | normal | Unterabschnittsüberschriften |
| Body L | 16px | 400 | 1.5 | normal | Nachrichtentext, Beschreibungen |
| Body | 15px | 400 | 1.46667 | normal | Standard-UI-Text (Slacks Basisgröße) |
| Body SM | 13px | 400 | 1.38462 | normal | Sekundäre Metadaten |
| Caption | 12px | 400 | 1.33 | normal | Zeitstempel, Hinweise |
| Code | 12px | 400 | 1.5 | normal | Inline-Code, Code-Blöcke |
### Typografie-Regeln
- Slacks Basis-Textgröße beträgt **15px** — etwas kleiner als 16px für mehr Dichte
- Ungelesene Kanäle: Stärke 700 — Fettschrift ist der primäre Ungelesen-Indikator
- Zeitstempel: 12px `--text-secondary`, nur beim Hover anzeigen
- Code-Blöcke: Hintergrund `#F8F8F8`, Rahmen `1px solid #DDDDDD`, Radius 4px
- Keine Schriftgrößen unter 12px verwenden
- Marketing-Überschriften: Buchstabenabstand `-1px` für große Display-Größen
---
## 4. Komponentenstile
### Schaltflächen
```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; }
```
### Eingabefelder
```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;
}
```
### Seitenleisten-Kanalelement
```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;
}
```
### Ungelesen-Badge
```css
.badge {
background: #E01E5A;
color: #FFFFFF;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
min-width: 18px;
}
```
### Nachrichten-Anhänge / Karten
```css
.attachment {
border-left: 4px solid #DDDDDD;
background: #F8F8F8;
border-radius: 0 4px 4px 0;
padding: 8px 12px;
margin: 4px 0;
}
```
### Reaktionen
```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. Layout-Prinzipien
### Dreispaltiges Layout
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Abstands-System (Basis 4px)
| Token | Wert | Verwendung |
|---|---|---|
| `--space-1` | 4px | Enge Abstände |
| `--space-2` | 8px | Komponenten-Padding |
| `--space-3` | 12px | Eingabe-Padding |
| `--space-4` | 16px | Standard-Padding |
| `--space-6` | 24px | Karten-Padding |
| `--space-8` | 32px | Abschnittsabstände |
### Seitenleisten-Struktur
```
[Arbeitsbereichsname ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
John Doe
Jane Smith
```
### Nachrichten-Eingabebereich
- Am unteren Rand des Nachrichtenbereichs fixiert
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
- Werkzeugleiste: Emoji, Anhang, Formatierung, Senden-Schaltfläche
---
## 6. Tiefe und Elevation
Slack verwendet helle Schatten auf heller Oberfläche:
| Ebene | Verwendung | Schatten |
|---|---|---|
| Flach | Nachrichtenzeilen, Seitenleistenelemente | none |
| Niedrig | Karten, Eingaben | `0 1px 3px rgba(0,0,0,0.08)` |
| Mittel | Dropdowns, Popovers | `0 4px 12px rgba(0,0,0,0.12)` |
| Hoch | Modals, Dialoge | `0 8px 24px rgba(0,0,0,0.15)` |
| Overlay | Modal-Hintergründe | `rgba(0,0,0,0.5)` |
---
## 7. Dos und Don'ts
### ✅ Do
- Aubergine `#4A154B` für die Seitenleiste verwenden — das ikonischste UI-Element von Slack
- Den Hauptinhaltsbereich weiß und hell halten
- `#1D1C1D` (Nahschwarz) für den gesamten Fließtext verwenden, nicht reines Schwarz
- Kanalnamen fett setzen, um den Ungelesen-Status anzuzeigen — die Schriftstärke ist der Indikator
- Die vier Akzentfarben nur für semantische Rollen verwenden (Erfolg, Warnung, Gefahr, Info)
- `border-left: 4px` auf Nachrichten-Anhängen und Einbettungen anwenden
- Zeitstempel nur beim Hover anzeigen
- `#1264A3` für Links und Fokus-Zustände verwenden
- Seitenleistenelemente kompakt halten: 28px Höhe, 6px Rahmenradius
### ❌ Don't
- Keinen dunklen Hauptinhaltsbereich verwenden — Slack ist hell-zuerst
- Blau/Grün/Gelb/Rot nicht als dekorative Akzente verstreuen
- Kein reines Schwarz `#000000` für Text verwenden
- Keine Sprechblasen verwenden — Nachrichten sind flache Zeilen
- Schaltflächen nicht mit großem Radius gestalten — 4px ist Standard
- Zeitstempel nicht dauerhaft anzeigen
- Kanalnamen nicht in GROSSBUCHSTABEN schreiben
- Keine Schriftgrößen unter 12px verwenden
---
## 8. Responsives Verhalten
### Haltepunkte
| Haltepunkt | Breite | Layout |
|---|---|---|
| Mobil | < 768px | Einzelnes Panel, Seitenleiste als linke Schublade |
| Tablet | 768–1024px | Seitenleiste + nur Nachrichtenbereich |
| Desktop | > 1024px | Vollständiges dreispaltiges Layout |
### Mobile Anpassungen
- Seitenleiste: Linke Schublade, nach rechts wischen zum Öffnen
- Untere Tab-Leiste: Home, DMs, Aktivität, Profil
- Thread-Panel: Vollbild-Overlay
- Eingabebereich: Über der Tastatur fixiert
- Kanallistenelemente: 44px Touch-Zielhöhe
- Aubergine-Top-Header-Leiste auf Mobilgeräten beibehalten
---
## 9. Agent-Prompt-Leitfaden
Beim Erstellen von Slack-ähnlichen Designs diesen Ansatz befolgen:
**Farbverwendung:**
> `background: #FFFFFF` als Hauptleinwand setzen. `#4A154B` (Aubergine) für die Seitenleiste verwenden. Der gesamte Primärtext ist `#1D1C1D`. Links und Fokusringe verwenden `#1264A3`. Die vier Logo-Farben — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — sind nur semantisch: Info, Erfolg, Warnung, Gefahr.
**Typografie:**
> `system-ui, -apple-system, sans-serif` für die gesamte Benutzeroberfläche verwenden. Basisgröße ist 15px. Ungelesene Kanäle: Stärke 700. Fließtext: Stärke 400. Zeitstempel: 12px `#616061`, nur beim Hover. Code: `Monaco, Menlo, monospace`, 12px, Hintergrund `#F8F8F8`.
**Layout:**
> Drei Spalten: 240px Aubergine-Seitenleiste + flexibler weißer Nachrichtenbereich + optionales 400px Thread-Panel. Seitenleistenelemente: 28px Höhe, 6px Radius, fett wenn ungelesen. Eingabebereich: unten fixiert, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Komponenten:**
> Schaltflächen: 4px Radius, 36px Höhe, Aubergine als Primärfarbe. Eingaben: `1px solid #DDDDDD` Rahmen, `#1264A3` Fokusring. Nachrichtenzeilen: flach, keine Sprechblasen, 36px kreisförmiger Avatar. Reaktionen: Pille `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Ton:**
> Slack ist warm, professionell und menschlich. Leere Zustände verwenden freundliche Illustrationen. CTAs sind direkt: „Send message", „Get started". Fehlermeldungen sind klar und hilfreich. Niemals beunruhigend.
**Zu vermeidende Anti-Patterns:**
> Kein dunkler Inhaltsbereich. Keine Sprechblasen. Kein reiner schwarzer Text. Keine verstreuten Mehrfarb-Akzente. Keine Kanalnamen in GROSSBUCHSTABEN. Keine Schrift unter 12px. Kein großer Schaltflächen-Radius.