④段整套同步（六节＋ 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
+> 職場向けコミュニケーションプラットフォーム。深いオーベルジーヌを主色に、マルチアクセントのロゴパレット、ダークサイドバーを組み合わせた明るいサーフェス。温かみがあり親しみやすい。
+
+## 1. ビジュアルテーマと雰囲気
+
+Slack のアイデンティティは、「仕事は人間らしく、少し楽しくあるべきだ」というコンセプトに基づいています。標準的なサーフェスは**明るい**——白いコンテンツエリアに深いオーベルジーヌ（`#4A154B`）のサイドバー——ダーク優先のツールとは対照的です。このコントラストは意図的なもので、サイドバーは落ち着いた常設のナビゲーションアンカーであり、コンテンツエリアは明るく開放的です。
+
+ロゴパレット——青、緑、黄、赤——は主にハッシュタグアイコンやマーケティングの文脈で使用され、UI 全体に散りばめられてはいません。製品内では、Slack はオーベルジーヌを唯一のブランドアンカーとして使用する、節制された専門的なカラーシステムを採用しています。
+
+**主な特徴：**
+- 明るさ優先のコンテンツサーフェス：ホワイト `#FFFFFF` とニアホワイト `#F8F8F8`
+- 深いオーベルジーヌ `#4A154B` のサイドバー——ブランドで最も象徴的な UI 要素
+- 4 つのロゴアクセントカラー（青、緑、黄、赤）はハイライトのみに少量使用
+- 見出しに Larsseit（マーケティング）、UI にはシステムサンセリフ
+- 丸みはあるがカートゥーン調ではない：ほとんどのコンポーネントで 4〜8px の角丸
+- 密度があり息づかいのある：コンパクトなメッセージ行と明確なスレッド階層
+- 温かく会話的なトーン——絵文字、リアクション、イラストはファーストクラス
+
+---
+
+## 2. カラーパレットと役割
+
+### ブランドプライマリ
+| トークン | Hex | 役割 |
+|---|---|---|
+| `--color-aubergine` | `#4A154B` | サイドバー背景、ブランドプライマリカラー |
+| `--color-aubergine-dark` | `#350d36` | オーベルジーヌサーフェスのホバー状態 |
+| `--color-aubergine-light` | `#611f69` | サイドバーのアクティブアイテムハイライト |
+
+### ロゴアクセントカラー（少量使用——ハイライト、アイコン、マーケティングのみ）
+| トークン | 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. レイアウト原則
+
+### 3 カラムレイアウト
+```
+┌──────────────┬──────────────────────────────┬─────────────┐
+│   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`（ニアブラック）を使用し、純粋な黒は避ける
+- チャンネル名を太字にして未読状態を示す——ウェイトがインジケーター
+- 4 つのアクセントカラーはセマンティックな役割（成功、警告、危険、情報）のみに使用
+- メッセージの添付ファイルと埋め込みに `border-left: 4px` を適用
+- タイムスタンプはホバー時のみ表示
+- リンクとフォーカス状態に `#1264A3` を使用
+- サイドバーアイテムをコンパクトに保つ：高さ 28px、角丸 6px
+
+### ❌ すべきでないこと
+- メインコンテンツエリアをダークにしない——Slack は明るさ優先
+- 青/緑/黄/赤を装飾的なアクセントとして散りばめない
+- テキストに純粋な黒 `#000000` を使用しない
+- 吹き出しを使用しない——メッセージはフラットな行
+- ボタンを大きな角丸にしない——4px が標準
+- タイムスタンプを常時表示しない
+- チャンネル名をすべて大文字にしない
+- フォントサイズを 12px 未満にしない
+
+---
+
+## 8. レスポンシブ動作
+
+### ブレークポイント
+| ブレークポイント | 幅 | レイアウト |
+|---|---|---|
+| モバイル | < 768px | シングルパネル、サイドバーは左ドロワー |
+| タブレット | 768–1024px | サイドバー + メッセージエリアのみ |
+| デスクトップ | > 1024px | フルの 3 カラムレイアウト |
+
+### モバイルアダプテーション
+- サイドバー：左ドロワー、右スワイプで開く
+- ボトムタブバー：ホーム、DM、アクティビティ、プロフィール
+- スレッドパネル：フルスクリーンオーバーレイ
+- コンポーザー：キーボードの上に固定
+- チャンネルリストアイテム：44px のタッチターゲット高さ
+- モバイルでもオーベルジーヌのトップヘッダーバーを維持
+
+---
+
+## 9. Agent プロンプトガイド
+
+Slack スタイルのデザインを生成する際は、以下のアプローチに従ってください：
+
+**カラーの適用：**
+> メインキャンバスとして `background: #FFFFFF` を設定します。サイドバーには `#4A154B`（オーベルジーヌ）を使用します。すべてのプライマリテキストは `#1D1C1D` です。リンクとフォーカスリングは `#1264A3` を使用します。4 つのロゴカラー——`#36C5F0`、`#2EB67D`、`#ECB22E`、`#E01E5A`——はセマンティック専用：情報、成功、警告、危険。
+
+**タイポグラフィ：**
+> すべての UI に `system-ui, -apple-system, sans-serif` を使用します。ベースサイズは 15px です。未読チャンネル：ウェイト 700。ボディテキスト：ウェイト 400。タイムスタンプ：12px `#616061`、ホバー時のみ。コード：`Monaco, Menlo, monospace`、12px、背景 `#F8F8F8`。
+
+**レイアウト：**
+> 3 カラム：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 は温かく、プロフェッショナルで、人間らしいです。空の状態にはフレンドリーなイラストを使用します。CTA は直接的：「Send message」、「Get started」。エラーメッセージは明確で助けになります。決して不安をあおらない。
+
+**避けるべきアンチパターン：**
+> ダークなコンテンツエリア禁止。吹き出し禁止。純粋な黒のテキスト禁止。散乱したマルチカラーアクセント禁止。チャンネル名の全大文字禁止。12px 未満のフォント禁止。大きな角丸ボタン禁止。