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/discord/DESIGN-nl.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.1 KiB
Raw Blame History

Ontwerpsysteem geïnspireerd door Discord

Category: Productiviteit & SaaS Spraak- en chatplatform. Diep blurple, donkere basisoppervlakken, speelse accentmomenten.

1. Visueel thema & sfeer

Discord's product is ontworpen voor avonduren, raids en groepsgesprekken — daardoor is het gehele interface donker als standaard. Het standaard canvas is het diepe Background Primary (#313338 licht thema, #1e1f22 donker thema), met chatkolommen gelaagd op iets lichtere of donkerdere tinten om kanalen, threads en zijpanelen te onderscheiden. Het kenmerkende Blurple (#5865f2) is gereserveerd voor het merkteken, primaire CTA's, vermeldingen en de "jij"-aanduiding — spaarzaam ingezet zodat het opvalt tegen de gedempte neutralen.

Typografie is gg sans (Discord's aangepaste Whitney-vervanger) voor lopende tekst en chrome, met afgeronde geometrische vormen die vriendelijk aanvoelen maar toch leesbaar blijven op de kleine lettergroottes die een chatclient vereist. Koppen worden geleidelijk groter; chatrijen zijn compact (4–8px tussen berichtgroepen) zodat uren terugscrolwerk overzichtelijk blijft.

De vormtaal is afgerond maar niet ballonzacht: 8px radii op kaarten, 4px op invoervelden, volledige pill-vormen op statusbadges en tags. Servers zijn afgerond-vierkante avatars van 48px die bij hover veranderen in cirkels — een subtiele animatie die onderdeel is geworden van de merkidentiteit.

Belangrijkste kenmerken:

  • Donkere basisoppervlakken: #1e1f22 / #2b2d31 / #313338 (3-traps diepte)
  • Blurple #5865f2 als enig verzadigd accent in het chatoppervlak
  • gg sans (Whitney-stijl) voor alle tekst — vriendelijk, geometrisch, neutraal
  • Afgerond-vierkante server-avatars (16px radius) die bij hover snappen naar cirkels
  • Compacte rijspatiëring voor chat, royale opvulling voor zijpanelen
  • Statusdots: groen online, geel inactief, rood niet-storen, grijs offline
  • Pixelnauwkeurige 1px-scheidingslijnen in subtiel gebroken wit met lage alpha

2. Kleurenpalet & rollen

Primair

  • Blurple (#5865f2): Merkprimair, primaire CTA, vermelding-highlight.
  • Blurple Hover (#4752c4): Hover/actief voor blurple.
  • Blurple Soft (#7289da): Oud blurple, secundair accent in marketing.

Oppervlak (donker thema — standaard)

  • Background Tertiary (#1e1f22): Serverlijstrail, diepste achtergrond.
  • Background Secondary (#2b2d31): Kanaalsidebar, instellingssidebar.
  • Background Primary (#313338): Chatoppervlak, berichtenkolom.
  • Background Floating (#111214): Zwevende popovers, tooltips, automatisch aanvullen.
  • Background Modifier Hover (rgba(78, 80, 88, 0.3)): Hover-overlay op rijen.
  • Background Modifier Selected (rgba(78, 80, 88, 0.6)): Actieve rij.

Oppervlak (licht thema)

  • Light Bg Primary (#ffffff): Chatoppervlak in licht thema.
  • Light Bg Secondary (#f2f3f5): Sidebar in licht thema.
  • Light Bg Tertiary (#e3e5e8): Diepste lichte oppervlak.

Tekst

  • Header Primary (#f2f3f5): Kanaalkoppen, modaltitels in donker thema.
  • Header Secondary (#b5bac1): Gedempte koppen.
  • Text Normal (#dbdee1): Bodytekst in donker thema — iets koeler dan puur wit.
  • Text Muted (#949ba4): Tijdstempels, servernamen, secundaire metadata.
  • Text Link (#00a8fc): Hyperlinks in berichten — hemelsblauw, onderscheidend van blurple.
  • Channels Default (#80848e): Inactieve kanaalnaam in sidebar.

Status & semantisch

  • Status Online (#23a55a): Online-dot, succestoestanden.
  • Status Idle (#f0b232): Inactief-dot, afwezig.
  • Status DND (#f23f43): Niet-storen, ook gebruikt als destructief rood.
  • Status Streaming (#593695): "Streaming"-paars.
  • Status Offline (#80848e): Offline-grijs.
  • Mention Highlight (rgba(88, 101, 242, 0.1)): Zachte blurple-gloed op @vermelding-rijen.

Rand & scheidingslijn

  • Background Modifier Accent (rgba(255, 255, 255, 0.06)): Standaard scheidingslijn in donker.
  • Border Subtle (#3f4147): Effen scheidingslijn voor kaarten.

3. Typografieregels

Lettertypefamilie

  • Body / UI / Koppen: gg sans, met fallback: "Helvetica Neue", Helvetica, Arial, sans-serif
  • Display (oud / Whitney): Whitney, met fallback: gg sans
  • Code / Mono: "gg mono", met fallback: Consolas, Andale Mono, Courier New, Courier, monospace

Hiërarchie

Rol Lettertype Grootte Gewicht Regelhoogte Letterafstand Opmerkingen
Display Hero gg sans 56px (3.5rem) 800 1.1 -0.02em Marketing hero
Paginakop gg sans 24px (1.5rem) 700 1.25 normal Instellingen-/profieltitels
Kanaalnaam gg sans 16px (1rem) 600 1.25 normal #general, kanaalkoptekst
Berichttekst gg sans 16px (1rem) 400 1.375 normal Standaard chattekst
Gebruikersnaam gg sans 16px (1rem) 500 1.25 normal Auteur van een bericht
Tijdstempel gg sans 12px (0.75rem) 500 1.25 normal "Vandaag om 16:32"
Sidebar-kanaal gg sans 16px (1rem) 500 1.25 normal Kanaalslijstrijen
Servernaam gg sans 16px (1rem) 600 1.25 normal Serverkopregel
Bijschrift / Meta gg sans 12px (0.75rem) 400 1.3 0.02em Statustekst, bewerkt-label
Code Inline gg mono 0.875em 400 inherit normal Inline code
Codeblok gg mono 14px (0.875rem) 400 1.5 normal driedubbel-omheind blok

Principes

  • Vriendelijke geometrie: gg sans vervangt Whitney met afgeronde uiteinden op a/g/s — het merk wil warmte zonder leesbaarheid op te offeren.
  • Gewichtscontrast boven kleurcontrast: hiërarchie komt voort uit gewichtsstappen 400→500→600→700→800; het oppervlak blijft neutraal.
  • 16px bodytekst: chatberichten krimpen niet onder 16px. Dichtheid komt van regelhoogte (1.375), niet van lettergrootte.

4. Componentstijlen

Knoppen

Primair

  • Achtergrond: #5865f2
  • Tekst: #ffffff
  • Opvulling: 8px 16px
  • Radius: 4px
  • Hover: #4752c4
  • Gebruik: Primaire CTA's, "Doorgaan", "Server joinen"

Secundair

  • Achtergrond: #4e5058
  • Tekst: #ffffff
  • Opvulling: 8px 16px
  • Radius: 4px
  • Hover: #6d6f78

Tertiair / Subtiel (linkstijl)

  • Achtergrond: transparant
  • Tekst: #dbdee1
  • Hover: tekst onderstreept, geen achtergrondverandering

Gevaarlijk

  • Achtergrond: #da373c
  • Tekst: #ffffff
  • Hover: #a12d2f

Invoervelden

  • Achtergrond: #1e1f22
  • Tekst: #dbdee1
  • Rand: 1px solid #1e1f22
  • Radius: 4px
  • Opvulling: 10px 12px
  • Focus: rand #5865f2

Server-avatars

  • Grootte: 48×48px
  • Radius: 16px (afgerond vierkant) standaard; gaat bij hover en actief over naar 50%.
  • Actieve toestand: 4px witte pill aan de linkerrand van de icoonskolom.

Statusdots

  • Grootte: 10×10px
  • Rand: 3px solid background-tertiary (creëert het "inkeping"-effect)
  • Positie: rechtsonder op de avatar.

Kaarten / Insluitingen

  • Achtergrond: #2b2d31 (donker) of #f2f3f5 (licht)
  • Linkerrand: 4px solid insluiting-accentkleur.
  • Radius: 4px
  • Opvulling: 8px 16px

Vermelding-pill

  • Achtergrond: rgba(88, 101, 242, 0.3)
  • Tekst: #c9cdfb
  • Opvulling: 0 2px
  • Radius: 3px

5. Spatiëring & lay-out

  • Basiseenheid: 4px. Schaal: 4, 8, 12, 16, 20, 24, 32, 40.
  • Serverrail: 72px breed, vast.
  • Kanaalsidebar: 240px breed.
  • Ledenlijst: 240px breed op desktop.
  • Chatkolom: fluid, minimaal 380px.

6. Beweging

  • Duur: 200ms voor hover; 350ms voor de avatar-cirkelmorfose; 80ms voor tooltip-fade.
  • Easing: cubic-bezier(0.215, 0.61, 0.355, 1) voor de avatarmorfose (vlot aanloopje, dan bezinken).
  • Melding-puls: 1.4s ease-in-out infinite op de indicator voor ongelezen vermeldingen.

7. Gebruiksrichtlijnen

  • Bewaar de donkere schil, compacte dichtheid en blurple-actiehiërarchie gezamenlijk; blurple gebruiken op een lichte, marketingachtige lay-out doorbreekt het Discord-productgevoel.
  • Houd navigatie-intensieve oppervlakken gestructureerd rondom rails, sidebars en chatkolommen in plaats van geïsoleerde decoratieve kaarten.
  • Gebruik de afgerond-vierkante avatar en statusdot-taal bij het weergeven van mensen, servers of actieve aanwezigheid.
Reference in new issue View Git Blame Copy Permalink