0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 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。

2026-10-15 21:17:28 +08:00

17 KiB

Raw Blame History

受 Notion 啟發的設計系統

Category: 效率與 SaaS 一體化工作區。溫暖極簡主義，襯線字體標題，柔和介面。

1. 視覺主題與氛圍

Notion 的網站體現了其工具本身的哲學：一塊不干擾你的空白畫布。設計系統建立在溫暖中性色調而非冷灰色之上，創造出一種截然不同的平易近人的極簡主義風格，感覺像優質紙張而非無菌玻璃。頁面畫布是純白色（#ffffff），但文字並非純黑——它是一種溫暖的近黑色（rgba(0,0,0,0.95)），以難以察覺的方式柔化了閱讀體驗。溫暖灰色調（#f6f5f4、#31302e、#615d59、#a39e98）帶有細微的黃棕色底色，賦予介面一種觸感十足、近乎模擬的溫暖。

定製字型 NotionInter（修改版 Inter）是整個系統的骨幹。在展示尺寸（64px）下，它使用激進的負字間距（-2.125px），使標題看起來緊湊而精準。字重範圍比一般系統更廣：內文 400，UI 元素 500，半粗標籤 600，展示標題 700。較大文字上啟用了 OpenType 特性 "lnum"（等高數字）和 "locl"（本地化字形），增加了排印精緻度，值得細細品讀。

Notion 視覺語言的獨特之處在於其邊框哲學。Notion 不使用厚重邊框或陰影，而是使用超細的 1px solid rgba(0,0,0,0.1) 邊框——這些邊框如低語般存在，幾乎難以察覺的分界線在不增加重量的情況下創造結構。陰影系統同樣克制：多層疊加，累積透明度從未超過 0.05，創造出感受到而非看到的深度。

核心特徵：

NotionInter（修改版 Inter），展示尺寸使用負字間距（64px 時 -2.125px）
溫暖中性色調：灰色帶有黃棕色底色（#f6f5f4 溫暖白，#31302e 溫暖深色）
透過 rgba(0,0,0,0.95) 實現近黑色文字——非純黑，營造微妙溫暖感
超細邊框：全域使用 1px solid rgba(0,0,0,0.1)——低語級別的分割
透明度低於 0.05 的多層陰影疊加，營造若有若無的深度
Notion 藍（#0075de）作為 CTA 和互動元素的唯一強調色
膠囊徽章（9999px 圓角）配色調藍色背景，用於狀態指示器
8px 基礎間距單位，有機、非剛性的比例

2. 色彩體系與角色

主色

Notion 黑（rgba(0,0,0,0.95) / #000000f2）：主要文字、標題、內文。95% 不透明度在不影響可讀性的情況下柔化了純黑。
純白（#ffffff）：頁面背景、卡片表面、藍色上的按鈕文字。
Notion 藍（#0075de）：主要 CTA、連結顏色、互動強調色——核心 UI 框架中唯一的飽和色。

品牌輔助色

深海軍藍（#213183）：次要品牌色，少量用於強調和深色功能區塊。
啟用藍（#005bab）：按鈕啟用/按下狀態——Notion 藍的深色變體。

溫暖中性色調

溫暖白（#f6f5f4）：背景表面色調、區塊交替、細微卡片填充。黃色底色是關鍵。
溫暖深色（#31302e）：深色表面背景、深色區塊文字。比標準灰色更溫暖。
溫暖灰 500（#615d59）：次要文字、描述、靜音標籤。
溫暖灰 300（#a39e98）：佔位文字、停用狀態、說明文字。

語義強調色

青綠（#2a9d99）：成功狀態、正面指示器。
綠色（#1aae39）：確認、完成徽章。
橙色（#dd5b00）：警告狀態、注意指示器。
粉色（#ff64c8）：裝飾性強調、功能高亮。
紫色（#391c57）：高級功能、深色強調。
棕色（#523410）：大地色強調、溫暖功能區塊。

互動色

連結藍（#0075de）：主要連結顏色，懸停時帶底線。
淺連結藍（#62aef0）：深色背景上的淺色連結變體。
焦點藍（#097fe8）：互動元素的焦點環。
徽章藍背景（#f2f9ff）：膠囊徽章背景，藍色調表面。
徽章藍文字（#097fe8）：膠囊徽章文字，深藍色確保可讀性。

陰影與深度

卡片陰影（rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px）：多層卡片高度。
深陰影（rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px）：模態框和特色內容的五層深度高度。
低語邊框（1px solid rgba(0,0,0,0.1)）：標準分割邊框——卡片、分隔線、區塊。

3. 排版規則

字型家族

主字型：NotionInter，備用字型：Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol
OpenType 特性：在展示和標題文字上啟用 "lnum"（等高數字）和 "locl"（本地化字形）。

層次結構

角色	字型	尺寸	字重	行高	字間距	備註
展示主標題	NotionInter	64px (4.00rem)	700	1.00（緊湊）	-2.125px	最大壓縮，廣告牌級標題
展示次標題	NotionInter	54px (3.38rem)	700	1.04（緊湊）	-1.875px	次要主標，功能標題
區塊標題	NotionInter	48px (3.00rem)	700	1.00（緊湊）	-1.5px	功能區塊標題，配合 `"lnum"`
大型副標題	NotionInter	40px (2.50rem)	700	1.50	normal	卡片標題、功能子區塊
副標題	NotionInter	26px (1.63rem)	700	1.23（緊湊）	-0.625px	區塊副標題、內容標題
卡片標題	NotionInter	22px (1.38rem)	700	1.27（緊湊）	-0.25px	功能卡片、清單標題
大內文	NotionInter	20px (1.25rem)	600	1.40	-0.125px	簡介、功能描述
內文	NotionInter	16px (1.00rem)	400	1.50	normal	標準閱讀文字
內文中等	NotionInter	16px (1.00rem)	500	1.50	normal	導覽、強調 UI 文字
內文半粗	NotionInter	16px (1.00rem)	600	1.50	normal	強調標籤、啟用狀態
內文粗體	NotionInter	16px (1.00rem)	700	1.50	normal	內文尺寸的標題
導覽/按鈕	NotionInter	15px (0.94rem)	600	1.33	normal	導覽連結、按鈕文字
說明	NotionInter	14px (0.88rem)	500	1.43	normal	元資料、次要標籤
淺說明	NotionInter	14px (0.88rem)	400	1.43	normal	內文說明、描述
徽章	NotionInter	12px (0.75rem)	600	1.33	0.125px	膠囊徽章、標籤、狀態標籤
微型標籤	NotionInter	12px (0.75rem)	400	1.33	0.125px	小元資料、時間戳記

原則

尺度壓縮：NotionInter 在展示尺寸使用 64px 時 -2.125px 的字間距，逐漸放寬至 26px 時 -0.625px 和 16px 時的正常值。壓縮在標題處創造密度，同時在內文尺寸保持可讀性。
四字重系統：400（內文/閱讀）、500（UI/互動）、600（強調/導覽）、700（標題/展示）。與大多數系統相比更寬的字重範圍允許細膩的層次結構。
溫暖縮放：行高隨尺寸增大而收緊——內文（16px）1.50，副標題 1.23-1.27，展示 1.00-1.04。這在標題處創造更密集、更有衝擊力的效果。
徽章微字距：12px 徽章文字使用正字間距（0.125px）——系統中唯一的正字距，創造更寬、更易辨認的小號文字。

4. 元件樣式

按鈕

主藍色

背景：#0075de（Notion 藍）
文字：#ffffff
內邊距：8px 16px
圓角：4px（微妙）
邊框：1px solid transparent
懸停：背景加深至 #005bab
啟用：scale(0.9) 變換
焦點：2px solid 焦點輪廓，var(--shadow-level-200) 陰影
用途：主要 CTA（"免費使用 Notion"、"立即嘗試"）

次要/三級

背景：rgba(0,0,0,0.05)（半透明溫暖灰）
文字：#000000（近黑色）
內邊距：8px 16px
圓角：4px
懸停：文字顏色變化，scale(1.05)
啟用：scale(0.9) 變換
用途：次要操作、表單提交

幽靈/連結按鈕

背景：透明
文字：rgba(0,0,0,0.95)
裝飾：懸停時底線
用途：三級操作、內聯連結

膠囊徽章按鈕

背景：#f2f9ff（藍色調）
文字：#097fe8
內邊距：4px 8px
圓角：9999px（完整膠囊）
字型：12px 字重 600
用途：狀態徽章、功能標籤、「新」標籤

卡片與容器

背景：#ffffff
邊框：1px solid rgba(0,0,0,0.1)（低語邊框）
圓角：12px（標準卡片），16px（特色/主打卡片）
陰影：rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px
懸停：微妙陰影增強
圖片卡片：12px 頂部圓角，圖片填充上半部分

輸入框與表單

背景：#ffffff
文字：rgba(0,0,0,0.9)
邊框：1px solid #dddddd
內邊距：6px
圓角：4px
焦點：藍色輪廓環
佔位符：溫暖灰 #a39e98

導覽

白色背景上的簡潔水平導覽，非黏性
品牌標誌左對齊（33x34px 圖示 + 文字標誌）
連結：NotionInter 15px 字重 500-600，近黑色文字
懸停：顏色變化至 var(--color-link-primary-text-hover)
CTA：藍色膠囊按鈕（"免費使用 Notion"）右對齊
行動裝置：漢堡選單折疊
帶多層分類選單的產品下拉選單

圖片處理

產品截圖配 1px solid rgba(0,0,0,0.1) 邊框
頂部圓角圖片：12px 12px 0px 0px 圓角
儀表板/工作區預覽截圖主導功能區塊
主標題插圖後的溫暖漸層背景（裝飾性角色插圖）

特色元件

帶插圖的功能卡片

大型插圖標題（神奈川沖浪裏、產品 UI 截圖）
12px 圓角卡片配低語邊框
標題 22px 字重 700，描述 16px 字重 400
溫暖白（#f6f5f4）背景變體用於交替區塊

信任欄/Logo 網格

公司標誌（受信任團隊區塊）使用品牌原色
水平捲動或帶團隊數量的網格版面
指標展示：大數字 + 描述模式

指標卡片

大數字展示（例如「$4,200 ROI」）
NotionInter 40px+ 字重 700 用於指標
下方溫暖灰內文描述
低語邊框卡片容器

5. 版面原則

間距系統

基礎單位：8px
比例：2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px
帶小數值（5.6px、6.4px）的有機非剛性比例，用於微調

網格與容器

最大內容寬度：約 1200px
主標題：居中單欄，頂部大內邊距（80-120px）
功能區塊：2-3 欄卡片網格
全寬溫暖白（#f6f5f4）區塊背景用於交替
程式碼/儀表板截圖配低語邊框內嵌

留白哲學

充裕的垂直節奏：主要區塊間 64-120px。Notion 讓內容以大量垂直內邊距呼吸。
溫暖交替：白色區塊與溫暖白（#f6f5f4）區塊交替，創造柔和的視覺節奏，無強烈色彩斷裂。
內容優先密度：內文塊緊湊（行高 1.50），但被充裕的邊距包圍，在白色空間的海洋中創造可讀內容孤島。

圓角比例

微型（4px）：按鈕、輸入框、功能性互動元素
微妙（5px）：連結、清單項目、選單項目
標準（8px）：小卡片、容器、內聯元素
舒適（12px）：標準卡片、功能容器、圖片頂部
大型（16px）：主打卡片、特色內容、推廣塊
完整膠囊（9999px）：徽章、膠囊、狀態指示器
圓形（100%）：標籤指示器、頭像

6. 深度與高度

層級	處理方式	用途
平面（Level 0）	無陰影，無邊框	頁面背景、文字塊
低語（Level 1）	`1px solid rgba(0,0,0,0.1)`	標準邊框、卡片輪廓、分隔線
柔和卡片（Level 2）	4層陰影疊加（最大透明度 0.04）	內容卡片、功能塊
深度卡片（Level 3）	5層陰影疊加（最大透明度 0.05，52px 模糊）	模態框、特色面板、主打元素
焦點（無障礙）	`2px solid var(--focus-color)` 輪廓	所有互動元素的鍵盤焦點

陰影哲學：Notion 的陰影系統使用多層極低個體透明度（0.01 至 0.05）的疊加，累積成柔和、自然的高度效果。4層卡片陰影從 1.04px 延伸到 18px 模糊，創造深度漸變而非單一硬陰影。5層深陰影延伸至 52px 模糊，透明度 0.05，產生感覺像自然光而非電腦生成深度的環境遮蔽。這種分層方法使元素感覺嵌入頁面而非漂浮於其上。

裝飾性深度

主標題區塊：裝飾性角色插圖（俏皮、手繪風格）
區塊交替：白色到溫暖白（#f6f5f4）背景切換
無硬性區塊邊框——分隔來自背景色變化和間距

7. 響應式行為

斷點

名稱	寬度	主要變化
小型行動裝置	<400px	緊湊單欄，最小內邊距
行動裝置	400-600px	標準行動，堆疊版面
小型平板	600-768px	開始 2 欄網格
平板	768-1080px	完整卡片網格，擴展內邊距
小型桌面	1080-1200px	標準桌面版面
桌面	1200-1440px	完整版面，最大內容寬度
大型桌面	>1440px	居中，充裕邊距

觸控目標

按鈕使用舒適內邊距（垂直 8px-16px）
導覽連結 15px，配合充足間距
膠囊徽章有 8px 水平內邊距用於點選目標
行動裝置選單切換使用標準漢堡按鈕

折疊策略

主標題：64px 展示 -> 縮小至 40px -> 行動裝置 26px，保持比例字間距
導覽：水平連結 + 藍色 CTA -> 漢堡選單
功能卡片：3欄 -> 2欄 -> 單欄堆疊
產品截圖：使用響應式圖片保持長寬比
信任欄標誌：網格 -> 行動裝置水平捲動
頁腳：多欄 -> 堆疊單欄
區塊間距：80px+ -> 行動裝置 48px

圖片行為

工作區截圖在所有尺寸保持低語邊框
主標題插圖按比例縮放
產品截圖使用一致圓角的響應式圖片
全寬溫暖白區塊保持邊到邊處理

8. 無障礙與狀態

焦點系統

所有互動元素接收可見焦點指示器
焦點輪廓：2px solid 配焦點色 + 陰影 level 200
所有互動元件全程支援鍵盤導覽
高對比度文字：白色背景上的近黑色超過 WCAG AAA（>14:1 比率）

互動狀態

預設：帶低語邊框的標準外觀
懸停：文字顏色變化，按鈕 scale(1.05)，連結底線
啟用/按下：scale(0.9) 變換，更深背景變體
焦點：帶陰影加強的藍色輪廓環
停用：溫暖灰（#a39e98）文字，降低透明度

色彩對比度

白色背景上的主要文字（rgba(0,0,0,0.95)）：約 18:1 比率
白色背景上的次要文字（#615d59）：約 5.5:1 比率（WCAG AA）
白色背景上的藍色 CTA（#0075de）：約 4.6:1 比率（大文字 WCAG AA）
徽章背景（#f2f9ff）上的徽章文字（#097fe8）：約 4.5:1 比率（大文字 WCAG AA）

9. Agent 提示指南

快速色彩參考

主要 CTA：Notion 藍（#0075de）
背景：純白（#ffffff）
替代背景：溫暖白（#f6f5f4）
標題文字：近黑色（rgba(0,0,0,0.95)）
內文文字：近黑色（rgba(0,0,0,0.95)）
次要文字：溫暖灰 500（#615d59）
靜音文字：溫暖灰 300（#a39e98）
邊框：1px solid rgba(0,0,0,0.1)
連結：Notion 藍（#0075de）
焦點環：焦點藍（#097fe8）

示例元件提示

"在白色背景上創建主標題區塊。標題 64px NotionInter 字重 700，行高 1.00，字間距 -2.125px，顏色 rgba(0,0,0,0.95)。副標題 20px 字重 600，行高 1.40，顏色 #615d59。藍色 CTA 按鈕（#0075de，4px 圓角，8px 16px 內邊距，白色文字）和幽靈按鈕（透明背景，近黑色文字，懸停時底線）。"
"設計一張卡片：白色背景，1px solid rgba(0,0,0,0.1) 邊框，12px 圓角。使用陰影疊加：rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px。標題 22px NotionInter 字重 700，字間距 -0.25px。內文 16px 字重 400，顏色 #615d59。"
"構建一個膠囊徽章：#f2f9ff 背景，#097fe8 文字，9999px 圓角，4px 8px 內邊距，12px NotionInter 字重 600，字間距 0.125px。"
"創建導覽：白色標題欄。導覽連結 NotionInter 15px 字重 600，近黑色文字。右對齊藍色膠囊 CTA '免費使用 Notion'（#0075de 背景，白色文字，4px 圓角）。"
"設計交替區塊版面：白色區塊與溫暖白（#f6f5f4）區塊交替。每個區塊 64-80px 垂直內邊距，最大寬度 1200px 居中。區塊標題 48px 字重 700，行高 1.00，字間距 -1.5px。"

迭代指南

始終使用溫暖中性色——Notion 的灰色帶有黃棕色底色（#f6f5f4、#31302e、#615d59、#a39e98），絕不使用藍灰色
字間距隨字型尺寸縮放：64px 時 -2.125px，54px 時 -1.875px，26px 時 -0.625px，16px 時正常
四種字重：400（閱讀）、500（互動）、600（強調）、700（宣告）
邊框是低語：1px solid rgba(0,0,0,0.1)——絕不更重
陰影使用 4-5 層，個體透明度從不超過 0.05
溫暖白（#f6f5f4）區塊背景對視覺節奏至關重要
狀態/標籤使用膠囊（9999px），按鈕和輸入框使用 4px 圓角
Notion 藍（#0075de）是核心 UI 中唯一的飽和色——謹慎用於 CTA 和連結

17 KiB Raw Blame History Unescape Escape