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。
234 lines
12 KiB
Markdown
234 lines
12 KiB
Markdown
# 受 Pinterest 启发的设计系统
|
||
|
||
> Category: 媒体与消费
|
||
> 视觉发现。红色点缀，瀑布流网格，图片优先。
|
||
|
||
## 1. 视觉主题与氛围
|
||
|
||
Pinterest 的网站是一块温暖、充满灵感的画布，将视觉发现体验打造得如同生活方式杂志。设计基于柔和、略带暖意的白色背景，以 Pinterest 红（`#e60023`）作为唯一醒目的品牌点缀色。与大多数科技平台的冷蓝色调不同，Pinterest 的中性色系带有明显的暖色调——灰色偏向橄榄/沙色（`#91918c`、`#62625b`、`#e5e5e0`），而非冷钢色，营造出温馨、手工感十足的氛围，让人忍不住想要浏览下去。
|
||
|
||
字体使用 Pin Sans——一款定制专属字体，拥有宽泛的备用字体栈（包含日文字体），体现了 Pinterest 的全球影响力。在展示级别（70px，字重 600），Pin Sans 打造出宽大、亲切的标题。在较小尺寸下，系统保持紧凑：按钮 12px，说明文字 12–14px。CSS 变量命名体系（`--comp-*`、`--sema-*`、`--base-*`）揭示了一套精密的三层设计 token 架构：组件层、语义层和基础层 token。
|
||
|
||
Pinterest 的特色在于其慷慨的圆角系统（12px–40px，加上圆形的 50%）以及带暖色调的按钮背景。次要按钮（`#e5e5e0`）呈现出明显的暖沙色调，而非冷灰色。主要红色按钮使用 16px 圆角——圆润但不是药丸形。结合暖色徽章背景（`hsla(60,20%,98%,.5)`——微妙的暖黄色调）以及以摄影为主导的版面，最终呈现出一种手工感、个性化的设计，而非企业化、千篇一律的风格。
|
||
|
||
**关键特征：**
|
||
- 带橄榄/沙色中性色的暖白色画布——温馨，而非冷峻
|
||
- Pinterest 红（`#e60023`）作为唯一醒目的点缀色——从不低调，始终自信
|
||
- Pin Sans 定制字体，配备全球备用字体栈（含 CJK）
|
||
- 三层 token 架构：`--comp-*` / `--sema-*` / `--base-*`
|
||
- 暖色次要表面：沙灰色（`#e5e5e0`）、暖色徽章（`hsla(60,20%,98%,.5)`）
|
||
- 慷慨的圆角：标准 16px，大容器最高 40px
|
||
- 摄影内容优先——图钉/图像是主要视觉元素
|
||
- 深近紫色文字（`#211922`）——温暖，带一丝梅红色
|
||
|
||
## 2. 色彩调色板与用途
|
||
|
||
### 主品牌色
|
||
- **Pinterest 红**（`#e60023`）：主要 CTA、品牌点缀——醒目、自信的红色
|
||
- **绿色 700**（`#103c25`）：`--base-color-green-700`，成功/自然点缀
|
||
- **绿色 700 悬停**（`#0b2819`）：`--base-color-hover-green-700`，按下的绿色
|
||
|
||
### 文字色
|
||
- **梅黑色**（`#211922`）：主要文字——带梅红色调的暖近黑色
|
||
- **纯黑**（`#000000`）：次要文字、按钮文字
|
||
- **橄榄灰**（`#62625b`）：次要描述，低调文字
|
||
- **暖银色**（`#91918c`）：`--comp-button-color-text-transparent-disabled`，禁用文字，输入框边框
|
||
- **白色**（`#ffffff`）：深色/彩色表面上的文字
|
||
|
||
### 交互色
|
||
- **焦点蓝**（`#435ee5`）：`--comp-button-color-border-focus-outer-transparent`，焦点环
|
||
- **性能紫**（`#6845ab`）：`--sema-color-hover-icon-performance-plus`，性能功能
|
||
- **推荐紫**（`#7e238b`）：`--sema-color-hover-text-recommendation`，AI 推荐
|
||
- **链接蓝**（`#2b48d4`）：链接文字颜色
|
||
- **Facebook 蓝**（`#0866ff`）：`--facebook-background-color`，社交登录
|
||
- **按下蓝**（`#617bff`）：`--base-color-pressed-blue-200`，按下状态
|
||
|
||
### 表面与边框
|
||
- **沙灰色**（`#e5e5e0`）：次要按钮背景——温暖，手工感
|
||
- **暖亮色**（`#e0e0d9`）：圆形按钮背景，徽章
|
||
- **暖色调**（`hsla(60, 20%, 98%, 0.5)`）：`--comp-badge-color-background-wash-light`，微妙的暖色徽章背景
|
||
- **雾色**（`#f6f6f3`）：浅色表面（50% 不透明度）
|
||
- **禁用边框**（`#c8c8c1`）：`--sema-color-border-disabled`，禁用边框
|
||
- **悬停灰**（`#bcbcb3`）：`--base-color-hover-grayscale-150`，悬停边框
|
||
- **深色表面**（`#33332e`）：深色区域背景
|
||
|
||
### 语义色
|
||
- **错误红**（`#9e0a0a`）：复选框/表单错误状态
|
||
|
||
## 3. 字体规则
|
||
|
||
### 字体家族
|
||
- **主字体**：`Pin Sans`，备用字体：`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
|
||
|
||
### 层次结构
|
||
|
||
| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| 展示主标题 | Pin Sans | 70px (4.38rem) | 600 | normal | normal | 最大视觉冲击力 |
|
||
| 区块标题 | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | 负字间距 |
|
||
| 正文 | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | 标准阅读 |
|
||
| 加粗说明 | Pin Sans | 14px (0.88rem) | 700 | normal | normal | 强调元数据 |
|
||
| 说明 | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | 小字，标签 |
|
||
| 按钮 | Pin Sans | 12px (0.75rem) | 400 | normal | normal | 按钮标签 |
|
||
|
||
### 原则
|
||
- **紧凑字号体系**：字号范围 12px–70px，跨度显著——大多数功能性文字为 12–16px，营造密集的应用感信息层次。
|
||
- **暖色字重分布**：标题 600–700，正文 400–500。无超轻字重——文字始终感觉有分量。
|
||
- **标题负字间距**：28px 标题的 -1.2px 字间距创造出温馨、亲近的区块标题感。
|
||
- **单一字体家族**：Pin Sans 承担所有排版——未检测到次要展示或等宽字体。
|
||
|
||
## 4. 组件样式
|
||
|
||
### 按钮
|
||
|
||
**主要红色按钮**
|
||
- 背景：`#e60023`（Pinterest 红）
|
||
- 文字：`#000000`（黑色——在红色上的对比度是个不寻常的选择）
|
||
- 内边距：6px 14px
|
||
- 圆角：16px（圆润但非药丸形）
|
||
- 边框：`2px solid rgba(255, 255, 255, 0)`（透明）
|
||
- 焦点：通过 CSS 变量实现的语义边框 + 轮廓
|
||
|
||
**次要沙色按钮**
|
||
- 背景：`#e5e5e0`（暖沙灰色）
|
||
- 文字：`#000000`
|
||
- 内边距：6px 14px
|
||
- 圆角：16px
|
||
- 焦点：相同的语义边框系统
|
||
|
||
**圆形操作按钮**
|
||
- 背景：`#e0e0d9`（暖亮色）
|
||
- 文字：`#211922`（梅黑色）
|
||
- 圆角：50%（圆形）
|
||
- 用途：图钉操作、导航控件
|
||
|
||
**幽灵/透明按钮**
|
||
- 背景：透明
|
||
- 文字：`#000000`
|
||
- 无边框
|
||
- 用途：第三级操作
|
||
|
||
### 卡片与容器
|
||
- 以摄影为主的图钉卡片，慷慨的圆角（12px–20px）
|
||
- 大多数卡片无传统盒阴影
|
||
- 白色或暖雾色背景
|
||
- 部分图片容器有 8px 白色厚边框
|
||
|
||
### 输入框
|
||
- 邮箱输入框：白色背景，`1px solid #91918c` 边框，16px 圆角，11px 15px 内边距
|
||
- 焦点：通过 CSS 变量实现的语义边框 + 轮廓系统
|
||
|
||
### 导航
|
||
- 白色或暖色背景上的简洁顶部栏
|
||
- Pinterest logo + 搜索栏居中
|
||
- 导航链接 Pin Sans 16px
|
||
- 活跃状态使用 Pinterest 红色点缀
|
||
|
||
### 图片处理
|
||
- 图钉式瀑布流网格（Pinterest 标志性版面）
|
||
- 图片圆角：12px–20px
|
||
- 摄影作为主要内容——每个图钉都是一张图片
|
||
- 精选图片容器有 8px 白色厚边框
|
||
|
||
## 5. 版面原则
|
||
|
||
### 间距系统
|
||
- 基础单位：8px
|
||
- 刻度：4px、6px、7px、8px、10px、11px、12px、16px、18px、20px、22px、24px、32px、80px、100px
|
||
- 大跳跃：32px → 80px → 100px 用于区块间距
|
||
|
||
### 网格与容器
|
||
- 图钉内容使用瀑布流网格（标志性版面）
|
||
- 居中内容区块，充裕的最大宽度
|
||
- 全宽深色页脚
|
||
- 搜索栏作为主要导航元素
|
||
|
||
### 留白哲学
|
||
- **灵感密度**：瀑布流网格将图钉紧密排列——内容密度本身就是价值主张。留白存在于区块之间，而非网格内部。
|
||
- **上方呼吸，下方密集**：主角/特色区块获得充裕的内边距；图钉网格紧凑而沉浸。
|
||
|
||
### 圆角体系
|
||
- 标准（12px）：小卡片，链接
|
||
- 按钮（16px）：按钮、输入框、中等卡片
|
||
- 舒适（20px）：特色卡片
|
||
- 大（28px）：大容器
|
||
- 区块（32px）：标签元素，大面板
|
||
- 主角（40px）：主角容器，大型特色块
|
||
- 圆形（50%）：操作按钮，标签指示器
|
||
|
||
## 6. 层次与阴影
|
||
|
||
| 层级 | 处理方式 | 用途 |
|
||
|-------|-----------|-----|
|
||
| 扁平（0 级）| 无阴影 | 默认——图钉依靠内容而非阴影 |
|
||
| 微妙（1 级）| 最小阴影（来自 token） | 悬浮叠层，下拉菜单 |
|
||
| 焦点（无障碍）| `--sema-color-border-focus-outer-default` 环 | 焦点状态 |
|
||
|
||
**阴影哲学**：Pinterest 使用极少的阴影。瀑布流网格依靠内容（摄影）创造视觉趣味，而非依靠提升效果。深度来自表面颜色的温暖感和容器的慷慨圆角。
|
||
|
||
## 7. 应做与不应做
|
||
|
||
### 应做
|
||
- 使用暖中性色（`#e5e5e0`、`#e0e0d9`、`#91918c`）——橄榄/沙色调是品牌标识
|
||
- 仅将 Pinterest 红（`#e60023`）用于主要 CTA——它醒目且唯一
|
||
- 专一使用 Pin Sans——一种字体统揽一切
|
||
- 应用慷慨的圆角：按钮/输入框 16px，卡片 20px+
|
||
- 保持瀑布流网格的密集感——内容密度就是价值
|
||
- 使用暖色徽章背景（`hsla(60,20%,98%,.5)`）实现微妙的暖色调
|
||
- 主要文字使用 `#211922`（梅黑色）——比纯黑更温暖
|
||
|
||
### 不应做
|
||
- 不要使用冷灰色中性色——始终保持暖色/橄榄色调
|
||
- 不要使用纯黑（`#000000`）作为主要文字——使用梅黑色（`#211922`）
|
||
- 不要使用药丸形按钮——16px 圆角是圆润的，但不是药丸形
|
||
- 不要添加厚重阴影——Pinterest 设计上是扁平的，深度来自内容
|
||
- 不要在卡片上使用小圆角（<12px）——慷慨的圆角是核心
|
||
- 不要引入额外的品牌色——红色+暖中性色就是完整的色彩体系
|
||
- 不要使用细字重——Pin Sans 最低 400
|
||
|
||
## 8. 响应式行为
|
||
|
||
### 断点
|
||
| 名称 | 宽度 | 主要变化 |
|
||
|------|-------|-------------|
|
||
| 移动端 | <576px | 单列，紧凑布局 |
|
||
| 大移动端 | 576–768px | 2 列图钉网格 |
|
||
| 平板 | 768–890px | 扩展网格 |
|
||
| 小桌面 | 890–1312px | 标准瀑布流网格 |
|
||
| 桌面 | 1312–1440px | 完整布局 |
|
||
| 大桌面 | 1440–1680px | 扩展网格列 |
|
||
| 超宽屏 | >1680px | 最大网格密度 |
|
||
|
||
### 折叠策略
|
||
- 图钉网格：5+ 列 → 3 → 2 → 1
|
||
- 导航：搜索栏 + 图标 → 简化移动端导航
|
||
- 特色区块：并排 → 堆叠
|
||
- 主角：70px → 按比例缩小
|
||
- 页脚：深色多列 → 堆叠
|
||
|
||
## 9. 智能代理提示指南
|
||
|
||
### 快速颜色参考
|
||
- 品牌色：Pinterest 红（`#e60023`）
|
||
- 背景色：白色（`#ffffff`）
|
||
- 文字色：梅黑色（`#211922`）
|
||
- 次要文字：橄榄灰（`#62625b`）
|
||
- 按钮表面：沙灰色（`#e5e5e0`）
|
||
- 边框色：暖银色（`#91918c`）
|
||
- 焦点色：焦点蓝（`#435ee5`）
|
||
|
||
### 示例组件提示
|
||
- "创建一个主角区块：白色背景。标题使用 70px Pin Sans 字重 600，梅黑色（#211922）。红色 CTA 按钮（#e60023，16px 圆角，6px 14px 内边距）。次要沙色按钮（#e5e5e0，16px 圆角）。"
|
||
- "设计一个图钉卡片：白色背景，16px 圆角，无阴影。摄影填充顶部，下方 16px Pin Sans 字重 400 描述文字，颜色 #62625b。"
|
||
- "制作一个圆形操作按钮：#e0e0d9 背景，50% 圆角，#211922 图标。"
|
||
- "创建一个输入框：白色背景，1px solid #91918c，16px 圆角，11px 15px 内边距。焦点：通过语义 token 实现蓝色轮廓。"
|
||
- "设计深色页脚：#33332e 背景。白色 Pinterest 手写体 logo。12px Pin Sans 链接，颜色 #91918c。"
|
||
|
||
### 迭代指南
|
||
1. 随处使用暖中性色——橄榄/沙灰色，绝不用冷钢色
|
||
2. Pinterest 红仅用于 CTA——醒目且唯一
|
||
3. 按钮/输入框 16px 圆角，卡片 20px+——慷慨但非药丸形
|
||
4. Pin Sans 是唯一字体——UI 紧凑 12px，展示 70px
|
||
5. 摄影承载设计——UI 保持温暖而简约
|
||
6. 文字使用梅黑色（#211922）——比纯黑更温暖
|