④段整套同步（六节＋ 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: ИИ и языковые модели
+> Спокойная, почти монохромная система на основе глубокого сине-чёрного оттенка с щедрым белым пространством и редакционной типографикой.
+
+## 1. Визуальная тема и атмосфера
+
+Продуктовая поверхность OpenAI воспринимается как исследовательская лаборатория, открытая для широкой аудитории — клиническая, сдержанная, намеренно тихая. Фон страницы — чистый белый (`#ffffff`), наложенный на почти чёрные чернила (`#0d0d0d`) с едва заметным сине-зелёным подтоном, благодаря чему даже текст ощущается слегка охлаждённым, а не агрессивно тёмным. Результат — хроматическая нейтральность, которая выдвигает на первый план вывод модели, код и прозу, а не обрамляющий их интерфейс.
+
+Фирменный приём — использование **Söhne** (или системного аналога `inter`) с умеренными насыщенностями: 400 для основного текста, 500 для навигации и подписей, 600 для акцентов — в сочетании с **Signifier**, современным антиквой для редакционных заголовков. Там, где большинство AI-брендов тяготеют к футуристичности, засечные заголовки OpenAI придают продукту тихий литературный тон, словно каждый анонс — это эссе.
+
+Система форм единообразно мягкая: скругления 8px–12px, скругления 9999px для тегов и чипов, никаких острых углов. Переходы между секциями обозначаются отступами, а не разделителями; когда рамки всё же появляются, это тончайшие линии `#e5e5e5`, читающиеся как отсутствие цвета, а не его присутствие.
+
+**Ключевые характеристики:**
+- Чистый белый холст (`#ffffff`) с глубокими сине-чёрными чернилами (`#0d0d0d`)
+- Söhne / Inter с умеренной насыщенностью (400, 500, 600) — сдержанность вместо напора
+- Signifier с засечками для редакционных заголовков
+- Мягкие скругления 8–12px везде; 9999px для чипов
+- Тончайшие рамки (`#e5e5e5`) используются скупо; белое пространство — основной разделитель
+- Одноцветные иллюстрации в глубоком сине-зелёном — никаких градиентов в знаках
+- Щедрая межстрочность (1.55–1.65) и трекинг, близкий к нулю
+
+## 2. Цветовая палитра и роли
+
+### Основные цвета
+- **Чистый белый** (`#ffffff`): Основной фон, поверхность карточки, фон кнопки.
+- **Чернильный чёрный** (`#0d0d0d`): Основной текст, знак бренда, основной CTA.
+- **Мягкий чёрный** (`#1a1a1a`): Вторичный заголовок, альтернативные чернила для второстепенного текста.
+
+### Поверхности и фоны
+- **Дымка** (`#fafafa`): Фон разрыва секции, поверхность футера.
+- **Жемчуг** (`#f5f5f5`): Поверхность карточки, приподнятая панель.
+- **Облако** (`#ececec`): Фон отключённого элемента, оттенок разделителя.
+
+### Акцентный цвет бренда
+- **OpenAI Teal** (`#10a37f`): Основной цвет бренда, ссылка, бейдж-подсветка — единственный цвет в иначе нейтральной системе.
+- **Teal Deep** (`#0a7a5e`): Состояние наведения и нажатия для фирменного цвета.
+- **Teal Soft** (`#e8f5f0`): Оттенок поверхности для бейджей успеха, выделяющих подсказок.
+
+### Нейтральные и текстовые цвета
+- **Графит** (`#3c3c3c`): Основной текст, стандартный цвет чтения.
+- **Сланец** (`#6e6e6e`): Вторичный текст, подписи, метаданные.
+- **Пепел** (`#9b9b9b`): Третичный текст, заглушка, отключённая подпись.
+- **Камень** (`#c4c4c4`): Декоративные разделители, едва заметные иконки.
+
+### Семантические цвета и рамки
+- **Тончайшая рамка** (`#e5e5e5`): Стандартный тонкий разделитель.
+- **Мягкая рамка** (`#ededed`): Контур карточки на белой поверхности.
+- **Ошибка** (`#ef4146`): Валидация, деструктивное действие.
+- **Предупреждение** (`#f5a623`): Мягкий янтарный для информационных состояний.
+- **Информация** (`#2563eb`): Информационный тон ссылки (используется скупо; сине-зелёный всё равно приоритетнее).
+
+## 3. Правила типографики
+
+### Семейство шрифтов
+- **Дисплейный / Редакционный**: `Signifier`, резервный: `'Source Serif Pro', Georgia, serif`
+- **Основной / Интерфейсный**: `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 | Тело карточки, плотный интерфейс |
+| 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 появляется только в редакционных дисплейных моментах. Продуктовый интерфейс — исключительно гротеск.
+- **Отрицательный трекинг на крупных размерах**: -0.02em для дисплейных размеров; трекинг возвращается к нулю к 16px.
+
+## 4. Стилизация компонентов
+
+### Кнопки
+
+**Основная**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px (полная таблетка) для чипов, 12px для прямоугольных CTA
+- Hover: фон `#1a1a1a`
+- Использование: Основной CTA, «Попробовать ChatGPT», «Войти»
+
+**Вторичная**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: фон `#fafafa`, рамка `#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: рамка `#10a37f`, кольцо `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 только для редакционной или анонсовой иерархии, оставляя элементы управления продуктом в гротескной системе.
+- Избегайте декоративной анимации, тяжёлых теней и чрезмерно крупных декоративных карточек; система должна ощущаться спокойной, читаемой и осмысленной.