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。
21 KiB
21 KiB
Дизайн-система, вдохновлённая 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.»
Руководство по итерациям
- Тёплые нейтральные повсюду — оливковый/песчаный серый, никогда холодная сталь
- Pinterest-красный только для CTA — смелый и единственный
- 16px скругление на кнопках/полях ввода, 20px+ на карточках — щедро, но не «таблетка»
- Pin Sans — единственный шрифт — компактный 12px для интерфейса, 70px для дисплея
- Фотография несёт дизайн — интерфейс остаётся тёплым и минималистичным
- Сливово-чёрный (#211922) для текста — теплее чистого чёрного