④段整套同步（六节 ＋ 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。

open-design/design-systems/pinterest/DESIGN-zh.md

@@ -0,0 +1,233 @@
+# 受 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）——比纯黑更温暖