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

一、④段整套同步（用户选候选 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。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,233 @@
+# Дизайн-система, вдохновлённая 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) для текста — теплее чистого чёрного