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。
234 lines
21 KiB
Markdown
234 lines
21 KiB
Markdown
# Дизайн-система, вдохновлённая Pinterest
|
||
|
||
> Category: Медиа и потребительский сектор
|
||
> Визуальное открытие. Красный акцент, кирпичная сетка, изображение на первом месте.
|
||
|
||
## 1. Визуальная тема и атмосфера
|
||
|
||
Сайт Pinterest — это тёплый холст, наполненный вдохновением, который делает визуальное открытие похожим на лайфстайл-журнал. Дизайн построен на мягком, слегка тёплом белом фоне с Pinterest-красным (`#e60023`) в качестве единственного яркого акцента бренда. В отличие от холодных синих тонов большинства технологических платформ, нейтральная шкала Pinterest имеет выраженный тёплый подтон — серые тона тяготеют к оливковому/песчаному (`#91918c`, `#62625b`, `#e5e5e0`), а не к холодной стали, создавая уютную, ремесленную атмосферу, располагающую к просмотру.
|
||
|
||
Типографика использует Pin Sans — фирменный шрифт с широким набором запасных вариантов, включая японские шрифты, что отражает глобальный охват Pinterest. В крупном масштабе (70px, насыщенность 600) Pin Sans создаёт большие, привлекательные заголовки. В меньшем размере система компактна: кнопки — 12px, подписи — 12–14px. Система именования переменных CSS (`--comp-*`, `--sema-*`, `--base-*`) раскрывает изощрённую трёхуровневую архитектуру дизайн-токенов: уровень компонентов, семантический уровень и базовый уровень.
|
||
|
||
Отличительные черты Pinterest — щедрая система скруглений (12px–40px, плюс 50% для кругов) и тёплые фоны кнопок. Вторичная кнопка (`#e5e5e0`) имеет выраженный тёплый, песчаный оттенок, а не холодный серый. Основная красная кнопка использует скругление 16px — округлое, но не «таблеткообразное». В сочетании с тёплыми фонами бейджей (`hsla(60,20%,98%,.5)` — тонкий жёлто-тёплый оттенок) и макетами, где главенствует фотография, результатом становится дизайн, ощущаемый как рукотворный и личный, а не корпоративный и стерильный.
|
||
|
||
**Ключевые характеристики:**
|
||
- Тёплый белый холст с нейтральными оливковыми/песчаными тонами — уютно, не стерильно
|
||
- Pinterest-красный (`#e60023`) как единственный смелый акцент — никогда не тонкий, всегда уверенный
|
||
- Шрифт Pin Sans с глобальным набором запасных вариантов (включая CJK)
|
||
- Трёхуровневая архитектура токенов: `--comp-*` / `--sema-*` / `--base-*`
|
||
- Тёплые вторичные поверхности: песчаный серый (`#e5e5e0`), тёплый бейдж (`hsla(60,20%,98%,.5)`)
|
||
- Щедрые скругления: 16px стандарт, до 40px для крупных контейнеров
|
||
- Фотография на первом плане — пины/изображения являются основным визуальным элементом
|
||
- Тёмный тёмно-фиолетовый текст (`#211922`) — тёплый, с лёгким сливовым оттенком
|
||
|
||
## 2. Цветовая палитра и роли
|
||
|
||
### Основной бренд
|
||
- **Pinterest-красный** (`#e60023`): Основной CTA, акцент бренда — смелый, уверенный красный
|
||
- **Зелёный 700** (`#103c25`): `--base-color-green-700`, акцент успеха/природы
|
||
- **Зелёный 700 при наведении** (`#0b2819`): `--base-color-hover-green-700`, нажатый зелёный
|
||
|
||
### Текст
|
||
- **Сливово-чёрный** (`#211922`): Основной текст — тёплый почти-чёрный со сливовым подтоном
|
||
- **Чёрный** (`#000000`): Вторичный текст, текст кнопок
|
||
- **Оливковый серый** (`#62625b`): Вторичные описания, приглушённый текст
|
||
- **Тёплый серебристый** (`#91918c`): `--comp-button-color-text-transparent-disabled`, отключённый текст, границы полей ввода
|
||
- **Белый** (`#ffffff`): Текст на тёмных/цветных поверхностях
|
||
|
||
### Интерактивные
|
||
- **Синий фокус** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, кольца фокуса
|
||
- **Фиолетовый производительности** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, функции производительности
|
||
- **Фиолетовый рекомендаций** (`#7e238b`): `--sema-color-hover-text-recommendation`, рекомендации ИИ
|
||
- **Синий ссылки** (`#2b48d4`): Цвет текста ссылки
|
||
- **Синий Facebook** (`#0866ff`): `--facebook-background-color`, социальный вход
|
||
- **Нажатый синий** (`#617bff`): `--base-color-pressed-blue-200`, нажатое состояние
|
||
|
||
### Поверхности и границы
|
||
- **Песчаный серый** (`#e5e5e0`): Фон вторичной кнопки — тёплый, ремесленный
|
||
- **Тёплый светлый** (`#e0e0d9`): Фоны круглых кнопок, бейджи
|
||
- **Тёплый смыв** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, тонкий тёплый фон бейджа
|
||
- **Туман** (`#f6f6f3`): Светлая поверхность (при 50% непрозрачности)
|
||
- **Граница отключена** (`#c8c8c1`): `--sema-color-border-disabled`, отключённые границы
|
||
- **Серый при наведении** (`#bcbcb3`): `--base-color-hover-grayscale-150`, граница при наведении
|
||
- **Тёмная поверхность** (`#33332e`): Фоны тёмных секций
|
||
|
||
### Семантические
|
||
- **Красный ошибки** (`#9e0a0a`): Состояния ошибки флажков/форм
|
||
|
||
## 3. Правила типографики
|
||
|
||
### Семейство шрифтов
|
||
- **Основной**: `Pin Sans`, запасные: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
|
||
|
||
### Иерархия
|
||
|
||
| Роль | Шрифт | Размер | Насыщенность | Межстрочный интервал | Межбуквенный интервал | Примечания |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Дисплейный герой | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Максимальный эффект |
|
||
| Заголовок секции | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Отрицательный трекинг |
|
||
| Основной текст | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Стандартное чтение |
|
||
| Жирная подпись | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Выраженные метаданные |
|
||
| Подпись | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Мелкий текст, теги |
|
||
| Кнопка | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Надписи на кнопках |
|
||
|
||
### Принципы
|
||
- **Компактная шкала кегля**: Диапазон 12px–70px с драматическим скачком — большинство функционального текста находится в диапазоне 12–16px, создавая плотную, похожую на приложение информационную иерархию.
|
||
- **Тёплое распределение насыщенности**: 600–700 для заголовков, 400–500 для основного текста. Нет сверхлёгких насыщенностей — текст всегда ощущается весомым.
|
||
- **Отрицательный трекинг у заголовков**: -1,2px при 28px создаёт уютные, интимные заголовки секций.
|
||
- **Единственное семейство шрифтов**: Pin Sans справляется со всем — дополнительный дисплейный или моноширинный шрифт не обнаружен.
|
||
|
||
## 4. Стили компонентов
|
||
|
||
### Кнопки
|
||
|
||
**Основной красный**
|
||
- Фон: `#e60023` (Pinterest-красный)
|
||
- Текст: `#000000` (чёрный — необычный выбор для контраста на красном)
|
||
- Отступы: 6px 14px
|
||
- Скругление: 16px (щедро скруглённый, не «таблетка»)
|
||
- Граница: `2px solid rgba(255, 255, 255, 0)` (прозрачная)
|
||
- Фокус: семантическая граница + контур через переменные CSS
|
||
|
||
**Вторичный песчаный**
|
||
- Фон: `#e5e5e0` (тёплый песчаный серый)
|
||
- Текст: `#000000`
|
||
- Отступы: 6px 14px
|
||
- Скругление: 16px
|
||
- Фокус: та же семантическая система границ
|
||
|
||
**Круговое действие**
|
||
- Фон: `#e0e0d9` (тёплый светлый)
|
||
- Текст: `#211922` (сливово-чёрный)
|
||
- Скругление: 50% (круг)
|
||
- Использование: действия с пинами, элементы управления навигацией
|
||
|
||
**Призрак / Прозрачный**
|
||
- Фон: прозрачный
|
||
- Текст: `#000000`
|
||
- Без границы
|
||
- Использование: третичные действия
|
||
|
||
### Карточки и контейнеры
|
||
- Пин-карточки с приоритетом фотографии и щедрым скруглением (12px–20px)
|
||
- Отсутствие традиционной тени блока на большинстве карточек
|
||
- Белые или тёплые туманные фоны
|
||
- Белая толстая граница 8px на некоторых контейнерах изображений
|
||
|
||
### Поля ввода
|
||
- Ввод электронной почты: белый фон, граница `1px solid #91918c`, скругление 16px, отступы 11px 15px
|
||
- Фокус: система семантических границ + контур через переменные CSS
|
||
|
||
### Навигация
|
||
- Чистый заголовок на белом или тёплом фоне
|
||
- Логотип Pinterest + строка поиска по центру
|
||
- Pin Sans 16px для навигационных ссылок
|
||
- Pinterest-красные акценты для активных состояний
|
||
|
||
### Обработка изображений
|
||
- Кирпичная сетка в стиле пинов (фирменный макет Pinterest)
|
||
- Скруглённые углы: 12px–20px на изображениях
|
||
- Фотография как основной контент — каждый пин является изображением
|
||
- Толстые белые границы (8px) на контейнерах избранных изображений
|
||
|
||
## 5. Принципы макета
|
||
|
||
### Система отступов
|
||
- Базовая единица: 8px
|
||
- Шкала: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
|
||
- Большие скачки: 32px → 80px → 100px для отступов между секциями
|
||
|
||
### Сетка и контейнер
|
||
- Кирпичная сетка для контента пинов (фирменный макет)
|
||
- Центрированные секции контента с щедрой максимальной шириной
|
||
- Полноширинный тёмный подвал
|
||
- Строка поиска как основной элемент навигации
|
||
|
||
### Философия пространства
|
||
- **Плотность вдохновения**: Кирпичная сетка плотно укладывает пины — плотность контента И ЕСТЬ ценностное предложение. Пустое пространство существует между секциями, а не внутри сетки.
|
||
- **Дышит сверху, плотность снизу**: Героические/featured секции получают щедрые отступы; сетка пинов компактна и иммерсивна.
|
||
|
||
### Шкала скруглений
|
||
- Стандарт (12px): Маленькие карточки, ссылки
|
||
- Кнопка (16px): Кнопки, поля ввода, средние карточки
|
||
- Комфортный (20px): Featured-карточки
|
||
- Большой (28px): Крупные контейнеры
|
||
- Секция (32px): Элементы вкладок, большие панели
|
||
- Герой (40px): Героические контейнеры, крупные блоки-featured
|
||
- Круг (50%): Кнопки действий, индикаторы вкладок
|
||
|
||
## 6. Глубина и высота
|
||
|
||
| Уровень | Обработка | Использование |
|
||
|-------|-----------|-----|
|
||
| Плоский (Уровень 0) | Без тени | По умолчанию — пины опираются на контент, а не тень |
|
||
| Тонкий (Уровень 1) | Минимальная тень (из токенов) | Приподнятые оверлеи, выпадающие меню |
|
||
| Фокус (Доступность) | Кольцо `--sema-color-border-focus-outer-default` | Состояния фокуса |
|
||
|
||
**Философия теней**: Pinterest использует минимальные тени. Кирпичная сетка опирается на контент (фотографию) для создания визуального интереса, а не на эффекты высоты. Глубина исходит из тепла цветов поверхностей и щедрого скругления контейнеров.
|
||
|
||
## 7. Что делать и чего не делать
|
||
|
||
### Делать
|
||
- Использовать тёплые нейтральные цвета (`#e5e5e0`, `#e0e0d9`, `#91918c`) — тёплый оливковый/песчаный тон — это идентичность
|
||
- Применять Pinterest-красный (`#e60023`) только для основных CTA — он смелый и единственный
|
||
- Использовать исключительно Pin Sans — один шрифт для всего
|
||
- Применять щедрые скругления: 16px для кнопок/полей ввода, 20px+ для карточек
|
||
- Держать кирпичную сетку плотной — плотность контента — это ценность
|
||
- Использовать тёплые фоны бейджей (`hsla(60,20%,98%,.5)`) для тонких тёплых смывов
|
||
- Использовать `#211922` (сливово-чёрный) для основного текста — теплее чистого чёрного
|
||
|
||
### Не делать
|
||
- Не использовать холодные серые нейтральные — всегда тёплые/оливковые тона
|
||
- Не использовать чистый чёрный (`#000000`) в качестве основного текста — использовать сливово-чёрный (`#211922`)
|
||
- Не использовать кнопки в форме «таблетки» — скругление 16px округлое, но не «таблетка»
|
||
- Не добавлять тяжёлые тени — Pinterest плоский по дизайну, глубина из контента
|
||
- Не использовать малые скругления (<12px) на карточках — щедрое скругление является основным
|
||
- Не вводить дополнительные цвета бренда — красный + тёплые нейтральные — это полная палитра
|
||
- Не использовать тонкие насыщенности шрифта — Pin Sans минимум 400
|
||
|
||
## 8. Адаптивное поведение
|
||
|
||
### Контрольные точки
|
||
| Название | Ширина | Ключевые изменения |
|
||
|------|-------|-------------|
|
||
| Мобильный | <576px | Один столбец, компактный макет |
|
||
| Большой мобильный | 576–768px | Сетка пинов в 2 столбца |
|
||
| Планшет | 768–890px | Расширенная сетка |
|
||
| Небольшой десктоп | 890–1312px | Стандартная кирпичная сетка |
|
||
| Десктоп | 1312–1440px | Полный макет |
|
||
| Большой десктоп | 1440–1680px | Расширенные столбцы сетки |
|
||
| Ультраширокий | >1680px | Максимальная плотность сетки |
|
||
|
||
### Стратегия сворачивания
|
||
- Сетка пинов: 5+ столбцов → 3 → 2 → 1
|
||
- Навигация: строка поиска + иконки → упрощённая мобильная навигация
|
||
- Блоки featured: бок о бок → стек
|
||
- Герой: 70px → масштабируется пропорционально
|
||
- Подвал: тёмный многоколоночный → стек
|
||
|
||
## 9. Руководство по промптам для агентов
|
||
|
||
### Быстрая цветовая справка
|
||
- Бренд: Pinterest-красный (`#e60023`)
|
||
- Фон: Белый (`#ffffff`)
|
||
- Текст: Сливово-чёрный (`#211922`)
|
||
- Вторичный текст: Оливковый серый (`#62625b`)
|
||
- Поверхность кнопки: Песчаный серый (`#e5e5e0`)
|
||
- Граница: Тёплый серебристый (`#91918c`)
|
||
- Фокус: Синий фокус (`#435ee5`)
|
||
|
||
### Примеры промптов для компонентов
|
||
- «Создать герой: белый фон. Заголовок 70px Pin Sans насыщенность 600, сливово-чёрный (#211922). Красная кнопка CTA (#e60023, скругление 16px, отступы 6px 14px). Вторичная песчаная кнопка (#e5e5e0, скругление 16px).»
|
||
- «Оформить карточку пина: белый фон, скругление 16px, без тени. Фотография заполняет верхнюю часть, ниже описание 16px Pin Sans насыщенность 400 в #62625b.»
|
||
- «Создать круговую кнопку действия: фон #e0e0d9, скругление 50%, иконка #211922.»
|
||
- «Создать поле ввода: белый фон, 1px solid #91918c, скругление 16px, отступы 11px 15px. Фокус: синий контур через семантические токены.»
|
||
- «Оформить тёмный подвал: фон #33332e. Логотип Pinterest в белом цвете. Ссылки 12px Pin Sans в #91918c.»
|
||
|
||
### Руководство по итерациям
|
||
1. Тёплые нейтральные повсюду — оливковый/песчаный серый, никогда холодная сталь
|
||
2. Pinterest-красный только для CTA — смелый и единственный
|
||
3. 16px скругление на кнопках/полях ввода, 20px+ на карточках — щедро, но не «таблетка»
|
||
4. Pin Sans — единственный шрифт — компактный 12px для интерфейса, 70px для дисплея
|
||
5. Фотография несёт дизайн — интерфейс остаётся тёплым и минималистичным
|
||
6. Сливово-чёрный (#211922) для текста — теплее чистого чёрного
|