④段整套同步（六节＋ 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
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,249 @@
+# 以 Spotify 為靈感的設計系統
+
+> Category: 媒體與消費者
+> 音樂串流。深色背景上的鮮明綠色、粗獷字型、以專輯封面為視覺驅動。
+
+## 1. 視覺主題與氛圍
+
+Spotify 的網頁介面是一個沉浸式的深色音樂播放器，以近乎純黑的色繭（`#121212`、`#181818`、`#1f1f1f`）包裹聆聽者，讓專輯封面與內容成為主要的色彩來源。設計哲學是「以內容為先的暗色調」——UI 退隱於陰影之中，讓音樂、播客與播放清單得以發光。每一個介面層都是一種深炭色調，營造出如劇院般的環境，唯一真正的色彩來自標誌性的 Spotify Green（`#1ed760`）與專輯封面本身。
+
+字體採用 SpotifyMixUI 與 SpotifyMixUITitle——這是 CircularSp 家族的專屬字型（Lineto 的 Circular，為 Spotify 客製化），並備有涵蓋阿拉伯文、希伯來文、西里爾文、希臘文、梵文及 CJK 字型的完整備援字體清單，體現 Spotify 的全球佈局。字型系統簡潔且功能導向：700（粗體）用於強調與導覽，600（半粗體）用於次要強調，400（一般）用於正文。按鈕採用全大寫並搭配正向字距（1.4px–2px），呈現出一種系統性的標籤質感。
+
+Spotify 的獨特之處在於其膠囊與圓形幾何語言。主要按鈕使用 500px–9999px 圓角（完整膠囊），圓形播放按鈕使用 50% 圓角，搜尋輸入框則為 500px 膠囊形。搭配高層元素上的重陰影（`rgba(0,0,0,0.5) 0px 8px 24px`），以及獨特的內嵌邊框陰影組合（`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`），整體呈現出如頂級音響設備般的介面質感——觸覺豐富、圓潤，且為觸控操作而生。
+
+**Key Characteristics:**
+- 近純黑沉浸式深色主題（`#121212`–`#1f1f1f`）——UI 隱沒於內容之後
+- Spotify Green（`#1ed760`）作為單一品牌強調色——從不用於裝飾，永遠具功能意義
+- SpotifyMixUI/CircularSp 字體家族，支援全球多種文字系統
+- 膠囊按鈕（500px–9999px）與圓形控制元件（50%）——圓潤、觸控最佳化
+- 全大寫按鈕標籤搭配寬字距（1.4px–2px）
+- 高層元素上的重陰影（`rgba(0,0,0,0.5) 0px 8px 24px`）
+- 語意色彩：錯誤紅（`#f3727f`）、警告橙（`#ffa42b`）、公告藍（`#539df5`）
+- 專輯封面作為主要色彩來源——UI 本身在設計上為無彩色
+
+## 2. 色彩調色盤與角色定義
+
+### 主要品牌色
+- **Spotify Green**（`#1ed760`）：主要品牌強調色——播放按鈕、啟用狀態、CTA
+- **近純黑**（`#121212`）：最深層背景表面
+- **深色表面**（`#181818`）：卡片、容器、高層表面
+- **中深色**（`#1f1f1f`）：按鈕背景、互動表面
+
+### 文字色
+- **白色**（`#ffffff`）：`--text-base`，主要文字
+- **銀色**（`#b3b3b3`）：次要文字、靜音標籤、非啟用導覽項目
+- **近白**（`#cbcbcb`）：稍亮的次要文字
+- **亮色**（`#fdfdfd`）：接近純白，用於最高強調
+
+### 語意色
+- **錯誤紅**（`#f3727f`）：`--text-negative`，錯誤狀態
+- **警告橙**（`#ffa42b`）：`--text-warning`，警告狀態
+- **公告藍**（`#539df5`）：`--text-announcement`，資訊狀態
+
+### 表面與邊框
+- **深色卡片**（`#252525`）：高層卡片表面
+- **中色卡片**（`#272727`）：替代卡片表面
+- **邊框灰**（`#4d4d4d`）：深色背景上的按鈕邊框
+- **亮邊框**（`#7c7c7c`）：外框按鈕邊框、靜音連結
+- **分隔線**（`#b3b3b3`）：分隔線條
+- **亮色表面**（`#eeeeee`）：淺色模式按鈕（少見）
+- **Spotify Green 邊框**（`#1db954`）：綠色強調邊框變體
+
+### 陰影
+- **重陰影**（`rgba(0,0,0,0.5) 0px 8px 24px`）：對話框、選單、高層面板
+- **中陰影**（`rgba(0,0,0,0.3) 0px 8px 8px`）：卡片、下拉選單
+- **內嵌邊框**（`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`）：輸入框邊框陰影組合
+
+## 3. 字型規則
+
+### 字體家族
+- **標題**：`SpotifyMixUITitle`，備援：`CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
+- **UI / 正文**：`SpotifyMixUI`，相同備援字體清單
+
+### 層級
+
+| 角色 | 字體 | 尺寸 | 字重 | 行高 | 字距 | 備註 |
+|------|------|------|--------|-------------|----------------|-------|
+| 區段標題 | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | 粗體標題字重 |
+| 特色標頭 | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30（緊縮） | normal | 半粗體區段標頭 |
+| 正文粗體 | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | 強調文字 |
+| 正文 | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | 標準正文 |
+| 按鈕大寫 | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00（緊縮） | 1.4px–2px | `text-transform: uppercase` |
+| 按鈕 | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | 標準按鈕 |
+| 導覽連結粗體 | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | 導覽列 |
+| 導覽連結 | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | 非啟用導覽項目 |
+| 說明文字粗體 | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | 粗體後設資料 |
+| 說明文字 | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | 後設資料 |
+| 小字粗體 | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | 標籤、計數 |
+| 小字 | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | 細則文字 |
+| 徽章 | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
+| 微型文字 | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | 最小文字 |
+
+### 原則
+- **粗體／一般的二元對立**：大多數文字非 700（粗體）即 400（一般），600 僅少量使用。透過字重對比而非尺寸變化，建立清晰的視覺層級。
+- **大寫按鈕作為系統語言**：按鈕標籤使用全大寫搭配寬字距（1.4px–2px），形成一種系統性的「標籤」語調，有別於內容文字。
+- **緊縮尺寸**：範圍為 10px–24px——比多數系統更窄。Spotify 的字型緊縮且功能導向，為快速掃視播放清單而設計，而非閱讀文章。
+- **全球文字系統支援**：完整備援字體清單（阿拉伯文、希伯來文、西里爾文、希臘文、梵文、CJK）反映 Spotify 覆蓋 180+ 個市場的佈局。
+
+## 4. 元件樣式
+
+### 按鈕
+
+**深色膠囊**
+- 背景：`#1f1f1f`
+- 文字：`#ffffff` 或 `#b3b3b3`
+- 內距：8px 16px
+- 圓角：9999px（完整膠囊）
+- 用途：導覽膠囊、次要操作
+
+**深色大膠囊**
+- 背景：`#181818`
+- 文字：`#ffffff`
+- 內距：0px 43px
+- 圓角：500px
+- 用途：主要應用程式導覽按鈕
+
+**亮色膠囊**
+- 背景：`#eeeeee`
+- 文字：`#181818`
+- 圓角：500px
+- 用途：淺色模式 CTA（Cookie 同意、行銷頁面）
+
+**外框膠囊**
+- 背景：transparent
+- 文字：`#ffffff`
+- 邊框：`1px solid #7c7c7c`
+- 內距：4px 16px 4px 36px（非對稱，供圖示使用）
+- 圓角：9999px
+- 用途：追蹤按鈕、次要操作
+
+**圓形播放**
+- 背景：`#1f1f1f`
+- 文字：`#ffffff`
+- 內距：12px
+- 圓角：50%（圓形）
+- 用途：播放／暫停控制元件
+
+### 卡片與容器
+- 背景：`#181818` 或 `#1f1f1f`
+- 圓角：6px–8px
+- 大多數卡片無可見邊框
+- 懸停：背景輕微提亮
+- 陰影：高層時套用 `rgba(0,0,0,0.3) 0px 8px 8px`
+
+### 輸入框
+- 搜尋輸入框：`#1f1f1f` 背景，`#ffffff` 文字
+- 圓角：500px（膠囊）
+- 內距：12px 96px 12px 48px（考量圖示空間）
+- 聚焦：邊框變為 `#000000`，outline `1px solid`
+
+### 導覽列
+- 深色側欄，使用 SpotifyMixUI 14px，啟用項目字重 700，非啟用 400
+- 非啟用項目使用 `#b3b3b3` 靜音色，啟用項目使用 `#ffffff`
+- 圓形圖示按鈕（50% 圓角）
+- Spotify 標誌位於左上角，以綠色顯示
+
+## 5. 版面原則
+
+### 間距系統
+- 基礎單位：8px
+- 刻度：1px、2px、3px、4px、5px、6px、8px、10px、12px、14px、15px、16px、20px
+
+### 格線與容器
+- 固定側欄 + 主內容區域
+- 格線式專輯／播放清單卡片
+- 底部全寬「正在播放」列
+- 響應式內容區域填滿剩餘空間
+
+### 留白哲學
+- **深色壓縮**：Spotify 將內容密集排列——播放清單格線、曲目清單與導覽列間距皆緊密。深色背景在元素之間提供視覺休息，無需使用大間距。
+- **內容密度優先於呼吸空間**：這是一款應用程式，不是行銷網站。每個像素都服務於聆聽體驗。
+
+### 圓角刻度
+- 極小（2px）：徽章、明確標籤
+- 細微（4px）：輸入框、小型元素
+- 標準（6px）：專輯封面容器、卡片
+- 舒適（8px）：區段、對話框
+- 中等（10px–20px）：面板、覆蓋層元素
+- 大（100px）：大型膠囊按鈕
+- 膠囊（500px）：主要按鈕、搜尋輸入框
+- 完整膠囊（9999px）：導覽膠囊、搜尋
+- 圓形（50%）：播放按鈕、頭像、圖示
+
+## 6. 景深與層次
+
+| 層級 | 處理方式 | 用途 |
+|-------|-----------|-----|
+| 基礎（Level 0） | `#121212` 背景 | 最深層，頁面背景 |
+| 表面（Level 1） | `#181818` 或 `#1f1f1f` | 卡片、側欄、容器 |
+| 高層（Level 2） | `rgba(0,0,0,0.3) 0px 8px 8px` | 下拉選單、懸停卡片 |
+| 對話框（Level 3） | `rgba(0,0,0,0.5) 0px 8px 24px` | 強制回應視窗、覆蓋層、選單 |
+| 內嵌（邊框） | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | 輸入框邊框 |
+
+**陰影哲學**：對於深色主題的應用程式，Spotify 使用了相當重的陰影。0.5 不透明度搭配 24px 模糊的陰影，為對話框和選單創造了戲劇性的「懸浮於黑暗中」效果；0.3 不透明度搭配 8px 模糊則提供更細微的卡片浮起感。輸入框上獨特的內嵌邊框陰影組合，帶來一種內凹的觸覺質感。
+
+## 7. 應做與禁止
+
+### 應做
+- 使用近純黑背景（`#121212`–`#1f1f1f`）——透過色調變化營造景深
+- 僅將 Spotify Green（`#1ed760`）用於播放控制、啟用狀態與主要 CTA
+- 所有按鈕使用膠囊形狀（500px–9999px），播放控制使用圓形（50%）
+- 在按鈕標籤上套用全大寫與寬字距（1.4px–2px）
+- 保持字型緊縮（10px–24px 範圍）——這是一款應用程式，不是雜誌
+- 對深色背景上的高層元素使用重陰影（0.3–0.5 不透明度）
+- 讓專輯封面提供色彩——UI 本身保持無彩色
+
+### 禁止
+- 不可將 Spotify Green 用於裝飾或背景——它僅具功能性
+- 不可將淺色背景用於主要表面——深色沉浸感是核心特質
+- 不可在按鈕上省略膠囊／圓形幾何——方形按鈕會破壞品牌識別
+- 不可使用細緻或輕微的陰影——在深色背景上，陰影必須夠重才可見
+- 不可增加額外品牌色——綠色加無彩色灰階即是完整調色盤
+- 不可使用寬鬆的行高——Spotify 的字型緊縮且密集
+- 不可暴露原始灰色邊框——改用基於陰影或內嵌的邊框
+
+## 8. 響應式行為
+
+### 斷點
+| 名稱 | 寬度 | 主要變化 |
+|------|-------|-------------|
+| 行動裝置小 | <425px | 緊縮行動版版面 |
+| 行動裝置 | 425–576px | 標準行動版 |
+| 平板 | 576–768px | 雙欄格線 |
+| 平板大 | 768–896px | 擴展版面 |
+| 桌機小 | 896–1024px | 側欄可見 |
+| 桌機 | 1024–1280px | 完整桌機版面 |
+| 大型桌機 | >1280px | 擴展格線 |
+
+### 折疊策略
+- 側欄：完整 → 收合 → 隱藏
+- 專輯格線：5 欄 → 3 欄 → 2 欄 → 1 欄
+- 正在播放列：所有尺寸下均維持顯示
+- 搜尋：膠囊輸入框維持，寬度自動調整
+- 導覽：側欄 → 行動裝置底部列
+
+## 9. Agent 提示指南
+
+### 快速色彩參考
+- 背景：近純黑（`#121212`）
+- 表面：深色卡片（`#181818`）
+- 文字：白色（`#ffffff`）
+- 次要文字：銀色（`#b3b3b3`）
+- 強調色：Spotify Green（`#1ed760`）
+- 邊框：`#4d4d4d`
+- 錯誤：錯誤紅（`#f3727f`）
+
+### 元件提示範例
+- "建立深色卡片：`#181818` 背景，8px 圓角。標題使用 16px SpotifyMixUI 字重 700，白色文字。副標題使用 14px 字重 400，`#b3b3b3`。懸停時陰影 rgba(0,0,0,0.3) 0px 8px 8px。"
+- "設計膠囊按鈕：`#1f1f1f` 背景，白色文字，9999px 圓角，8px 16px 內距。14px SpotifyMixUI 字重 700，全大寫，字距 1.4px。"
+- "製作圓形播放按鈕：Spotify Green（`#1ed760`）背景，`#000000` 圖示，50% 圓角，12px 內距。"
+- "建立搜尋輸入框：`#1f1f1f` 背景，白色文字，500px 圓角，12px 48px 內距。內嵌邊框：rgb(124,124,124) 0px 0px 0px 1px inset。"
+- "設計導覽側欄：`#121212` 背景。啟用項目：14px 字重 700，白色。非啟用：14px 字重 400，`#b3b3b3`。"
+
+### 迭代指南
+1. 從 `#121212` 開始——所有內容存在於近純黑的黑暗之中
+2. Spotify Green 僅用於功能性高亮（播放、啟用狀態、CTA）
+3. 所有按鈕做成膠囊——大型用 500px，小型用 9999px，圓形用 50%
+4. 按鈕標籤使用全大寫加寬字距——系統性的標籤語調
+5. 高層元素使用重陰影（0.3–0.5 不透明度）——淺色陰影在深色背景上不可見
+6. 專輯封面提供所有色彩——UI 本身保持無彩色