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。
364 lines
12 KiB
Markdown
364 lines
12 KiB
Markdown
# 受 Slack 啟發的設計系統
|
||
|
||
> Category: 生產力與 SaaS
|
||
> 職場通訊平台。以深茄紫為主色，多色調 Logo 調色板，明亮介面搭配深色側邊欄，溫暖而親切。
|
||
|
||
## 1. 視覺主題與氛圍
|
||
|
||
Slack 的品牌形象建立在「工作也可以充滿人情味，甚至有點趣味」的理念之上。標準介面是**明亮**的——白色內容區搭配深茄紫（`#4A154B`）側邊欄——與深色優先工具形成反差。這種對比是刻意為之：側邊欄是沉穩、始終存在的導航錨點，而內容區則明亮開闊。
|
||
|
||
Logo 調色板——藍、綠、黃、紅——主要出現在井號圖示和行銷場景中，而非散落於整個 UI。在產品本身中，Slack 使用克制、專業的配色系統，以茄紫色作為唯一的品牌錨點。
|
||
|
||
**核心特徵：**
|
||
- 明亮優先的內容介面：白色 `#FFFFFF` 與近白色 `#F8F8F8`
|
||
- 深茄紫 `#4A154B` 側邊欄——品牌最具辨識度的 UI 元素
|
||
- 四種 Logo 強調色（藍、綠、黃、紅）僅少量用作高亮
|
||
- 標題使用 Larsseit（行銷場景），UI 使用系統無襯線字體
|
||
- 圓潤但不卡通：大多數元件圓角為 4–8px
|
||
- 緊湊而透氣：訊息行緊密，討論串層級清晰
|
||
- 溫暖對話的語調——表情符號、回應和插圖是一等公民
|
||
|
||
---
|
||
|
||
## 2. 色彩規範與用途
|
||
|
||
### 品牌主色
|
||
| 變數 | Hex | 用途 |
|
||
|---|---|---|
|
||
| `--color-aubergine` | `#4A154B` | 側邊欄背景，品牌主色 |
|
||
| `--color-aubergine-dark` | `#350d36` | 茄紫介面上的懸停狀態 |
|
||
| `--color-aubergine-light` | `#611f69` | 側邊欄活躍項高亮 |
|
||
|
||
### Logo 強調色（少量使用——僅用於高亮、圖示、行銷）
|
||
| 變數 | Hex | 名稱 | 用途 |
|
||
|---|---|---|---|
|
||
| `--color-blue` | `#36C5F0` | 天藍 | 頻道圖示、連結、資訊狀態 |
|
||
| `--color-green` | `#2EB67D` | 青綠 | 線上狀態、成功狀態 |
|
||
| `--color-yellow` | `#ECB22E` | 金黃 | 離開狀態、警告、高亮 |
|
||
| `--color-red` | `#E01E5A` | 寶石紅 | 通知、錯誤、提及徽章 |
|
||
|
||
### 介面背景色
|
||
| 變數 | Hex | 用途 |
|
||
|---|---|---|
|
||
| `--bg-primary` | `#FFFFFF` | 主訊息區、彈窗 |
|
||
| `--bg-secondary` | `#F8F8F8` | 討論串面板、次級介面 |
|
||
| `--bg-tertiary` | `#F1F1F1` | 輸入框背景、懸停狀態 |
|
||
| `--bg-sidebar` | `#4A154B` | 左側邊欄（茄紫色） |
|
||
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | 側邊欄項懸停 |
|
||
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | 活躍側邊欄項 |
|
||
| `--bg-message-hover` | `#F8F8F8` | 訊息行懸停 |
|
||
|
||
### 文字顏色
|
||
| 變數 | Hex | 用途 |
|
||
|---|---|---|
|
||
| `--text-primary` | `#1D1C1D` | 主要正文（近黑色） |
|
||
| `--text-secondary` | `#616061` | 時間戳記、靜音標籤 |
|
||
| `--text-sidebar` | `rgba(255,255,255,0.9)` | 側邊欄頻道名稱 |
|
||
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | 側邊欄未啟用項 |
|
||
| `--text-link` | `#1264A3` | 訊息內聯連結 |
|
||
| `--text-mention` | `#1264A3` | @提及文字顏色 |
|
||
|
||
### 語意色
|
||
| 變數 | Hex | 用途 |
|
||
|---|---|---|
|
||
| `--color-success` | `#2EB67D` | 成功提示、積極狀態 |
|
||
| `--color-warning` | `#ECB22E` | 警告狀態 |
|
||
| `--color-danger` | `#E01E5A` | 錯誤狀態、破壞性操作 |
|
||
| `--color-info` | `#36C5F0` | 資訊性高亮 |
|
||
|
||
### 邊框與分隔線
|
||
| 變數 | Hex | 用途 |
|
||
|---|---|---|
|
||
| `--border-default` | `#DDDDDD` | 標準分隔線、卡片邊框 |
|
||
| `--border-subtle` | `#F1F1F1` | 行間細微分隔線 |
|
||
| `--border-focus` | `#1264A3` | 焦點環顏色 |
|
||
|
||
---
|
||
|
||
## 3. 字體排版規則
|
||
|
||
### 字體
|
||
| 用途 | 官方字體 | 網頁後備 |
|
||
|---|---|---|
|
||
| 展示 / 行銷標題 | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
|
||
| UI / 正文 / 框架 | Slack Lato（定製） | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
|
||
| 程式碼 / 等寬 | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
|
||
|
||
> Slack 行銷標題使用 **Larsseit**，產品內 UI 使用定製版 Lato。網頁使用時，`system-ui` 是最安全的後備方案。
|
||
|
||
### 字號層級
|
||
|
||
| 層級 | 大小 | 字重 | 行高 | 字間距 | 用途 |
|
||
|---|---|---|---|---|---|
|
||
| Display XL | 48px | 800 | 1.1 | -1px | 行銷主視覺標題 |
|
||
| Display L | 36px | 700 | 1.15 | -0.5px | 區塊主視覺 |
|
||
| Heading 1 | 28px | 700 | 1.25 | normal | 彈窗標題、頁面標題 |
|
||
| Heading 2 | 22px | 700 | 1.3 | normal | 卡片標題、設定區塊 |
|
||
| Heading 3 | 18px | 700 | 1.35 | normal | 子區塊標題 |
|
||
| Body L | 16px | 400 | 1.5 | normal | 訊息文字、說明 |
|
||
| Body | 15px | 400 | 1.46667 | normal | 預設 UI 文字（Slack 基礎字號） |
|
||
| Body SM | 13px | 400 | 1.38462 | normal | 次要元資料 |
|
||
| Caption | 12px | 400 | 1.33 | normal | 時間戳記、提示 |
|
||
| Code | 12px | 400 | 1.5 | normal | 行內程式碼、程式碼區塊 |
|
||
|
||
### 排版規則
|
||
- Slack 基礎正文字號為 **15px**——比 16px 略小，以提高密度
|
||
- 未讀頻道：字重 700——粗體是主要的未讀指示器
|
||
- 時間戳記：12px `--text-secondary`，僅懸停時顯示
|
||
- 程式碼區塊：背景 `#F8F8F8`，邊框 `1px solid #DDDDDD`，圓角 4px
|
||
- 不使用 12px 以下的字號
|
||
- 行銷標題：大展示尺寸使用字間距 `-1px`
|
||
|
||
---
|
||
|
||
## 4. 元件樣式
|
||
|
||
### 按鈕
|
||
|
||
```css
|
||
/* Primary */
|
||
.btn-primary {
|
||
background: #4A154B;
|
||
color: #FFFFFF;
|
||
border-radius: 4px;
|
||
padding: 0 16px;
|
||
height: 36px;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
border: none;
|
||
}
|
||
.btn-primary:hover { background: #611f69; }
|
||
|
||
/* Secondary */
|
||
.btn-secondary {
|
||
background: #FFFFFF;
|
||
color: #1D1C1D;
|
||
border: 1px solid #DDDDDD;
|
||
border-radius: 4px;
|
||
padding: 0 16px;
|
||
height: 36px;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
}
|
||
.btn-secondary:hover { background: #F8F8F8; }
|
||
|
||
/* Danger */
|
||
.btn-danger {
|
||
background: #E01E5A;
|
||
color: #FFFFFF;
|
||
border-radius: 4px;
|
||
}
|
||
.btn-danger:hover { background: #B3114A; }
|
||
```
|
||
|
||
### 輸入框
|
||
```css
|
||
.input {
|
||
background: #FFFFFF;
|
||
border: 1px solid #DDDDDD;
|
||
border-radius: 4px;
|
||
color: #1D1C1D;
|
||
font-size: 15px;
|
||
padding: 8px 12px;
|
||
height: 36px;
|
||
}
|
||
.input:focus {
|
||
border-color: #1264A3;
|
||
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
|
||
outline: none;
|
||
}
|
||
```
|
||
|
||
### 側邊欄頻道項
|
||
```css
|
||
.channel-item {
|
||
height: 28px;
|
||
padding: 0 16px;
|
||
border-radius: 6px;
|
||
color: rgba(255,255,255,0.7);
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
}
|
||
.channel-item:hover {
|
||
background: rgba(255,255,255,0.1);
|
||
color: #FFFFFF;
|
||
}
|
||
.channel-item.active {
|
||
background: rgba(255,255,255,0.2);
|
||
color: #FFFFFF;
|
||
}
|
||
.channel-item.unread {
|
||
color: #FFFFFF;
|
||
font-weight: 700;
|
||
}
|
||
```
|
||
|
||
### 未讀徽章
|
||
```css
|
||
.badge {
|
||
background: #E01E5A;
|
||
color: #FFFFFF;
|
||
border-radius: 8px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
padding: 1px 6px;
|
||
min-width: 18px;
|
||
}
|
||
```
|
||
|
||
### 訊息附件 / 卡片
|
||
```css
|
||
.attachment {
|
||
border-left: 4px solid #DDDDDD;
|
||
background: #F8F8F8;
|
||
border-radius: 0 4px 4px 0;
|
||
padding: 8px 12px;
|
||
margin: 4px 0;
|
||
}
|
||
```
|
||
|
||
### 回應
|
||
```css
|
||
.reaction {
|
||
border: 1px solid #DDDDDD;
|
||
border-radius: 24px;
|
||
background: #F8F8F8;
|
||
padding: 2px 8px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
}
|
||
.reaction:hover { background: #F1F1F1; }
|
||
.reaction.active {
|
||
background: rgba(18,100,163,0.1);
|
||
border-color: #1264A3;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 5. 版面原則
|
||
|
||
### 三欄版面
|
||
```
|
||
┌──────────────┬──────────────────────────────┬─────────────┐
|
||
│ Sidebar │ Message Area │ Thread │
|
||
│ (240px) │ (flex: 1) │ (400px) │
|
||
│ #4A154B │ #FFFFFF │ optional │
|
||
└──────────────┴──────────────────────────────┴─────────────┘
|
||
```
|
||
|
||
### 間距系統（基礎單位 4px）
|
||
| 變數 | 數值 | 用途 |
|
||
|---|---|---|
|
||
| `--space-1` | 4px | 緊湊間隙 |
|
||
| `--space-2` | 8px | 元件內邊距 |
|
||
| `--space-3` | 12px | 輸入框內邊距 |
|
||
| `--space-4` | 16px | 標準內邊距 |
|
||
| `--space-6` | 24px | 卡片內邊距 |
|
||
| `--space-8` | 32px | 區塊間距 |
|
||
|
||
### 側邊欄結構
|
||
```
|
||
[工作區名稱 ▼]
|
||
────────────────────
|
||
Threads
|
||
All DMs
|
||
Drafts & Sent
|
||
────────────────────
|
||
▼ Channels
|
||
# general
|
||
# random
|
||
# design ● (unread)
|
||
────────────────────
|
||
▼ Direct Messages
|
||
John Doe
|
||
Jane Smith
|
||
```
|
||
|
||
### 訊息編輯器
|
||
- 固定在訊息區底部
|
||
- `border: 1px solid #DDDDDD`，`border-radius: 8px`，`margin: 0 16px 16px`
|
||
- 工具列：表情符號、附件、格式化、傳送按鈕
|
||
|
||
---
|
||
|
||
## 6. 深度與層級
|
||
|
||
Slack 在明亮介面上使用輕柔陰影：
|
||
|
||
| 層級 | 用途 | 陰影 |
|
||
|---|---|---|
|
||
| 扁平 | 訊息行、側邊欄項 | none |
|
||
| 低 | 卡片、輸入框 | `0 1px 3px rgba(0,0,0,0.08)` |
|
||
| 中 | 下拉選單、彈出層 | `0 4px 12px rgba(0,0,0,0.12)` |
|
||
| 高 | 強制回應視窗、對話框 | `0 8px 24px rgba(0,0,0,0.15)` |
|
||
| 遮罩 | 強制回應背景遮罩 | `rgba(0,0,0,0.5)` |
|
||
|
||
---
|
||
|
||
## 7. 應該與不應該
|
||
|
||
### ✅ 應該
|
||
- 側邊欄使用茄紫色 `#4A154B`——這是 Slack 最標誌性的 UI 元素
|
||
- 保持主內容區白色和明亮
|
||
- 所有正文使用 `#1D1C1D`（近黑色），而非純黑
|
||
- 用粗體頻道名稱表示未讀狀態——字重是指示器
|
||
- 四種強調色僅用於語意角色（成功、警告、危險、資訊）
|
||
- 訊息附件和嵌入內容使用 `border-left: 4px`
|
||
- 僅在懸停時顯示時間戳記
|
||
- 連結和焦點狀態使用 `#1264A3`
|
||
- 側邊欄項保持緊湊：高度 28px，圓角 6px
|
||
|
||
### ❌ 不應該
|
||
- 不要使用深色主內容區——Slack 是明亮優先的
|
||
- 不要將藍/綠/黃/紅作為裝飾性強調色散落各處
|
||
- 不要使用純黑 `#000000` 作為文字顏色
|
||
- 不要使用氣泡——訊息是扁平行
|
||
- 不要將按鈕做成大圓角——4px 是標準
|
||
- 不要永久顯示時間戳記
|
||
- 不要將頻道名稱全大寫
|
||
- 不要使用 12px 以下的字號
|
||
|
||
---
|
||
|
||
## 8. 響應式行為
|
||
|
||
### 斷點
|
||
| 斷點 | 寬度 | 版面 |
|
||
|---|---|---|
|
||
| 行動裝置 | < 768px | 單面板，側邊欄作為左抽屜 |
|
||
| 平板 | 768–1024px | 側邊欄 + 僅訊息區 |
|
||
| 桌機 | > 1024px | 完整三欄版面 |
|
||
|
||
### 行動端適配
|
||
- 側邊欄：左抽屜，向右滑動開啟
|
||
- 底部標籤列：首頁、私訊、動態、我
|
||
- 討論串面板：全螢幕覆蓋層
|
||
- 編輯器：固定在鍵盤上方
|
||
- 頻道清單項：44px 觸控目標高度
|
||
- 行動端保留茄紫色頂部標題列
|
||
|
||
---
|
||
|
||
## 9. Agent 提示指南
|
||
|
||
產生 Slack 風格設計時，遵循以下方法：
|
||
|
||
**顏色應用：**
|
||
> 將 `background: #FFFFFF` 設為主畫布。側邊欄使用 `#4A154B`（茄紫色）。所有主要文字使用 `#1D1C1D`。連結和焦點環使用 `#1264A3`。四種 Logo 顏色——`#36C5F0`、`#2EB67D`、`#ECB22E`、`#E01E5A`——僅作語意用途：資訊、成功、警告、危險。
|
||
|
||
**排版：**
|
||
> 所有 UI 使用 `system-ui, -apple-system, sans-serif`。基礎字號為 15px。未讀頻道：字重 700。正文：字重 400。時間戳記：12px `#616061`，僅懸停顯示。程式碼：`Monaco, Menlo, monospace`，12px，背景 `#F8F8F8`。
|
||
|
||
**版面：**
|
||
> 三欄：240px 茄紫色側邊欄 + 彈性白色訊息區 + 可選 400px 討論串面板。側邊欄項：高度 28px，圓角 6px，未讀時加粗。編輯器：固定底部，`border: 1px solid #DDDDDD`，`border-radius: 8px`。
|
||
|
||
**元件：**
|
||
> 按鈕：圓角 4px，高度 36px，茄紫色主按鈕。輸入框：`1px solid #DDDDDD` 邊框，`#1264A3` 焦點環。訊息行：扁平，無氣泡，36px 圓形頭像。回應：膠囊形 `border: 1px solid #DDDDDD`，`border-radius: 24px`。
|
||
|
||
**語調：**
|
||
> Slack 是溫暖、專業且充滿人情味的。空狀態使用友善插圖。行動呼籲直接明確：「Send message」、「Get started」。錯誤訊息清晰且有幫助。絕不令人感到警覺。
|
||
|
||
**需要避免的反模式：**
|
||
> 不要深色內容區。不要氣泡。不要純黑文字。不要散落的多色強調。不要全大寫頻道名稱。不要低於 12px 的字號。不要大圓角按鈕。
|