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。
365 lines
20 KiB
Markdown
365 lines
20 KiB
Markdown
# Система Дизайну, Натхненна Slack
|
||
|
||
> Category: Продуктивність і SaaS
|
||
> Платформа комунікації на робочому місці. Основний колір aubergine, мульти-акцентна палітра логотипу, світлі поверхні з темною бічною панеллю, тепла й дружня атмосфера.
|
||
|
||
## 1. Візуальна Тема й Атмосфера
|
||
|
||
Ідентичність Slack будується навколо ідеї, що робота повинна відчуватися людяною і навіть трохи веселою. Канонічна поверхня — **світла** — білі зони вмісту з глибокою бічною панеллю aubergine (`#4A154B`) — протилежність інструментам, що ставлять на перше місце темні теми. Цей контраст є навмисним: бічна панель — спокійний, постійно присутній навігаційний якір, тоді як зона вмісту яскрава й відкрита.
|
||
|
||
Палітра логотипу — синій, зелений, жовтий, червоний — з'являється переважно в іконці хештегу й маркетингових контекстах, а не розкидана по всьому інтерфейсу. В самому продукті Slack використовує стриману, професійну колірну систему з aubergine як єдиним брендовим якорем.
|
||
|
||
**Ключові Характеристики:**
|
||
- Світлі поверхні вмісту: білий `#FFFFFF` і майже білий `#F8F8F8`
|
||
- Глибока бічна панель aubergine `#4A154B` — найбільш упізнаваний елемент інтерфейсу бренду
|
||
- Чотири акцентні кольори логотипу (синій, зелений, жовтий, червоний) використовуються ощадливо лише як підсвічення
|
||
- Larsseit для заголовків (маркетинг), системний sans-serif для інтерфейсу
|
||
- Округлий, але не мультяшний: радіус 4–8px на більшості компонентів
|
||
- Щільний, але з простором для дихання: компактні рядки повідомлень із чіткою ієрархією гілок
|
||
- Теплий і розмовний тон — емодзі, реакції та ілюстрації є елементами першого класу
|
||
|
||
---
|
||
|
||
## 2. Колірна Палітра й Ролі
|
||
|
||
### Основний Колір Бренду
|
||
| Токен | Hex | Роль |
|
||
|---|---|---|
|
||
| `--color-aubergine` | `#4A154B` | Фон бічної панелі, основний колір бренду |
|
||
| `--color-aubergine-dark` | `#350d36` | Стани наведення на поверхнях aubergine |
|
||
| `--color-aubergine-light` | `#611f69` | Підсвічення активного елемента в бічній панелі |
|
||
|
||
### Акцентні Кольори Логотипу (використовувати ощадливо — лише для підсвічень, іконок, маркетингу)
|
||
| Токен | Hex | Назва | Роль |
|
||
|---|---|---|---|
|
||
| `--color-blue` | `#36C5F0` | Небесно-блакитний | Іконки каналів, посилання, інформаційні стани |
|
||
| `--color-green` | `#2EB67D` | Зелений бірюзовий | Статус онлайн, стани успіху |
|
||
| `--color-yellow` | `#ECB22E` | Золотий | Статус відсутності, попередження, підсвічення |
|
||
| `--color-red` | `#E01E5A` | Рубіновий | Сповіщення, помилки, значок згадки |
|
||
|
||
### Поверхня й Фон
|
||
| Токен | Hex | Роль |
|
||
|---|---|---|
|
||
| `--bg-primary` | `#FFFFFF` | Основна область повідомлень, модальні вікна |
|
||
| `--bg-secondary` | `#F8F8F8` | Панелі гілок, другорядні поверхні |
|
||
| `--bg-tertiary` | `#F1F1F1` | Фони полів введення, стани наведення |
|
||
| `--bg-sidebar` | `#4A154B` | Ліва бічна панель (aubergine) |
|
||
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | Наведення на елемент бічної панелі |
|
||
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | Активний елемент бічної панелі |
|
||
| `--bg-message-hover` | `#F8F8F8` | Наведення на рядок повідомлення |
|
||
|
||
### Кольори Тексту
|
||
| Токен | Hex | Роль |
|
||
|---|---|---|
|
||
| `--text-primary` | `#1D1C1D` | Основний текст вмісту (майже чорний) |
|
||
| `--text-secondary` | `#616061` | Мітки часу, приглушені мітки |
|
||
| `--text-sidebar` | `rgba(255,255,255,0.9)` | Назви каналів у бічній панелі |
|
||
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | Неактивні елементи бічної панелі |
|
||
| `--text-link` | `#1264A3` | Вбудовані посилання в повідомленнях |
|
||
| `--text-mention` | `#1264A3` | Колір тексту @згадки |
|
||
|
||
### Семантичні Кольори
|
||
| Токен | Hex | Роль |
|
||
|---|---|---|
|
||
| `--color-success` | `#2EB67D` | Тости успіху, позитивні стани |
|
||
| `--color-warning` | `#ECB22E` | Стани попереджень |
|
||
| `--color-danger` | `#E01E5A` | Стани помилок, деструктивні дії |
|
||
| `--color-info` | `#36C5F0` | Інформаційні підсвічення |
|
||
|
||
### Межа й Розділювач
|
||
| Токен | Hex | Роль |
|
||
|---|---|---|
|
||
| `--border-default` | `#DDDDDD` | Стандартні розділювачі, межі карток |
|
||
| `--border-subtle` | `#F1F1F1` | Тонкі розділювачі між рядками |
|
||
| `--border-focus` | `#1264A3` | Колір кільця фокусу |
|
||
|
||
---
|
||
|
||
## 3. Правила Типографіки
|
||
|
||
### Шрифти
|
||
| Роль | Офіційний | Резервний для Вебу |
|
||
|---|---|---|
|
||
| Відображення / Маркетингові Заголовки | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
|
||
| Інтерфейс / Текст / Chrome | Slack Lato (власний) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
|
||
| Код / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
|
||
|
||
> Slack використовує **Larsseit** для маркетингових заголовків і власний варіант Lato для інтерфейсу в продукті. Для використання в вебі `system-ui` є найбезпечнішим резервом.
|
||
|
||
### Типографічна Шкала
|
||
|
||
| Рівень | Розмір | Товщина | Висота Рядка | Міжлітерний Інтервал | Використання |
|
||
|---|---|---|---|---|---|
|
||
| Відображення XL | 48px | 800 | 1.1 | -1px | Маркетингові hero-заголовки |
|
||
| Відображення L | 36px | 700 | 1.15 | -0.5px | Hero секцій |
|
||
| Заголовок 1 | 28px | 700 | 1.25 | normal | Заголовки модальних вікон, заголовки сторінок |
|
||
| Заголовок 2 | 22px | 700 | 1.3 | normal | Заголовки карток, секції налаштувань |
|
||
| Заголовок 3 | 18px | 700 | 1.35 | normal | Заголовки підсекцій |
|
||
| Текст L | 16px | 400 | 1.5 | normal | Текст повідомлень, описи |
|
||
| Текст | 15px | 400 | 1.46667 | normal | Стандартний текст інтерфейсу (базовий розмір Slack) |
|
||
| Текст SM | 13px | 400 | 1.38462 | normal | Другорядні метадані |
|
||
| Підпис | 12px | 400 | 1.33 | normal | Мітки часу, підказки |
|
||
| Код | 12px | 400 | 1.5 | normal | Вбудований код, блоки коду |
|
||
|
||
### Правила Типографіки
|
||
- Базовий розмір тексту Slack — **15px** — дещо менший за 16px для більшої щільності
|
||
- Непрочитані канали: товщина 700 — жирний шрифт є основним індикатором непрочитаного
|
||
- Мітки часу: 12px `--text-secondary`, показувати лише при наведенні
|
||
- Блоки коду: фон `#F8F8F8`, межа `1px solid #DDDDDD`, border-radius 4px
|
||
- Ніколи не використовувати розміри шрифтів менше 12px
|
||
- Маркетингові заголовки: letter-spacing `-1px` для великих відображень
|
||
|
||
---
|
||
|
||
## 4. Стилі Компонентів
|
||
|
||
### Кнопки
|
||
|
||
```css
|
||
/* Primary */
|
||
.btn-primary {
|
||
background: #4A154B;
|
||
color: #FFFFFF;
|
||
border-radius: 4px;
|
||
padding: 0 16px;
|
||
height: 36px;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
border: none;
|
||
}
|
||
.btn-primary:hover { background: #611f69; }
|
||
|
||
/* Secondary */
|
||
.btn-secondary {
|
||
background: #FFFFFF;
|
||
color: #1D1C1D;
|
||
border: 1px solid #DDDDDD;
|
||
border-radius: 4px;
|
||
padding: 0 16px;
|
||
height: 36px;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
}
|
||
.btn-secondary:hover { background: #F8F8F8; }
|
||
|
||
/* Danger */
|
||
.btn-danger {
|
||
background: #E01E5A;
|
||
color: #FFFFFF;
|
||
border-radius: 4px;
|
||
}
|
||
.btn-danger:hover { background: #B3114A; }
|
||
```
|
||
|
||
### Поля Введення
|
||
```css
|
||
.input {
|
||
background: #FFFFFF;
|
||
border: 1px solid #DDDDDD;
|
||
border-radius: 4px;
|
||
color: #1D1C1D;
|
||
font-size: 15px;
|
||
padding: 8px 12px;
|
||
height: 36px;
|
||
}
|
||
.input:focus {
|
||
border-color: #1264A3;
|
||
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
|
||
outline: none;
|
||
}
|
||
```
|
||
|
||
### Елемент Каналу в Бічній Панелі
|
||
```css
|
||
.channel-item {
|
||
height: 28px;
|
||
padding: 0 16px;
|
||
border-radius: 6px;
|
||
color: rgba(255,255,255,0.7);
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
}
|
||
.channel-item:hover {
|
||
background: rgba(255,255,255,0.1);
|
||
color: #FFFFFF;
|
||
}
|
||
.channel-item.active {
|
||
background: rgba(255,255,255,0.2);
|
||
color: #FFFFFF;
|
||
}
|
||
.channel-item.unread {
|
||
color: #FFFFFF;
|
||
font-weight: 700;
|
||
}
|
||
```
|
||
|
||
### Значок Непрочитаних
|
||
```css
|
||
.badge {
|
||
background: #E01E5A;
|
||
color: #FFFFFF;
|
||
border-radius: 8px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
padding: 1px 6px;
|
||
min-width: 18px;
|
||
}
|
||
```
|
||
|
||
### Вкладення Повідомлень / Картки
|
||
```css
|
||
.attachment {
|
||
border-left: 4px solid #DDDDDD;
|
||
background: #F8F8F8;
|
||
border-radius: 0 4px 4px 0;
|
||
padding: 8px 12px;
|
||
margin: 4px 0;
|
||
}
|
||
```
|
||
|
||
### Реакції
|
||
```css
|
||
.reaction {
|
||
border: 1px solid #DDDDDD;
|
||
border-radius: 24px;
|
||
background: #F8F8F8;
|
||
padding: 2px 8px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
}
|
||
.reaction:hover { background: #F1F1F1; }
|
||
.reaction.active {
|
||
background: rgba(18,100,163,0.1);
|
||
border-color: #1264A3;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Принципи Макету
|
||
|
||
### Триколонковий Макет
|
||
```
|
||
┌──────────────┬──────────────────────────────┬─────────────┐
|
||
│ Бічна │ Область Повідомлень │ Гілка │
|
||
│ Панель │ (flex: 1) │ (400px) │
|
||
│ (240px) │ #FFFFFF │необов'язково│
|
||
│ #4A154B │ │ │
|
||
└──────────────┴──────────────────────────────┴─────────────┘
|
||
```
|
||
|
||
### Система Відступів (основа 4px)
|
||
| Токен | Значення | Використання |
|
||
|---|---|---|
|
||
| `--space-1` | 4px | Тісні проміжки |
|
||
| `--space-2` | 8px | Відступ компонента |
|
||
| `--space-3` | 12px | Відступ поля введення |
|
||
| `--space-4` | 16px | Стандартний відступ |
|
||
| `--space-6` | 24px | Відступ картки |
|
||
| `--space-8` | 32px | Проміжки між секціями |
|
||
|
||
### Структура Бічної Панелі
|
||
```
|
||
[Назва Робочого Простору ▼]
|
||
────────────────────
|
||
Гілки
|
||
Усі ПП
|
||
Чернетки та Надіслані
|
||
────────────────────
|
||
▼ Канали
|
||
# general
|
||
# random
|
||
# design ● (непрочитане)
|
||
────────────────────
|
||
▼ Прямі Повідомлення
|
||
John Doe
|
||
Jane Smith
|
||
```
|
||
|
||
### Редактор Повідомлень
|
||
- Закріплений внизу зони повідомлень
|
||
- `border: 1px solid #DDDDDD`, `border-radius: 8px`, `margin: 0 16px 16px`
|
||
- Панель інструментів: емодзі, вкладення, форматування, кнопка надсилання
|
||
|
||
---
|
||
|
||
## 6. Глибина й Висота
|
||
|
||
Slack використовує легкі тіні на світлій поверхні:
|
||
|
||
| Рівень | Використання | Тінь |
|
||
|---|---|---|
|
||
| Плоский | Рядки повідомлень, елементи бічної панелі | none |
|
||
| Низький | Картки, поля введення | `0 1px 3px rgba(0,0,0,0.08)` |
|
||
| Середній | Спадні меню, popover'и | `0 4px 12px rgba(0,0,0,0.12)` |
|
||
| Високий | Модальні вікна, діалоги | `0 8px 24px rgba(0,0,0,0.15)` |
|
||
| Накладення | Фони модальних вікон | `rgba(0,0,0,0.5)` |
|
||
|
||
---
|
||
|
||
## 7. Що Робити й Чого Уникати
|
||
|
||
### ✅ Робіть
|
||
- Використовуйте aubergine `#4A154B` для бічної панелі — це найбільш іконічний елемент інтерфейсу Slack
|
||
- Тримайте основну зону вмісту білою та світлою
|
||
- Використовуйте `#1D1C1D` (майже чорний) для всього тексту вмісту, не чисто чорний
|
||
- Виділяйте назви каналів жирним для відображення статусу непрочитаного — товщина є індикатором
|
||
- Використовуйте чотири акцентні кольори лише для семантичних ролей (успіх, попередження, небезпека, інформація)
|
||
- Застосовуйте `border-left: 4px` до вкладень повідомлень та вбудованих елементів
|
||
- Показуйте мітки часу лише при наведенні
|
||
- Використовуйте `#1264A3` для посилань і станів фокусу
|
||
- Тримайте елементи бічної панелі компактними: висота 28px, border-radius 6px
|
||
|
||
### ❌ Не Робіть
|
||
- Не використовуйте темну основну зону вмісту — Slack надає перевагу світлій
|
||
- Не розкидайте синій/зелений/жовтий/червоний як декоративні акценти
|
||
- Не використовуйте чисто чорний `#000000` для тексту
|
||
- Не використовуйте мовні бульбашки — повідомлення є плоскими рядками
|
||
- Не робіть кнопки з великим радіусом — 4px є стандартом
|
||
- Не показуйте мітки часу постійно
|
||
- Не використовуйте ВЕЛИКІ ЛІТЕРИ для назв каналів
|
||
- Не використовуйте розміри шрифтів менше 12px
|
||
|
||
---
|
||
|
||
## 8. Адаптивна Поведінка
|
||
|
||
### Точки Перелому
|
||
| Точка Перелому | Ширина | Макет |
|
||
|---|---|---|
|
||
| Мобільний | < 768px | Одна панель, бічна панель як лівий ящик |
|
||
| Планшет | 768–1024px | Лише бічна панель + зона повідомлень |
|
||
| Десктоп | > 1024px | Повний триколонковий макет |
|
||
|
||
### Мобільні Адаптації
|
||
- Бічна панель: лівий ящик, проведіть вправо для відкриття
|
||
- Нижня панель вкладок: Головна, ПП, Активність, Я
|
||
- Панель гілки: накладення на весь екран
|
||
- Редактор: закріплений над клавіатурою
|
||
- Елементи списку каналів: висота сенсорної цілі 44px
|
||
- Верхня панель заголовка aubergine збережена на мобільному
|
||
|
||
---
|
||
|
||
## 9. Посібник із Запитів Агента
|
||
|
||
Під час створення дизайнів у стилі Slack дотримуйтесь такого підходу:
|
||
|
||
**Застосування кольору:**
|
||
> Встановіть `background: #FFFFFF` як основний полотно. Використовуйте `#4A154B` (aubergine) для бічної панелі. Весь основний текст — `#1D1C1D`. Посилання та кільця фокусу використовують `#1264A3`. Чотири кольори логотипу — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — лише семантичні: інформація, успіх, попередження, небезпека.
|
||
|
||
**Типографіка:**
|
||
> Використовуйте `system-ui, -apple-system, sans-serif` для всього інтерфейсу. Базовий розмір — 15px. Непрочитані канали: товщина 700. Текст вмісту: товщина 400. Мітки часу: 12px `#616061`, лише при наведенні. Код: `Monaco, Menlo, monospace`, 12px, фон `#F8F8F8`.
|
||
|
||
**Макет:**
|
||
> Три колонки: бічна панель aubergine 240px + гнучка біла зона повідомлень + необов'язкова панель гілки 400px. Елементи бічної панелі: висота 28px, радіус 6px, жирний при непрочитаному. Редактор: закріплений внизу, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
|
||
|
||
**Компоненти:**
|
||
> Кнопки: радіус 4px, висота 36px, aubergine основний. Поля введення: межа `1px solid #DDDDDD`, кільце фокусу `#1264A3`. Рядки повідомлень: плоскі, без бульбашок, кругла аватарка 36px. Реакції: pill `border: 1px solid #DDDDDD`, `border-radius: 24px`.
|
||
|
||
**Тон:**
|
||
> Slack теплий, професійний і людяний. Порожні стани використовують дружні ілюстрації. Заклики до дії прямі: "Надіслати повідомлення", "Розпочати". Повідомлення про помилки чіткі й корисні. Ніколи не тривожні.
|
||
|
||
**Антишаблони, яких слід уникати:**
|
||
> Ніякої темної зони вмісту. Ніяких мовних бульбашок. Ніякого чисто чорного тексту. Ніяких розкиданих багатобарвних акцентів. Ніяких ВЕЛИКИХ ЛІТЕР у назвах каналів. Ніяких шрифтів менше 12px. Ніякого великого радіуса кнопок.
|