④段整套同步（六节＋ 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,353 @@
+# Дизайн-система, вдохновлённая Shopify
+
+> Category: Электронная коммерция и ритейл
+> Платформа электронной коммерции. Кинематичный dark-first, неоново-зелёный акцент, ультралёгкая типографика.
+
+## 1. Визуальная тема и атмосфера
+
+Shopify.com — это dark-first цифровой театр: сайт, который преподносит свою торговую платформу как кинематографическую премьеру. Всё впечатление разворачивается на фоне бездны почти чёрных поверхностей, несущих едва уловимый намёк на глубокий лесной зелёный (`#02090A`, `#061A1C`, `#102620`), создавая ночную атмосферу, которая ощущается не как маркетинговая страница SaaS, а как эксклюзивный показ продукта на технологической keynote. Эта темнота не холодная и не корпоративная — это тёплая, обволакивающая темнота роскошного переживания, как будто сидишь в первом ряду затемнённого зала.
+
+Типографика — бесспорная звезда. NeueHaasGrotesk — утончённый потомок Helvetica — появляется в монументальном масштабе (96px) с невозможно лёгким начертанием (330–400), создавая заголовки, которые кажутся выгравированными в свете, а не отпечатанными чернилами. Функция OpenType `ss03` придаёт формам букв неповторимый характер, который отличает типографику Shopify от обычного использования Helvetica. Ниже уровня дисплея Inter Variable управляет основным текстом с хирургической точностью, используя столь же необычные переменные насыщенности (420, 450, 550), которые существуют между традиционными ступенями начертания. Эта точность сигнализирует о компании, которая тщательно продумывает каждую деталь.
+
+Цвет используется с крайней сдержанностью. Основной акцент — Shopify Neon Green (`#36F4A4`): электрическая мята, появляющаяся исключительно на кольцах фокуса и акцентных выделениях, пульсирующая как биолюминесцентный сигнал на тёмном холсте. Более мягкие зелёные оттенки (Aloe `#C1FBD4`, Pistachio `#D4F9E0`) создают атмосферные промывки. Белый — единственный цвет текста, имеющий значение на тёмных поверхностях, тогда как нейтральная шкала на основе цинка (`#A1A1AA` до `#3F3F46`) управляет иерархией тихой информации. Результат — дизайн, заставляющий торговые технологии выглядеть так, будто они принадлежат научно-фантастическому будущему.
+
+**Ключевые характеристики:**
+- Dark-first дизайн с глубокими лесными тил-подтонами (не чистый чёрный)
+- Ультралёгкая дисплейная типографика (насыщенность 330) в монументальном масштабе (96px), создающая эфирное присутствие
+- Neon Green (`#36F4A4`) как единственный высокоэнергетический акцент на фоне темноты
+- Кнопки-пилюли полного радиуса (9999px) как основная интерактивная форма
+- Многослойные box-shadow, создающие фотографическую глубину
+- Скриншоты продуктов, встроенные в тёмные контексты интерфейса, соответствующие окружающей темноте
+- Нейтральная шкала на основе цинка для иерархии текста — сбалансированная между тёплым и холодным
+
+## 2. Цветовая палитра и роли
+
+### Основные
+
+- **Shopify White** (`#FFFFFF`): Основной текст на тёмных поверхностях, заливки кнопок, высококонтрастные элементы
+- **Shopify Black** (`#000000`): Фон страницы, текст кнопки на белом, максимальная контрастная база (--color-shade-100)
+
+### Вторичные и акцентные
+
+- **Neon Green** (`#36F4A4`): Фирменный акцент — кольца фокуса, интерактивные выделения, индикаторы активного состояния. Электрический и биолюминесцентный
+- **Aloe** (`#C1FBD4`): Мягкая зелёная промывка для декоративных фонов, атмосферных карточек (--color-aloe-10)
+- **Pistachio** (`#D4F9E0`): Светлейший зелёный оттенок для тонкой дифференциации поверхностей (--color-pistachio-10)
+
+### Поверхности и фоны
+
+- **Void** (`#000000`): Корневой фон страницы — истинно чёрный для максимальной глубины
+- **Deep Teal** (`#02090A`): Поверхности карточек, контентные контейнеры — почти чёрный с зелёным подтоном
+- **Dark Forest** (`#061A1C`): Фоны секций с ощутимым зелёным характером
+- **Forest** (`#102620`): Приподнятые тёмные поверхности, фоны заголовков — самый тёплый тёмный оттенок
+- **Dark Card Border** (`#1E2C31`): Границы карточек на тёмных поверхностях, тонкое определение границ
+
+### Нейтральные и текстовые (шкала Zinc)
+
+- **Shade-30** (`#D4D4D8`): Светлейший нейтральный, едва заметные границы на тёмном (--color-shade-30)
+- **Muted Text** (`#A1A1AA`): Вторичный текст, метаданные, описания — тихий голос
+- **Shade-50** (`#71717A`): Третичный текст, временные метки, наименее важная информация (--color-shade-50)
+- **Shade-60** (`#52525B`): Отключённый текст, декоративные нейтральные (--color-shade-60)
+- **Shade-70** (`#3F3F46`): Тонкие разделители, едва заметные границы интерфейса (--color-shade-70)
+- **Light Border** (`#E4E4E7`): Границы на светлых поверхностях (редко — только в модальных окнах светлого режима)
+
+### Семантические и акцентные
+
+- **Link Muted** (`#9797A2`): Приглушённый текст ссылки с декорацией подчёркивания
+- **Link Sage** (`#9DABAD`): Приглушённые ссылки с тил-оттенком
+- **Link Lavender** (`#BDBDCA`): Более светлый вариант ссылки
+- **Link Mint** (`#99B3AD`): Вариант ссылки с зелёным оттенком для тематических секций
+
+### Система градиентов
+
+- **Dark Teal Wash**: Радиальный градиент от `#102620` в центре к `#02090A` по краю — используется позади витрин продуктов
+- **Green Atmospheric**: Тонкие зелёно-тонированные амбиентные градиенты позади секций-героев, создающие глубину без сплошных цветов
+- **Spotlight**: Сфокусированная светлая область, плавно переходящая в чёрный — создаёт презентационное освещение в стиле keynote
+
+## 3. Правила типографики
+
+### Семейство шрифтов
+
+**Дисплейный:** NeueHaasGrotesk (утончённый потомок Helvetica, переменный шрифт)
+- Запасные шрифты: Helvetica, Arial, sans-serif
+- Функции OpenType: `ss03` (стилистический набор 3 — отличительные варианты форм букв)
+- Доступные начертания: 330, 360, 400, 500, 750 (переменные)
+- Используется для всех заголовков, текста героя и крупных дисплейных элементов
+
+**Основной:** Inter-Variable
+- Запасные шрифты: Helvetica, Arial, sans-serif
+- Функции OpenType: `ss03`
+- Доступные начертания: 400, 420, 450, 500, 550 (переменные)
+- Используется для основного текста, ссылок, кнопок, элементов интерфейса
+
+**Моноширинный:** ui-monospace
+- Запасные шрифты: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New
+- Используется для фрагментов кода, подписей к данным, технического контента
+
+### Иерархия
+
+| Роль | Размер | Насыщенность | Высота строки | Межбуквенный интервал | Примечания |
+|------|------|--------|-------------|----------------|-------|
+| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk, заголовки героя, "ss03" |
+| Display XL Bold | 90.74px | 750 | 1.00 | 4.54px | NeueHaasGrotesk, акцентный дисплей |
+| Display XL Tracked | 96px | 400 | 1.00 | 2.4px | NeueHaasGrotesk, разрядный дисплей |
+| Display Light | 96px | 330 | 0.96 | — | NeueHaasGrotesk, эфирный дисплей |
+| Heading 1 | 70px | 330 | 1.00 | — | NeueHaasGrotesk, заголовки секций |
+| Heading 2 | 55px | 330 | 1.16 | — | NeueHaasGrotesk, подсекции |
+| Heading 3 | 48px | 330 | 1.14 | — | NeueHaasGrotesk, заголовки функций |
+| Heading 4 | 32px | 360 | 1.14 | 0.32px | NeueHaasGrotesk, заголовки карточек |
+| Heading 5 | 28px | 500 | 1.28 | 0.42px | NeueHaasGrotesk, малые заголовки |
+| Heading 6 | 24px | 400 | 1.14 | 0.36px | NeueHaasGrotesk, второстепенные заголовки |
+| Body Large | 20px | 500 | 1.40 | 0.3px | NeueHaasGrotesk / Inter, вводные абзацы |
+| Body | 18px | 400 | 1.56 | — | Inter-Variable, стандартный основной текст |
+| Body Medium | 18px | 550 | 1.56 | — | Inter-Variable, акцентированный основной текст |
+| Body Small | 16px | 400 | 1.50 | — | Inter / NeueHaasGrotesk, компактный текст |
+| Body Small Medium | 16px | 420 | 1.50 | — | Inter-Variable, слегка акцентированный |
+| Button | 16px | 400 | 1.50 | — | NeueHaasGrotesk, текст CTA |
+| Nav Link | 18px | 500 | 1.25 | 0.72px | NeueHaasGrotesk, элементы навигации |
+| Caption | 14px | 500 | 1.49 | 0.28px | NeueHaasGrotesk / Inter, метаданные |
+| Caption Medium | 14px | 550 | 1.49 | 0.28px | Inter-Variable, акцентированная подпись |
+| Overline | 15.36px | 400 | 1.50 | 1.54px | NeueHaasGrotesk, метки с широким трекингом |
+| Micro | 13px | 500 | 1.50 | -0.13px | Inter, мелкий текст с плотным трекингом |
+| Label | 12px | 400 | 1.20 | 0.72px | Inter, метки в верхнем регистре |
+| Code | 16px | 400 | 1.50 | — | ui-monospace, верхний регистр, блоки кода |
+| Code Small | 12px | 400 | 1.33 | — | ui-monospace, верхний регистр, инлайн-код |
+
+### Принципы
+
+Типографика Shopify — это мастер-класс точности с переменными шрифтами. Дисплейный уровень живёт почти исключительно при насыщенности 330–400 — невесомый текст, который кажется парящим над тёмным фоном как проецируемый свет. Это противоположность жирного, тяжёлого подхода большинства SaaS-сайтов: там, где другие кричат, Shopify шепчет в монументальном масштабе. Заголовки 96px при насыщенности 330 создают парадокс огромного размера и деликатного штриха, который ощущается одновременно монументальным и хрупким. Функция OpenType `ss03` активирует стилистический набор, придающий определённым символам (вероятно, 'a', 'g' и некоторым цифрам) более утончённый вид, отличая типографику Shopify от стандартного использования Helvetica Neue. Inter Variable управляет основным уровнем с хирургической точностью, используя насыщенности 420 и 550, которые существуют между традиционными ступенями — каждый текстовый элемент имеет именно тот визуальный вес, который ему необходим.
+
+## 4. Стилизация компонентов
+
+### Кнопки
+
+**Основная (белая заливка)**
+- Фон: Белый (`#FFFFFF`)
+- Текст: Чёрный (`#000000`)
+- Граница: 2px solid transparent
+- Радиус скругления: полная пилюля (9999px)
+- Отступы: 12px 26px 12px 16px (асимметрично — больше справа для визуального баланса)
+- Наведение: лёгкое уменьшение непрозрачности или смена фона
+- Фокус: контурное кольцо `#36F4A4` (Neon Green) 2px
+- Переход: all 200ms ease
+
+**Вторичная (призрачная/обведённая)**
+- Фон: transparent
+- Текст: Белый (`#FFFFFF`)
+- Граница: 2px solid Белый (`#FFFFFF`)
+- Радиус скругления: полная пилюля (9999px)
+- Отступы: 12px 26px 12px 16px
+- Наведение: заполняется белым фоном с чёрным текстом
+- Фокус: контур `#36F4A4` 2px
+
+**Бейдж/Тег (нейтральная заливка)**
+- Фон: `rgba(255, 255, 255, 0.2)` (матовое стекло)
+- Текст: Белый (`#FFFFFF`)
+- Граница: отсутствует
+- Радиус скругления: слегка скруглённый (4px)
+- Отступы: 12px 16px
+- Шрифт: 16px regular
+
+### Карточки и контейнеры
+
+- Фон: Deep Teal (`#02090A`) на тёмных страницах
+- Граница: 1px solid `#1E2C31` (Dark Card Border) — едва заметная граница
+- Радиус скругления: 8px для стандартных карточек, 12px для избранных карточек, 20px 20px 0 0 для карточек со скруглением сверху
+- Тень: многослойная система:
+  - В покое: `rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px` + `rgba(255,255,255,0.03) 0px 1px 0px inset`
+  - Вставленный белый блик создаёт тонкое свечение верхнего края
+- Наведение: тень расширяется, карточка может слегка осветлиться
+- Переход: box-shadow 300ms ease, transform 200ms ease
+
+### Поля ввода и формы
+
+- Фон: transparent или Dark Forest (`#061A1C`)
+- Текст: Белый (`#FFFFFF`)
+- Граница: 1px solid `#3F3F46` (Shade-70)
+- Радиус скругления: 8px
+- Отступы: 12px 16px
+- Фокус: 2px solid `#36F4A4` (кольцо фокуса Neon Green)
+- Плейсхолдер: Shade-50 (`#71717A`)
+- Переход: border-color 200ms ease
+
+### Навигация
+
+- Фон: transparent (накладывается на тёмный герой), при прокрутке становится Forest (`#102620`)
+- Высота: ~64px
+- Слева: логотип-словесный знак Shopify (SVG, белый на тёмном)
+- Центр/Справа: ссылки навигации 18px/500 NeueHaasGrotesk, белые, межбуквенный интервал 0.72px
+- CTA: белая кнопка-пилюля "Start for free" (справа)
+- Вторичная CTA: призрачная кнопка с белой границей
+- Наведение: ссылки переходят к Muted Text (`#A1A1AA`) или получают подчёркивание
+- Мобильный: меню-гамбургер, полноэкранное тёмное перекрытие
+- Переход: background 300ms ease при прокрутке
+
+### Обработка изображений
+
+- Скриншоты продуктов: встроены в тёмные контексты интерфейса, соответствуя окружающей темноте
+- Превью интерфейса администратора: отображаются на тёмном фоне с тонкими границами карточек
+- Соотношения сторон: разные — изображения героев широкие (приблизительно 16:9), снимки функций гибкие
+- Все изображения вплотную расположены в тёмных контейнерах — никаких ярких рамок или обрамлений
+- Отложенная загрузка с тёмными поверхностями-заглушками
+
+### Индикаторы доверия
+
+- Статистика отображается на видном месте: "15+" (лет), "150M+" (покупателей)
+- Числа в дисплейном масштабе в NeueHaasGrotesk
+- Разделы призыва к действию экосистемы партнёров/разработчиков
+- Отзывы в тёмной теме, органично вписанные в поток страницы
+
+## 5. Принципы компоновки
+
+### Система отступов
+
+Базовая единица: 8px
+
+| Токен | Значение | Использование |
+|-------|-------|-----|
+| space-1 | 4px | Плотные инлайн-промежутки |
+| space-2 | 8px | Базовая единица, промежутки иконок |
+| space-3 | 12px | Отступы карточки, плотные поля |
+| space-4 | 16px | Стандартные отступы элемента |
+| space-5 | 24px | Промежутки карточек, отступы секции |
+| space-6 | 28px | Средний межсекционный отступ |
+| space-7 | 32px | Разрывы секций |
+| space-8 | 36px | Большой отступ |
+| space-9 | 40px | Отступ главной секции |
+| space-10 | 64px | Отступ секции героя, большие промежутки |
+
+### Сетка и контейнер
+
+- Максимальная ширина контейнера: ~1280px (по центру)
+- Герой: на всю ширину, тёмный фон от края до края с центрированным текстом
+- Секции функций: двухколоночные компоновки с текстом и скриншотами продуктов
+- Секции статистики: горизонтальная компоновка с крупными числами
+- Горизонтальные отступы: 64px рабочий стол, 32px планшет, 16px мобильный
+- Промежуток сетки: 24–32px между основными блоками контента
+
+### Философия пустого пространства
+
+Стратегия пустого пространства Shopify театральная. Секции разделены огромными просторами тёмного пространства — 80px до 120px чистого чёрного воздуха — что создаёт ритм презентации, а не веб-страницы. Каждый блок контента — это собственный «слайд» в прокрутке в стиле keynote. Внутри секций отступы теснее и осмысленнее, создавая фокальную плотность на фоне обширной пустоты. Контраст между макро-уровневой пустотой и микро-уровневой точностью — вот что придаёт сайту его кинематический ритм.
+
+### Шкала радиуса скругления
+
+| Значение | Контекст |
+|-------|---------|
+| 4px | Теги, бейджи, микро-элементы |
+| 8px | Стандартные карточки, поля ввода, видеоконтейнеры |
+| 12px | Избранные карточки, контейнеры изображений, кнопки (не-пилюля) |
+| 20px | Карточки со скруглением сверху (20px 20px 0 0), заголовки модальных окон |
+| 340px | Крупные скруглённые декоративные элементы |
+| 9999px | Кнопки-пилюли, бейджи-пилюли, элементы навигации |
+
+## 6. Глубина и поднятие
+
+| Уровень | Обработка | Использование |
+|-------|-----------|-----|
+| Базовый | Без тени, тёмная поверхность | Фон страницы по умолчанию |
+| Тонкий | `rgba(0,0,0,0.1) 0px 0px 0px 1px` + вставленное белое свечение | Карточки в покое |
+| Средний | Многослойный: кольцо 1px + 2px + 4px + стек теней 8px | Приподнятые карточки, избранные секции |
+| Высокий | `rgba(0,0,0,0.25) 0px 25px 50px -12px` | Модальные окна, выпадающие списки, перекрытия |
+| Фокус | `0px 0px 0px 2px #36F4A4` | Кольцо фокуса клавиатуры (Neon Green) |
+
+Система теней Shopify необычно изощрённа. Вместо значений теней с единственным слоем карточки используют стековый, многослойный подход: кольцо 1px для определения границ, прогрессивные размытия 2px/4px/8px для естественного спада освещения и деликатное вставленное белое свечение (`rgba(255,255,255,0.03)`), имитирующее поверхность стекла, освещённую сверху. На тёмных фонах тени затемняют от уже тёмных поверхностей, поэтому тени функционируют скорее как «ambient occlusion», чем традиционное поднятие — карточка кажется слегка погружённой в поверхность, а не парящей над ней.
+
+### Декоративная глубина
+
+- **Тёмные тил-градиенты**: Амбиентные радиальные промывки позади секций-героев и витрин продуктов
+- **Эффекты прожектора**: Яркие центрированные области, плавно переходящие в чёрный, создавая театральное освещение в стиле keynote
+- **Свечение краёв**: Тонкие светлые края на тёмных карточках через вставленный box-shadow
+- **Зелёные атмосферные ореолы**: Едва заметные зелёные оттенки в фоновых градиентах, отражающие брендовый акцент
+
+## 7. Что делать и чего не делать
+
+### Что делать
+
+- Использовать иерархию тёмных тил-чёрных поверхностей (Void → Deep Teal → Dark Forest → Forest) для глубины
+- Поддерживать дисплейную типографику при насыщенности 330–400 — эфирная лёгкость является подписью дизайна
+- Использовать Neon Green (`#36F4A4`) исключительно для состояний фокуса и критических акцентных выделений
+- Применять радиус 9999px ко всем основным кнопкам CTA — полная пилюля не подлежит обсуждению
+- Использовать многослойную систему теней для поднятия карточек — одиночные тени выглядят плоско
+- Поддерживать функцию OpenType `ss03` для всего текста — это часть типографической идентичности
+- Использовать Inter Variable для основного текста и NeueHaasGrotesk для заголовков — никогда не менять их роли местами
+- Создавать театральные отступы между секциями (80px+) для кинематического темпа
+
+### Чего не делать
+
+- Не использовать чистый чёрный (#000000) для текста на тёмном фоне — использовать только белый (#FFFFFF)
+- Не вводить тёплые цвета (оранжевый, красный, жёлтый) — палитра строго холодная (зелёные, тил, нейтральные)
+- Не использовать насыщенность выше 500 для основного текста NeueHaasGrotesk — тяжёлые начертания нарушают эфирное ощущение
+- Не применять зелёные акценты на больших поверхностях — Neon Green предназначен только для маленьких, точных выделений
+- Не использовать острые углы (радиус 0px) на интерактивных элементах — всё скругляется
+- Не добавлять яркие фоны — тёмная тема фундаментальна, а не опциональна
+- Не использовать однослойные box-shadow — стековый подход является системой
+- Не устанавливать высоту строки выше 1.56 для основного текста — текст Shopify относительно компактный
+- Не смешивать NeueHaasGrotesk и Inter в одном размере/роли — их шкалы насыщенности отличаются
+- Не использовать отрицательный межбуквенный интервал для заголовков — заголовки Shopify имеют нейтральный или положительный трекинг
+
+## 8. Адаптивное поведение
+
+### Контрольные точки
+
+| Название | Ширина | Ключевые изменения |
+|------|-------|-------------|
+| Мобильный | <640px | Одна колонка, навигация-гамбургер, дисплейный текст масштабируется до 48px, отступ 16px |
+| Планшет | 640-1024px | Начинаются двухколоночные сетки, дисплейный текст 70px, отступ 32px |
+| Рабочий стол | 1024-1440px | Полная компоновка, расширенная навигация, дисплей 96px, отступ 64px |
+| Большой рабочий стол | >1440px | Контейнер max-width по центру, увеличенный межсекционный отступ |
+
+### Зоны касания
+
+- Минимальная зона касания: 44x44px (WCAG AAA)
+- Кнопки-пилюли: минимальная высота 48px с щедрыми горизонтальными отступами
+- Ссылки навигации: зона касания 44px
+- Поверхности карточек: вся карточка нажимаема там, где есть ссылка
+
+### Стратегия сворачивания
+
+- **Навигация**: Полные горизонтальные ссылки → меню-гамбургер ниже 1024px; логотип и кнопка CTA остаются видимыми
+- **Секция героя**: Дисплей 96px → 70px на планшете → 48px на мобильном; сохраняет однocolonное центрированное выравнивание
+- **Секции функций**: 2 колонки текст+изображение → одна стопированная колонка ниже 768px
+- **Статистика**: Горизонтальный ряд → стопировано вертикально на мобильном
+- **Отступы секций**: 64px → 40px → 24px → 16px по мере сужения окна просмотра
+- **Карточки**: Сетка → стопирование, сохранение полной ширины на мобильном
+
+### Поведение изображений
+
+- Скриншоты продуктов: адаптивные в тёмных контейнерах, сохраняют соотношение сторон
+- Изображения героев: полная ширина на всех контрольных точках, отложенная загрузка с тёмными заглушками
+- Превью интерфейса администратора: пропорциональное масштабирование, могут обрезаться на мобильном
+- Все изображения используют CDN (`cdn.shopify.com`) с адаптивным srcset
+
+## 9. Руководство по агентным промптам
+
+### Краткий справочник цветов
+
+- Основная CTA: Shopify White (`#FFFFFF`)
+- Фон страницы: Void Black (`#000000`)
+- Поверхность карточки: Deep Teal (`#02090A`)
+- Фон секции: Dark Forest (`#061A1C`)
+- Приподнятый фон: Forest (`#102620`)
+- Акцент: Neon Green (`#36F4A4`)
+- Основной текст: Белый (`#FFFFFF`)
+- Приглушённый текст: Muted (`#A1A1AA`)
+- Тёмная граница: Dark Card Border (`#1E2C31`)
+
+### Примеры промптов для компонентов
+
+- «Создай секцию героя на истинно чёрном (#000000) фоне с заголовком NeueHaasGrotesk 96px/330 белого цвета, подзаголовком 20px/500 в #A1A1AA и двумя кнопками-пилюлями: белая с заливкой (радиус 9999px) и призрачная с границей белого цвета 2px»
+- «Разработай карточку функции на Deep Teal (#02090A) с границей #1E2C31 1px, радиусом 12px, многослойной тенью (кольцо 1px + размытие 2px/4px/8px при 10% чёрного), содержащую белый заголовок 32px/360 и основной текст #A1A1AA 18px/400»
+- «Создай секцию статистики на Dark Forest (#061A1C) с белыми числами 96px/750 (NeueHaasGrotesk), описательными метками #A1A1AA 16px/400 и щедрым отступом 64px между блоками статистики»
+- «Создай фиксированную навигацию с прозрачным фоном (при прокрутке становится #102620), белым логотипом Shopify слева, белыми ссылками навигации 18px/500 с межбуквенным интервалом 0.72px и белой кнопкой-пилюлей "Start for free" справа»
+- «Разработай тег/бейдж с фоном из матового стекла rgba(255,255,255,0.2), радиусом 4px, отступами 12px 16px, белым текстом 16px — парящий над тёмной поверхностью карточки»
+
+### Руководство по итерации
+
+При доработке существующих экранов, созданных с использованием этой дизайн-системы:
+1. Сосредоточься на ОДНОМ компоненте за раз
+2. Ссылайся на конкретные названия цветов и hex-коды из этого документа
+3. Помни: это DARK-FIRST дизайн — светлые поверхности являются исключением, а не правилом
+4. Дисплейный текст всегда должен казаться невесомым (насыщенность 330–400) — если он выглядит тяжёлым, уменьши насыщенность
+5. Neon Green (#36F4A4) ценен — используй экономно только для фокуса и акцента
+6. Иерархия тёмных поверхностей (чёрный → deep teal → dark forest → forest) создаёт тонкую глубину
+7. Тени многослойные — одно значение `box-shadow` не передаст ощущение карточки Shopify
+8. Функция OpenType `ss03` должна быть активна для всего текста для типографической согласованности