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。
13 KiB
13 KiB
以 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，outline1px 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。"
迭代指南
- 從
#121212開始——所有內容存在於近純黑的黑暗之中 - Spotify Green 僅用於功能性高亮（播放、啟用狀態、CTA）
- 所有按鈕做成膠囊——大型用 500px，小型用 9999px，圓形用 50%
- 按鈕標籤使用全大寫加寬字距——系統性的標籤語調
- 高層元素使用重陰影（0.3–0.5 不透明度）——淺色陰影在深色背景上不可見
- 專輯封面提供所有色彩——UI 本身保持無彩色