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。
147 lines
11 KiB
Markdown
147 lines
11 KiB
Markdown
# Design System Inspired by OpenAI
|
||
|
||
> Category: ШІ та великі мовні моделі
|
||
> Спокійна, майже монохромна система на основі глибокого чорно-бірюзового кольору з великою кількістю білого простору та редакційною типографікою.
|
||
|
||
## 1. Візуальна тема та атмосфера
|
||
|
||
Продуктовий інтерфейс OpenAI читається як дослідницька лабораторія, відкрита для широкої публіки — клінічний, стриманий, навмисно тихий. Фон сторінки — справжній білий (`#ffffff`), що накладається на майже чорний чорнильний колір (`#0d0d0d`) із ледь помітним бірюзовим відтінком, тому навіть текст сприймається дещо охолодженим, а не агресивно темним. Результатом є хроматична нейтральність, яка виводить на перший план вивід моделі, код і прозу, а не обрамлення навколо них.
|
||
|
||
Відмітний прийом — використання **Söhne** (або системної заміни `inter`) у стриманих насиченостях — 400 для основного тексту, 500 для навігації та підписів, 600 для акцентів — у поєднанні з **Signifier**, сучасним шрифтом із зарубками для редакційних заголовків. Там де більшість брендів у сфері ШІ тяжіють до футуристичності, засічкові заголовки OpenAI надають продукту тихо літературного тону — ніби кожне оголошення є есе.
|
||
|
||
Система форм однорідно м'яка: радіуси 8–12px, пілюлі 9999px для міток і чіпів, жодних гострих кутів. Переходи між секціями позначаються пробілами, а не роздільниками; коли межі з'являються, це лінії `#e5e5e5` завтовшки з волосину, які сприймаються як відсутність кольору, а не його присутність.
|
||
|
||
**Key Characteristics:**
|
||
- Справжнє біле полотно (`#ffffff`) з глибоким чорно-бірюзовим чорнилом (`#0d0d0d`)
|
||
- Söhne / Inter у скромних насиченостях (400, 500, 600) — стриманість замість наполегливості
|
||
- Засічковий Signifier для редакційних заголовків
|
||
- М'які радіуси 8–12px скрізь; пілюлі 9999px для чіпів
|
||
- Лінії завтовшки з волосину (`#e5e5e5`) використовуються рідко; білий простір як основний роздільник
|
||
- Одноколірні ілюстрації в глибокому бірюзовому — жодних градієнтів у знаках
|
||
- Щедра міжрядкова відстань (1.55–1.65) і трекінг близький до нуля
|
||
|
||
## 2. Кольорова палітра та ролі
|
||
|
||
### Основні
|
||
- **Pure White** (`#ffffff`): Основний фон, поверхня картки, фон кнопки.
|
||
- **Ink Black** (`#0d0d0d`): Основний текст, знак бренду, основний заклик до дії.
|
||
- **Soft Black** (`#1a1a1a`): Вторинний заголовок, альтернативний колір чорнила для некритичного тексту.
|
||
|
||
### Поверхня та фон
|
||
- **Mist** (`#fafafa`): Фон розривів секцій, поверхня підвалу.
|
||
- **Pearl** (`#f5f5f5`): Поверхня картки, піднята панель.
|
||
- **Cloud** (`#ececec`): Вимкнений фон, відтінок роздільника.
|
||
|
||
### Акцент бренду
|
||
- **OpenAI Teal** (`#10a37f`): Основний колір бренду, посилання, виділений значок — єдиний колір в іншій нейтральній системі.
|
||
- **Teal Deep** (`#0a7a5e`): Стан наведення та натискання для кольору бренду.
|
||
- **Teal Soft** (`#e8f5f0`): Відтінок поверхні для значків успіху, виділених виносок.
|
||
|
||
### Нейтральні та текстові
|
||
- **Graphite** (`#3c3c3c`): Основний текст, стандартний колір для читання.
|
||
- **Slate** (`#6e6e6e`): Вторинний текст, підписи, метадані.
|
||
- **Ash** (`#9b9b9b`): Третинний текст, заповнювач, вимкнений підпис.
|
||
- **Stone** (`#c4c4c4`): Декоративні роздільники, ледь помітні іконки.
|
||
|
||
### Семантичні та межі
|
||
- **Border Hairline** (`#e5e5e5`): Стандартний роздільник завтовшки з волосину.
|
||
- **Border Soft** (`#ededed`): Обведення картки на білій поверхні.
|
||
- **Error** (`#ef4146`): Валідація, деструктивна дія.
|
||
- **Warning** (`#f5a623`): М'який бурштиновий для консультативних станів.
|
||
- **Info** (`#2563eb`): Інформаційний тон посилання (використовується рідко; бірюзовий все одно домінує).
|
||
|
||
## 3. Правила типографіки
|
||
|
||
### Font Family
|
||
- **Display / Editorial**: `Signifier`, із запасним варіантом: `'Source Serif Pro', Georgia, serif`
|
||
- **Body / UI**: `Söhne`, із запасним варіантом: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
|
||
- **Code / Mono**: `Söhne Mono`, із запасним варіантом: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
|
||
|
||
### Ієрархія
|
||
|
||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| 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 для розмірів display; трекінг повертається до нуля при 16px.
|
||
|
||
## 4. Стилі компонентів
|
||
|
||
### Кнопки
|
||
|
||
**Primary**
|
||
- Background: `#0d0d0d`
|
||
- Text: `#ffffff`
|
||
- Padding: 10px 18px
|
||
- Radius: 9999px (full pill) для чіпів, 12px для прямокутних закликів до дії
|
||
- Hover: фон `#1a1a1a`
|
||
- Використання: Основний заклик до дії, "Try ChatGPT", "Sign in"
|
||
|
||
**Secondary**
|
||
- Background: `#ffffff`
|
||
- Text: `#0d0d0d`
|
||
- Border: 1px solid `#e5e5e5`
|
||
- Padding: 10px 18px
|
||
- Radius: 12px
|
||
- Hover: фон `#fafafa`, межа `#d4d4d4`
|
||
|
||
**Brand Accent**
|
||
- Background: `#10a37f`
|
||
- Text: `#ffffff`
|
||
- Padding: 10px 18px
|
||
- Radius: 12px
|
||
- Hover: `#0a7a5e`
|
||
- Використання: Виділений заклик до оновлення, шлях успіху
|
||
|
||
### Картки
|
||
- 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 лише для редакційної або оголошувальної ієрархії, залишаючи елементи керування продуктом у системі без зарубок.
|
||
- Уникайте орнаментального руху, важких тіней і надмірно великих декоративних карток; система має відчуватися спокійною, зручною для читання та осмисленою.
|