④段整套同步（六节＋ 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,146 @@
+# OpenAIにインスパイアされたデザインシステム
+
+> Category: AIおよびLLM
+> 深いティールブラックを基調とした、ゆったりとした余白とエディトリアルなタイポグラフィが特徴の、落ち着いたほぼモノクロームのシステム。
+
+## 1. ビジュアルテーマと雰囲気
+
+OpenAIのプロダクト表面は、一般向けに整えられた研究施設のように映る——臨床的で、抑制されており、意図的に静謐だ。ページ背景は純粋な白（`#ffffff`）で、わずかにティールのアンダートーンを帯びたニアブラックのインク（`#0d0d0d`）と重なり合う。そのためテキストでさえ、攻撃的な暗さではなく、わずかに冷たいトーンを帯びる。結果として生まれる色彩的中立性は、まわりのクロームではなく、モデルの出力・コード・文章そのものを前景に押し出す。
+
+このシステムの象徴的な特徴は、抑えたウェイトの**Söhne**（またはシステム代替の`inter`）の使用だ——本文は400、ナビゲーションとラベルは500、強調は600——これに、エディトリアル表示用のコンテンポラリーセリフ書体である**Signifier**が組み合わされる。多くのAIブランドが未来志向に傾くなか、OpenAIのセリフ見出しはプロダクトに静かに文学的なトーンをもたらし、まるであらゆるアナウンスがエッセイであるかのような印象を与える。
+
+シェイプシステムは一貫してソフトだ。8px〜12pxの角丸、タグやチップには9999pxのピル形状、どこにも鋭い角は存在しない。セクションの切れ目は仕切り線ではなく余白で示される。ボーダーが現れる際は`#e5e5e5`のヘアライン——色の存在ではなく、色の不在として読み取れるほど細い。
+
+**主な特徴：**
+- 深いティールブラックのインク（`#0d0d0d`）を持つ純白のキャンバス（`#ffffff`）
+- 控えめなウェイト（400、500、600）のSöhne / Inter——主張より抑制
+- エディトリアル表示の見出しにSignifierセリフ
+- すべての箇所に8〜12pxのソフトな角丸、チップには9999pxのピル
+- ヘアラインボーダー（`#e5e5e5`）を控えめに使用、余白が主たる区切り
+- 深いティールによる単色イラスト——マーク内にグラデーションなし
+- 十分なラインハイト（1.55〜1.65）とゼロに近いトラッキング
+
+## 2. カラーパレットと役割
+
+### プライマリ
+- **ピュアホワイト**（`#ffffff`）：プライマリ背景、カード面、ボタン背景。
+- **インクブラック**（`#0d0d0d`）：プライマリテキスト、ブランドマーク、プライマリCTA。
+- **ソフトブラック**（`#1a1a1a`）：セカンダリ見出し、非重要テキストの代替インク。
+
+### サーフェスと背景
+- **ミスト**（`#fafafa`）：セクション区切り背景、フッターサーフェス。
+- **パール**（`#f5f5f5`）：カード面、高さのあるパネル。
+- **クラウド**（`#ececec`）：無効化された背景、仕切りのティント。
+
+### ブランドアクセント
+- **OpenAIティール**（`#10a37f`）：ブランドプライマリ、リンク、ハイライトバッジ——それ以外はニュートラルなシステムにおける唯一の色。
+- **ティールディープ**（`#0a7a5e`）：ブランドカラーのホバーおよび押下状態。
+- **ティールソフト**（`#e8f5f0`）：成功バッジやハイライトコールアウトのサーフェスティント。
+
+### ニュートラルとテキスト
+- **グラファイト**（`#3c3c3c`）：本文テキスト、デフォルトの閲覧カラー。
+- **スレート**（`#6e6e6e`）：セカンダリテキスト、キャプション、メタデータ。
+- **アッシュ**（`#9b9b9b`）：第三テキスト、プレースホルダー、無効ラベル。
+- **ストーン**（`#c4c4c4`）：装飾的な仕切り線、薄いアイコン。
+
+### セマンティックとボーダー
+- **ボーダーヘアライン**（`#e5e5e5`）：標準のヘアライン区切り線。
+- **ボーダーソフト**（`#ededed`）：白いサーフェス上のカードアウトライン。
+- **エラー**（`#ef4146`）：バリデーション、破壊的なアクション。
+- **ワーニング**（`#f5a623`）：注意喚起の状態に使うソフトなアンバー。
+- **インフォ**（`#2563eb`）：情報リンクのトーン（控えめに使用、ティールが優先）。
+
+## 3. タイポグラフィのルール
+
+### フォントファミリ
+- **ディスプレイ / エディトリアル**：`Signifier`、フォールバック：`'Source Serif Pro', Georgia, serif`
+- **本文 / UI**：`Söhne`、フォールバック：`Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **コード / モノ**：`Söhne Mono`、フォールバック：`ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### 階層
+
+| 役割 | フォント | サイズ | ウェイト | ラインハイト | レタースペーシング | 備考 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | エディトリアルヒーロー、告知タイトル |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | ページ見出し |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | セクション見出し |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | サブセクション |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | リード段落 |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | 標準本文 |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | カード本文、密なUI |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | メタデータ、バッジ |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | アイブロウ、大文字ナビリンク |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | コードブロック、ターミナル出力 |
+
+### 原則
+- **アイデンティティとしての抑制**：ウェイトは600を上限とする。700以上はブランドのトーンから外れる。階層はウェイトではなく、サイズと色によって生み出す。
+- **魂のためのセリフ、システムのためのサンセリフ**：SignifierはエディトリアルなDisplayの場面にのみ使用する。プロダクトUIはサンセリフのみ。
+- **Displayにはネガティブトラッキング**：Displayサイズには-0.02em、16pxに向かうにつれてゼロに戻す。
+
+## 4. コンポーネントのスタイリング
+
+### ボタン
+
+**プライマリ**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px（チップはフルピル形状）、矩形CTAには12px
+- Hover: `#1a1a1a` background
+- 用途：プライマリCTA、「ChatGPTを試す」、「サインイン」
+
+**セカンダリ**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: background `#fafafa`、border `#d4d4d4`
+
+**ブランドアクセント**
+- Background: `#10a37f`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- 用途：アップグレードのハイライトCTA、成功パス
+
+### カード
+- Background: `#ffffff`
+- Border: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px〜32px
+- Shadow: デフォルトはなし、ホバー時 `0 4px 16px rgba(13,13,13,0.06)`
+
+### インプット
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Focus: border `#10a37f`、ring `0 0 0 3px rgba(16,163,127,0.12)`
+
+### ピルとタグ
+- Background: `#f5f5f5`
+- Text: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 500
+
+## 5. スペーシングとレイアウト
+
+- **基本単位**：4px。スケール：4、8、12、16、24、32、48、64、96、128。
+- **コンテナ**：max-width 1200px、モバイルは24pxガター、デスクトップは48px。
+- **セクションリズム**：主要セクション間の縦方向は96〜128px、モバイルは64px。
+- **グリッド**：デスクトップは12カラム、モバイルは4カラム、ギャップは24px。
+
+## 6. モーション
+
+- **デュレーション**：ホバーは150〜220ms、レイアウトトランジションは280〜360ms。
+- **イージング**：入場には `cubic-bezier(0.16, 1, 0.3, 1)`（スムーズアウト）。
+- **抑制**：パララックスなし、スクロールジャッキングなし。控えめなフェードとトランスレートのみ。
+
+## 7. 使用上のガイドライン
+
+- ニュートラルなエディトリアルの抑制、ソフトな角丸、控えめなアクセントの使用は、セットで維持すること。グリーンのアクセントを使うだけでは、OpenAIらしいサーフェスは生まれない。
+- Signifierスタイルのディスプレイ表現は、エディトリアルまたは告知の階層にのみ使用し、プロダクトのコントロールはサンセリフシステムで保つこと。
+- 装飾的なモーション、重いシャドウ、過大な装飾的カードは避けること。このシステムは落ち着いていて、読みやすく、意図的な印象を与えるものでなければならない。