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。
14 KiB
14 KiB
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) 文字。」
迭代指南
- 每次專注於單一元件
- 主要卡片永遠使用 22px 圓角——「Cohere 卡片圓潤感」
- 明確指定字體——CohereText 用於標題，Unica77 用於內文，CohereMono 用於標籤
- 互動元素僅在懸停時使用 Interaction Blue (#1863dc)
- 保持表面為白色搭配冷灰色邊框——不使用暖色調
- 紫色用於全寬區段，絕不用於卡片背景