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 的 Web 界面是一个沉浸式的深色音乐播放器，将听众包裹在近黑色的空间（#121212、#181818、#1f1f1f）中，专辑封面与内容成为色彩的主要来源。其设计理念是"内容优先的黑暗感"——UI 退入阴影，让音乐、播客和播放列表得以发光。每一个界面层次都是深浅不一的炭灰色，营造出剧院般的氛围，唯一真正的色彩来自标志性的 Spotify 绿（#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），最终呈现出一个如同高端音频设备般的界面——触感圆润，专为触控而生。
核心特征：
- 近黑色沉浸式深色主题（
#121212–#1f1f1f）——UI 隐退于内容之后 - Spotify 绿（
#1ed760）作为唯一品牌强调色——从不装饰性使用，始终功能性呈现 - SpotifyMixUI/CircularSp 字族，支持全球文字系统
- 胶囊按钮（500px–9999px）与圆形控件（50%）——圆润、触控优化
- 按钮标签全大写搭配宽字间距（1.4px–2px）
- 悬浮元素上的重阴影（
rgba(0,0,0,0.5) 0px 8px 24px） - 语义色：负面红（
#f3727f）、警告橙（#ffa42b）、通告蓝（#539df5） - 专辑封面是主要色彩来源——UI 本身在设计上保持无彩色
2. 色彩规范
主品牌色
- Spotify 绿（
#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 绿边框（
#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 通知、营销页面）
描边胶囊
- 背景：透明
- 文字：
#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 绿色 Logo
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 绿（
#1ed760）用于播放控件、激活状态和主要 CTA - 所有按钮使用胶囊形（500px–9999px），播放控件使用圆形（50%）
- 按钮标签使用全大写加宽字间距（1.4px–2px）
- 保持紧凑的字号（10px–24px 范围）——这是应用，不是杂志
- 对深色背景上的悬浮元素使用重阴影（0.3–0.5 不透明度）
- 让专辑封面提供色彩——UI 本身保持无彩色
避免
- 不要将 Spotify 绿用作装饰或背景——它仅作功能性使用
- 不要将浅色背景用于主要表面——深色沉浸感是核心体验
- 不要在按钮上跳过胶囊/圆形的几何语言——方形按钮会破坏品牌识别
- 不要使用细弱的阴影——在深色背景上，阴影必须足够重才能显现
- 不要添加额外的品牌色——绿色加无彩灰阶就是完整的色板
- 不要使用宽松的行高——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 绿（
#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 绿（
#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 绿仅用于功能性高亮（播放、激活、CTA）
- 胶囊化一切——大型用 500px，小型用 9999px，圆形控件用 50%
- 按钮使用全大写加宽字间距——这是系统性的标签声调
- 使用重阴影（0.3–0.5 不透明度）表达层级——轻阴影在深色背景上不可见
- 专辑封面提供所有色彩——UI 保持无彩色