④段整套同步（六节 ＋ 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。
This commit is contained in:
admin committed
1 parent
fa0a9026c8
commit
5afeb6b78a
4184 files changed
+326
-70
No files matched your search
@@ -0,0 +1,249 @@
|
||||
# 受 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`，outline `1px 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`。"
|
||||
|
||||
### 迭代指南
|
||||
1. 从 `#121212` 开始——一切都生活在近黑的黑暗中
|
||||
2. Spotify 绿仅用于功能性高亮（播放、激活、CTA）
|
||||
3. 胶囊化一切——大型用 500px，小型用 9999px，圆形控件用 50%
|
||||
4. 按钮使用全大写加宽字间距——这是系统性的标签声调
|
||||
5. 使用重阴影（0.3–0.5 不透明度）表达层级——轻阴影在深色背景上不可见
|
||||
6. 专辑封面提供所有色彩——UI 保持无彩色
|
||||
Reference in new issue
Block a user