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。
162 lines
10 KiB
Markdown
162 lines
10 KiB
Markdown
# GitHub にインスパイアされたデザインシステム
|
||
|
||
> Category: 開発者ツール
|
||
> コードファーストなプラットフォーム。機能密度が高く、青と白の精緻な配色、Primer を基盤とする。
|
||
|
||
## 1. ビジュアルテーマと雰囲気
|
||
|
||
GitHub のインターフェースは装飾的ではなく、エンジニアリングされている。すべてのピクセルが一つの姿勢を宣言している——これは diff、ビルド、pull request を気にかける人々のためのツールだ。ページの背景はクリーンな `#ffffff`（ライトモード）または `#0d1117`（ダークモード）で、コンテンツは余白ではなくヘアライン境界線で区切られた密な矩形ペインに配置される。情報密度がブランドだ——リスト行、コード行、リポジトリヘッダー、通知カードはすべて密集しており、パワーユーザーはスクロールなしに百件のアイテムを確認できる。
|
||
|
||
シグネチャのアクセントカラーは、リンクと主要アクションのための **Primer ブルー** (`#0969da`) と、マージ状態・成功・マージボタンのための **GitHub グリーン** (`#1a7f37`) だ。どちらもコンシューマー製品の青や緑と比べてやや抑えられている——密なグレーのテキストに対して読み取れるほどの彩度を持ちながら、一つのビューポートに複数表示されても背景に溶け込むほど抑制されている。
|
||
|
||
タイポグラフィはプロダクト全体で **system-ui** スタックを使用し、すべての OS でテキストが鮮明にレンダリングされるようにしている。コードには **SFMono / Menlo / Consolas** を組み合わせる。エディトリアルな表示用フォントは存在しない——GitHub の声はあなたが使用しているシステムの声そのものだ。
|
||
|
||
**主な特徴：**
|
||
- 真っ白なキャンバス（`#ffffff`）またはディープネイビーブラック（`#0d1117`）——温かみなし、色調なし
|
||
- ヘアラインのグレー境界線（`#d0d7de`）がすべてのペインとパネルを定義する
|
||
- Primer ブルー（`#0969da`）はリンク/主要アクション用；GitHub グリーン（`#1a7f37`）は成功/マージ用
|
||
- 本文には system-ui；コードには SFMono——カスタム書体なし
|
||
- 最小限のパディングで密なリスト行；余白は希少
|
||
- 16px / 24px の Octicon アイコン——シングルストローク、幾何学的、一貫性あり
|
||
- 強い色彩セマンティクスを持つピル型ステータスバッジ
|
||
|
||
## 2. カラーパレットと役割
|
||
|
||
### プライマリ
|
||
- **Canvas Default**（`#ffffff`）：ライトテーマのプライマリページ背景。
|
||
- **Canvas Subtle**（`#f6f8fa`）：セカンダリサーフェス、サイドバー、入力背景、ヘッダーストリップ。
|
||
- **Canvas Inset**（`#eaeef2`）：コードブロック背景、ディープインセットサーフェス。
|
||
- **Fg Default**（`#1f2328`）：プライマリテキスト、見出し、本文。
|
||
- **Fg Muted**（`#656d76`）：セカンダリテキスト、キャプション、ファイルパス。
|
||
|
||
### ブランドアクセント
|
||
- **Primer Blue**（`#0969da`）：リンク、プライマリ CTA、フォーカスリングの基色——ユニバーサルなインタラクティブカラー。
|
||
- **Primer Blue Hover**（`#0550ae`）：プライマリブルーのホバー/プレス状態。
|
||
- **Accent Subtle**（`#ddf4ff`）：コールアウト・情報バナー用のソフトブルーサーフェス。
|
||
|
||
### セマンティック
|
||
- **Success / Merge Green**（`#1a7f37`）：マージ済み PR、成功バッジ、マージボタン。
|
||
- **Success Subtle**（`#dafbe1`）：成功サーフェスのティント。
|
||
- **Open Green**（`#1a7f37`）：Issue/PR の「Open」状態。
|
||
- **Closed / Danger Red**（`#cf222e`）：クローズ済み PR、破壊的アクション、バリデーションエラー。
|
||
- **Danger Subtle**（`#ffebe9`）：エラーバナーサーフェス。
|
||
- **Attention / Warning Yellow**（`#9a6700`）：アンバーサーフェス上の警告テキスト。
|
||
- **Attention Subtle**（`#fff8c5`）：警告バナーサーフェス。
|
||
- **Done Purple**（`#8250df`）：マージ済みアーカイブ、「done」状態、プレミアムバッジ。
|
||
- **Sponsor Pink**（`#bf3989`）：スポンサーハート、GitHub Sponsors ブランドカラー。
|
||
|
||
### ボーダーとディバイダー
|
||
- **Border Default**（`#d0d7de`）：標準のヘアラインボーダー、パネルのアウトライン。
|
||
- **Border Muted**（`#d8dee4`）：パネル内の内部ディバイダー。
|
||
- **Border Subtle**（`#eaeef2`）：淡いテーブル行ディバイダー。
|
||
|
||
### ダークテーマ
|
||
- **Dark Canvas**（`#0d1117`）：ダークページ背景。
|
||
- **Dark Surface**（`#161b22`）：サイドバー、ヘッダー、セカンダリサーフェス。
|
||
- **Dark Border**（`#30363d`）：標準ダークモードボーダー。
|
||
- **Dark Fg**（`#e6edf3`）：ダーク背景上のプライマリテキスト。
|
||
|
||
## 3. タイポグラフィのルール
|
||
|
||
### フォントファミリー
|
||
- **本文 / UI**：`-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||
- **コード / 等幅**：`ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||
- **Emoji**：`"Apple Color Emoji", "Segoe UI Emoji"`
|
||
|
||
### 階層
|
||
|
||
| 役割 | フォント | サイズ | ウェイト | 行高 | 字間 | 備考 |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | リポジトリヘッダー、マーケティングヒーロー |
|
||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | ページ見出し |
|
||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | セクション見出し |
|
||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | サブセクション、パネルヘッダー |
|
||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | デフォルトテキストサイズ——16px ではない |
|
||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | キャプション、ファイルメタデータ |
|
||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | コードブロック、diff |
|
||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | インライン `code` スパン |
|
||
|
||
### 原則
|
||
- **本文 14px、16px ではない**：GitHub の文字密度はそのアイデンティティだ。より多くの行をビューポートに収めるため、プロダクトは 14px で表示される。
|
||
- **ウェイトはバイナリ**：デフォルトはすべて 400；見出しと強調には 600。500 も 700 も使わない。
|
||
- **常にシステムフォント**：Chrome 用のウェブフォントは絶対に読み込まない——テキストは低速な接続でも即座にレンダリングされなければならない。
|
||
|
||
## 4. コンポーネントのスタイル
|
||
|
||
### ボタン
|
||
|
||
**プライマリ（グリーン）**
|
||
- Background: `#1f883d`
|
||
- Text: `#ffffff`
|
||
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
|
||
- Padding: 5px 16px
|
||
- Radius: 6px
|
||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||
- Hover: background `#1a7f37`
|
||
- 用途：「Create repository」、「Merge pull request」
|
||
|
||
**デフォルト**
|
||
- Background: `#f6f8fa`
|
||
- Text: `#1f2328`
|
||
- Border: 1px solid `#d0d7de`
|
||
- Padding: 5px 16px
|
||
- Radius: 6px
|
||
- Hover: background `#f3f4f6`、border `#d0d7de`
|
||
|
||
**アウトライン（ブルーリンクスタイル）**
|
||
- Background: `#ffffff`
|
||
- Text: `#0969da`
|
||
- Border: 1px solid `#d0d7de`
|
||
- Hover: background `#0969da`、text `#ffffff`
|
||
|
||
**デンジャー**
|
||
- Background: `#ffffff`
|
||
- Text: `#cf222e`
|
||
- Border: 1px solid `#d0d7de`
|
||
- Hover: background `#a40e26`、text `#ffffff`、border `#a40e26`
|
||
|
||
### カード / ボックス
|
||
- Background: `#ffffff`
|
||
- Border: 1px solid `#d0d7de`
|
||
- Radius: 6px
|
||
- Padding: 16px（ヘッダー）+ 16px（本文）
|
||
- ヘッダーには下ボーダーを持つ `#f6f8fa` のストリップがある。
|
||
|
||
### インプット
|
||
- Background: `#ffffff`
|
||
- Border: 1px solid `#d0d7de`
|
||
- Radius: 6px
|
||
- Padding: 5px 12px
|
||
- Focus: border `#0969da`、ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||
|
||
### ステータスピル（Issue / PR）
|
||
- **Open**：background `#1a7f37`、テキスト白、padding 4px 10px、radius 9999px。
|
||
- **Closed**：background `#cf222e`、テキスト白。
|
||
- **Merged**：background `#8250df`、テキスト白。
|
||
- **Draft**：background `#6e7781`、テキスト白。
|
||
|
||
### ラベル（Issue/PR のタグ）
|
||
- Padding: 0 7px
|
||
- Radius: 9999px
|
||
- Font: 12px / 500
|
||
- 背景色とテキスト色はプログラム的に算出される（ラベルカラー→コントラストに応じてテキスト色を計算）。
|
||
|
||
## 5. スペーシングとレイアウト
|
||
|
||
- **基本単位**：4px。スペーシングスケール：4, 8, 12, 16, 24, 32, 40, 48。
|
||
- **ページ最大幅**：1280px（`Container-xl`）。
|
||
- **サイドバー**：デスクトップで 296px、1012px 以下で折りたたまれる。
|
||
- **行のパディング**：水平 16px、垂直 12px（リストはデザインとして密集している）。
|
||
|
||
## 6. モーション
|
||
|
||
- **デュレーション**：ホバーは 80ms；メニュー/ポップオーバーの展開は 200ms。
|
||
- **イージング**：展開には `ease-out`、閉じるには `ease-in`。
|
||
- **意図的に避けるもの**：ページロードアニメーション、パララックス、持続的なマイクロインタラクション。物事は現れる——パフォーマンスはしない。
|
||
|
||
## 7. 使用上のガードレール
|
||
|
||
- 密なリスト、ボーダーのあるボックス、システムタイポグラフィは一緒に使うこと——グリーンボタンだけでは GitHub ライクなプロダクトサーフェスは作れない。
|
||
- グリーンは建設的なリポジトリ操作に、ブルーはリンクとフォーカスに、レッド/パープル/グレーは Issue・PR・ワークフローの状態にのみ使用する。
|
||
- 装飾的なシャドウや大型のマーケティングスタイルカードより、控えめなクローム、明示的なボーダー、コンパクトなスペーシングを優先する。
|