④段整套同步（六节＋ 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,366 @@
+# Дизайн-система, вдохновлённая Nike
+
+> Category: E-Commerce и ритейл
+> Спортивный ритейл. Монохромный интерфейс, массивная строчная типографика, фотографии в полный экран.
+
+## 1. Визуальная тема и атмосфера
+
+Nike.com — это кинетический торговый собор: сайт, который переносит взрывную энергию спорта в цифровой опыт покупок. Дизайн основан на принципе радикальной простоты: всё сводится к чёрному, белому и серому, чтобы спортивная фотография и цвет продукта главенствовали без конкурентов. Результат — это скорее не сайт, а спортивное издание, свёрстанное с точностью журнала класса люкс. Каждый пиксель либо продаёт товар, либо ведёт к нему.
+
+Система «Podium CDS» (внутренняя Core Design System Nike) устанавливает агрессивно монохроматическую основу. Интерфейс растворяется в тексте цвета (`#111111`) и белых поверхностях, позволяя героической фотографии — потным атлетам, кроссовкам в полёте, энергии стадиона — нести эмоциональный заряд. Когда в интерфейсе всё же появляется цвет, он почти исключительно функциональный: красный для ошибок, синий для ссылок, зелёный для успешных состояний. Сам продукт и есть цветовая история. Это сдержанность порождает визуальный парадокс: одни из самых красочных страниц в интернете воспринимаются как наиболее минималистичные, потому что вся яркость исходит от товаров, а не от интерфейса.
+
+Типографическая система — вторая половина визуальной идентичности Nike. Массивные заголовки в верхнем регистре, набранные Nike Futura ND — кастомным конденсированным вариантом Futura с невозможно плотным межстрочным интервалом (0.90) — пробивают героические изображения как типографический удар. Ниже рабочая лошадка Helvetica Now обслуживает всё: от навигации до описаний продуктов — с точностью швейцарской школы. Это разделение между выразительным дисплейным шрифтом и функциональным основным отражает двойственность бренда Nike: вдохновение встречается с исполнением.
+
+**Ключевые характеристики:**
+- Монохроматический интерфейс (чёрный/белый/серый), в котором единственным источником цвета является продуктовая фотография
+- Массивная дисплейная типографика в верхнем регистре (96px, межстрочный интервал 0.90), пробивающая героические изображения
+- Фотографии в полный экран без скруглений — изображение заполняет каждый доступный край
+- Кнопки-пилюли (радиус 30px) как основной интерактивный элемент
+- Сетка с шагом 8px с атлетической дисциплиной — каждое значение кратно системе
+- Торговая архитектура, организованная по категориям, с крупными навигационными карточками с изображениями
+- Модель глубины без теней и минимальными рамками — различие поверхностей только через оттенки серого
+
+## 2. Цветовая палитра и роли
+
+### Основные
+
+- **Nike Black** (`#111111`): Основа — основной текст, фон кнопок, текст навигации, наложения на героических изображениях. Намеренно не чисто-чёрный (#000000) — создаёт чуть более мягкое ощущение при чтении
+- **Nike White** (`#FFFFFF`): Основной фон страниц, текст кнопок на тёмном, поверхности карточек, фон навигационной панели
+
+### Поверхности и фоны
+
+- **Snow** (`#FAFAFA`): Самая светлая поверхность, почти белая с тонкой дифференциацией (--podium-cds-color-grey-50)
+- **Light Gray** (`#F5F5F5`): Вторичный фон, заливка поля поиска, плейсхолдер изображения, скелетон загрузки (--podium-cds-color-grey-100)
+- **Hover Gray** (`#E5E5E5`): Фон состояния hover, заливка отключённой кнопки (--podium-cds-color-grey-200)
+- **Dark Surface** (`#28282A`): Основной фон тёмных/инвертированных секций (--podium-cds-color-grey-800)
+- **Deep Charcoal** (`#1F1F21`): Инвертированный основной фон, самая тёмная не-чёрная поверхность (--podium-cds-color-grey-900)
+- **Dark Hover** (`#39393B`): Состояние hover на тёмных фонах (--podium-cds-color-grey-700)
+
+### Нейтральные цвета и текст
+
+- **Primary Text** (`#111111`): Основной текст, заголовки, ссылки навигации (--podium-cds-color-text-primary)
+- **Secondary Text** (`#707072`): Описательный текст, метаданные, временные метки, подписи к ценам (--podium-cds-color-text-secondary)
+- **Disabled Text** (`#9E9EA0`): Неактивные элементы, недоступные опции (--podium-cds-color-text-disabled)
+- **Disabled Inverse** (`#4B4B4D`): Отключённый текст на тёмных фонах (--podium-cds-color-text-disabled-inverse)
+- **Border Primary** (`#707072`): Стандартный цвет рамки, совпадает с вторичным текстом
+- **Border Secondary** (`#CACACB`): Тонкие рамки, рамки полей ввода, разделительные линии (--podium-cds-color-grey-300)
+- **Border Disabled** (`#CACACB`): Неактивное состояние рамки
+- **Border Active** (`#111111`): Активная/сфокусированная рамка, совпадает с основным текстом
+
+### Семантические и акцентные цвета
+
+- **Nike Red** (`#D30005`): Критические ошибки, бейджи распродаж, срочные уведомления (--podium-cds-color-red-600)
+- **Bright Red** (`#EE0005`): Red-500, чуть более светлый красный для акцентов
+- **Nike Orange Badge** (`#D33918`): Текст бейджей, промо-выноски (--podium-cds-color-text-badge)
+- **Orange Flash** (`#FF5000`): Выразительный оранжевый акцент (--podium-cds-color-orange-400)
+- **Success Green** (`#007D48`): Подтверждение, наличие товара, позитивные состояния (--podium-cds-color-green-600)
+- **Success Inverse** (`#1EAA52`): Успех на тёмных фонах (--podium-cds-color-green-500)
+- **Link Blue** (`#1151FF`): Текстовые ссылки, информационные выделения (--podium-cds-color-blue-500)
+- **Info Inverse** (`#1190FF`): Ссылки на тёмных фонах (--podium-cds-color-blue-400)
+- **Warning Yellow** (`#FEDF35`): Фоны предупреждений, информационные баннеры (--podium-cds-color-yellow-200)
+- **Focus Ring** (`rgba(39, 93, 197, 1)`): Кольцо индикатора фокуса с клавиатуры
+
+### Расширенный цветовой спектр (Podium CDS)
+
+Каждая цветовая шкала охватывает диапазон 50–900 для выразительного использования в кампаниях и продуктовых страницах:
+
+- **Red**: `#FFE5E5` → `#EE0005` → `#530300`
+- **Orange**: `#FFE2D6` → `#FF5000` → `#3E1009`
+- **Yellow**: `#FEF087` → `#FCA600` → `#99470A`
+- **Green**: `#DFFFB9` → `#1EAA52` → `#003C2A`
+- **Teal**: `#D4FFFB` → `#008E98` → `#043441`
+- **Blue**: `#D6EEFF` → `#1151FF` → `#020664`
+- **Purple**: `#E4E1FC` → `#6E0FF6` → `#1C0060`
+- **Pink**: `#FFE1F3` → `#ED1AA0` → `#4C012D`
+
+### Система градиентов
+
+Nike избегает градиентов в интерфейсе. Там, где они появляются, они фотографические — применяются к фонам героических изображений продуктов (например, красный кроссовок на градиенте от красного к более тёмно-красному). Сама дизайн-система использует только плоские цвета.
+
+## 3. Правила типографики
+
+### Семейство шрифтов
+
+**Дисплейный:** Nike Futura ND (кастомный конденсированный вариант Futura, эксклюзивный для Nike)
+- Запасные варианты: Helvetica Now Text Medium, Helvetica, Arial
+- Используется исключительно для крупных дисплейных заголовков в верхнем регистре
+- Характерный плотный межстрочный интервал (0.90) и трансформация в верхний регистр
+
+**Заголовочный:** Helvetica Now Display Medium
+- Запасные варианты: Helvetica, Arial
+- Используется для заголовков разделов и названий продуктов размером 24–32px
+
+**Body Medium:** Helvetica Now Text Medium (насыщенность 500)
+- Запасные варианты: Helvetica, Arial
+- Используется для ссылок, кнопок, подписей, выделенного основного текста
+
+**Body:** Helvetica Now Text (насыщенность 400)
+- Запасные варианты: Helvetica, Arial
+- Используется для стандартного основного текста, описаний, метаданных
+
+**Arabic:** Neue Frutiger Arabic — локаль-специфичная альтернатива
+
+### Иерархия
+
+| Роль | Размер | Насыщенность | Межстрочный интервал | Межбуквенный интервал | Примечания |
+|------|--------|--------------|----------------------|-----------------------|------------|
+| Display | 96px | 500 | 0.90 | — | Nike Futura ND, верхний регистр, героические заголовки |
+| Heading 1 | 32px | 500 | 1.20 | — | Helvetica Now Display Medium, названия разделов |
+| Heading 2 | 24px | 500 | 1.20 | — | Helvetica Now Display Medium, подразделы |
+| Heading 3 | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, заголовки карточек |
+| Body | 16px | 400 | 1.75 | — | Helvetica Now Text, описания продуктов |
+| Body Medium | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, выделенный текст |
+| Link | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, ссылки навигации |
+| Link Small | 14px | 500 | 1.86 | — | Helvetica Now Text Medium, ссылки в подвале/служебные |
+| Button | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, текст CTA |
+| Button Small | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, вторичные кнопки |
+| Caption | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, подписи к ценам |
+| Small | 12px | 500 | 1.50 | — | Helvetica Now Text Medium, временные метки |
+| Tiny | 12px | 400 | 1.50 | — | Helvetica Now Text, юридический текст |
+
+### Принципы
+
+Типографика Nike — это этюд о напряжении. Дисплейный уровень — Nike Futura ND, 96px с сокрушительным межстрочным интервалом 0.90 — создан так, чтобы выглядеть как табло на стадионе: массивное, конденсированное, в верхнем регистре, невозможно игнорировать. Оно превращает заголовки в боевые кличи. Ниже дисплейного уровня Helvetica Now обеспечивает клинический контрапункт: швейцарская точность читаемости с щедрым межстрочным интервалом 1.75 для комфортного просмотра продуктов. Насыщенность 500 (Medium) преобладает во всём основном тексте, придавая прозе Nike лёгкую уверенность без тяжести bold — каждое предложение читается как уверенная рекомендация, а не как призыв.
+
+## 4. Стили компонентов
+
+### Кнопки
+
+**Основная**
+- Фон: Nike Black (`#111111`)
+- Текст: White (`#FFFFFF`), 16px/500, Helvetica Now Text Medium
+- Рамка: отсутствует
+- Скругление: полностью скруглённая пилюля (30px)
+- Отступы: ~12px 24px
+- Hover: фон меняется на Grey-500 (`#707072`), цвет текста при hover
+- Active: эффект пульсации scale(0) с opacity 0.5
+- Focus: кольцо box-shadow 2px в `rgba(39, 93, 197, 1)`
+- Переход: background 200ms ease
+
+**Основная на тёмном фоне**
+- Фон: White (`#FFFFFF`)
+- Текст: Black (`#111111`)
+- Hover: фон меняется на Grey-300 (`#CACACB`)
+
+**Вторичная (контурная)**
+- Фон: прозрачный
+- Текст: Nike Black (`#111111`)
+- Рамка: 1.5px solid `#CACACB` (grey-300)
+- Скругление: 30px
+- Hover: рамка темнеет до `#707072`, фон до grey-200
+
+**Отключённая**
+- Фон: Grey-200 (`#E5E5E5`)
+- Текст: Grey-400 (`#9E9EA0`)
+- Курсор: not-allowed
+
+**Иконочная кнопка**
+- Фон: Grey-100 (`#F5F5F5`)
+- Форма: радиус 30px (или 50% для круговой)
+- Отступы: 6px
+- Hover: фон Grey-500
+
+### Карточки и контейнеры
+
+- Фон: White (`#FFFFFF`) — в большинстве случаев видимой границы карточки нет
+- Скругление: 0px для карточек с изображением продукта (изображение от края до края), 20px для интерактивных контейнеров
+- Тень: отсутствует — Nike не использует тени для карточек
+- Hover: для карточек продуктов нет эффекта подъёма; подчёркивание на текстовых ссылках внутри карточек
+- Карточки продуктов: изображение сверху (без скругления), текстовые метаданные снизу с отступом 12px
+- Карточки категорий: фотография в полный экран с текстом поверх тёмного градиента
+- Переход: opacity 200ms ease для смены изображения при hover
+
+### Поля ввода и формы
+
+- Фон: Grey-100 (`#F5F5F5`)
+- Рамка: 1px solid `#CACACB` при наличии, или без рамки для поиска
+- Скругление: 24px (поля поиска), 8px (поля форм)
+- Шрифт: Helvetica Now Text, 16px
+- Focus: рамка меняется на `#111111` (border-active), кольцо фокуса 2px в `rgba(39, 93, 197, 1)`
+- Ошибка: рамка `#D30005` (критическое состояние)
+- Плейсхолдер: Grey-500 (`#707072`)
+- Переход: border-color 200ms ease
+
+### Навигация
+
+- Фон: White (`#FFFFFF`), прилипающая
+- Высота: ~60px на десктопе
+- Слева: логотип Nike Swoosh (SVG 24x24px)
+- По центру: ссылки категорий (New & Featured, Men, Women, Kids, Sale) в 16px/500 Helvetica Now Text Medium
+- Справа: поиск (поле с радиусом 24px), Избранное, иконки корзины
+- Hover: цвет текста меняется на Grey-500 (`#707072`)
+- Мобильный: меню-гамбургер, полноэкранный оверлей
+- Верхний баннер: информационная строка с тёмным фоном (#111111) и белым текстом
+
+### Обработка изображений
+
+- Героические изображения: полный экран, без скруглений, от края до края
+- Сетка продуктов: соотношение сторон квадрат (1:1) или 4:3, без скруглений
+- Карточки категорий: 16:9 или 4:3, полный экран с текстом поверх
+- Плейсхолдер изображения: сплошной фон Grey-100 (`#F5F5F5`)
+- Ленивая загрузка: нативный атрибут loading="lazy", скелетон с фоном #F5F5F5
+- Hover на продукте: смена на вторичное изображение (вид спереди → сбоку)
+
+### Промо-баннеры
+
+- Тёмный (`#111111`) фон на всю ширину с белым текстом
+- Плотные отступы (8-12px по вертикали)
+- Текст по центру, 12px/500 Helvetica Now Text Medium
+- Используется для промо доставки, преимуществ участников, анонсов распродаж
+
+## 5. Принципы вёрстки
+
+### Система отступов
+
+Базовая единица: 4px (основная сетка кратна 8px)
+
+| Токен | Значение | Применение |
+|-------|----------|------------|
+| space-1 | 4px | Плотные зазоры между иконками, строчные отступы |
+| space-2 | 8px | Базовая единица, зазоры между иконкой и кнопкой |
+| space-3 | 12px | Внутренние отступы карточек, плотные марджины |
+| space-4 | 16px | Стандартные отступы, расстояния в навигации |
+| space-5 | 20px | Зазоры между карточками продуктов |
+| space-6 | 24px | Внутренние отступы разделов, зазоры сетки |
+| space-7 | 32px | Разрывы между разделами |
+| space-8 | 48px | Основные отступы разделов |
+| space-9 | 64px | Отступы героических секций |
+| space-10 | 80px | Большие отступы разделов |
+
+### Сетка и контейнер
+
+- Максимальная ширина контейнера: 1920px
+- Стандартная ширина контента: ~1440px с горизонтальными отступами
+- Сетка продуктов: 3 колонки на десктопе, 2 на планшете, 1 на мобильном
+- Сетка категорий: 3 колонки с изображениями в полный экран
+- Зазор сетки: 4-12px между карточками продуктов (намеренно плотный)
+- Горизонтальный отступ: 48px на десктопе, 24px на планшете, 16px на мобильном
+
+### Философия пространства
+
+Стратегия пустого пространства у Nike намеренно агрессивна — не в роскошном, «дышащем» стиле модного бренда, а в сжатом, высокоплотном ключе, который заполняет каждый пиксель либо содержимым, либо намеренным отсутствием. Сетки продуктов используют минимальные зазоры (4-12px), создавая ощущение изобилия и выбора. Разрывы между разделами щедрые (48-80px) для разграничения торговых контекстов. Общий эффект — магазин, который ощущается наполненным товаром при сохранении навигируемости: как хорошо организованный спортивный супермаркет.
+
+### Шкала скруглений
+
+| Значение | Контекст |
+|----------|---------|
+| 0px | Изображения продуктов, героические фотографии (острые края) |
+| 8px | Поля форм (не поиск) |
+| 18px | Небольшие интерактивные элементы |
+| 20px | Контейнеры, карточки с UI-содержимым |
+| 24px | Поля поиска, средние пилюли |
+| 30px | Кнопки, теги, фильтры (полная пилюля) |
+| 50% | Круговые иконочные кнопки, плейсхолдеры аватаров |
+
+## 6. Глубина и высота
+
+| Уровень | Обработка | Применение |
+|---------|-----------|------------|
+| Flat | Без тени, без рамки | Состояние по умолчанию для всего |
+| Divider | `0px -1px 0px 0px #E5E5E5 inset` | Тонкая вставная линия между секциями |
+| Focus | `0 0 0 2px rgba(39, 93, 197, 1)` | Кольцо фокуса с клавиатуры |
+| Overlay | Тёмная подложка поверх фотографии | Читаемость текста на изображении |
+
+Философия глубины у Nike радикально плоская. Нет теней карточек, нет эффектов подъёма при hover, нет парящих элементов. Глубина передаётся исключительно через цвет: тёмные секции отступают, светлые выдвигаются вперёд, сдвиги серого обозначают изменения состояния. Эта плоскость усиливает атлетический, прямолинейный характер бренда: никаких визуальных излишеств — только прямая коммуникация. Единственная «тень» во всей системе — это вставная разделительная линия в 1px и кольцо фокуса для обеспечения доступности.
+
+### Декоративная глубина
+
+- **Наложения на героические фотографии**: тёмные градиентные подложки поверх полноэкранных фотографий для читаемости текста
+- **Градиенты фона продуктов**: цветные фоны за героическими снимками продуктов (например, красный кроссовок на красном градиенте)
+- **Баннерные полосы**: сплошные тёмные (#111111) промо-полосы вверху страницы
+
+## 7. Что делать и чего избегать
+
+### Делать
+
+- Использовать Nike Black (#111111) для всего основного текста — никогда чистый #000000
+- Держать кнопки в форме пилюли (радиус 30px), ограничиваясь основным и вторичным вариантами
+- Использовать полноэкранную фотографию от края до края для героических секций — никаких скруглений на изображениях
+- Позволять продуктовой фотографии быть единственным источником цветовой яркости; держать UI монохроматическим
+- Использовать Nike Futura ND в верхнем регистре ТОЛЬКО для дисплейных заголовков (96px+)
+- Сохранять плотные зазоры сетки продуктов (4-12px) для ощущения плотности и изобилия
+- Использовать Grey-100 (#F5F5F5) для фонов всех полей ввода и плейсхолдеров
+- Резервировать цвет исключительно для семантических значений (красный=ошибка, зелёный=успех, синий=ссылка)
+- Использовать насыщенность 500 (Medium) для всех интерактивных текстовых элементов
+
+### Не делать
+
+- Не добавлять тени к карточкам — модель высоты у Nike полностью плоская
+- Не использовать скругления на изображениях продуктов — скруглённые углы только у UI-элементов
+- Не вводить цвета бренда помимо шкалы серого для UI-элементов
+- Не использовать Nike Futura ND ниже 24px — это исключительно дисплейный шрифт
+- Не добавлять эффекты подъёма при hover — карточки Nike не анимируются при наведении
+- Не использовать обычную насыщенность (400) для кнопок или ссылок — всегда использовать 500
+- Не размещать цветные фоны за UI-элементами — цвет зарезервирован для продуктовых контекстов
+- Не использовать более двух уровней текстовой иерархии на карточке (заголовок + тело)
+- Не добавлять декоративные разделители — вставная линия 1px является единственным паттерном разделителя
+- Не смягчать контраст — дизайн Nike намеренно доводит чёрный-на-белом до максимума
+
+## 8. Адаптивное поведение
+
+### Контрольные точки
+
+| Название | Ширина | Ключевые изменения |
+|----------|--------|-------------------|
+| Mobile | <640px | Одна колонка, навигация-гамбургер, дисплейный текст уменьшается, плотный отступ 16px |
+| Small Tablet | 640-768px | Начинается сетка продуктов в 2 колонки, навигация всё ещё свёрнута |
+| Tablet | 768-960px | Двухколоночные сетки, карточки категорий масштабируются, горизонтальный отступ 24px |
+| Small Desktop | 960-1024px | Навигация разворачивается в полную горизонтальную, сетка продуктов в 3 колонки |
+| Desktop | 1024-1440px | Полная вёрстка, расширенная навигация, трёхколоночные сетки, отступ 48px |
+| Large Desktop | >1440px | Контейнер с максимальной шириной по центру, увеличенные поля, изображения в полный экран |
+
+### Сенсорные цели
+
+- Минимальная сенсорная цель: 44x44px (WCAG AAA)
+- Иконки мобильной навигации: сенсорная область 48x48px
+- Карточки продуктов: вся поверхность кликабельна
+- Пилюли фильтров: минимальная высота 36px с отступом 12px
+
+### Стратегия схлопывания
+
+- **Навигация**: полные ссылки категорий → меню-гамбургер ниже 960px; иконки поиска, избранного, корзины остаются видимыми
+- **Сетки продуктов**: 3 колонки → 2 при 960px → 1 при 640px
+- **Героические секции**: дисплейный текст масштабируется от 96px → 64px → 48px; героические изображения остаются полноэкранными на всех размерах
+- **Карточки категорий**: 3 колонки → 2 → 1 при сохранении изображений в полный экран
+- **Отступы секций**: 80px → 48px → 32px → 24px по мере сужения viewport
+- **Промо-баннер**: текст переносится или усекается, тёмный фон сохраняется
+
+### Поведение изображений
+
+- Адаптивные изображения через Nike CDN (`c.static-nike.com`) с параметрами ширины
+- Изображения продуктов: srcset с несколькими разрешениями (w_320, w_640, w_960, w_1920)
+- Героические изображения: полный экран на всех контрольных точках, соотношение сторон меняется (16:9 на десктопе → 4:3 на мобильном)
+- Ленивая загрузка: нативный атрибут loading="lazy", плейсхолдер grey-100 во время загрузки
+- Арт-дирекшн: кадрирование героических изображений меняется между десктопной и мобильной композицией
+
+## 9. Руководство по промптам для агента
+
+### Быстрый справочник цветов
+
+- Основной CTA: Nike Black (`#111111`)
+- Фон: White (`#FFFFFF`)
+- Вторичная поверхность: Light Gray (`#F5F5F5`)
+- Текст заголовков: Nike Black (`#111111`)
+- Основной текст / hover: Secondary Text (`#707072`)
+- Рамка: Border Secondary (`#CACACB`)
+- Ошибка: Nike Red (`#D30005`)
+- Ссылка: Link Blue (`#1151FF`)
+
+### Примеры промптов для компонентов
+
+- «Создай героическую секцию продукта с полноэкранной фотографией от края до края, без скруглений, с тёмным градиентным наложением для текста и массивным заголовком 96px/500 в верхнем регистре в стиле Nike Futura с межстрочным интервалом 0.90 и кнопкой-пилюлей Nike Black (#111111) с радиусом 30px»
+- «Разработай сетку карточек продуктов в 3 колонки с квадратными изображениями (без скруглений), зазором 4px между карточками, названием продукта в 16px/500 Nike Black (#111111), ценой в 14px/500 и вторичным текстом в Grey-500 (#707072)»
+- «Создай прилипающую белую навигационную панель с логотипом по левому краю, ссылками категорий по центру в 16px/500 (#111111) с цветом hover #707072 и поиском по правому краю (радиус 24px, фон #F5F5F5), иконками избранного и корзины»
+- «Создай промо-баннерную полосу с фоном #111111, белым центрированным текстом 12px/500 и вертикальным отступом 8px — на всю ширину, без скруглений»
+- «Разработай вторичную контурную кнопку с прозрачным фоном, рамкой 1.5px #CACACB, радиусом пилюли 30px, текстом 16px/500 #111111, с рамкой, темнеющей до #707072 при hover»
+
+### Руководство по итерации
+
+При доработке существующих экранов, созданных с этой дизайн-системой:
+1. Сосредоточься на ОДНОМ компоненте за раз
+2. Ссылайся на конкретные названия цветов и hex-коды из этого документа
+3. Помни: продуктовая фотография — это цвет; UI остаётся монохроматическим
+4. Используй шкалу серого для изменений состояний: #F5F5F5 → #E5E5E5 → #CACACB → #707072
+5. Если в интерфейсе что-то кажется слишком цветным — вероятно, так и есть; Nike держит UI в оттенках серого
+6. Дисплейный шрифт (Nike Futura) ВСЕГДА должен быть в верхнем регистре и никогда не использоваться ниже 24px
+7. Основной шрифт (Helvetica Now) для интерактивных элементов почти всегда должен иметь насыщенность 500