④段整套同步（六节＋ 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,269 @@
+# Дизайн-система, вдохновлённая Cohere
+
+> Category: ИИ и языковые модели
+> Корпоративная AI-платформа. Яркие градиенты, эстетика насыщенных дашбордов.
+
+## 1. Визуальная тема и атмосфера
+
+Интерфейс Cohere — это отполированная корпоративная командная панель: уверенная, лаконичная, созданная с целью показать ИИ как серьёзную инфраструктуру, а не потребительскую игрушку. Всё разворачивается на ярко-белом холсте, где контент организован в щедро скруглённые карточки (радиус 22px), формирующие органичный, «облачный» визуальный язык. Сайт обращается к техническим директорам и корпоративным архитекторам: профессионально без холодности, сложно без излишней строгости.
+
+Дизайн-язык соединяет два мира через систему из двух шрифтов: CohereText — кастомная дисплейная антиква с плотным трекингом — придаёт заголовкам авторитет технологического манифеста, тогда как Unica77 Cohere Web отвечает за весь основной и интерфейсный текст с геометрической швейцарской точностью. Это сочетание антиквы и гротеска создаёт личность «уверенный авторитет встречает инженерную ясность», идеально отражающую корпоративную AI-платформу.
+
+Цвет используется с крайней сдержанностью — интерфейс почти полностью чёрно-белый с холодными серыми границами (`#d9d9dd`, `#e5e7eb`). Пурпурно-фиолетовый появляется лишь в фотографических hero-полосах, градиентных секциях и интерактивном синем (`#1863dc`), сигнализирующем состояния наведения и фокуса. Такая хроматическая сдержанность означает, что когда цвет всё же появляется — в скриншотах продукта, корпоративной фотографии и глубокой пурпурной секции — он несёт максимальный визуальный вес.
+
+**Ключевые характеристики:**
+- Ярко-белый холст с холодными серыми разграничивающими рамками
+- Радиус скругления 22px — отличительная «округлость карточки Cohere»
+- Два кастомных шрифта: CohereText (дисплейная антиква) + Unica77 (основной гротеск)
+- Корпоративная хроматическая сдержанность: чёрный, белый, холодные серые, минимальный пурпурно-синий акцент
+- Глубокие пурпурно-фиолетовые hero-секции для драматического контраста
+- Ghost/прозрачные кнопки, переходящие в синий при наведении
+- Корпоративная фотография, демонстрирующая разнообразные реальные сценарии
+- CohereMono для кода и технических меток с трансформацией в верхний регистр
+
+## 2. Цветовая палитра и роли
+
+### Основные цвета
+- **Cohere Black** (`#000000`): Основной цвет заголовков и элементов максимального акцента.
+- **Near Black** (`#212121`): Стандартный цвет ссылок в тексте — чуть мягче чистого чёрного.
+- **Deep Dark** (`#17171c`): Сине-тёмный почти-чёрный для навигации и текста на тёмных секциях.
+
+### Вторичные цвета и акценты
+- **Interaction Blue** (`#1863dc`): Основной интерактивный акцент — появляется при наведении на кнопки, в состояниях фокуса и активных ссылках. Единственный хроматический цвет действий.
+- **Ring Blue** (`#4c6ee6` с 50%): Цвет Tailwind ring для индикаторов фокуса с клавиатуры.
+- **Focus Purple** (`#9b60aa`): Цвет рамки фокуса у полей ввода — приглушённый фиолетовый.
+
+### Поверхности и фоны
+- **Pure White** (`#ffffff`): Основной фон страницы и поверхность карточек.
+- **Snow** (`#fafafa`): Деликатно приподнятые поверхности и фоны светлых секций.
+- **Lightest Gray** (`#f2f2f2`): Рамки карточек и самые мягкие разграничивающие линии.
+
+### Нейтральные цвета и текст
+- **Muted Slate** (`#93939f`): Приглушённые ссылки в футере и третичный текст — холодно-тонированный серый с лёгким сине-фиолетовым оттенком.
+- **Border Cool** (`#d9d9dd`): Стандартные рамки секций и элементов списков — холодный серый с едва заметным пурпурным тоном.
+- **Border Light** (`#e5e7eb`): Более светлый вариант рамки — стандартный gray-200 из Tailwind.
+
+### Система градиентов
+- **Пурпурно-фиолетовая hero-полоса**: Глубокие пурпурные градиентные секции, создающие драматический контраст на белом холсте. Размещаются как полноширинные полосы, содержащие скриншоты продукта и ключевые сообщения.
+- **Тёмный градиент футера**: Страница переходит через глубокий пурпурный/угольный к чёрному футеру, создавая эффект «сумерек».
+
+## 3. Правила типографики
+
+### Семейства шрифтов
+- **Дисплейный**: `CohereText`, с запасными: `Space Grotesk, Inter, ui-sans-serif, system-ui`
+- **Основной / UI**: `Unica77 Cohere Web`, с запасными: `Inter, Arial, ui-sans-serif, system-ui`
+- **Код**: `CohereMono`, с запасными: `Arial, ui-sans-serif, system-ui`
+- **Иконки**: `CohereIconDefault` (кастомный иконочный шрифт)
+
+### Иерархия
+
+| Роль | Шрифт | Размер | Насыщенность | Межстрочный | Трекинг | Примечание |
+|------|------|------|--------|-------------|----------------|-------|
+| Дисплейный / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (плотный) | -1.44px | Максимальный акцент, авторитет антиквы |
+| Дисплейный вторичный | CohereText | 60px (3.75rem) | 400 | 1.00 (плотный) | -1.2px | Крупные заголовки секций |
+| Заголовок секции | Unica77 | 48px (3rem) | 400 | 1.20 (плотный) | -0.48px | Заголовки разделов с функциями |
+| Подзаголовок | Unica77 | 32px (2rem) | 400 | 1.20 (плотный) | -0.32px | Заголовки карточек, названия функций |
+| Заголовок функции | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Небольшие заголовки секций |
+| Крупный текст | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Вводные абзацы |
+| Основной / Кнопка | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Стандартный текст, текст кнопок |
+| Средняя кнопка | Unica77 | 14px (0.88rem) | 500 | 1.71 (свободный) | normal | Небольшие кнопки, акцентные метки |
+| Подпись | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Метаданные, описания |
+| Метка в верхнем регистре | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Метки секций в верхнем регистре |
+| Мелкий | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Самый мелкий текст, ссылки в футере |
+| Микро-код | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Крошечные метки кода в верхнем регистре |
+
+### Принципы
+- **Антиква для деклараций, гротеск для утилит**: CohereText несёт голос бренда на дисплейном уровне — засечки придают заголовкам авторитет публикуемого исследования. Unica77 справляется с любыми функциональными задачами в швейцарско-геометрической нейтральности.
+- **Отрицательный трекинг на крупных размерах**: CohereText использует -1.2px до -1.44px межбуквенного расстояния при 60–72px, создавая плотные, выразительные текстовые блоки.
+- **Единственная насыщенность текста**: Почти всё использование Unica77 — насыщенность 400. Насыщенность 500 появляется только для небольшого акцента кнопок. Система опирается на размер и отступы, а не на контраст насыщенности.
+- **Метки кода в верхнем регистре**: CohereMono использует верхний регистр с положительным межбуквенным расстоянием (0.16–0.28px) для технических тегов и маркеров секций.
+
+## 4. Стилизация компонентов
+
+### Кнопки
+
+**Ghost / Прозрачная**
+- Фон: прозрачный (`rgba(255, 255, 255, 0)`)
+- Текст: Cohere Black (`#000000`)
+- Рамка не видна
+- При наведении: текст переходит в Interaction Blue (`#1863dc`), прозрачность 0.8
+- При фокусе: сплошная обводка 2px в Interaction Blue
+- Основной стиль кнопки — невидима до взаимодействия
+
+**Тёмная сплошная**
+- Фон: тёмный/чёрный
+- Текст: Pure White
+- Для CTA на светлых поверхностях
+- Форма пилюли или стандартный радиус
+
+**С обводкой**
+- Ограничение через рамку
+- Используется для вторичных действий
+
+### Карточки и контейнеры
+- Фон: Pure White (`#ffffff`)
+- Рамка: тонкая сплошная Lightest Gray (`1px solid #f2f2f2`) для деликатных карточек; Cool Border (`#d9d9dd`) для акцентных
+- Радиус: **22px** — фирменный радиус Cohere для основных карточек, изображений и диалоговых контейнеров. Также 4px, 8px, 16px, 20px для меньших элементов
+- Тень: минимальная — Cohere опирается на цвет фона и рамки, а не на тени
+- Особое: `0px 0px 22px 22px` радиус (скругление только снизу) для контейнеров секций
+- Диалог: радиус 8px для модальных окон
+
+### Поля ввода и формы
+- Текст: белый на тёмном инпуте, чёрный на светлом
+- Рамка фокуса: Focus Purple (`#9b60aa`) с `1px solid`
+- Тень фокуса: красное кольцо (`rgb(179, 0, 0) 0px 0px 0px 2px`) — вероятно, для индикации ошибки
+- Обводка фокуса: Interaction Blue сплошная 2px
+
+### Навигация
+- Чистая горизонтальная навигация на белом или тёмном фоне
+- Логотип: надпись Cohere (кастомный SVG)
+- Ссылки: тёмный текст 16px Unica77
+- CTA: тёмная сплошная кнопка
+- Мобильная: коллапс в бургер
+
+### Обработка изображений
+- Корпоративная фотография с разнообразными персонажами и окружением
+- Фотография с пурпурным оттенком для драматических секций
+- Скриншоты интерфейса продукта на тёмных поверхностях
+- Изображения с радиусом 22px в соответствии с системой карточек
+- Полноширинные секции с пурпурным градиентом
+
+### Особые компоненты
+
+**Система карточек 22px**
+- Радиус скругления 22px — визуальная подпись Cohere
+- Все основные карточки, изображения и контейнеры используют этот радиус
+- Создаёт облачную, органичную мягкость, отличающую от типичных 8–12px
+
+**Полоса корпоративного доверия**
+- Логотипы компаний, расположенные в горизонтальной полосе
+- Демонстрирует корпоративное внедрение
+- Чистая монохромная обработка логотипов
+
+**Пурпурные hero-полосы**
+- Полноширинные глубоко пурпурные секции для демонстрации продукта
+- Создают драматические визуальные разрывы в потоке белой страницы
+- Скриншоты продукта парят в пурпурном окружении
+
+**Теги кода в верхнем регистре**
+- CohereMono в верхнем регистре с межбуквенным расстоянием
+- Используется как маркеры секций и метки категоризации
+- Создаёт техническую, структурированную иерархию информации
+
+## 5. Принципы компоновки
+
+### Система отступов
+- Базовая единица: 8px
+- Шкала: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
+- Внутренние отступы кнопок варьируются в зависимости от варианта
+- Внутренние отступы карточек: примерно 24–32px
+- Вертикальные отступы секций: щедрые (56–60px между секциями)
+
+### Сетка и контейнер
+- Максимальная ширина контейнера: до 2560px (очень широкий) с адаптивным масштабированием
+- Hero: по центру с драматической типографикой
+- Секции с функциями: многоколоночные сетки карточек
+- Корпоративные секции: полноширинные пурпурные полосы
+- Обнаружено 26 брейкпоинтов — исключительно детализированная адаптивная система
+
+### Философия белого пространства
+- **Корпоративная ясность**: Каждая секция представляет одно чёткое предложение с пространством для дыхания между ними.
+- **Фотография как герой**: Крупные фотографические секции обеспечивают визуальный интерес без необходимости в декоративных дизайн-элементах.
+- **Группировка в карточки**: Связанный контент объединяется в карточки со скруглением 22px, создавая естественные кластеры информации.
+
+### Шкала радиуса скругления
+- Острый (4px): Элементы навигации, мелкие теги, пагинация
+- Комфортный (8px): Диалоговые окна, вторичные контейнеры, маленькие карточки
+- Щедрый (16px): Акцентные контейнеры, средние карточки
+- Крупный (20px): Большие карточки с функциями
+- Фирменный (22px): Основные карточки, hero-изображения, главные контейнеры — ФИРМЕННЫЙ радиус Cohere
+- Пилюля (9999px): Кнопки, теги, индикаторы статуса
+
+## 6. Глубина и уровни поднятия
+
+| Уровень | Обработка | Применение |
+|-------|-----------|-----|
+| Плоский (0) | Нет тени, нет рамки | Фон страницы, текстовые блоки |
+| С рамкой (1) | `1px solid #f2f2f2` или `#d9d9dd` | Стандартные карточки, разделители списков |
+| Пурпурная полоса (2) | Полноширинный тёмно-пурпурный фон | Hero-секции, демонстрация функций |
+
+**Философия теней**: Cohere практически без теней. Глубина передаётся через **контраст цвета фона** (белые карточки на пурпурных полосах, белая поверхность на snow), **ограничение рамками** (холодно-серые рамки) и драматическое **чередование светлых и тёмных секций**. Когда элементам нужна высота, они достигают её, будучи белыми на тёмном, а не через тени.
+
+## 7. Что делать и чего избегать
+
+### Делать
+- Использовать радиус скругления 22px на всех основных карточках и контейнерах — это визуальная подпись
+- Использовать CohereText для дисплейных заголовков (72px, 60px) с отрицательным трекингом
+- Использовать Unica77 для всего основного и интерфейсного текста с насыщенностью 400
+- Поддерживать палитру чёрно-белой с холодно-серыми рамками
+- Использовать Interaction Blue (#1863dc) только для интерактивных состояний наведения/фокуса
+- Использовать глубокие пурпурные секции для драматических визуальных разрывов и демонстрации продукта
+- Применять верхний регистр + межбуквенное расстояние на CohereMono для меток секций
+- Поддерживать корпоративную фотографию с разнообразными персонажами
+
+### Не делать
+- Не использовать радиус скругления, отличный от 22px, на основных карточках — фирменный радиус важен
+- Не вводить тёплые цвета — палитра строго холодных тонов
+- Не использовать тяжёлые тени — глубина достигается за счёт цветового контраста и рамок
+- Не использовать жирное начертание (700+) для основного текста — диапазон 400–500
+- Не пропускать иерархию антиква/гротеск — CohereText для заголовков, Unica77 для текста
+- Не использовать пурпурный как цвет поверхности карточек — пурпурный зарезервирован для полноширинных секций
+- Не сокращать отступы между секциями ниже 40px — корпоративные компоновки требуют пространства для дыхания
+- Не применять декоративные элементы на кнопках по умолчанию — ghost/прозрачная — базовое состояние
+
+## 8. Адаптивное поведение
+
+### Брейкпоинты
+| Название | Ширина | Ключевые изменения |
+|------|-------|-------------|
+| Маленький мобильный | <425px | Компактная компоновка, минимальные отступы |
+| Мобильный | 425–640px | Одна колонка, карточки в столбик |
+| Крупный мобильный | 640–768px | Незначительные корректировки отступов |
+| Планшет | 768–1024px | Начинаются двухколоночные сетки |
+| Десктоп | 1024–1440px | Полная многоколоночная компоновка |
+| Крупный десктоп | 1440–2560px | Максимальная ширина контейнера |
+
+*Обнаружено 26 брейкпоинтов — один из наиболее детализированных адаптивных сайтов в наборе данных.*
+
+### Цели касания
+- Кнопки достаточного размера для касания
+- Ссылки навигации с комфортными отступами
+- Поверхности карточек как цели касания
+
+### Стратегия коллапса
+- **Навигация**: Полная навигация сворачивается в бургер
+- **Сетки функций**: Многоколоночная → 2 колонки → одна колонка
+- **Текст hero**: 72px → 48px → 32px прогрессивное масштабирование
+- **Пурпурные секции**: Сохраняют полную ширину, контент складывается
+- **Сетки карточек**: 3 → 2 → 1 колонка
+
+### Поведение изображений
+- Фотография пропорционально масштабируется внутри контейнеров со скруглением 22px
+- Скриншоты продукта сохраняют соотношение сторон
+- Пурпурные секции пропорционально масштабируют фон
+
+## 9. Руководство по промптам для агента
+
+### Краткий справочник цветов
+- Основной текст: «Cohere Black (#000000)»
+- Фон страницы: «Pure White (#ffffff)»
+- Вторичный текст: «Near Black (#212121)»
+- Акцент при наведении: «Interaction Blue (#1863dc)»
+- Приглушённый текст: «Muted Slate (#93939f)»
+- Рамки карточек: «Lightest Gray (#f2f2f2)»
+- Рамки секций: «Border Cool (#d9d9dd)»
+
+### Примеры промптов для компонентов
+- «Создай hero-секцию на Pure White (#ffffff) с CohereText размером 72px, насыщенность 400, межстрочный 1.0, трекинг -1.44px. Текст Cohere Black. Подзаголовок в Unica77 18px насыщенность 400, межстрочный 1.4.»
+- «Спроектируй карточку функции с радиусом 22px, рамкой 1px solid Lightest Gray (#f2f2f2) на белом фоне. Заголовок в Unica77 32px, трекинг -0.32px. Текст в Unica77 16px, Muted Slate (#93939f).»
+- «Создай ghost-кнопку: прозрачный фон, текст Cohere Black в Unica77 16px. При наведении текст переходит в Interaction Blue (#1863dc) с прозрачностью 0.8. При фокусе: сплошная обводка 2px в Interaction Blue.»
+- «Создай полноширинную секцию глубокого пурпурного с белым текстом. CohereText 60px для заголовка. Скриншот продукта парит внутри со скруглением 22px.»
+- «Спроектируй метку секции в CohereMono 14px, верхний регистр, трекинг 0.28px. Текст Muted Slate (#93939f).»
+
+### Руководство по итерации
+1. Фокусируйся на ОДНОМ компоненте за раз
+2. Всегда используй радиус 22px для основных карточек — «округлость карточки Cohere»
+3. Указывай шрифт — CohereText для заголовков, Unica77 для текста, CohereMono для меток
+4. Интерактивные элементы используют Interaction Blue (#1863dc) только при наведении
+5. Поддерживай белые поверхности с холодно-серыми рамками — никаких тёплых тонов
+6. Пурпурный — для полноширинных секций, никогда не для фонов карточек