④段整套同步（六节＋ 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
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,161 @@
+# Sistem Desain Terinspirasi dari GitHub
+
+> Category: Alat Pengembang
+> Platform berorientasi kode. Kepadatan fungsional, presisi biru-di-atas-putih, fondasi Primer.
+
+## 1. Tema Visual & Atmosfer
+
+Tampilan GitHub dirancang secara teknis, bukan sekadar dekoratif. Setiap piksel menegaskan sebuah sikap: ini adalah alat bagi orang-orang yang peduli pada diff, build, dan pull request. Latar belakang halaman adalah `#ffffff` yang bersih (mode terang) atau `#0d1117` (mode gelap), dengan konten yang tersusun pada panel persegi padat yang dipisahkan oleh garis batas tipis alih-alih ruang kosong. Kepadatan informasi adalah mereknya — baris daftar, baris kode, header repositori, dan kartu notifikasi semuanya tersusun rapat sehingga pengguna mahir dapat memindai ratusan item tanpa menggulir.
+
+Aksen khas adalah **biru Primer** (`#0969da`) untuk tautan dan aksi utama, serta **hijau GitHub** (`#1a7f37`) untuk status merged, keberhasilan, dan tombol merge itu sendiri. Keduanya terasa sedikit redup dibandingkan biru dan hijau produk konsumen — cukup jenuh untuk terbaca di atas teks abu-abu yang padat, namun cukup tenang untuk menyatu dengan latar belakang ketika beberapa warna muncul dalam satu viewport.
+
+Tipografi menggunakan tumpukan **system-ui** di seluruh produk sehingga teks dirender dengan tajam di setiap sistem operasi, dipasangkan dengan **SFMono / Menlo / Consolas** untuk kode. Tidak ada font display editorial; suara GitHub adalah suara sistem yang sudah Anda gunakan.
+
+**Karakteristik Utama:**
+- Kanvas putih murni (`#ffffff`) atau hitam biru tua (`#0d1117`) — tanpa kehangatan, tanpa warna tint
+- Garis batas abu-abu tipis (`#d0d7de`) mendefinisikan setiap panel dan bagian
+- Biru Primer (`#0969da`) untuk tautan/aksi utama; hijau GitHub (`#1a7f37`) untuk keberhasilan/merge
+- system-ui untuk prosa; SFMono untuk kode — tanpa typeface kustom
+- Baris daftar padat dengan padding minimal; ruang putih jarang digunakan
+- Ikonografi Octicon pada 16px / 24px — goresan tunggal, geometris, konsisten
+- Lencana status berbentuk pil dengan semantik warna yang kuat
+
+## 2. Palet Warna & Perannya
+
+### Utama
+- **Canvas Default** (`#ffffff`): Latar belakang halaman utama, tema terang.
+- **Canvas Subtle** (`#f6f8fa`): Permukaan sekunder, sidebar, latar belakang input, strip header.
+- **Canvas Inset** (`#eaeef2`): Latar belakang blok kode, permukaan terbenam.
+- **Fg Default** (`#1f2328`): Teks utama, judul, tinta.
+- **Fg Muted** (`#656d76`): Teks sekunder, keterangan, jalur file.
+
+### Aksen Merek
+- **Primer Blue** (`#0969da`): Tautan, CTA utama, dasar cincin fokus — warna interaktif universal.
+- **Primer Blue Hover** (`#0550ae`): Hover/ditekan untuk biru utama.
+- **Accent Subtle** (`#ddf4ff`): Permukaan biru lembut untuk callout, spanduk info.
+
+### Semantik
+- **Success / Merge Green** (`#1a7f37`): PR yang di-merge, lencana keberhasilan, tombol merge.
+- **Success Subtle** (`#dafbe1`): Tint permukaan keberhasilan.
+- **Open Green** (`#1a7f37`): Status issue/PR "Terbuka".
+- **Closed / Danger Red** (`#cf222e`): PR tertutup, aksi destruktif, kesalahan validasi.
+- **Danger Subtle** (`#ffebe9`): Permukaan spanduk kesalahan.
+- **Attention / Warning Yellow** (`#9a6700`): Teks peringatan di atas permukaan amber.
+- **Attention Subtle** (`#fff8c5`): Permukaan spanduk peringatan.
+- **Done Purple** (`#8250df`): Merged-dan-diarsipkan, status "selesai", lencana premium.
+- **Sponsor Pink** (`#bf3989`): Ikon hati sponsor, merek GitHub Sponsors.
+
+### Border & Pemisah
+- **Border Default** (`#d0d7de`): Garis batas tipis standar, garis luar panel.
+- **Border Muted** (`#d8dee4`): Pemisah dalam di dalam panel.
+- **Border Subtle** (`#eaeef2`): Pemisah baris tabel yang samar.
+
+### Tema Gelap
+- **Dark Canvas** (`#0d1117`): Latar belakang halaman gelap.
+- **Dark Surface** (`#161b22`): Sidebar, header, permukaan sekunder.
+- **Dark Border** (`#30363d`): Garis batas mode gelap standar.
+- **Dark Fg** (`#e6edf3`): Teks utama di atas latar gelap.
+
+## 3. Aturan Tipografi
+
+### Keluarga Font
+- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
+- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
+- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
+
+### Hierarki
+
+| Peran | Font | Ukuran | Ketebalan | Tinggi Baris | Spasi Huruf | Catatan |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Header repo, hero pemasaran |
+| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Judul halaman |
+| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Judul bagian |
+| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sub-bagian, header panel |
+| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Ukuran teks default — bukan 16px |
+| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Keterangan, metadata file |
+| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Blok kode, diff |
+| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Span `code` inline |
+
+### Prinsip
+- **Body 14px, bukan 16px**: Kepadatan prosa GitHub adalah identitasnya. Produk dibaca pada 14px untuk muat lebih banyak baris dalam satu viewport.
+- **Ketebalan biner**: 400 untuk segalanya secara default; 600 untuk judul dan penekanan. Tidak ada 500, tidak ada 700.
+- **Font sistem selalu**: jangan muat webfont untuk antarmuka — teks harus dirender seketika pada koneksi lambat.
+
+## 4. Gaya Komponen
+
+### Tombol
+
+**Utama (Hijau)**
+- Background: `#1f883d`
+- Teks: `#ffffff`
+- Border: 1px solid `rgba(31, 35, 40, 0.15)`
+- Padding: 5px 16px
+- Radius: 6px
+- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
+- Hover: background `#1a7f37`
+- Penggunaan: "Buat repositori", "Merge pull request"
+
+**Default**
+- Background: `#f6f8fa`
+- Teks: `#1f2328`
+- Border: 1px solid `#d0d7de`
+- Padding: 5px 16px
+- Radius: 6px
+- Hover: background `#f3f4f6`, border `#d0d7de`
+
+**Outline (Gaya Tautan Biru)**
+- Background: `#ffffff`
+- Teks: `#0969da`
+- Border: 1px solid `#d0d7de`
+- Hover: background `#0969da`, teks `#ffffff`
+
+**Bahaya**
+- Background: `#ffffff`
+- Teks: `#cf222e`
+- Border: 1px solid `#d0d7de`
+- Hover: background `#a40e26`, teks `#ffffff`, border `#a40e26`
+
+### Kartu / Kotak
+- Background: `#ffffff`
+- Border: 1px solid `#d0d7de`
+- Radius: 6px
+- Padding: 16px (header) + 16px (body)
+- Header memiliki strip `#f6f8fa` dengan border bawah.
+
+### Input
+- Background: `#ffffff`
+- Border: 1px solid `#d0d7de`
+- Radius: 6px
+- Padding: 5px 12px
+- Fokus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
+
+### Pil Status (Issue / PR)
+- **Terbuka**: background `#1a7f37`, teks putih, padding 4px 10px, radius 9999px.
+- **Tertutup**: background `#cf222e`, teks putih.
+- **Merged**: background `#8250df`, teks putih.
+- **Draf**: background `#6e7781`, teks putih.
+
+### Label (Tag pada Issue/PR)
+- Padding: 0 7px
+- Radius: 9999px
+- Font: 12px / 500
+- Background dan teks bersifat programatik (warna label → teks dihitung untuk kontras).
+
+## 5. Spasi & Tata Letak
+
+- **Unit dasar**: 4px. Skala spasi: 4, 8, 12, 16, 24, 32, 40, 48.
+- **Lebar maksimum halaman**: 1280px (`Container-xl`).
+- **Sidebar**: 296px di desktop, mengecil di bawah 1012px.
+- **Padding baris**: 16px horizontal, 12px vertikal (daftar padat berdasarkan desain).
+
+## 6. Gerakan
+
+- **Durasi**: 80ms untuk hover; 200ms untuk membuka menu/popover.
+- **Easing**: `ease-out` untuk membuka, `ease-in` untuk menutup.
+- **Dihindari**: animasi saat halaman dimuat, parallax, micro-interaksi persisten. Elemen muncul; tidak tampil berlebihan.
+
+## 7. Batasan Penggunaan
+
+- Pertahankan daftar padat, kotak berbatas, dan tipografi sistem secara bersamaan; tombol hijau yang berdiri sendiri tidak cukup untuk menciptakan tampilan produk seperti GitHub.
+- Gunakan hijau untuk aksi repositori yang konstruktif, biru untuk tautan dan fokus, serta merah/ungu/abu-abu hanya untuk status issue, PR, dan workflow.
+- Utamakan antarmuka yang tenang, border yang eksplisit, dan spasi yang kompak dibandingkan bayangan dekoratif atau kartu bergaya pemasaran yang besar.