admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

Browse Source 
一、④段整套同步（用户选候选 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。
This commit is contained in:
admin committed 2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
4184 files changed
+326 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

open-design/design-systems/slack/DESIGN-ru.md
+363
View File
@@ -0,0 +1,363 @@
# Дизайн-система, вдохновлённая Slack
> Category: Продуктивность и SaaS
> Платформа для корпоративного общения. Основной цвет — баклажан, многоцветная логотипная палитра, светлые поверхности с тёмной боковой панелью, тёплый и дружелюбный тон.
## 1. Визуальная тема и атмосфера
Идентичность Slack построена на идее, что работа должна ощущаться по-человечески и даже немного весело. Каноническая поверхность — **светлая**: белые области контента с глубокой баклажановой боковой панелью (`#4A154B`) — в противовес инструментам с тёмным фоном. Этот контраст намеренный: боковая панель служит спокойным, всегда присутствующим навигационным якорем, тогда как область контента — яркая и открытая.
Логотипная палитра — синий, зелёный, жёлтый, красный — появляется преимущественно в иконке решётки и в маркетинговых контекстах, а не разбросана по интерфейсу. В самом продукте Slack использует сдержанную профессиональную цветовую систему, где баклажановый — единственный якорь бренда.
**Ключевые характеристики:**
- Светлые поверхности контента: белый `#FFFFFF` и почти белый `#F8F8F8`
- Глубокая баклажановая боковая панель `#4A154B` — самый узнаваемый UI-элемент бренда
- Четыре акцентных цвета логотипа (синий, зелёный, жёлтый, красный) используются экономно, только как акценты
- Larsseit для заголовков (маркетинг), системный sans-serif для интерфейса
- Скруглённый, но не мультяшный: радиус 4–8px у большинства компонентов
- Плотный, но «дышащий»: компактные строки сообщений с чёткой иерархией тредов
- Тёплый и разговорный тон — эмодзи, реакции и иллюстрации являются полноправными элементами
---
## 2. Цветовая палитра и роли
### Основной цвет бренда
| Токен | Hex | Роль |
|---|---|---|
| `--color-aubergine` | `#4A154B` | Фон боковой панели, основной цвет бренда |
| `--color-aubergine-dark` | `#350d36` | Состояния наведения на баклажановых поверхностях |
| `--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` | Левая боковая панель (баклажановая) |
| `--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` |
| Код / Моноширинный | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
> Slack использует **Larsseit** для маркетинговых заголовков и кастомный вариант Lato для интерфейса продукта. Для веб-использования `system-ui` — наиболее надёжная замена.
### Шкала типографики
| Уровень | Размер | Начертание | Высота строки | Межбуквенный интервал | Использование |
|---|---|---|---|---|---|
| Дисплей XL | 48px | 800 | 1.1 | -1px | Маркетинговые заголовки-герои |
| Дисплей L | 36px | 700 | 1.15 | -0.5px | Секционные герои |
| Заголовок 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
- Маркетинговые заголовки: межбуквенный интервал `-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. Принципы компоновки
### Трёхколоночная компоновка
```
┌──────────────┬──────────────────────────────┬─────────────┐
│ Sidebar │ Message Area │ Thread │
│ (240px) │ (flex: 1) │ (400px) │
│ #4A154B │ #FFFFFF │ optional │
└──────────────┴──────────────────────────────┴─────────────┘
```
### Система отступов (базовый блок 4px)
| Токен | Значение | Использование |
|---|---|---|
| `--space-1` | 4px | Узкие промежутки |
| `--space-2` | 8px | Внутренние отступы компонента |
| `--space-3` | 12px | Внутренние отступы полей ввода |
| `--space-4` | 16px | Стандартные отступы |
| `--space-6` | 24px | Отступы карточек |
| `--space-8` | 32px | Промежутки между секциями |
### Структура боковой панели
```
[Workspace Name ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
# general
# random
# design ● (unread)
────────────────────
▼ Direct Messages
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)` |
| Средний | Выпадающие меню, поповеры | `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. Что делать и чего не делать
### ✅ Делать
- Использовать баклажановый `#4A154B` для боковой панели — это самый узнаваемый UI-элемент Slack
- Сохранять основную область контента белой и светлой
- Использовать `#1D1C1D` (почти чёрный) для всего основного текста, а не чистый чёрный
- Выделять названия каналов жирным для обозначения непрочитанных — начертание является индикатором
- Использовать четыре акцентных цвета только для семантических ролей (успех, предупреждение, опасность, информация)
- Применять `border-left: 4px` к вложениям и встроенным элементам сообщений
- Показывать временны́е метки только при наведении
- Использовать `#1264A3` для ссылок и состояний фокуса
- Сохранять компактность элементов боковой панели: высота 28px, border-radius 6px
### ❌ Не делать
- Не использовать тёмную основную область контента — Slack светлый по умолчанию
- Не рассыпать синий/зелёный/жёлтый/красный как декоративные акценты
- Не использовать чистый чёрный `#000000` для текста
- Не использовать речевые пузыри — сообщения являются плоскими строками
- Не делать кнопки с большим радиусом — 4px является стандартом
- Не отображать временны́е метки постоянно
- Не использовать ЗАГЛАВНЫЕ БУКВЫ для названий каналов
- Не использовать размеры шрифта менее 12px
---
## 8. Адаптивное поведение
### Контрольные точки
| Контрольная точка | Ширина | Компоновка |
|---|---|---|
| Мобильный | < 768px | Одна панель, боковая панель как левый выдвижной ящик |
| Планшет | 768–1024px | Только боковая панель + область сообщений |
| Десктоп | > 1024px | Полная трёхколоночная компоновка |
### Мобильные адаптации
- Боковая панель: левый выдвижной ящик, открывается смахиванием вправо
- Нижняя панель вкладок: Главная, Личные сообщения, Активность, Я
- Панель треда: полноэкранный оверлей
- Строка ввода: закреплена над клавиатурой
- Элементы списка каналов: высота касательной области 44px
- Баклажановая верхняя панель заголовка сохраняется на мобильном
---
## 9. Руководство по промптам для агента
При генерации дизайнов в стиле Slack следуйте этому подходу:
**Применение цветов:**
> Установите `background: #FFFFFF` в качестве основного холста. Используйте `#4A154B` (баклажановый) для боковой панели. Весь основной текст — `#1D1C1D`. Ссылки и кольца фокуса используют `#1264A3`. Четыре цвета логотипа — `#36C5F0`, `#2EB67D`, `#ECB22E`, `#E01E5A` — только семантические: информация, успех, предупреждение, опасность.
**Типографика:**
> Используйте `system-ui, -apple-system, sans-serif` для всего интерфейса. Базовый размер — 15px. Непрочитанные каналы: начертание 700. Основной текст: начертание 400. Временны́е метки: 12px `#616061`, только при наведении. Код: `Monaco, Menlo, monospace`, 12px, фон `#F8F8F8`.
**Компоновка:**
> Три колонки: баклажановая боковая панель 240px + гибкая белая область сообщений + опциональная панель тредов 400px. Элементы боковой панели: высота 28px, радиус 6px, жирный при непрочитанном. Строка ввода: закреплена внизу, `border: 1px solid #DDDDDD`, `border-radius: 8px`.
**Компоненты:**
> Кнопки: радиус 4px, высота 36px, основная баклажановая. Поля ввода: граница `1px solid #DDDDDD`, кольцо фокуса `#1264A3`. Строки сообщений: плоские, без пузырей, круглый аватар 36px. Реакции: таблетка `border: 1px solid #DDDDDD`, `border-radius: 24px`.
**Тон:**
> Slack тёплый, профессиональный и человечный. Пустые состояния используют дружелюбные иллюстрации. Призывы к действию прямые: «Отправить сообщение», «Начать». Сообщения об ошибках ясные и полезные. Никогда не пугающие.
**Антипаттерны, которых следует избегать:**
> Никакой тёмной области контента. Никаких речевых пузырей. Никакого чисто чёрного текста. Никаких разбросанных многоцветных акцентов. Никаких названий каналов ЗАГЛАВНЫМИ БУКВАМИ. Никаких шрифтов ниже 12px. Никаких кнопок с большим радиусом.