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。
16 KiB
16 KiB
靈感來源 NVIDIA 的設計系統
類別：媒體與消費性產品 GPU 運算。黑綠能量，技術力量美學。
1. 視覺主題與氛圍
NVIDIA 的網站是一個高對比、以技術為核心的體驗，透過設計克制傳遞出原始運算力量。頁面建立在純黑（#000000）與純白（#ffffff）的基礎之上，以 NVIDIA 標誌性的綠色（#76b900）作為點綴——這個色彩精確到足以成為品牌指紋。這不是自然界的蔥鬱綠意；而是 GPU 渲染光源般的電子感石灰綠，介於黃綠與翠綠之間，在科技圈中能立刻讓人聯想到「NVIDIA」。
客製字型 NVIDIA-EMEA（備援字型為 Arial 與 Helvetica）塑造出簡潔、工業感的排版語調。36px 粗體標題搭配緊密的 1.25 行高，形成密集且具權威感的文字區塊。這套字型缺少矽谷無襯線字型的幾何趣味——它更歐洲化、務實，並帶有工程導向的氣質。內文排在 15–16px，易讀而不奢侈，保持著如同 GPU 記憶體最佳化般的螢幕空間效率感。
NVIDIA 設計與其他深色背景科技網站的差異，在於對綠色強調色的嚴謹運用。#76b900 出現在邊框（2px solid #76b900）、連結底線（underline 2px rgb(118, 185, 0)）以及 CTA 中——但從不作為主要內容區域的背景或大面積色塊。綠色是訊號，不是表面。搭配深沉的陰影系統（rgba(0, 0, 0, 0.3) 0px 0px 5px）與極小的圓角（1–2px），整體效果如同精密工程硬體以像素呈現。
關鍵特徵：
- NVIDIA 綠色（
#76b900）作為純粹的強調色——僅用於邊框、底線與互動高亮 - 黑色（
#000000）主導背景，深色區段搭配白色（#ffffff）文字 - NVIDIA-EMEA 客製字型，備援 Arial／Helvetica——工業感、歐洲風、簡潔
- 緊密行高（標題 1.25），形成密集且具權威感的文字區塊
- 極小圓角（1–2px）——全站使用銳利的工程感邊角
- 綠色邊框按鈕（
2px solid #76b900）作為主要互動模式 - Font Awesome 6 Pro／Sharp 圖示系統，weight 900 呈現銳利圖示
- 多框架架構（PrimeReact、Fluent UI、Element Plus），支援豐富的互動元件
2. 色彩配置與角色
主要品牌色
- NVIDIA 綠色（
#76b900）：標誌性色彩——用於邊框、連結底線、CTA 外框、啟用狀態指示。絕不作為大面積填充色。 - 純黑（
#000000）：主要頁面背景、淺色表面上的文字，主導整體調性。 - 純白（
#ffffff）：深色背景上的文字、淺色區段背景、卡片表面。
延伸品牌色
- NVIDIA 亮綠（
#bff230）：明亮石灰色，用於高亮與懸停狀態。 - 橘色 400（
#df6500）：暖色強調，適用於警示、特色徽章或能源相關情境。 - 黃色 300（
#ef9100）：次要暖色強調，用於產品類別高亮。 - 黃色 050（
#feeeb2）：淺暖色表面，用於標注框背景。
狀態與語意色
- 紅色 500（
#e52020）：錯誤狀態、破壞性操作、重要警示。 - 紅色 800（
#650b0b）：深紅，用於嚴重警告背景。 - 綠色 500（
#3f8500）：成功狀態、正向指示（比品牌綠更深）。 - 藍色 700（
#0046a4）：資訊性強調，連結懸停替代色。
裝飾色
- 紫色 800（
#4d1368）：深紫，用於漸層末端、進階／AI 情境。 - 紫色 100（
#f9d4ff）：淺紫色調表面。 - 桃紅 700（
#8c1c55）：豐富強調色，用於特別促銷或精選內容。
中性色階
- 灰色 300（
#a7a7a7）：靜音文字、停用標籤。 - 灰色 400（
#898989）：次要文字、中繼資料。 - 灰色 500（
#757575）：三級文字、佔位符、頁尾。 - 灰色邊框（
#5e5e5e）：細膩邊框、分隔線。 - 近黑（
#1a1a1a）：深色表面、黑色頁面上的卡片背景。
互動狀態
- 連結預設（深色背景）（
#ffffff）：深色背景上的白色連結。 - 連結預設（淺色背景）（
#000000）：淺色背景上的黑色連結搭配綠色底線。 - 連結懸停（
#3860be）：所有連結變體懸停時轉為藍色。 - 按鈕懸停（
#1eaedb）：按鈕懸停狀態的青綠高亮。 - 按鈕啟用（
#007fff）：啟用／按下按鈕狀態的亮藍色。 - 焦點環（
#000000 solid 2px）：鍵盤焦點的黑色外框。
陰影與層次
- 卡片陰影（
rgba(0, 0, 0, 0.3) 0px 0px 5px 0px）：浮起卡片的細膩環境陰影。
3. 排版規則
字型家族
- 主要字型：
NVIDIA-EMEA，備援：Arial, Helvetica, sans-serif - 圖示字型：
Font Awesome 6 Pro（實心圖示 weight 900，一般圖示 700） - 銳利圖示：
Font Awesome 6 Sharp（細線圖示 weight 300，一般圖示 400）
層級結構
| 角色 | 字型 | 大小 | 粗細 | 行高 | 字間距 | 備註 |
|---|---|---|---|---|---|---|
| 主視覺標題 | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25（緊密） | normal | 最高衝擊力標題 |
| 區段標題 | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25（緊密） | normal | 區段標題、卡片標題 |
| 副標題 | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75（寬鬆） | normal | 功能描述、副標題 |
| 卡片標題 | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25（緊密） | normal | 卡片與模組標題 |
| 大內文 | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67（寬鬆） | normal | 強調內文、導言段落 |
| 內文 | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | 標準閱讀文字 |
| 粗體內文 | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | 強調標籤、導覽項目 |
| 小內文 | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67（寬鬆） | normal | 次要內容、描述 |
| 粗體小內文 | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | 強調次要內容 |
| 大按鈕 | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25（緊密） | normal | 主要 CTA 按鈕 |
| 按鈕 | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25（緊密） | normal | 標準按鈕 |
| 緊湊按鈕 | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00（緊密） | 0.144px | 小型／緊湊按鈕 |
| 連結 | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | 導覽連結 |
| 大寫連結 | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | text-transform: uppercase，導覽標籤 |
| 說明文字 | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | 中繼資料、時間戳記 |
| 小說明文字 | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25（緊密） | normal | 細項說明、法律聲明 |
| 微型標籤 | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | text-transform: uppercase，小型徽章 |
| 微型文字 | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00（緊密） | normal | 最小 UI 文字 |
原則
- 粗體作為預設語調：NVIDIA 大量採用 weight 700 用於標題、按鈕、連結與標籤。400 僅保留給內文段落——其餘一律粗體，展現自信與權威感。
- 標題緊密，內文寬鬆：標題行高固定為 1.25（緊密），而內文文字放鬆至 1.50–1.67。這種對比在內容區塊頂部製造視覺密度，同時保持段落的閱讀舒適度。
- 大寫導覽文字：連結標籤使用
text-transform: uppercase搭配 weight 700，形成如同硬體規格標籤般的導覽語調。 - 無裝飾性字距：除緊湊按鈕（0.144px）外，全站字間距均為 normal。字型本身即承載工業感特質，無需額外操作。
4. 元件樣式
按鈕
主要按鈕（綠色邊框）
- 背景：
transparent - 文字：
#000000 - 內距：11px 13px
- 邊框：
2px solid #76b900 - 圓角：2px
- 字型：16px weight 700
- 懸停：背景
#1eaedb，文字#ffffff - 啟用：背景
#007fff，文字#ffffff，邊框1px solid #003eff，scale(1) - 焦點：背景
#1eaedb，文字#ffffff，外框#000000 solid 2px，不透明度 0.9 - 用途：主要 CTA（「了解更多」、「探索解決方案」）
次要按鈕（細綠色邊框）
- 背景：透明
- 邊框：
1px solid #76b900 - 圓角：2px
- 用途：次要操作、替代 CTA
緊湊／行內按鈕
- 字型：14.4px weight 700
- 字間距：0.144px
- 行高：1.00
- 用途：行內 CTA、緊湊導覽
卡片與容器
- 背景：
#ffffff（淺色）或#1a1a1a（深色區段） - 邊框：無（乾淨邊緣）或
1px solid #5e5e5e - 圓角：2px
- 陰影：浮起卡片使用
rgba(0, 0, 0, 0.3) 0px 0px 5px 0px - 懸停：陰影加深
- 內距：16–24px
連結
- 深色背景：
#ffffff，無底線，懸停轉為#3860be - 淺色背景：
#000000或#1a1a1a，底線2px solid #76b900，懸停轉為#3860be，底線消除 - 綠色連結：
#76b900，懸停轉為#3860be - 靜音連結：
#666666，懸停轉為#3860be
導覽列
- 深黑背景（
#000000） - Logo 左對齊，NVIDIA 字標醒目呈現
- 連結：NVIDIA-EMEA 14px weight 700 大寫，
#ffffff - 懸停：顏色轉換，底線不變
- 產品類別使用巨型下拉選單
- 捲動時固定於頂部並帶有背景
圖片處理
- 產品／GPU 渲染圖作為主視覺，通常全寬呈現
- 截圖圖片加細膩陰影增加層次感
- 深色主視覺區段疊加綠色漸層
- 頭像使用圓形容器（50% 圓角）
特色元件
產品卡片
- 白色或深色卡片，圓角極小（2px）
- 標題使用綠色強調邊框或底線
- 粗體標題搭配較輕的描述文字模式
- 底部附有綠色邊框 CTA
技術規格表
- 工業感網格排版
- 交替列背景（細膩灰色變化）
- 粗體標籤，一般字重數值
- 關鍵指標以綠色高亮標示
Cookie／同意橫幅
- 固定於頁面底部
- 圓角按鈕（2px 圓角）
- 灰色邊框處理
5. 版面原則
間距系統
- 基本單位：8px
- 刻度：1px、2px、3px、4px、5px、6px、7px、8px、9px、10px、11px、12px、13px、15px
- 主要內距值：8px、11px、13px、16px、24px、32px
- 區段間距：48–80px 垂直內距
網格與容器
- 最大內容寬度：約 1200px（受限容器）
- 全寬主視覺區段搭配受限文字區塊
- 功能區段：產品卡片使用 2–3 欄網格
- 文章／部落格內容使用單欄
- 文件頁面使用側邊欄排版
留白哲學
- 目的性密度：NVIDIA 使用比一般 SaaS 網站更緊湊的間距，反映技術內容的密集性。留白的存在是為了區隔概念，而非製造奢華的空曠感。
- 區段節奏：深色區段與白色區段交替出現，透過背景色（而非僅靠間距）區隔內容區塊。
- 卡片密度：產品卡片緊密排列，間距 16–20px，呈現目錄感而非畫廊感。
圓角刻度
- 微型（1px）：行內標籤、極小元素
- 標準（2px）：按鈕、卡片、容器、輸入欄——幾乎所有元素的預設值
- 圓形（50%）：頭像圖片、圓形分頁指示器
6. 深度與層次
| 層級 | 處理方式 | 用途 |
|---|---|---|
| 平面（Level 0） | 無陰影 | 頁面背景、行內文字 |
| 細膩（Level 1） | rgba(0,0,0,0.3) 0px 0px 5px 0px |
標準卡片、彈窗 |
| 邊框（Level 1b） | 1px solid #5e5e5e |
內容分隔線、區段邊框 |
| 綠色強調（Level 2） | 2px solid #76b900 |
啟用元素、CTA、已選取項目 |
| 焦點（無障礙） | 2px solid #000000 外框 |
鍵盤焦點環 |
陰影哲學：NVIDIA 的深度系統極簡且實用。基本上只有一個陰影值——5px 環境模糊、30% 不透明度——僅在卡片與彈窗上節制使用。主要的深度訊號不是陰影，而是_色彩對比_：黑色背景緊鄰白色區段、黑色表面上的綠色邊框。這創造出如同硬體材質的視覺層次，深度源於材質差異，而非模擬光線。
裝飾性深度
- 主視覺內容後方的綠色漸層暈染
- 深色到更深色的漸層（黑色到近黑色）用於區段轉場
- 無玻璃擬態或模糊效果——追求清晰而非氛圍感
7. 響應式行為
斷點
| 名稱 | 寬度 | 主要變化 |
|---|---|---|
| 小型手機 | <375px | 緊湊單欄，縮小內距 |
| 手機 | 375–425px | 標準手機版面 |
| 大型手機 | 425–600px | 較寬手機，部分雙欄提示 |
| 小型平板 | 600–768px | 開始採用雙欄網格 |
| 平板 | 768–1024px | 完整卡片網格，擴展導覽 |
| 桌機 | 1024–1350px | 標準桌機版面 |
| 大型桌機 | >1350px | 最大內容寬度，充裕邊距 |
觸控目標
- 按鈕使用 11px 13px 內距，確保舒適的點擊目標
- 導覽連結 14px 大寫搭配適當間距
- 深色背景上的綠色邊框按鈕提供高對比觸控目標
- 手機版：漢堡選單展開為全螢幕覆蓋
折疊策略
- 主視覺：36px 標題按比例縮小
- 導覽列：約 1024px 時全水平導覽折疊為漢堡選單
- 產品卡片：3 欄→2 欄→單欄堆疊
- 頁尾：多欄網格折疊為單欄堆疊
- 區段間距：64–80px 在手機版縮減為 32–48px
- 圖片：維持長寬比，縮放至容器寬度
圖片行為
- GPU／產品渲染圖在所有尺寸保持高解析度
- 主視覺圖片依視窗比例縮放
- 卡片圖片使用一致的長寬比
- 全出血深色區段維持邊緣到邊緣的處理
8. 響應式行為（延伸）
字型縮放
- Display 36px 在手機版縮放至約 24px
- 區段標題 24px 在手機版縮放至約 20px
- 內文在所有斷點維持 15–16px
- 按鈕文字維持 16px 以確保一致的點擊目標
深色／淺色區段策略
- 深色區段（黑色背景、白色文字）與淺色區段（白色背景、黑色文字）交替出現
- 綠色強調色在兩種表面類型上保持一致
- 深色背景：連結為白色，底線為綠色
- 淺色背景：連結為黑色，底線為綠色
- 這種交替創造自然的捲動節奏與內容分組
9. Agent 提示指南
快速色彩參考
- 主要強調色：NVIDIA 綠色（
#76b900） - 深色背景：純黑（
#000000） - 淺色背景：純白（
#ffffff） - 深色背景標題文字：白色（
#ffffff） - 淺色背景標題文字：黑色（
#000000） - 淺色背景內文：黑色（
#000000）或近黑（#1a1a1a） - 深色背景內文：白色（
#ffffff）或灰色 300（#a7a7a7） - 連結懸停：藍色（
#3860be） - 邊框強調：
2px solid #76b900 - 按鈕懸停：青綠色（
#1eaedb）
元件提示範例
- 「在黑色背景上建立主視覺區段。標題 36px NVIDIA-EMEA weight 700，行高 1.25，顏色 #ffffff。副標題 18px weight 400，行高 1.67，顏色 #a7a7a7。CTA 按鈕背景透明，邊框 2px solid #76b900，圓角 2px，內距 11px 13px，文字 #ffffff。懸停時：背景 #1eaedb，文字白色。」
- 「設計產品卡片：白色背景，圓角 2px，box-shadow rgba(0,0,0,0.3) 0px 0px 5px。標題 20px NVIDIA-EMEA weight 700，行高 1.25，顏色 #000000。內文 15px weight 400，行高 1.67，顏色 #757575。標題下方綠色底線強調：border-bottom 2px solid #76b900。」
- 「建立導覽列：#000000 背景，固定於頂部。NVIDIA logo 左對齊。連結 14px NVIDIA-EMEA weight 700 大寫，顏色 #ffffff。懸停：顏色 #3860be。右側對齊綠色邊框 CTA 按鈕。」
- 「建立深色功能區段：#000000 背景。區段標籤 14px weight 700 大寫，顏色 #76b900。標題 24px weight 700，顏色 #ffffff。描述文字 16px weight 400，顏色 #a7a7a7。三張產品卡片水平排列，間距 20px。」
- 「設計頁尾：#000000 背景。多欄版面含連結群組。連結 14px weight 400，顏色 #a7a7a7。懸停：顏色 #76b900。底部列含法律文字 12px，顏色 #757575。」
迭代指南
- 永遠以
#76b900作為強調色，絕不作為背景填充——它是邊框、底線與高亮的訊號色 - 按鈕預設為透明搭配綠色邊框——填充背景僅在懸停／啟用狀態出現
- Weight 700 是所有互動元素與標題的主要語調；400 僅用於內文段落
- 所有元素圓角統一為 2px——這種銳利的極小圓角是工業美學的核心
- 深色區段使用白色文字；淺色區段使用黑色文字——綠色強調色在兩者上效果相同
- 連結懸停一律為
#3860be（藍色），無論連結的預設顏色為何 - 標題行高 1.25，內文行高 1.50–1.67——維持此對比以建立視覺層級
- 導覽列使用大寫 14px 粗體——這種硬體標籤式的排版語調是品牌語音的一部分