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-id.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

Sistem Desain Terinspirasi dari Discord

Category: Produktivitas & SaaS Platform suara / obrolan. Ungu biru yang dalam, permukaan dark-first, momen aksen yang menyenangkan.

1. Tema Visual & Atmosfer

Produk Discord dirancang untuk malam hari, sesi raid, dan percakapan suara berkelompok — sehingga seluruh tampilan mengutamakan mode gelap. Kanvas default adalah Background Primary yang dalam (#313338 tema terang, #1e1f22 tema gelap), dengan kolom obrolan yang berlapis di atas warna yang sedikit lebih terang atau lebih gelap untuk menandakan saluran, utas, dan panel samping. Blurple (#5865f2) yang khas dikhususkan untuk merek, CTA utama, sebutan, dan affordance "Anda" — digunakan secara hemat agar menonjol di antara warna netral yang redup.

Tipografi menggunakan gg sans (pengganti Whitney kustom Discord) untuk teks dan antarmuka, dengan bentuk geometris membulat yang terasa ramah namun tetap terbaca pada ukuran kecil yang dibutuhkan klien obrolan. Heading meningkat secara bertahap; baris obrolan dibuat rapat (4–8px di antara grup pesan) agar guliran berjam-jam tetap mudah dipindai.

Bahasa bentuk terasa membulat namun tidak terlalu lunak: radius 8px pada kartu, 4px pada input, pil penuh pada lencana status dan tag. Server menggunakan avatar kotak membulat berukuran 48px yang berubah menjadi lingkaran saat hover — sebuah gerakan kecil yang telah menjadi bagian dari identitas merek.

Karakteristik Utama:

  • Permukaan dark-first: #1e1f22 / #2b2d31 / #313338 (kedalaman 3 langkah)
  • Blurple #5865f2 sebagai satu-satunya aksen jenuh di permukaan obrolan
  • gg sans (gaya Whitney) untuk semua teks — ramah, geometris, netral
  • Avatar server kotak membulat (radius 16px) yang berubah menjadi lingkaran saat hover
  • Spasi baris obrolan yang rapat, padding panel samping yang lega
  • Titik status: hijau online, kuning idle, merah dnd, abu-abu offline
  • Pemisah 1px yang sejajar piksel dalam warna putih redup dengan alpha rendah

2. Palet Warna & Perannya

Primer

  • Blurple (#5865f2): Merek utama, CTA utama, sorotan sebutan.
  • Blurple Hover (#4752c4): Hover/aktif untuk blurple.
  • Blurple Soft (#7289da): Blurple warisan, aksen sekunder dalam pemasaran.

Permukaan (Tema Gelap — default)

  • Background Tertiary (#1e1f22): Rel daftar server, latar belakang paling dalam.
  • Background Secondary (#2b2d31): Bilah sisi saluran, bilah sisi pengaturan.
  • Background Primary (#313338): Permukaan obrolan, kolom pesan.
  • Background Floating (#111214): Popover mengambang, tooltip, pelengkapan otomatis.
  • Background Modifier Hover (rgba(78, 80, 88, 0.3)): Lapisan hover pada baris.
  • Background Modifier Selected (rgba(78, 80, 88, 0.6)): Baris aktif.

Permukaan (Tema Terang)

  • Light Bg Primary (#ffffff): Permukaan obrolan dalam tema terang.
  • Light Bg Secondary (#f2f3f5): Bilah sisi dalam tema terang.
  • Light Bg Tertiary (#e3e5e8): Permukaan terang paling dalam.

Teks

  • Header Primary (#f2f3f5): Header saluran, judul modal dalam tema gelap.
  • Header Secondary (#b5bac1): Header yang diredam.
  • Text Normal (#dbdee1): Teks isi dalam tema gelap — sedikit lebih dingin dari putih murni.
  • Text Muted (#949ba4): Cap waktu, nama server, metadata sekunder.
  • Text Link (#00a8fc): Hyperlink dalam pesan — biru langit, berbeda dari blurple.
  • Channels Default (#80848e): Nama saluran tidak aktif di bilah sisi.

Status & Semantik

  • Status Online (#23a55a): Titik online, status sukses.
  • Status Idle (#f0b232): Titik idle, tidak di tempat.
  • Status DND (#f23f43): Jangan ganggu, juga berfungsi sebagai merah destruktif.
  • Status Streaming (#593695): Ungu "Streaming".
  • Status Offline (#80848e): Abu-abu offline.
  • Mention Highlight (rgba(88, 101, 242, 0.1)): Lapisan blurple lembut pada baris @sebutan.

Batas & Pemisah

  • Background Modifier Accent (rgba(255, 255, 255, 0.06)): Pemisah standar dalam mode gelap.
  • Border Subtle (#3f4147): Pemisah solid untuk kartu.

3. Aturan Tipografi

Keluarga Font

  • Isi / UI / Heading: gg sans, dengan fallback: "Helvetica Neue", Helvetica, Arial, sans-serif
  • Display (warisan / Whitney): Whitney, dengan fallback: gg sans
  • Kode / Mono: "gg mono", dengan fallback: Consolas, Andale Mono, Courier New, Courier, monospace

Hierarki

Peran Font Ukuran Bobot Tinggi Baris Jarak Huruf Catatan
Display Hero gg sans 56px (3.5rem) 800 1.1 -0.02em Hero pemasaran
Heading Halaman gg sans 24px (1.5rem) 700 1.25 normal Judul pengaturan/profil
Nama Saluran gg sans 16px (1rem) 600 1.25 normal #general, header saluran
Isi Pesan gg sans 16px (1rem) 400 1.375 normal Teks obrolan standar
Nama Pengguna gg sans 16px (1rem) 500 1.25 normal Penulis pesan
Cap Waktu gg sans 12px (0.75rem) 500 1.25 normal "Hari ini pukul 4:32 PM"
Saluran Bilah Sisi gg sans 16px (1rem) 500 1.25 normal Baris daftar saluran
Nama Server gg sans 16px (1rem) 600 1.25 normal Header server
Keterangan / Meta gg sans 12px (0.75rem) 400 1.3 0.02em Teks status, tag yang telah diedit
Kode Inline gg mono 0.875em 400 inherit normal code inline
Blok Kode gg mono 14px (0.875rem) 400 1.5 normal Blok tiga-pagar

Prinsip

  • Geometri yang ramah: gg sans menggantikan Whitney dengan terminal membulat pada a/g/s — merek menginginkan kehangatan tanpa mengorbankan keterbacaan.
  • Kontras bobot daripada kontras warna: hierarki berasal dari langkah bobot 400→500→600→700→800; permukaan tetap netral.
  • Isi 16px: pesan obrolan tidak menyusut di bawah 16px. Kepadatan berasal dari tinggi baris (1.375), bukan ukuran font.

4. Gaya Komponen

Tombol

Primer

  • Latar belakang: #5865f2
  • Teks: #ffffff
  • Padding: 8px 16px
  • Radius: 4px
  • Hover: #4752c4
  • Gunakan untuk: CTA utama, "Lanjutkan", "Bergabung ke Server"

Sekunder

  • Latar belakang: #4e5058
  • Teks: #ffffff
  • Padding: 8px 16px
  • Radius: 4px
  • Hover: #6d6f78

Tersier / Halus (Gaya tautan)

  • Latar belakang: transparan
  • Teks: #dbdee1
  • Hover: teks bergaris bawah, tidak ada perubahan latar belakang

Bahaya

  • Latar belakang: #da373c
  • Teks: #ffffff
  • Hover: #a12d2f

Input

  • Latar belakang: #1e1f22
  • Teks: #dbdee1
  • Batas: 1px solid #1e1f22
  • Radius: 4px
  • Padding: 10px 12px
  • Fokus: batas #5865f2

Avatar Server

  • Ukuran: 48×48px
  • Radius: 16px (kotak membulat) secara default; bertransisi ke 50% saat hover dan aktif.
  • Status aktif: pil putih 4px di tepi kiri kolom ikon.

Titik Status

  • Ukuran: 10×10px
  • Batas: 3px solid background-tertiary (menciptakan efek "takik")
  • Posisi: kanan bawah avatar.

Kartu / Sematan

  • Latar belakang: #2b2d31 (gelap) atau #f2f3f5 (terang)
  • Batas kiri: 4px solid warna aksen sematan.
  • Radius: 4px
  • Padding: 8px 16px

Pil Sebutan

  • Latar belakang: rgba(88, 101, 242, 0.3)
  • Teks: #c9cdfb
  • Padding: 0 2px
  • Radius: 3px

5. Spasi & Tata Letak

  • Unit dasar: 4px. Skala: 4, 8, 12, 16, 20, 24, 32, 40.
  • Rel server: lebar 72px, tetap.
  • Bilah sisi saluran: lebar 240px.
  • Daftar anggota: lebar 240px di desktop.
  • Kolom obrolan: fluid, minimal 380px.

6. Gerak

  • Durasi: 200ms untuk hover; 350ms untuk morph lingkaran avatar; 80ms untuk fade tooltip.
  • Easing: cubic-bezier(0.215, 0.61, 0.355, 1) untuk morph avatar (cepat lalu menetap).
  • Denyut notifikasi: 1.4s ease-in-out infinite pada indikator sebutan belum dibaca.

7. Panduan Penggunaan

  • Pertahankan tampilan gelap, kepadatan kompak, dan hierarki aksi blurple secara bersamaan; menggunakan blurple pada tata letak pemasaran bergaya terang akan merusak nuansa produk Discord.
  • Jaga permukaan yang banyak navigasi tetap terstruktur di sekitar rel, bilah sisi, dan kolom obrolan daripada kartu dekoratif yang terisolasi.
  • Gunakan bahasa avatar kotak membulat dan titik status saat merepresentasikan orang, server, atau kehadiran aktif.
Reference in new issue View Git Blame Copy Permalink