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。
12 KiB
12 KiB
Дизайн-система, вдохновлённая 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 только для редакционной или анонсовой иерархии, оставляя элементы управления продуктом в гротескной системе.
- Избегайте декоративной анимации, тяжёлых теней и чрезмерно крупных декоративных карточек; система должна ощущаться спокойной, читаемой и осмысленной.