④段整套同步（六节＋ 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。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,363 @@
+# 受 Slack 启发的设计系统
+
+> Category: 生产力与 SaaS
+> 职场通讯平台。以深茄紫为主色，多色调 Logo 调色板，明亮界面搭配深色侧边栏，温暖而亲切。
+
+## 1. 视觉主题与氛围
+
+Slack 的品牌形象建立在"工作也可以充满人情味，甚至有点趣味"的理念之上。标准界面是**明亮**的——白色内容区搭配深茄紫（`#4A154B`）侧边栏——与深色优先工具形成反差。这种对比是刻意为之：侧边栏是沉稳、始终存在的导航锚点，而内容区则明亮开阔。
+
+Logo 调色板——蓝、绿、黄、红——主要出现在井号图标和营销场景中，而非散落于整个 UI。在产品本身中，Slack 使用克制、专业的配色系统，以茄紫色作为唯一的品牌锚点。
+
+**核心特征：**
+- 明亮优先的内容界面：白色 `#FFFFFF` 与近白色 `#F8F8F8`
+- 深茄紫 `#4A154B` 侧边栏——品牌最具辨识度的 UI 元素
+- 四种 Logo 强调色（蓝、绿、黄、红）仅少量用作高亮
+- 标题使用 Larsseit（营销场景），UI 使用系统无衬线字体
+- 圆润但不卡通：大多数组件圆角为 4–8px
+- 紧凑而透气：消息行紧密，线程层级清晰
+- 温暖对话的语调——表情符号、回应和插图是一等公民
+
+---
+
+## 2. 色彩规范与用途
+
+### 品牌主色
+| 变量 | Hex | 用途 |
+|---|---|---|
+| `--color-aubergine` | `#4A154B` | 侧边栏背景，品牌主色 |
+| `--color-aubergine-dark` | `#350d36` | 茄紫界面上的悬停状态 |
+| `--color-aubergine-light` | `#611f69` | 侧边栏活跃项高亮 |
+
+### Logo 强调色（少量使用——仅用于高亮、图标、营销）
+| 变量 | Hex | 名称 | 用途 |
+|---|---|---|---|
+| `--color-blue` | `#36C5F0` | 天蓝 | 频道图标、链接、信息状态 |
+| `--color-green` | `#2EB67D` | 青绿 | 在线状态、成功状态 |
+| `--color-yellow` | `#ECB22E` | 金黄 | 离开状态、警告、高亮 |
+| `--color-red` | `#E01E5A` | 宝石红 | 通知、错误、提及徽章 |
+
+### 界面背景色
+| 变量 | Hex | 用途 |
+|---|---|---|
+| `--bg-primary` | `#FFFFFF` | 主消息区、弹窗 |
+| `--bg-secondary` | `#F8F8F8` | 线程面板、次级界面 |
+| `--bg-tertiary` | `#F1F1F1` | 输入框背景、悬停状态 |
+| `--bg-sidebar` | `#4A154B` | 左侧边栏（茄紫色） |
+| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | 侧边栏项悬停 |
+| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | 活跃侧边栏项 |
+| `--bg-message-hover` | `#F8F8F8` | 消息行悬停 |
+
+### 文字颜色
+| 变量 | Hex | 用途 |
+|---|---|---|
+| `--text-primary` | `#1D1C1D` | 主要正文（近黑色） |
+| `--text-secondary` | `#616061` | 时间戳、静音标签 |
+| `--text-sidebar` | `rgba(255,255,255,0.9)` | 侧边栏频道名 |
+| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | 侧边栏未激活项 |
+| `--text-link` | `#1264A3` | 消息内联链接 |
+| `--text-mention` | `#1264A3` | @提及文字颜色 |
+
+### 语义色
+| 变量 | Hex | 用途 |
+|---|---|---|
+| `--color-success` | `#2EB67D` | 成功提示、积极状态 |
+| `--color-warning` | `#ECB22E` | 警告状态 |
+| `--color-danger` | `#E01E5A` | 错误状态、破坏性操作 |
+| `--color-info` | `#36C5F0` | 信息性高亮 |
+
+### 边框与分隔线
+| 变量 | Hex | 用途 |
+|---|---|---|
+| `--border-default` | `#DDDDDD` | 标准分隔线、卡片边框 |
+| `--border-subtle` | `#F1F1F1` | 行间微妙分隔线 |
+| `--border-focus` | `#1264A3` | 焦点环颜色 |
+
+---
+
+## 3. 排版规则
+
+### 字体
+| 用途 | 官方字体 | 网页回退 |
+|---|---|---|
+| 展示 / 营销标题 | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
+| UI / 正文 / 框架 | Slack Lato（定制） | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
+| 代码 / 等宽 | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
+
+> Slack 营销标题使用 **Larsseit**，产品内 UI 使用定制版 Lato。网页使用时，`system-ui` 是最安全的回退方案。
+
+### 字号层级
+
+| 层级 | 大小 | 字重 | 行高 | 字间距 | 用途 |
+|---|---|---|---|---|---|
+| Display XL | 48px | 800 | 1.1 | -1px | 营销主视觉标题 |
+| Display L | 36px | 700 | 1.15 | -0.5px | 区块主视觉 |
+| Heading 1 | 28px | 700 | 1.25 | normal | 弹窗标题、页面标题 |
+| Heading 2 | 22px | 700 | 1.3 | normal | 卡片标题、设置区块 |
+| Heading 3 | 18px | 700 | 1.35 | normal | 子区块标题 |
+| Body L | 16px | 400 | 1.5 | normal | 消息文本、描述 |
+| Body | 15px | 400 | 1.46667 | normal | 默认 UI 文字（Slack 基础字号） |
+| Body SM | 13px | 400 | 1.38462 | normal | 次要元数据 |
+| Caption | 12px | 400 | 1.33 | normal | 时间戳、提示 |
+| Code | 12px | 400 | 1.5 | normal | 行内代码、代码块 |
+
+### 排版规则
+- Slack 基础正文字号为 **15px**——比 16px 略小，以提高密度
+- 未读频道：字重 700——粗体是主要的未读指示器
+- 时间戳：12px `--text-secondary`，仅悬停时显示
+- 代码块：背景 `#F8F8F8`，边框 `1px solid #DDDDDD`，圆角 4px
+- 不使用 12px 以下的字号
+- 营销标题：大展示尺寸使用字间距 `-1px`
+
+---
+
+## 4. 组件样式
+
+### 按钮
+
+```css
+/* Primary */
+.btn-primary {
+  background: #4A154B;
+  color: #FFFFFF;
+  border-radius: 4px;
+  padding: 0 16px;
+  height: 36px;
+  font-size: 15px;
+  font-weight: 700;
+  border: none;
+}
+.btn-primary:hover { background: #611f69; }
+
+/* Secondary */
+.btn-secondary {
+  background: #FFFFFF;
+  color: #1D1C1D;
+  border: 1px solid #DDDDDD;
+  border-radius: 4px;
+  padding: 0 16px;
+  height: 36px;
+  font-size: 15px;
+  font-weight: 700;
+}
+.btn-secondary:hover { background: #F8F8F8; }
+
+/* Danger */
+.btn-danger {
+  background: #E01E5A;
+  color: #FFFFFF;
+  border-radius: 4px;
+}
+.btn-danger:hover { background: #B3114A; }
+```
+
+### 输入框
+```css
+.input {
+  background: #FFFFFF;
+  border: 1px solid #DDDDDD;
+  border-radius: 4px;
+  color: #1D1C1D;
+  font-size: 15px;
+  padding: 8px 12px;
+  height: 36px;
+}
+.input:focus {
+  border-color: #1264A3;
+  box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
+  outline: none;
+}
+```
+
+### 侧边栏频道项
+```css
+.channel-item {
+  height: 28px;
+  padding: 0 16px;
+  border-radius: 6px;
+  color: rgba(255,255,255,0.7);
+  font-size: 15px;
+  font-weight: 400;
+}
+.channel-item:hover {
+  background: rgba(255,255,255,0.1);
+  color: #FFFFFF;
+}
+.channel-item.active {
+  background: rgba(255,255,255,0.2);
+  color: #FFFFFF;
+}
+.channel-item.unread {
+  color: #FFFFFF;
+  font-weight: 700;
+}
+```
+
+### 未读徽章
+```css
+.badge {
+  background: #E01E5A;
+  color: #FFFFFF;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 1px 6px;
+  min-width: 18px;
+}
+```
+
+### 消息附件 / 卡片
+```css
+.attachment {
+  border-left: 4px solid #DDDDDD;
+  background: #F8F8F8;
+  border-radius: 0 4px 4px 0;
+  padding: 8px 12px;
+  margin: 4px 0;
+}
+```
+
+### 回应
+```css
+.reaction {
+  border: 1px solid #DDDDDD;
+  border-radius: 24px;
+  background: #F8F8F8;
+  padding: 2px 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.reaction:hover { background: #F1F1F1; }
+.reaction.active {
+  background: rgba(18,100,163,0.1);
+  border-color: #1264A3;
+}
+```
+
+---
+
+## 5. 布局原则
+
+### 三栏布局
+```
+┌──────────────┬──────────────────────────────┬─────────────┐
+│   Sidebar    │        Message Area          │   Thread    │
+│   (240px)    │          (flex: 1)           │  (400px)    │
+│  #4A154B     │          #FFFFFF             │  optional   │
+└──────────────┴──────────────────────────────┴─────────────┘
+```
+
+### 间距系统（基础单位 4px）
+| 变量 | 数值 | 用途 |
+|---|---|---|
+| `--space-1` | 4px | 紧凑间隙 |
+| `--space-2` | 8px | 组件内边距 |
+| `--space-3` | 12px | 输入框内边距 |
+| `--space-4` | 16px | 标准内边距 |
+| `--space-6` | 24px | 卡片内边距 |
+| `--space-8` | 32px | 区块间距 |
+
+### 侧边栏结构
+```
+[工作区名称 ▼]
+────────────────────
+Threads
+All DMs
+Drafts & Sent
+────────────────────
+▼ Channels
+  # general
+  # random
+  # design  ● (unread)
+────────────────────
+▼ Direct Messages
+  John Doe
+  Jane Smith
+```
+
+### 消息编辑器
+- 固定在消息区底部
+- `border: 1px solid #DDDDDD`，`border-radius: 8px`，`margin: 0 16px 16px`
+- 工具栏：表情、附件、格式化、发送按钮
+
+---
+
+## 6. 深度与层级
+
+Slack 在明亮界面上使用轻柔阴影：
+
+| 层级 | 用途 | 阴影 |
+|---|---|---|
+| 扁平 | 消息行、侧边栏项 | none |
+| 低 | 卡片、输入框 | `0 1px 3px rgba(0,0,0,0.08)` |
+| 中 | 下拉菜单、弹出层 | `0 4px 12px rgba(0,0,0,0.12)` |
+| 高 | 模态框、对话框 | `0 8px 24px rgba(0,0,0,0.15)` |
+| 遮罩 | 模态背景遮罩 | `rgba(0,0,0,0.5)` |
+
+---
+
+## 7. 应该与不应该
+
+### ✅ 应该
+- 侧边栏使用茄紫色 `#4A154B`——这是 Slack 最标志性的 UI 元素
+- 保持主内容区白色和明亮
+- 所有正文使用 `#1D1C1D`（近黑色），而非纯黑
+- 用粗体频道名表示未读状态——字重是指示器
+- 四种强调色仅用于语义角色（成功、警告、危险、信息）
+- 消息附件和嵌入内容使用 `border-left: 4px`
+- 仅在悬停时显示时间戳
+- 链接和焦点状态使用 `#1264A3`
+- 侧边栏项保持紧凑：高度 28px，圆角 6px
+
+### ❌ 不应该
+- 不要使用深色主内容区——Slack 是明亮优先的
+- 不要将蓝/绿/黄/红作为装饰性强调色散落各处
+- 不要使用纯黑 `#000000` 作为文字颜色
+- 不要使用气泡——消息是扁平行
+- 不要将按钮做成大圆角——4px 是标准
+- 不要永久显示时间戳
+- 不要将频道名全大写
+- 不要使用 12px 以下的字号
+
+---
+
+## 8. 响应式行为
+
+### 断点
+| 断点 | 宽度 | 布局 |
+|---|---|---|
+| 移动端 | < 768px | 单面板，侧边栏作为左抽屉 |
+| 平板 | 768–1024px | 侧边栏 + 仅消息区 |
+| 桌面端 | > 1024px | 完整三栏布局 |
+
+### 移动端适配
+- 侧边栏：左抽屉，向右滑动打开
+- 底部标签栏：首页、私信、动态、我
+- 线程面板：全屏覆盖层
+- 编辑器：固定在键盘上方
+- 频道列表项：44px 触摸目标高度
+- 移动端保留茄紫色顶部标题栏
+
+---
+
+## 9. Agent 提示指南
+
+生成 Slack 风格设计时，遵循以下方法：
+
+**颜色应用：**
+> 将 `background: #FFFFFF` 设为主画布。侧边栏使用 `#4A154B`（茄紫色）。所有主要文字使用 `#1D1C1D`。链接和焦点环使用 `#1264A3`。四种 Logo 颜色——`#36C5F0`、`#2EB67D`、`#ECB22E`、`#E01E5A`——仅作语义用途：信息、成功、警告、危险。
+
+**排版：**
+> 所有 UI 使用 `system-ui, -apple-system, sans-serif`。基础字号为 15px。未读频道：字重 700。正文：字重 400。时间戳：12px `#616061`，仅悬停显示。代码：`Monaco, Menlo, monospace`，12px，背景 `#F8F8F8`。
+
+**布局：**
+> 三栏：240px 茄紫色侧边栏 + 弹性白色消息区 + 可选 400px 线程面板。侧边栏项：高度 28px，圆角 6px，未读时加粗。编辑器：固定底部，`border: 1px solid #DDDDDD`，`border-radius: 8px`。
+
+**组件：**
+> 按钮：圆角 4px，高度 36px，茄紫色主按钮。输入框：`1px solid #DDDDDD` 边框，`#1264A3` 焦点环。消息行：扁平，无气泡，36px 圆形头像。回应：胶囊形 `border: 1px solid #DDDDDD`，`border-radius: 24px`。
+
+**语调：**
+> Slack 是温暖、专业且充满人情味的。空状态使用友好插图。行动号召直接明确："Send message"、"Get started"。错误信息清晰且有帮助。绝不令人感到警觉。
+
+**需要避免的反模式：**
+> 不要深色内容区。不要气泡。不要纯黑文字。不要散落的多色强调。不要全大写频道名。不要低于 12px 的字号。不要大圆角按钮。