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。
7.4 KiB
7.4 KiB
Design System Inspired by GitHub
Category: Developer Tools Code-forward platform. Functional density, blue-on-white precision, Primer foundations.
1. Visual Theme & Atmosphere
GitHub's surface is engineered, not decorated. Every pixel announces a stance: this is a tool for people who care about diffs, builds, and pull requests. The page background is a clean #ffffff (light) or #0d1117 (dark), with content arranged on dense rectangular panes separated by hairline borders rather than negative space. Information density is the brand — list rows, code lines, repository headers, and notification cards are all packed close together so a power user can scan a hundred items without scrolling.
The signature accents are the Primer blue (#0969da) for links and primary actions, and GitHub green (#1a7f37) for merged states, success, and the merge button itself. Both feel slightly muted compared to consumer-product blues and greens — saturated enough to read against the dense gray text, restrained enough to disappear into the background when several appear in one viewport.
Typography uses the system-ui stack across the entire product so text renders crisply on every OS, paired with SFMono / Menlo / Consolas for code. There is no editorial display font; GitHub's voice is the voice of the system you're already on.
Key Characteristics:
- True white canvas (
#ffffff) or deep navy-black (#0d1117) — no warmth, no tint - Hairline gray borders (
#d0d7de) define every pane and panel - Primer blue (
#0969da) for links/primary; GitHub green (#1a7f37) for success/merge - system-ui for prose; SFMono for code — no custom typeface
- Dense list rows with minimal padding; whitespace is rare
- Octicon iconography at 16px / 24px — single-stroke, geometric, consistent
- Pill-shaped status badges with strong color semantics
2. Color Palette & Roles
Primary
- Canvas Default (
#ffffff): Primary page background, light theme. - Canvas Subtle (
#f6f8fa): Secondary surface, sidebar, input background, header strip. - Canvas Inset (
#eaeef2): Code block background, deep-inset surface. - Fg Default (
#1f2328): Primary text, headlines, ink. - Fg Muted (
#656d76): Secondary text, captions, file paths.
Brand Accent
- Primer Blue (
#0969da): Links, primary CTAs, focus ring base — the universal interactive color. - Primer Blue Hover (
#0550ae): Hover/pressed for primary blue. - Accent Subtle (
#ddf4ff): Soft blue surface for callouts, info banners.
Semantic
- Success / Merge Green (
#1a7f37): Merged PRs, success badges, merge button. - Success Subtle (
#dafbe1): Success surface tint. - Open Green (
#1a7f37): "Open" issue/PR state. - Closed / Danger Red (
#cf222e): Closed PRs, destructive action, validation error. - Danger Subtle (
#ffebe9): Error banner surface. - Attention / Warning Yellow (
#9a6700): Warning text on amber surface. - Attention Subtle (
#fff8c5): Warning banner surface. - Done Purple (
#8250df): Merged-and-archived, "done" state, premium badge. - Sponsor Pink (
#bf3989): Sponsors heart, GitHub sponsors brand.
Border & Divider
- Border Default (
#d0d7de): Standard hairline border, panel outline. - Border Muted (
#d8dee4): Inner dividers within a panel. - Border Subtle (
#eaeef2): Faint table row dividers.
Dark Theme
- Dark Canvas (
#0d1117): Dark page background. - Dark Surface (
#161b22): Sidebar, header, secondary surface. - Dark Border (
#30363d): Standard dark-mode border. - Dark Fg (
#e6edf3): Primary text on dark.
3. Typography Rules
Font Family
- Body / UI:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif - Code / Mono:
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace - Emoji:
"Apple Color Emoji", "Segoe UI Emoji"
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Repo header, marketing hero |
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Page heading |
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Section heading |
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sub-section, panel header |
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Default text size — not 16px |
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Captions, file metadata |
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Code blocks, diff |
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Inline code spans |
Principles
- 14px body, not 16px: GitHub's prose density is its identity. The product reads at 14px to fit more rows in a viewport.
- Weight binary: 400 for everything by default; 600 for headlines and emphasis. No 500, no 700.
- System fonts always: never load a webfont for chrome — text must render instantly on slow connections.
4. Component Stylings
Buttons
Primary (Green)
- 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 - Use: "Create repository", "Merge pull request"
Default
- Background:
#f6f8fa - Text:
#1f2328 - Border: 1px solid
#d0d7de - Padding: 5px 16px
- Radius: 6px
- Hover: background
#f3f4f6, border#d0d7de
Outline (Blue Link Style)
- Background:
#ffffff - Text:
#0969da - Border: 1px solid
#d0d7de - Hover: background
#0969da, text#ffffff
Danger
- Background:
#ffffff - Text:
#cf222e - Border: 1px solid
#d0d7de - Hover: background
#a40e26, text#ffffff, border#a40e26
Cards / Boxes
- Background:
#ffffff - Border: 1px solid
#d0d7de - Radius: 6px
- Padding: 16px (header) + 16px (body)
- Header has a
#f6f8fastrip with bottom border.
Inputs
- Background:
#ffffff - Border: 1px solid
#d0d7de - Radius: 6px
- Padding: 5px 12px
- Focus: border
#0969da, ring0 0 0 3px rgba(9,105,218,0.3)
Status Pills (Issue / PR)
- Open: background
#1a7f37, text white, padding 4px 10px, radius 9999px. - Closed: background
#cf222e, text white. - Merged: background
#8250df, text white. - Draft: background
#6e7781, text white.
Labels (Tags on Issues/PRs)
- Padding: 0 7px
- Radius: 9999px
- Font: 12px / 500
- Background and text are programmatic (label color → text computed for contrast).
5. Spacing & Layout
- Base unit: 4px. Spacing scale: 4, 8, 12, 16, 24, 32, 40, 48.
- Page max-width: 1280px (
Container-xl). - Sidebar: 296px on desktop, collapses below 1012px.
- Row padding: 16px horizontal, 12px vertical (lists are dense by design).
6. Motion
- Duration: 80ms for hover; 200ms for menu/popover open.
- Easing:
ease-outfor opens,ease-infor closes. - Avoided: page-load animation, parallax, persistent micro-interactions. Things appear; they do not perform.
7. Usage Guardrails
- Keep dense lists, bordered boxes, and system typography together; isolated green buttons are not enough to create a GitHub-like product surface.
- Use green for constructive repository actions, blue for links and focus, and red/purple/gray only for issue, PR, and workflow states.
- Prefer quiet chrome, explicit borders, and compact spacing over decorative shadows or large marketing-style cards.