④段整套同步（六节＋ 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,161 @@
+# Система дизайну, натхненна GitHub
+
+> Category: Інструменти для розробників
+> Платформа з акцентом на код. Функціональна щільність, точність синього на білому, основи Primer.
+
+## 1. Візуальна тема та атмосфера
+
+Поверхня GitHub спроєктована, а не прикрашена. Кожен піксель виражає позицію: це інструмент для людей, які дбають про дифи, збірки та пул-реквести. Фон сторінки — чистий `#ffffff` (світла тема) або `#0d1117` (темна), де вміст розташований на щільних прямокутних панелях, розділених тонкими рамками, а не відступами. Інформаційна щільність — це і є бренд: рядки списків, рядки коду, заголовки репозиторіїв і картки сповіщень стоять впритул, щоб досвідчений користувач міг переглянути сотню елементів без прокрутки.
+
+Характерні акценти — **синій Primer** (`#0969da`) для посилань і основних дій та **зелений GitHub** (`#1a7f37`) для злитих станів, успіху та самої кнопки злиття. Обидва виглядають дещо приглушено порівняно з синіми та зеленими кольорами споживчих продуктів — достатньо насичені, щоб читатися на тлі щільного сірого тексту, і достатньо стримані, щоб зникати у фоні, коли кілька з них з'являються в одному вікні перегляду.
+
+Типографіка використовує стек **system-ui** в усьому продукті, щоб текст чітко відображався в будь-якій ОС, у поєднанні з **SFMono / Menlo / Consolas** для коду. Тут немає редакторського шрифту для заголовків; голос GitHub — це голос системи, яку ви вже використовуєте.
+
+**Ключові характеристики:**
+- Справді білий холст (`#ffffff`) або глибокий темно-синій-чорний (`#0d1117`) — без тепла, без відтінку
+- Тонкі сірі рамки (`#d0d7de`) визначають кожну панель і блок
+- Синій Primer (`#0969da`) для посилань/основних дій; зелений GitHub (`#1a7f37`) для успіху/злиття
+- system-ui для прозового тексту; SFMono для коду — жодного власного шрифту
+- Щільні рядки списків із мінімальними відступами; відстань між елементами — рідкість
+- Іконографія Octicon 16px / 24px — одинарний штрих, геометрична, послідовна
+- Значки статусу у вигляді таблеток із чіткою колірною семантикою
+
+## 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`): Стан «відкрито» для задачі/PR.
+- **Closed / Danger Red** (`#cf222e`): Закриті PR, деструктивна дія, помилка валідації.
+- **Danger Subtle** (`#ffebe9`): Поверхня банера помилки.
+- **Attention / Warning Yellow** (`#9a6700`): Текст попередження на бурштиновому фоні.
+- **Attention Subtle** (`#fff8c5`): Поверхня банера попередження.
+- **Done Purple** (`#8250df`): Злито й заархівовано, стан «виконано», преміум-значок.
+- **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 | Блоки коду, дифи |
+| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Вбудовані `code` фрагменти |
+
+### Принципи
+- **14px для основного тексту, не 16px**: Щільність прозового тексту GitHub — це його ідентичність. Продукт відображається при 14px, щоб вмістити більше рядків у вікні перегляду.
+- **Бінарна насиченість**: 400 для всього за замовчуванням; 600 для заголовків і виділення. Ніяких 500 або 700.
+- **Системні шрифти завжди**: ніколи не завантажуйте веб-шрифт для інтерфейсу — текст повинен відображатися миттєво на повільних з'єднаннях.
+
+## 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`
+- Використання: «Створити репозиторій», «Злити пул-реквест»
+
+**Стандартна**
+- 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)`
+
+### Таблетки статусу (задача / PR)
+- **Відкрито**: background `#1a7f37`, текст білий, padding 4px 10px, radius 9999px.
+- **Закрито**: background `#cf222e`, текст білий.
+- **Злито**: background `#8250df`, текст білий.
+- **Чернетка**: background `#6e7781`, текст білий.
+
+### Мітки (теги на задачах/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.
+- Використовуйте зелений для конструктивних дій у репозиторії, синій — для посилань і фокусу, а червоний/фіолетовий/сірий — лише для станів задач, PR і робочих процесів.
+- Надавайте перевагу тихому інтерфейсу, чітким рамкам і компактним відступам, а не декоративним тіням або великим картками у маркетинговому стилі.