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。
270 lines
14 KiB
Markdown
270 lines
14 KiB
Markdown
# Design System Inspired by Cohere
|
||
|
||
> Category: AI 與大型語言模型
|
||
> 企業級 AI 平台。鮮豔的漸層色彩，以資料儀表板為主的美學風格。
|
||
|
||
## 1. 視覺主題與氛圍
|
||
|
||
Cohere 的介面是一套精緻的企業指揮台——自信、簡潔，讓 AI 呈現出嚴肅基礎設施的質感，而非消費性玩具。整個體驗建立在明亮的白色畫布上，內容以圓角慷慨的卡片（22px 圓角半徑）加以組織，形成有機、雲朵般的包覆語言。這是一個面向 CTO 與企業架構師的網站：專業而不冷漠，精緻而不令人生畏。
|
||
|
||
這套設計語言以雙字體系統橋接兩個世界：CohereText 是一款帶有緊縮字距的客製顯示襯線體，賦予標題技術宣言般的份量；Unica77 Cohere Web 則以幾何的瑞士精確度處理所有內文與 UI 文字。這種襯線體與無襯線體的搭配，造就了「自信權威遇上工程清晰」的個性，完美體現企業 AI 平台的特質。
|
||
|
||
色彩的運用極為克制——介面幾乎全為黑白，輔以冷灰色邊框（`#d9d9dd`、`#e5e7eb`）。紫羅蘭色僅出現在攝影主視覺帶、漸層區塊，以及標示懸停與焦點狀態的互動藍（`#1863dc`）中。這種色彩克制意味著，當色彩確實出現時——無論是在產品截圖、企業攝影，還是深紫色區塊中——都能帶來最大的視覺重量。
|
||
|
||
**主要特徵：**
|
||
- 明亮的白色畫布搭配冷灰色包覆邊框
|
||
- 22px 特色圓角半徑——獨特的「Cohere 卡片」圓潤感
|
||
- 雙客製字體：CohereText（顯示襯線體）+ Unica77（內文無襯線體）
|
||
- 企業級色彩克制：黑色、白色、冷灰色，最少量的紫藍色強調
|
||
- 深紫色/紫羅蘭色主視覺區塊，提供強烈的對比效果
|
||
- 幽靈/透明按鈕，懸停時轉為藍色
|
||
- 展示多元真實場景的企業攝影
|
||
- CohereMono 用於程式碼與技術標籤，搭配大寫轉換
|
||
|
||
## 2. 色彩調色盤與角色
|
||
|
||
### 主色
|
||
- **Cohere Black**（`#000000`）：主要標題文字及最高強調元素。
|
||
- **Near Black**（`#212121`）：標準內文連結色——比純黑稍柔和。
|
||
- **Deep Dark**（`#17171c`）：帶藍調的近黑色，用於導覽列與深色區塊文字。
|
||
|
||
### 輔助色與強調色
|
||
- **Interaction Blue**（`#1863dc`）：主要互動強調色——出現在按鈕懸停、焦點狀態與使用中連結上，是唯一的彩色操作色。
|
||
- **Ring Blue**（`#4c6ee6`，50% 不透明度）：鍵盤焦點指示器的 Tailwind ring 顏色。
|
||
- **Focus Purple**（`#9b60aa`）：輸入框焦點邊框色——一種柔和的紫羅蘭色。
|
||
|
||
### 表面與背景
|
||
- **Pure White**（`#ffffff`）：主要頁面背景與卡片表面。
|
||
- **Snow**（`#fafafa`）：微妙的高層表面與淺色區段背景。
|
||
- **Lightest Gray**（`#f2f2f2`）：卡片邊框與最柔和的包覆線條。
|
||
|
||
### 中性色與文字
|
||
- **Muted Slate**（`#93939f`）：去強調的頁尾連結與第三層文字——帶有輕微藍紫調的冷灰色。
|
||
- **Border Cool**（`#d9d9dd`）：標準區段與列表項目邊框——帶有輕微紫調的冷灰色。
|
||
- **Border Light**（`#e5e7eb`）：較淺的邊框變體——Tailwind 標準 gray-200。
|
||
|
||
### 漸層系統
|
||
- **紫羅蘭主視覺帶**：深紫色漸層區塊，在白色畫布上形成強烈對比。這些區塊以全寬帶狀呈現，容納產品截圖與重點訊息。
|
||
- **深色頁尾漸層**：頁面從深紫色/炭灰色漸變至黑色頁尾，創造「黃昏」效果。
|
||
|
||
## 3. 字體排版規則
|
||
|
||
### 字體家族
|
||
- **顯示**：`CohereText`，備用字體：`Space Grotesk, Inter, ui-sans-serif, system-ui`
|
||
- **內文 / UI**：`Unica77 Cohere Web`，備用字體：`Inter, Arial, ui-sans-serif, system-ui`
|
||
- **程式碼**：`CohereMono`，備用字體：`Arial, ui-sans-serif, system-ui`
|
||
- **圖示**：`CohereIconDefault`（客製圖示字體）
|
||
|
||
### 層級結構
|
||
|
||
| 角色 | 字體 | 大小 | 字重 | 行高 | 字距 | 備注 |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| 顯示 / 主視覺 | CohereText | 72px (4.5rem) | 400 | 1.00（緊縮） | -1.44px | 最大衝擊力，襯線體權威感 |
|
||
| 次要顯示 | CohereText | 60px (3.75rem) | 400 | 1.00（緊縮） | -1.2px | 大型區段標題 |
|
||
| 區段標題 | Unica77 | 48px (3rem) | 400 | 1.20（緊縮） | -0.48px | 功能區段標題 |
|
||
| 次標題 | Unica77 | 32px (2rem) | 400 | 1.20（緊縮） | -0.32px | 卡片標題、功能名稱 |
|
||
| 功能標題 | Unica77 | 24px (1.5rem) | 400 | 1.30 | 正常 | 較小的區段標題 |
|
||
| 大型內文 | Unica77 | 18px (1.13rem) | 400 | 1.40 | 正常 | 導言段落 |
|
||
| 內文 / 按鈕 | Unica77 | 16px (1rem) | 400 | 1.50 | 正常 | 標準內文、按鈕文字 |
|
||
| 中型按鈕 | Unica77 | 14px (0.88rem) | 500 | 1.71（寬鬆） | 正常 | 較小按鈕、強調標籤 |
|
||
| 說明文字 | Unica77 | 14px (0.88rem) | 400 | 1.40 | 正常 | 元資料、描述文字 |
|
||
| 大寫標籤 | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | 大寫區段標籤 |
|
||
| 小型 | Unica77 | 12px (0.75rem) | 400 | 1.40 | 正常 | 最小文字、頁尾連結 |
|
||
| 微型程式碼 | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | 微小大寫程式碼標籤 |
|
||
|
||
### 原則
|
||
- **襯線體用於宣示，無襯線體用於功能**：CohereText 在顯示尺寸承載品牌聲音——其襯線末端賦予標題已出版研究的權威感。Unica77 以瑞士幾何中性風格處理所有功能性文字。
|
||
- **大尺寸使用負字距**：CohereText 在 60–72px 時使用 -1.2px 至 -1.44px 的字距，形成密集有力的文字區塊。
|
||
- **單一內文字重**：幾乎所有 Unica77 用法皆為 400 字重。500 字重僅出現在小型按鈕強調上。系統依靠尺寸與間距，而非字重對比。
|
||
- **大寫程式碼標籤**：CohereMono 以大寫搭配正字距（0.16–0.28px）用於技術標籤與區段標記。
|
||
|
||
## 4. 元件樣式
|
||
|
||
### 按鈕
|
||
|
||
**幽靈 / 透明**
|
||
- 背景：透明（`rgba(255, 255, 255, 0)`）
|
||
- 文字：Cohere Black（`#000000`）
|
||
- 無可見邊框
|
||
- 懸停：文字轉為 Interaction Blue（`#1863dc`），不透明度 0.8
|
||
- 焦點：Interaction Blue 的 2px 實心外框
|
||
- 主要按鈕樣式——在互動前不可見
|
||
|
||
**深色實心**
|
||
- 背景：深色/黑色
|
||
- 文字：Pure White
|
||
- 用於淺色表面的 CTA
|
||
- 藥丸形或標準圓角
|
||
|
||
**外框**
|
||
- 以邊框為主的包覆
|
||
- 用於次要操作
|
||
|
||
### 卡片與容器
|
||
- 背景：Pure White（`#ffffff`）
|
||
- 邊框：微妙卡片使用 Lightest Gray 細實線（`1px solid #f2f2f2`）；強調卡片使用 Cool Border（`#d9d9dd`）
|
||
- 圓角：**22px**——主要卡片、圖片與對話框容器的特色 Cohere 圓角。較小元素另有 4px、8px、16px、20px
|
||
- 陰影：極少——Cohere 依靠背景色與邊框而非陰影
|
||
- 特殊：`0px 0px 22px 22px` 圓角（僅下方圓角）用於區段容器
|
||
- 對話框：8px 圓角用於 modal/dialog 框
|
||
|
||
### 輸入框與表單
|
||
- 文字：深色輸入框上為白色，淺色輸入框上為黑色
|
||
- 焦點邊框：Focus Purple（`#9b60aa`），`1px solid`
|
||
- 焦點陰影：紅色 ring（`rgb(179, 0, 0) 0px 0px 0px 2px`）——可能用於錯誤狀態指示
|
||
- 焦點外框：Interaction Blue 實心 2px
|
||
|
||
### 導覽列
|
||
- 在白色或深色背景上乾淨的水平導覽
|
||
- Logo：Cohere wordmark（客製 SVG）
|
||
- 連結：16px Unica77 深色文字
|
||
- CTA：深色實心按鈕
|
||
- 行動裝置：折疊為漢堡選單
|
||
|
||
### 圖片處理
|
||
- 展示多元主題與環境的企業攝影
|
||
- 戲劇性區段使用帶紫色調的主視覺攝影
|
||
- 深色表面上的產品 UI 截圖
|
||
- 圖片使用 22px 圓角，與卡片系統一致
|
||
- 全寬深紫色漸層區段
|
||
|
||
### 特色元件
|
||
|
||
**22px 卡片系統**
|
||
- 22px 邊框圓角是 Cohere 的視覺簽名
|
||
- 所有主要卡片、圖片與容器皆使用此圓角
|
||
- 創造出雲朵般的有機柔軟感，有別於典型的 8–12px
|
||
|
||
**企業信任條**
|
||
- 以水平列表展示公司 Logo
|
||
- 展現企業採用程度
|
||
- 乾淨的單色 Logo 處理
|
||
|
||
**紫色主視覺帶**
|
||
- 容納產品展示的全寬深紫色區段
|
||
- 在白色頁面流程中製造強烈的視覺斷點
|
||
- 產品截圖浮於紫色環境之中
|
||
|
||
**大寫程式碼標籤**
|
||
- CohereMono 以大寫搭配正字距
|
||
- 用作區段標記與分類標籤
|
||
- 形成技術感、結構化的資訊層級
|
||
|
||
## 5. 版面原則
|
||
|
||
### 間距系統
|
||
- 基礎單位：8px
|
||
- 刻度：2px、6px、8px、10px、12px、16px、20px、22px、24px、28px、32px、36px、40px、56px、60px
|
||
- 按鈕 padding 依變體而異
|
||
- 卡片內部 padding：約 24–32px
|
||
- 區段垂直間距：寬裕（區段之間 56–60px）
|
||
|
||
### 格線與容器
|
||
- 最大容器寬度：最寬可達 2560px，並依比例響應縮放
|
||
- 主視覺：置中搭配戲劇性排版
|
||
- 功能區段：多欄卡片格線
|
||
- 企業區段：全寬紫色帶
|
||
- 偵測到 26 個斷點——極為精細的響應式系統
|
||
|
||
### 留白哲學
|
||
- **企業清晰度**：每個區段以充足的呼吸空間呈現一個清晰的主張。
|
||
- **攝影為主角**：大型攝影區段提供視覺趣味，無需裝飾性設計元素。
|
||
- **卡片分組**：相關內容被組織進 22px 圓角卡片，形成自然的資訊群組。
|
||
|
||
### 邊框圓角刻度
|
||
- 銳利（4px）：導覽元素、小型標籤、分頁
|
||
- 舒適（8px）：對話框、次要容器、小型卡片
|
||
- 寬裕（16px）：精選容器、中型卡片
|
||
- 大型（20px）：大型功能卡片
|
||
- 特色（22px）：主要卡片、主視覺圖片、主容器——THE Cohere 圓角
|
||
- 藥丸（9999px）：按鈕、標籤、狀態指示器
|
||
|
||
## 6. 深度與層次
|
||
|
||
| 層級 | 處理方式 | 用途 |
|
||
|-------|-----------|-----|
|
||
| 平面（Level 0） | 無陰影，無邊框 | 頁面背景、文字區塊 |
|
||
| 有框（Level 1） | `1px solid #f2f2f2` 或 `#d9d9dd` | 標準卡片、列表分隔線 |
|
||
| 紫色帶（Level 2） | 全寬深紫色背景 | 主視覺區段、功能展示 |
|
||
|
||
**陰影哲學**：Cohere 幾乎不使用陰影。深度通過**背景色對比**（紫色帶上的白色卡片、snow 表面上的白色）、**邊框包覆**（冷灰色邊框），以及**明暗區段交替**這種戲劇性手法來傳達。當元素需要層次感時，是透過白色置於深色上而非投射陰影來達成的。
|
||
|
||
## 7. 應做與不應做
|
||
|
||
### 應做
|
||
- 所有主要卡片與容器使用 22px 邊框圓角——這是視覺簽名
|
||
- 顯示標題（72px、60px）使用 CohereText，搭配負字距
|
||
- 所有內文與 UI 文字使用 Unica77，字重 400
|
||
- 保持黑白調色盤搭配冷灰色邊框
|
||
- Interaction Blue（#1863dc）僅用於懸停/焦點互動狀態
|
||
- 深紫色區段用於強烈的視覺斷點與產品展示
|
||
- CohereMono 的區段標籤使用大寫加正字距
|
||
- 維持適合企業的攝影風格，展示多元主題
|
||
|
||
### 不應做
|
||
- 主要卡片不使用 22px 以外的邊框圓角——特色圓角至關重要
|
||
- 不引入暖色調——調色盤嚴格為冷色系
|
||
- 不使用重陰影——深度來自色彩對比與邊框
|
||
- 內文不使用粗體（700+）字重——範圍為 400–500
|
||
- 不跳過襯線體/無襯線體層級——CohereText 用於標題，Unica77 用於內文
|
||
- 紫色不作為卡片表面色——紫色保留給全寬區段
|
||
- 區段間距不低於 40px——企業版面需要呼吸空間
|
||
- 按鈕預設不使用裝飾——幽靈/透明是基本狀態
|
||
|
||
## 8. 響應式行為
|
||
|
||
### 斷點
|
||
| 名稱 | 寬度 | 主要變化 |
|
||
|------|-------|-------------|
|
||
| 小型手機 | <425px | 緊湊版面，最少間距 |
|
||
| 手機 | 425–640px | 單欄，堆疊卡片 |
|
||
| 大型手機 | 640–768px | 微幅間距調整 |
|
||
| 平板 | 768–1024px | 開始使用雙欄格線 |
|
||
| 桌面 | 1024–1440px | 完整多欄版面 |
|
||
| 大型桌面 | 1440–2560px | 最大容器寬度 |
|
||
|
||
*偵測到 26 個斷點——資料集中響應式設計最精細的網站之一。*
|
||
|
||
### 觸控目標
|
||
- 按鈕尺寸足以適應觸控互動
|
||
- 導覽連結間距舒適
|
||
- 卡片表面作為觸控目標
|
||
|
||
### 折疊策略
|
||
- **導覽列**：完整導覽列折疊為漢堡選單
|
||
- **功能格線**：多欄 → 雙欄 → 單欄
|
||
- **主視覺文字**：72px → 48px → 32px 漸進縮放
|
||
- **紫色區段**：維持全寬，內容堆疊
|
||
- **卡片格線**：3 → 2 → 1 欄
|
||
|
||
### 圖片行為
|
||
- 攝影在 22px 圓角容器內等比例縮放
|
||
- 產品截圖維持長寬比
|
||
- 紫色區段背景等比例縮放
|
||
|
||
## 9. Agent 提示指南
|
||
|
||
### 快速色彩參考
|
||
- 主要文字：「Cohere Black (#000000)」
|
||
- 頁面背景：「Pure White (#ffffff)」
|
||
- 次要文字：「Near Black (#212121)」
|
||
- 懸停強調：「Interaction Blue (#1863dc)」
|
||
- 靜音文字：「Muted Slate (#93939f)」
|
||
- 卡片邊框：「Lightest Gray (#f2f2f2)」
|
||
- 區段邊框：「Border Cool (#d9d9dd)」
|
||
|
||
### 元件提示範例
|
||
- 「在 Pure White (#ffffff) 上建立主視覺區段，使用 CohereText，72px 字重 400，行高 1.0，字距 -1.44px。Cohere Black 文字。副標題使用 Unica77，18px 字重 400，行高 1.4。」
|
||
- 「設計一個 22px 邊框圓角的功能卡片，白色背景搭配 1px solid Lightest Gray (#f2f2f2) 邊框。標題使用 Unica77，32px，字距 -0.32px。內文使用 Unica77，16px，Muted Slate (#93939f)。」
|
||
- 「製作一個幽靈按鈕：透明背景，Unica77 16px 的 Cohere Black 文字。懸停時文字轉為 Interaction Blue (#1863dc)，不透明度 0.8。焦點：2px solid Interaction Blue 外框。」
|
||
- 「建立一個深紫色全寬區段搭配白色文字。標題使用 CohereText 60px。產品截圖浮於其中，使用 22px 邊框圓角。」
|
||
- 「使用 CohereMono 設計區段標籤，14px，大寫，字距 0.28px。Muted Slate (#93939f) 文字。」
|
||
|
||
### 迭代指南
|
||
1. 每次專注於單一元件
|
||
2. 主要卡片永遠使用 22px 圓角——「Cohere 卡片圓潤感」
|
||
3. 明確指定字體——CohereText 用於標題，Unica77 用於內文，CohereMono 用於標籤
|
||
4. 互動元素僅在懸停時使用 Interaction Blue (#1863dc)
|
||
5. 保持表面為白色搭配冷灰色邊框——不使用暖色調
|
||
6. 紫色用於全寬區段，絕不用於卡片背景
|