admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
15 KiB
15 KiB
Sistem Desain Terinspirasi dari Cohere
Kategori: AI & LLM Platform AI enterprise. Gradien vibran, estetika dasbor kaya data.
1. Tema Visual & Atmosfer
Antarmuka Cohere adalah dasbor perintah enterprise yang disempurnakan — percaya diri, bersih, dan dirancang untuk membuat AI terasa seperti infrastruktur serius, bukan mainan konsumen. Pengalamannya bertumpu pada kanvas putih cerah di mana konten diatur dalam kartu-kartu bertepi melengkung (radius 22px) yang menciptakan bahasa wadah organik menyerupai awan. Ini adalah situs yang berbicara kepada CTO dan arsitek enterprise: profesional tanpa terasa dingin, canggih tanpa terasa mengintimidasi.
Bahasa desainnya menjembatani dua dunia dengan sistem dua jenis huruf: CohereText, serif display kustom dengan tracking ketat, memberikan judul bobot sebuah manifesto teknologi, sementara Unica77 Cohere Web menangani semua teks isi dan UI dengan presisi Swiss geometrik. Pasangan serif/sans ini menciptakan kepribadian "otoritas percaya diri bertemu kejelasan rekayasa" yang sempurna mencerminkan platform AI enterprise.
Warna digunakan dengan sangat hemat — antarmukanya hampir seluruhnya hitam-putih dengan border abu-abu sejuk (#d9d9dd, #e5e7eb). Ungu-violet hanya muncul di band hero fotografi, seksi gradien, dan biru interaktif (#1863dc) yang menandai status hover dan fokus. Penghematan kromatik ini berarti ketika warna MEMANG muncul — dalam tangkapan layar produk, fotografi enterprise, dan seksi ungu gelap — warna tersebut membawa bobot visual maksimal.
Karakteristik Utama:
- Kanvas putih cerah dengan border penahanan abu-abu sejuk
- Radius border 22px khas — kekhasan "kartu Cohere" yang membulat
- Dua jenis huruf kustom: CohereText (serif display) + Unica77 (sans isi)
- Penghematan kromatik berkelas enterprise: hitam, putih, abu-abu sejuk, aksen ungu-biru minimal
- Seksi hero ungu/violet gelap yang memberikan kontras dramatis
- Tombol ghost/transparan yang berubah ke biru saat hover
- Fotografi enterprise menampilkan beragam aplikasi dunia nyata
- CohereMono untuk kode dan label teknis dengan transformasi huruf kapital
2. Palet Warna & Peran
Primer
- Cohere Black (
#000000): Teks judul primer dan elemen penekanan maksimal. - Near Black (
#212121): Warna tautan isi standar — sedikit lebih lembut dari hitam murni. - Deep Dark (
#17171c): Hampir-hitam bernuansa biru untuk navigasi dan teks seksi gelap.
Sekunder & Aksen
- Interaction Blue (
#1863dc): Aksen interaktif primer — muncul pada hover tombol, status fokus, dan tautan aktif. Satu-satunya warna aksi kromatik. - Ring Blue (
#4c6ee6pada 50%): Warna ring Tailwind untuk indikator fokus keyboard. - Focus Purple (
#9b60aa): Warna border fokus input — violet yang diredam.
Permukaan & Latar Belakang
- Pure White (
#ffffff): Latar belakang halaman primer dan permukaan kartu. - Snow (
#fafafa): Permukaan yang sedikit lebih tinggi dan latar belakang seksi terang. - Lightest Gray (
#f2f2f2): Border kartu dan garis penahanan paling lembut.
Netral & Teks
- Muted Slate (
#93939f): Tautan footer yang dilemahkan dan teks tersier — abu-abu bernada sejuk dengan sedikit rona biru-violet. - Border Cool (
#d9d9dd): Border seksi dan item daftar standar — abu-abu sejuk, sedikit bernuansa ungu. - Border Light (
#e5e7eb): Varian border lebih terang — gray-200 standar Tailwind.
Sistem Gradien
- Band Hero Ungu-Violet: Seksi gradien ungu gelap yang menciptakan kontras dramatis terhadap kanvas putih. Muncul sebagai band lebar penuh yang menampung tangkapan layar produk dan pesan utama.
- Gradien Footer Gelap: Halaman beralih melalui ungu gelap/arang menuju footer hitam, menciptakan efek "senja".
3. Aturan Tipografi
Keluarga Font
- Display:
CohereText, dengan fallback:Space Grotesk, Inter, ui-sans-serif, system-ui - Isi / UI:
Unica77 Cohere Web, dengan fallback:Inter, Arial, ui-sans-serif, system-ui - Kode:
CohereMono, dengan fallback:Arial, ui-sans-serif, system-ui - Ikon:
CohereIconDefault(font ikon kustom)
Hierarki
| Peran | Font | Ukuran | Ketebalan | Tinggi Baris | Spasi Huruf | Catatan |
|---|---|---|---|---|---|---|
| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (ketat) | -1.44px | Dampak maksimal, otoritas serif |
| Display Sekunder | CohereText | 60px (3.75rem) | 400 | 1.00 (ketat) | -1.2px | Judul seksi besar |
| Judul Seksi | Unica77 | 48px (3rem) | 400 | 1.20 (ketat) | -0.48px | Judul seksi fitur |
| Sub-judul | Unica77 | 32px (2rem) | 400 | 1.20 (ketat) | -0.32px | Judul kartu, nama fitur |
| Judul Fitur | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Judul seksi lebih kecil |
| Isi Besar | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Paragraf pengantar |
| Isi / Tombol | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Isi standar, teks tombol |
| Tombol Medium | Unica77 | 14px (0.88rem) | 500 | 1.71 (longgar) | normal | Tombol lebih kecil, label ditekankan |
| Keterangan | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadata, deskripsi |
| Label Kapital | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Label seksi huruf kapital |
| Kecil | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Teks terkecil, tautan footer |
| Kode Mikro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Label kode kapital sangat kecil |
Prinsip
- Serif untuk deklarasi, sans untuk utilitas: CohereText membawa suara merek di skala display — terminal serifnya memberikan judul otoritas publikasi penelitian. Unica77 menangani semua yang fungsional dengan netralitas Swiss-geometrik.
- Tracking negatif pada skala besar: CohereText menggunakan spasi huruf -1.2px hingga -1.44px pada 60–72px, menciptakan blok teks yang padat dan berdampak.
- Satu ketebalan isi: Hampir semua penggunaan Unica77 berada pada ketebalan 400. Ketebalan 500 hanya muncul untuk penekanan tombol kecil. Sistem mengandalkan ukuran dan spasi, bukan kontras ketebalan.
- Label kode huruf kapital: CohereMono menggunakan huruf kapital dengan spasi huruf positif (0.16–0.28px) untuk tag teknis dan penanda seksi.
4. Gaya Komponen
Tombol
Ghost / Transparan
- Latar belakang: transparan (
rgba(255, 255, 255, 0)) - Teks: Cohere Black (
#000000) - Tidak ada border yang terlihat
- Hover: teks bergeser ke Interaction Blue (
#1863dc), opacity 0.8 - Fokus: outline solid 2px dalam Interaction Blue
- Gaya tombol primer — tidak terlihat hingga diinteraksikan
Dark Solid
- Latar belakang: gelap/hitam
- Teks: Pure White
- Untuk CTA pada permukaan terang
- Berbentuk pil atau radius standar
Outlined
- Penahanan berbasis border
- Digunakan dalam aksi sekunder
Kartu & Kontainer
- Latar belakang: Pure White (
#ffffff) - Border: solid tipis Lightest Gray (
1px solid #f2f2f2) untuk kartu halus; Cool Border (#d9d9dd) untuk yang ditekankan - Radius: 22px — radius khas Cohere untuk kartu primer, gambar, dan kontainer dialog. Juga 4px, 8px, 16px, 20px untuk elemen lebih kecil
- Bayangan: minimal — Cohere mengandalkan warna latar belakang dan border daripada bayangan
- Khusus: radius
0px 0px 22px 22px(pembulatan hanya bawah) untuk kontainer seksi - Dialog: radius 8px untuk kotak modal/dialog
Input & Formulir
- Teks: putih pada input gelap, hitam pada terang
- Border fokus: Focus Purple (
#9b60aa) dengan1px solid - Bayangan fokus: ring merah (
rgb(179, 0, 0) 0px 0px 0px 2px) — kemungkinan untuk indikasi status error - Outline fokus: Interaction Blue solid 2px
Navigasi
- Nav horizontal bersih pada latar belakang putih atau gelap
- Logo: wordmark Cohere (SVG kustom)
- Tautan: teks gelap pada 16px Unica77
- CTA: tombol solid gelap
- Mobile: collapse hamburger
Perlakuan Gambar
- Fotografi enterprise dengan subjek dan lingkungan yang beragam
- Fotografi hero bernuansa ungu untuk seksi dramatis
- Tangkapan layar UI produk pada permukaan gelap
- Gambar dengan radius 22px mengikuti sistem kartu
- Seksi gradien ungu lebar penuh
Komponen Khas
Sistem Kartu 22px
- Radius border 22px adalah tanda tangan visual Cohere
- Semua kartu primer, gambar, dan kontainer menggunakan radius ini
- Menciptakan kelembutan organik menyerupai awan yang khas dibanding tipikal 8–12px
Bilah Kepercayaan Enterprise
- Logo perusahaan ditampilkan dalam strip horizontal
- Menunjukkan adopsi enterprise
- Perlakuan logo bersih dan monokrom
Band Hero Ungu
- Seksi ungu gelap lebar penuh yang menampung showcase produk
- Menciptakan jeda visual dramatis dalam aliran halaman putih
- Tangkapan layar produk mengapung dalam lingkungan ungu
Tag Kode Huruf Kapital
- CohereMono dalam huruf kapital dengan spasi huruf
- Digunakan sebagai penanda seksi dan label kategorisasi
- Menciptakan hierarki informasi teknis yang terstruktur
5. Prinsip Tata Letak
Sistem Spasi
- Unit dasar: 8px
- Skala: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
- Padding tombol bervariasi per varian
- Padding internal kartu: sekitar 24–32px
- Spasi vertikal seksi: luas (56–60px antar seksi)
Grid & Kontainer
- Lebar kontainer maksimal: hingga 2560px (sangat lebar) dengan skala responsif
- Hero: terpusat dengan tipografi dramatis
- Seksi fitur: grid kartu multi-kolom
- Seksi enterprise: band ungu lebar penuh
- 26 breakpoint terdeteksi — sistem responsif yang sangat granular
Filosofi Whitespace
- Kejelasan enterprise: Setiap seksi menyajikan satu proposisi yang jelas dengan ruang napas di antara seksi.
- Fotografi sebagai hero: Seksi fotografi besar memberikan daya tarik visual tanpa memerlukan elemen desain dekoratif.
- Pengelompokan kartu: Konten terkait dikelompokkan dalam kartu bertepi melengkung 22px, menciptakan kluster informasi yang alami.
Skala Radius Border
- Tajam (4px): Elemen navigasi, tag kecil, paginasi
- Nyaman (8px): Kotak dialog, kontainer sekunder, kartu kecil
- Luas (16px): Kontainer unggulan, kartu medium
- Besar (20px): Kartu fitur besar
- Khas (22px): Kartu primer, gambar hero, kontainer utama — radius Cohere yang SESUNGGUHNYA
- Pil (9999px): Tombol, tag, indikator status
6. Kedalaman & Elevasi
| Tingkat | Perlakuan | Penggunaan |
|---|---|---|
| Datar (Level 0) | Tanpa bayangan, tanpa border | Latar belakang halaman, blok teks |
| Berborder (Level 1) | 1px solid #f2f2f2 atau #d9d9dd |
Kartu standar, pemisah daftar |
| Band Ungu (Level 2) | Latar belakang ungu gelap lebar penuh | Seksi hero, showcase fitur |
Filosofi Bayangan: Cohere hampir bebas bayangan. Kedalaman dikomunikasikan melalui kontras warna latar belakang (kartu putih di atas band ungu, permukaan putih di atas snow), penahanan border (border abu-abu sejuk), dan pergantian seksi terang-ke-gelap yang dramatis. Ketika elemen memerlukan elevasi, hal tersebut dicapai dengan menempatkannya putih-di-atas-gelap daripada melalui proyeksi bayangan.
7. Yang Boleh dan Tidak Boleh
Yang Boleh
- Gunakan radius border 22px pada semua kartu dan kontainer primer — itulah tanda tangan visual
- Gunakan CohereText untuk judul display (72px, 60px) dengan spasi huruf negatif
- Gunakan Unica77 untuk semua teks isi dan UI pada ketebalan 400
- Pertahankan palet hitam-putih dengan border abu-abu sejuk
- Gunakan Interaction Blue (#1863dc) hanya untuk status interaktif hover/fokus
- Gunakan seksi ungu gelap untuk jeda visual dramatis dan showcase produk
- Terapkan huruf kapital + spasi huruf pada CohereMono untuk label seksi
- Pertahankan fotografi berkelas enterprise dengan subjek yang beragam
Yang Tidak Boleh
- Jangan gunakan radius border selain 22px pada kartu primer — radius khas ini penting
- Jangan perkenalkan warna hangat — palet secara ketat bernada sejuk
- Jangan gunakan bayangan berat — kedalaman berasal dari kontras warna dan border
- Jangan gunakan ketebalan tebal (700+) pada teks isi — rentang yang benar adalah 400–500
- Jangan lewatkan hierarki serif/sans — CohereText untuk judul, Unica77 untuk isi
- Jangan gunakan ungu sebagai warna permukaan kartu — ungu dikhususkan untuk seksi lebar penuh
- Jangan kurangi spasi seksi di bawah 40px — tata letak enterprise membutuhkan ruang napas
- Jangan tambahkan dekorasi pada tombol secara default — ghost/transparan adalah keadaan dasar
8. Perilaku Responsif
Breakpoint
| Nama | Lebar | Perubahan Utama |
|---|---|---|
| Mobile Kecil | <425px | Tata letak kompak, spasi minimal |
| Mobile | 425–640px | Satu kolom, kartu bertumpuk |
| Mobile Besar | 640–768px | Penyesuaian spasi minor |
| Tablet | 768–1024px | Grid 2 kolom mulai |
| Desktop | 1024–1440px | Tata letak multi-kolom penuh |
| Desktop Besar | 1440–2560px | Lebar kontainer maksimal |
26 breakpoint terdeteksi — salah satu situs paling granular responsifnya dalam dataset.
Target Sentuh
- Tombol berukuran cukup untuk interaksi sentuh
- Tautan navigasi dengan spasi yang nyaman
- Permukaan kartu sebagai target sentuh
Strategi Pengecilan
- Navigasi: Nav penuh mengecil menjadi hamburger
- Grid fitur: Multi-kolom → 2 kolom → satu kolom
- Teks hero: 72px → 48px → 32px skala progresif
- Seksi ungu: Pertahankan lebar penuh, konten bertumpuk
- Grid kartu: 3 → 2 → 1 kolom
Perilaku Gambar
- Fotografi diskalakan proporsional dalam kontainer berradius 22px
- Tangkapan layar produk mempertahankan rasio aspek
- Seksi ungu menskalakan latar belakang secara proporsional
9. Panduan Prompt Agen
Referensi Warna Cepat
- Teks Primer: "Cohere Black (#000000)"
- Latar Belakang Halaman: "Pure White (#ffffff)"
- Teks Sekunder: "Near Black (#212121)"
- Aksen Hover: "Interaction Blue (#1863dc)"
- Teks Diredam: "Muted Slate (#93939f)"
- Border Kartu: "Lightest Gray (#f2f2f2)"
- Border Seksi: "Border Cool (#d9d9dd)"
Contoh Prompt Komponen
- "Buat seksi hero di atas Pure White (#ffffff) dengan CohereText pada 72px ketebalan 400, line-height 1.0, letter-spacing -1.44px. Teks Cohere Black. Subjudul dalam Unica77 pada 18px ketebalan 400, line-height 1.4."
- "Rancang kartu fitur dengan radius border 22px, border 1px solid Lightest Gray (#f2f2f2) di atas putih. Judul dalam Unica77 pada 32px, letter-spacing -0.32px. Isi dalam Unica77 pada 16px, Muted Slate (#93939f)."
- "Buat tombol ghost: latar belakang transparan, teks Cohere Black dalam Unica77 pada 16px. Saat hover, teks bergeser ke Interaction Blue (#1863dc) dengan opacity 0.8. Fokus: outline Interaction Blue solid 2px."
- "Buat seksi ungu gelap lebar penuh dengan teks putih. CohereText pada 60px untuk judulnya. Tangkapan layar produk mengapung di dalamnya menggunakan radius border 22px."
- "Rancang label seksi menggunakan CohereMono pada 14px, huruf kapital, letter-spacing 0.28px. Teks Muted Slate (#93939f)."
Panduan Iterasi
- Fokus pada SATU komponen dalam satu waktu
- Selalu gunakan radius 22px untuk kartu primer — "kekhasan kartu Cohere"
- Tentukan jenis huruf — CohereText untuk judul, Unica77 untuk isi, CohereMono untuk label
- Elemen interaktif menggunakan Interaction Blue (#1863dc) hanya saat hover
- Pertahankan permukaan putih dengan border abu-abu sejuk — tanpa nada hangat
- Ungu diperuntukkan bagi seksi lebar penuh, bukan latar belakang kartu