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。
8.1 KiB
8.1 KiB
以 Discord 為靈感的設計系統
Category: 生產力與 SaaS 語音／聊天平台。深邃的靛紫藍、以暗色為主的介面層次，以及活潑的強調色時刻。
1. 視覺主題與氛圍
Discord 的產品是為夜晚、團隊突襲與群組語音量身打造的，因此整個介面以暗色為基調。預設畫布是深沉的「Background Primary」（淺色主題為 #313338，暗色主題為 #1e1f22），聊天欄疊加於稍亮或稍暗的層次之上，以區分頻道、討論串與側邊面板。標誌性的 Blurple（#5865f2）專用於品牌標識、主要 CTA、提及標記與「你自己」的視覺線索——刻意克制地使用，才能在低調的中性色中脫穎而出。
字型採用 gg sans（Discord 的自訂 Whitney 替代字型），圓潤的幾何造型在聊天客戶端所需的小字級下依然親切且易讀。標題逐級遞增；聊天列間距緊湊（訊息群組之間 4–8px），讓大量捲動的紀錄仍保持可掃讀性。
形狀語言圓潤但不過度軟化：卡片圓角 8px，輸入框 4px，狀態徽章與標籤則使用完整的膠囊形狀。伺服器圖示為 48px 的圓角方形頭像，滑鼠懸停時會變形為圓形——這個細微的動態效果已成為品牌識別的一部分。
主要特徵：
- 暗色優先的介面層次：
#1e1f22/#2b2d31/#313338（三階深度） - Blurple
#5865f2是聊天介面中唯一高飽和度的強調色 - gg sans（Whitney 風格）用於所有文字——友善、幾何、中性
- 圓角方形伺服器頭像（圓角半徑 16px），懸停時平滑轉為圓形
- 聊天列間距緊湊，側邊面板留白充裕
- 狀態圓點：綠色代表上線、黃色代表閒置、紅色代表請勿打擾、灰色代表離線
- 以低透明度細微米白色繪製的 1px 像素對齊分隔線
2. 色彩調色盤與角色定位
主色
- Blurple（
#5865f2）：品牌主色、主要 CTA、提及高亮。 - Blurple Hover（
#4752c4）：Blurple 的懸停／啟用狀態。 - Blurple Soft（
#7289da）：舊版 Blurple，行銷素材中的次要強調色。
介面層（暗色主題——預設）
- Background Tertiary（
#1e1f22）：伺服器列表軌道、最深的背景。 - Background Secondary（
#2b2d31）：頻道側邊欄、設定側邊欄。 - Background Primary（
#313338）：聊天介面、訊息欄。 - Background Floating（
#111214）：浮動彈出層、工具提示、自動補全。 - Background Modifier Hover（
rgba(78, 80, 88, 0.3)）：列上的懸停覆蓋層。 - Background Modifier Selected（
rgba(78, 80, 88, 0.6)）：已選取的列。
介面層（淺色主題）
- Light Bg Primary（
#ffffff）：淺色主題的聊天介面。 - Light Bg Secondary（
#f2f3f5）：淺色主題的側邊欄。 - Light Bg Tertiary（
#e3e5e8）：最深的淺色介面層。
文字
- Header Primary（
#f2f3f5）：暗色主題中的頻道標題、對話框標題。 - Header Secondary（
#b5bac1）：較低調的標題。 - Text Normal（
#dbdee1）：暗色主題的內文——比純白略帶冷調。 - Text Muted（
#949ba4）：時間戳記、伺服器名稱、次要元資料。 - Text Link（
#00a8fc）：訊息中的超連結——天空藍，與 Blurple 有明確區隔。 - Channels Default（
#80848e）：側邊欄中未啟用的頻道名稱。
狀態與語意色
- Status Online（
#23a55a）：上線圓點、成功狀態。 - Status Idle（
#f0b232）：閒置圓點、離開狀態。 - Status DND（
#f23f43）：請勿打擾，同時作為破壞性動作的紅色。 - Status Streaming（
#593695）：「直播中」紫色。 - Status Offline（
#80848e）：離線灰色。 - Mention Highlight（
rgba(88, 101, 242, 0.1)）：@提及列上的柔和 Blurple 底色。
邊框與分隔線
- Background Modifier Accent（
rgba(255, 255, 255, 0.06)）：暗色主題的標準分隔線。 - Border Subtle（
#3f4147）：卡片的實線分隔線。
3. 字型規則
字型家族
- 內文／UI／標題：
gg sans，備用字型："Helvetica Neue", Helvetica, Arial, sans-serif - 展示用（舊版／Whitney）：
Whitney，備用字型：gg sans - 程式碼／等寬：
"gg mono"，備用字型：Consolas, Andale Mono, Courier New, Courier, monospace
層級
| 角色 | 字型 | 大小 | 字重 | 行高 | 字距 | 備註 |
|---|---|---|---|---|---|---|
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | 行銷主視覺 |
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | 設定／個人資料標題 |
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | #general、頻道標題 |
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | 標準聊天文字 |
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | 訊息作者 |
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | 「今天 下午 4:32」 |
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | 頻道列表各列 |
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | 伺服器標題 |
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | 狀態文字、已編輯標記 |
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | 行內 code |
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | 三反引號區塊 |
原則
- 友善的幾何感：gg sans 以圓潤字形末端取代 Whitney，適用於 a/g/s 等字母——品牌希望傳遞溫度，同時不犧牲易讀性。
- 以字重對比取代色彩對比：層級來自 400→500→600→700→800 的字重遞進；介面層保持中性。
- 內文 16px：聊天訊息不縮小至 16px 以下。密度感來自行高（1.375），而非字級大小。
4. 元件樣式
按鈕
主要按鈕
- 背景：
#5865f2 - 文字：
#ffffff - 內距：8px 16px
- 圓角：4px
- 懸停：
#4752c4 - 用途：主要 CTA、「繼續」、「加入伺服器」
次要按鈕
- 背景：
#4e5058 - 文字：
#ffffff - 內距：8px 16px
- 圓角：4px
- 懸停：
#6d6f78
第三層級／低調（連結樣式）
- 背景：transparent
- 文字：
#dbdee1 - 懸停：文字加底線，背景不變
危險按鈕
- 背景：
#da373c - 文字：
#ffffff - 懸停：
#a12d2f
輸入框
- 背景：
#1e1f22 - 文字：
#dbdee1 - 邊框：1px solid
#1e1f22 - 圓角：4px
- 內距：10px 12px
- 焦點：邊框
#5865f2
伺服器頭像
- 尺寸：48×48px
- 圓角：預設 16px（圓角方形）；懸停與啟用狀態時過渡為 50%。
- 啟用狀態：圖示欄左側邊緣有 4px 白色膠囊形指示條。
狀態圓點
- 尺寸：10×10px
- 邊框：3px solid background-tertiary（製造「缺口」效果）
- 位置：頭像右下角。
卡片／嵌入內容
- 背景：
#2b2d31（暗色）或#f2f3f5（淺色） - 左側邊框：4px solid 嵌入強調色。
- 圓角：4px
- 內距：8px 16px
提及膠囊
- 背景：
rgba(88, 101, 242, 0.3) - 文字：
#c9cdfb - 內距：0 2px
- 圓角：3px
5. 間距與版型
- 基礎單位：4px。比例：4、8、12、16、20、24、32、40。
- 伺服器軌道：寬度 72px，固定。
- 頻道側邊欄：寬度 240px。
- 成員列表：桌面版寬度 240px。
- 聊天欄：彈性寬度，最小 380px。
6. 動態效果
- 時長：懸停 200ms；頭像圓形變形 350ms；工具提示淡入 80ms。
- 緩動函數：
cubic-bezier(0.215, 0.61, 0.355, 1)用於頭像變形（快速啟動後緩慢定位）。 - 通知脈衝：未讀提及指示器以 1.4s ease-in-out infinite 循環。
7. 使用規範
- 暗色外殼、緊湊的資訊密度與 Blurple 的操作層級必須一起保留；將 Blurple 用於淺色行銷版型會破壞 Discord 產品的整體感。
- 導覽密集的介面應以軌道、側邊欄與聊天欄為結構核心，而非使用孤立的裝飾性卡片。
- 在呈現人員、伺服器或即時狀態時，請使用圓角方形頭像與狀態圓點的視覺語言。