admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
749c0e3d5d6bf84a05fce1a76775f87eaf2ed8d3
workbuddy_skills/open-design/design-systems/discord/DESIGN-de.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.5 KiB
Raw Blame History

Design System Inspired by Discord

Category: Produktivität & SaaS Sprach-/Chat-Plattform. Tiefes Blurple, dunkle Oberflächen, verspielter Akzent-Charakter.

1. Visuelles Thema & Atmosphäre

Discords Produkt ist für Abende, Raids und Gruppensprache ausgelegt — daher sind alle Oberflächen konsequent dunkel gestaltet. Die Standardfläche ist das tiefe Background Primary (#313338 helles Design, #1e1f22 dunkles Design), wobei Chat-Spalten auf leicht helleren oder dunkleren Tönen geschichtet werden, um Kanäle, Threads und Seitenpanels zu kennzeichnen. Das charakteristische Blurple (#5865f2) ist dem Markenzeichen, primären CTAs, Erwähnungen und dem Eigenzuordnungs-Affordance vorbehalten — sparsam eingesetzt, damit es gegen die gedämpften Neutraltöne heraussticht.

Die Typografie setzt auf gg sans (Discords individuellen Whitney-Ersatz) für Fließtext und Benutzeroberfläche, mit abgerundeten geometrischen Formen, die zugänglich wirken, aber in den kleinen Größen, die ein Chat-Client erfordert, lesbar bleiben. Überschriften skalieren inkrementell; Chat-Zeilen sind eng gefasst (4–8px zwischen Nachrichtengruppen), damit ein stundenlanges Scrollen nach oben übersichtlich bleibt.

Die Formensprache ist abgerundet, aber nicht ballonweich: 8px Radien auf Karten, 4px auf Eingabefeldern, vollständige Pillen auf Status-Badges und Tags. Server werden als abgerundete quadratische Avatare mit 48px dargestellt, die beim Hover zu Kreisen werden — eine kleine Bewegung, die Teil der Markenidentität geworden ist.

Key Characteristics:

  • Dunkle Oberflächen: #1e1f22 / #2b2d31 / #313338 (3-stufige Tiefe)
  • Blurple #5865f2 als einziger gesättigter Akzent auf der Chat-Oberfläche
  • gg sans (Whitney-Stil) für alle Texte — freundlich, geometrisch, neutral
  • Abgerundete quadratische Server-Avatare (16px Radius), die beim Hover in Kreise wechseln
  • Enger Chat-Zeilenabstand, großzügige Polsterung in Seitenpanels
  • Status-Punkte: grün online, gelb abwesend, rot nicht stören, grau offline
  • Pixel-exakte 1px-Trennlinien in dezenten Off-White-Tönen mit geringem Alpha

2. Farbpalette & Rollen

Primär

  • Blurple (#5865f2): Markenfarbe, primäre CTA, Erwähnungs-Hervorhebung.
  • Blurple Hover (#4752c4): Hover/Aktiv-Zustand für Blurple.
  • Blurple Soft (#7289da): Legacy-Blurple, sekundärer Akzent im Marketing.

Oberfläche (Dunkles Design — Standard)

  • Background Tertiary (#1e1f22): Server-Listen-Leiste, tiefster Hintergrund.
  • Background Secondary (#2b2d31): Kanal-Seitenleiste, Einstellungs-Seitenleiste.
  • Background Primary (#313338): Chat-Oberfläche, Nachrichtenspalte.
  • Background Floating (#111214): Schwebende Popovers, Tooltips, Autovervollständigung.
  • Background Modifier Hover (rgba(78, 80, 88, 0.3)): Hover-Überlagerung auf Zeilen.
  • Background Modifier Selected (rgba(78, 80, 88, 0.6)): Aktive Zeile.

Oberfläche (Helles Design)

  • Light Bg Primary (#ffffff): Chat-Oberfläche im hellen Design.
  • Light Bg Secondary (#f2f3f5): Seitenleiste im hellen Design.
  • Light Bg Tertiary (#e3e5e8): Tiefste helle Oberfläche.

Text

  • Header Primary (#f2f3f5): Kanal-Header, Modal-Titel im dunklen Design.
  • Header Secondary (#b5bac1): Gedämpfte Header.
  • Text Normal (#dbdee1): Fließtext im dunklen Design — leicht kühler als reines Weiß.
  • Text Muted (#949ba4): Zeitstempel, Server-Namen, sekundäre Metadaten.
  • Text Link (#00a8fc): Hyperlinks in Nachrichten — Himmelblau, unterscheidbar von Blurple.
  • Channels Default (#80848e): Inaktiver Kanalname in der Seitenleiste.

Status & Semantisch

  • Status Online (#23a55a): Online-Punkt, Erfolgszustände.
  • Status Idle (#f0b232): Abwesend-Punkt, Away-Status.
  • Status DND (#f23f43): Nicht stören, dient auch als destruktives Rot.
  • Status Streaming (#593695): „Streaming"-Lila.
  • Status Offline (#80848e): Offline-Grau.
  • Mention Highlight (rgba(88, 101, 242, 0.1)): Softer Blurple-Schimmer auf @mention-Zeilen.

Rahmen & Trennlinien

  • Background Modifier Accent (rgba(255, 255, 255, 0.06)): Standard-Trennlinie im dunklen Design.
  • Border Subtle (#3f4147): Feste Trennlinie für Karten.

3. Typografie-Regeln

Schriftfamilie

  • Body / UI / Headings: gg sans, mit Fallback: "Helvetica Neue", Helvetica, Arial, sans-serif
  • Display (Legacy / Whitney): Whitney, mit Fallback: gg sans
  • Code / Mono: "gg mono", mit Fallback: Consolas, Andale Mono, Courier New, Courier, monospace

Hierarchie

Rolle Schrift Größe Gewicht Zeilenhöhe Zeichenabstand Hinweise
Display Hero gg sans 56px (3.5rem) 800 1.1 -0.02em Marketing-Hero
Seitenüberschrift gg sans 24px (1.5rem) 700 1.25 normal Einstellungs-/Profil-Titel
Kanalname gg sans 16px (1rem) 600 1.25 normal #general, Kanal-Header
Nachrichtentext gg sans 16px (1rem) 400 1.375 normal Normaler Chat-Text
Benutzername gg sans 16px (1rem) 500 1.25 normal Verfasser einer Nachricht
Zeitstempel gg sans 12px (0.75rem) 500 1.25 normal „Heute um 16:32 Uhr"
Seitenleisten-Kanal gg sans 16px (1rem) 500 1.25 normal Zeilen der Kanalliste
Server-Name gg sans 16px (1rem) 600 1.25 normal Server-Header
Bildunterschrift / Meta gg sans 12px (0.75rem) 400 1.3 0.02em Statustext, Bearbeitungs-Tag
Code Inline gg mono 0.875em 400 inherit normal Inline-Code
Code-Block gg mono 14px (0.875rem) 400 1.5 normal dreifach-umzäunter Block

Grundsätze

  • Freundliche Geometrie: gg sans ersetzt Whitney mit abgerundeten Abschlüssen bei a/g/s — die Marke möchte Wärme vermitteln, ohne die Lesbarkeit zu beeinträchtigen.
  • Gewichtskontrast statt Farbkontrast: Hierarchie entsteht durch Gewichtsschritte 400→500→600→700→800; die Oberfläche bleibt neutral.
  • 16px Fließtext: Chat-Nachrichten werden nicht unter 16px verkleinert. Dichte entsteht durch Zeilenhöhe (1.375), nicht durch Schriftgröße.

4. Komponentenstile

Schaltflächen

Primär

  • Hintergrund: #5865f2
  • Text: #ffffff
  • Innenabstand: 8px 16px
  • Radius: 4px
  • Hover: #4752c4
  • Verwendung: Primäre CTAs, „Weiter", „Server beitreten"

Sekundär

  • Hintergrund: #4e5058
  • Text: #ffffff
  • Innenabstand: 8px 16px
  • Radius: 4px
  • Hover: #6d6f78

Tertiär / Dezent (Link-Stil)

  • Hintergrund: transparent
  • Text: #dbdee1
  • Hover: Text unterstrichen, kein Hintergrundwechsel

Destruktiv

  • Hintergrund: #da373c
  • Text: #ffffff
  • Hover: #a12d2f

Eingabefelder

  • Hintergrund: #1e1f22
  • Text: #dbdee1
  • Rahmen: 1px solid #1e1f22
  • Radius: 4px
  • Innenabstand: 10px 12px
  • Fokus: Rahmen #5865f2

Server-Avatare

  • Größe: 48×48px
  • Radius: 16px (abgerundetes Quadrat) standardmäßig; wechselt beim Hover und im aktiven Zustand zu 50%.
  • Aktiver Zustand: 4px weiße Pille an der linken Kante der Symbol-Spalte.

Status-Punkte

  • Größe: 10×10px
  • Rahmen: 3px solid background-tertiary (erzeugt den „Einschnitt"-Effekt)
  • Position: unten rechts am Avatar.

Karten / Einbettungen

  • Hintergrund: #2b2d31 (dunkel) oder #f2f3f5 (hell)
  • Linker Rahmen: 4px solid Einbettungs-Akzentfarbe.
  • Radius: 4px
  • Innenabstand: 8px 16px

Erwähnungs-Pille

  • Hintergrund: rgba(88, 101, 242, 0.3)
  • Text: #c9cdfb
  • Innenabstand: 0 2px
  • Radius: 3px

5. Abstände & Layout

  • Basiseinheit: 4px. Skala: 4, 8, 12, 16, 20, 24, 32, 40.
  • Server-Leiste: 72px breit, fest.
  • Kanal-Seitenleiste: 240px breit.
  • Mitgliederliste: 240px breit auf Desktop.
  • Chat-Spalte: fluid, min. 380px.

6. Animation

  • Dauer: 200ms für Hover; 350ms für die Avatar-Kreis-Verwandlung; 80ms für Tooltip-Einblendung.
  • Easing: cubic-bezier(0.215, 0.61, 0.355, 1) für die Avatar-Verwandlung (schneller Einstieg, dann Einpendeln).
  • Benachrichtigungs-Puls: 1,4s ease-in-out infinite auf dem Ungelesen-Erwähnungs-Indikator.

7. Verwendungsrichtlinien

  • Die dunkle Hülle, kompakte Dichte und Blurple-Aktionshierarchie gemeinsam beibehalten; Blurple auf einem hellen Marketing-Layout wirkt dem Discord-Produktgefühl entgegen.
  • Navigationsintensive Oberflächen um Leisten, Seitenleisten und Chat-Spalten strukturieren statt um isolierte dekorative Karten.
  • Die abgerundete quadratische Avatar- und Status-Punkt-Sprache verwenden, wenn Personen, Server oder aktive Präsenz dargestellt werden.
Reference in new issue View Git Blame Copy Permalink