④段整套同步（六节＋ 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 спроектирована, а не украшена. Каждый пиксель выражает позицию: это инструмент для людей, которым важны диффы, сборки и pull request'ы. Фон страниц — чистый `#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`): состояние «Открыт» для issue/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 | Блоки кода, diff |
+| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Встроенные фрагменты `code` |
+
+### Принципы
+- **14px для основного текста, не 16px**: плотность прозы GitHub — его идентичность. Продукт читается при 14px, чтобы вместить больше строк в область просмотра.
+- **Два варианта начертания**: 400 для всего по умолчанию; 600 для заголовков и акцентов. Ни 500, ни 700.
+- **Системные шрифты всегда**: никогда не загружайте веб-шрифты для интерфейса — текст должен рендериться мгновенно при медленном соединении.
+
+## 4. Стили компонентов
+
+### Кнопки
+
+**Основная (зелёная)**
+- Фон: `#1f883d`
+- Текст: `#ffffff`
+- Граница: 1px solid `rgba(31, 35, 40, 0.15)`
+- Отступы: 5px 16px
+- Скругление: 6px
+- Тень: `0 1px 0 rgba(31,35,40,0.1)`
+- Наведение: фон `#1a7f37`
+- Использование: «Create repository», «Merge pull request»
+
+**По умолчанию**
+- Фон: `#f6f8fa`
+- Текст: `#1f2328`
+- Граница: 1px solid `#d0d7de`
+- Отступы: 5px 16px
+- Скругление: 6px
+- Наведение: фон `#f3f4f6`, граница `#d0d7de`
+
+**Контурная (стиль синей ссылки)**
+- Фон: `#ffffff`
+- Текст: `#0969da`
+- Граница: 1px solid `#d0d7de`
+- Наведение: фон `#0969da`, текст `#ffffff`
+
+**Опасная**
+- Фон: `#ffffff`
+- Текст: `#cf222e`
+- Граница: 1px solid `#d0d7de`
+- Наведение: фон `#a40e26`, текст `#ffffff`, граница `#a40e26`
+
+### Карточки / блоки
+- Фон: `#ffffff`
+- Граница: 1px solid `#d0d7de`
+- Скругление: 6px
+- Отступы: 16px (заголовок) + 16px (тело)
+- Заголовок имеет полосу `#f6f8fa` с нижней границей.
+
+### Поля ввода
+- Фон: `#ffffff`
+- Граница: 1px solid `#d0d7de`
+- Скругление: 6px
+- Отступы: 5px 12px
+- Фокус: граница `#0969da`, кольцо `0 0 0 3px rgba(9,105,218,0.3)`
+
+### Статусные таблетки (Issue / PR)
+- **Открыт**: фон `#1a7f37`, белый текст, отступы 4px 10px, скругление 9999px.
+- **Закрыт**: фон `#cf222e`, белый текст.
+- **Смёрджен**: фон `#8250df`, белый текст.
+- **Черновик**: фон `#6e7781`, белый текст.
+
+### Метки (теги на Issue/PR)
+- Отступы: 0 7px
+- Скругление: 9999px
+- Шрифт: 12px / 500
+- Фон и текст задаются программно (цвет метки → цвет текста вычисляется для контрастности).
+
+## 5. Отступы и компоновка
+
+- **Базовая единица**: 4px. Шкала отступов: 4, 8, 12, 16, 24, 32, 40, 48.
+- **Максимальная ширина страницы**: 1280px (`Container-xl`).
+- **Боковая панель**: 296px на десктопе, сворачивается ниже 1012px.
+- **Отступы строки**: 16px по горизонтали, 12px по вертикали (списки намеренно плотные).
+
+## 6. Движение
+
+- **Длительность**: 80ms для наведения; 200ms для открытия меню/поповера.
+- **Easing**: `ease-out` для открытия, `ease-in` для закрытия.
+- **Избегать**: анимаций при загрузке страницы, параллакса, постоянных микровзаимодействий. Элементы появляются — но не выступают.
+
+## 7. Ограничения использования
+
+- Используйте плотные списки, обрамлённые блоки и системную типографику вместе; изолированные зелёные кнопки сами по себе не создают поверхность, похожую на GitHub.
+- Применяйте зелёный для конструктивных действий с репозиторием, синий — для ссылок и фокуса, красный/фиолетовый/серый — только для состояний issue, PR и рабочих процессов.
+- Отдавайте предпочтение сдержанному оформлению, чётким границам и компактным отступам вместо декоративных теней или крупных маркетинговых карточек.