④段整套同步（六节＋ 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: Електронна комерція та роздрібна торгівля
+> Платформа електронної комерції. Темна кінематографічна тема, неоново-зелений акцент, ультралегка типографіка.
+
+## 1. Візуальна тема та атмосфера
+
+Shopify.com — це темний цифровий театр, сайт, що представляє свою комерційну платформу як кінематографічну прем'єру. Весь досвід розгортається на тлі бездоннно-чорних поверхонь, що несуть найніжніший натяк на глибокий лісовий зелений (`#02090A`, `#061A1C`, `#102620`), створюючи нічну атмосферу, яка схожа більше на ексклюзивну презентацію продукту на технологічному кейноті, аніж на типову маркетингову сторінку SaaS. Ця темрява не холодна і не корпоративна — це тепла, обгортаюча темрява розкішного досвіду, як сидіння в першому ряду затемненого залу.
+
+Типографіка є беззаперечною зіркою. NeueHaasGrotesk — витончений нащадок Helvetica — з'являється в монументальному масштабі (96px) з неймовірно легкою насиченістю (330-400), створюючи заголовки, що здаються вирізаними у світлі, а не надрукованими чорнилом. Функція OpenType `ss03` надає літерам виразний характер, що відрізняє типографіку Shopify від стандартного використання Helvetica. Нижче шару дисплею, Inter Variable обробляє основний текст з хірургічною точністю, використовуючи рівно незвичні змінні насиченості (420, 450, 550), що знаходяться між традиційними точками насиченості. Ця точність сигналізує про компанію, що ретельно опрацьовує кожну деталь.
+
+Колір використовується з надзвичайною стриманістю. Основний акцент — Неоновий зелений Shopify (`#36F4A4`) — електричний м'ята, що з'являється виключно на кільцях фокусу та акцентних підсвіченнях, пульсуючи як біолюмінесцентний сигнал на тлі темного полотна. Більш м'які відтінки зеленого (Aloe `#C1FBD4`, Pistachio `#D4F9E0`) забезпечують атмосферні промивки. Білий — єдиний колір тексту, що має значення на темних поверхнях, тоді як нейтральна шкала на основі цинку (`#A1A1AA` до `#3F3F46`) обробляє ієрархію тихої інформації. Результатом є дизайн, завдяки якому торгова технологія здається такою, що належить науково-фантастичному майбутньому.
+
+**Ключові характеристики:**
+- Дизайн dark-first з глибокими підтонами лісового тілу (не чистий чорний)
+- Ультралегка типографіка дисплею (насиченість 330) у монументальному масштабі (96px), що створює ефемерну присутність
+- Неоновий зелений (`#36F4A4`) як єдиний високоенергетичний акцент на тлі темряви
+- Кнопки з повним заокругленням (радіус 9999px) як основна інтерактивна форма
+- Багатошарові тіні, що створюють фотографічну глибину
+- Знімки екрана продуктів, вбудовані в темний контекст інтерфейсу, що відповідає навколишній темряві
+- Нейтральна шкала на основі цинку для ієрархії тексту — збалансована між теплим та холодним
+
+## 2. Кольорова палітра та ролі
+
+### Основні
+
+- **Shopify White** (`#FFFFFF`): Основний текст на темних поверхнях, заливки кнопок, елементи з високим контрастом
+- **Shopify Black** (`#000000`): Фон основного тексту, текст кнопок на білому, база максимального контрасту (--color-shade-100)
+
+### Другорядні та акценти
+
+- **Неоновий зелений** (`#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`): Обрамлення карток на темних поверхнях, тонке визначення меж
+
+### Нейтральні та текст (Цинкова шкала)
+
+- **Shade-30** (`#D4D4D8`): Найсвітліший нейтральний, майже непомітні обрамлення на темному (--color-shade-30)
+- **Приглушений текст** (`#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**: Тонкі атмосферні градієнти із зеленим відтінком за секціями hero, що створюють глибину без однотонних кольорів
+- **Spotlight**: Зосереджена яскрава область, що згасає до чорного — створює презентаційне освітлення в стилі кейноту
+
+## 3. Правила типографіки
+
+### Сімейство шрифтів
+
+**Дисплейний:** NeueHaasGrotesk (витончений нащадок Helvetica, змінний шрифт)
+- Резервні варіанти: Helvetica, Arial, sans-serif
+- Функції OpenType: `ss03` (стилістичний набір 3 — характерні альтернативи накреслень)
+- Доступні насиченості: 330, 360, 400, 500, 750 (змінний)
+- Використовується для всіх заголовків, тексту hero та великих дисплейних елементів
+
+**Основний текст:** Inter-Variable
+- Резервні варіанти: Helvetica, Arial, sans-serif
+- Функції OpenType: `ss03`
+- Доступні насиченості: 400, 420, 450, 500, 550 (змінний)
+- Використовується для основного тексту, посилань, кнопок, елементів інтерфейсу
+
+**Mono:** ui-monospace
+- Резервні варіанти: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New
+- Використовується для фрагментів коду, міток даних, технічного вмісту
+
+### Ієрархія
+
+| Роль | Розмір | Насиченість | Висота рядка | Міжлітерний інтервал | Примітки |
+|------|--------|-------------|--------------|----------------------|----------|
+| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk, заголовки hero, "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 (асиметричний — більше правого відступу для візуального балансу)
+- Hover: незначне зменшення непрозорості або зсув фону
+- Фокус: 2px `#36F4A4` (Неоновий зелений) контурне кільце
+- Перехід: all 200ms ease
+
+**Другорядна (ghost/контурна)**
+- Фон: transparent
+- Текст: Білий (`#FFFFFF`)
+- Обрамлення: 2px solid Білий (`#FFFFFF`)
+- Радіус обрамлення: повна пігулка (9999px)
+- Відступ: 12px 26px 12px 16px
+- Hover: заповнюється білим фоном з чорним текстом
+- Фокус: 2px `#36F4A4` контур
+
+**Значок/Тег (нейтральне заповнення)**
+- Фон: `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`
+  - Внутрішнє біле підсвічення створює тонке сяяння верхнього краю
+- Hover: тінь розширюється, картка може злегка яскравіти
+- Перехід: box-shadow 300ms ease, transform 200ms ease
+
+### Поля введення та форми
+
+- Фон: transparent або Dark Forest (`#061A1C`)
+- Текст: Білий (`#FFFFFF`)
+- Обрамлення: 1px solid `#3F3F46` (Shade-70)
+- Радіус обрамлення: 8px
+- Відступ: 12px 16px
+- Фокус: 2px solid `#36F4A4` (кільце фокусу Неонового зеленого)
+- Плейсхолдер: Shade-50 (`#71717A`)
+- Перехід: border-color 200ms ease
+
+### Навігація
+
+- Фон: transparent (накладається на темний hero), стає Forest (`#102620`) при прокрутці
+- Висота: ~64px
+- Ліво: словесний логотип Shopify (SVG, білий на темному)
+- Центр/Право: навігаційні посилання 18px/500 NeueHaasGrotesk, білі, letter-spacing 0.72px
+- CTA: біла кнопка-пігулка "Почати безкоштовно" (праворуч)
+- Другорядний CTA: кнопка ghost з білим обрамленням
+- Hover: посилання переходять до приглушеного тексту (`#A1A1AA`) або набувають підкреслення
+- Мобільний: бургер-меню, повноекранне темне накладення
+- Перехід: background 300ms ease при прокрутці
+
+### Обробка зображень
+
+- Знімки екрана продукту: вбудовані в темний контекст інтерфейсу, що відповідає навколишній темряві
+- Попередні перегляди адміністративного інтерфейсу: відображаються на темному тлі з тонкими обрамленнями карток
+- Співвідношення сторін: різні — зображення hero широкі (близько 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 | Відступ секції hero, великі проміжки |
+
+### Сітка та контейнер
+
+- Максимальна ширина контейнера: ~1280px (центрована)
+- Hero: на всю ширину, темний фон від краю до краю з центрованим текстом
+- Секції функцій: двоколонкові макети з текстом та знімками екрана продукту
+- Секції статистики: горизонтальний макет з великими числами
+- Горизонтальний відступ: 64px на десктопі, 32px на планшеті, 16px на мобільному
+- Проміжок сітки: 24-32px між основними блоками вмісту
+
+### Філософія пустого простору
+
+Стратегія пустого простору Shopify є театральною. Розділи відокремлені величезними просторами темного простору — від 80px до 120px чистого чорного простору для дихання — що створюють темп презентації, а не веб-сторінки. Кожен блок вмісту є власним "слайдом" у прокрутці в стилі кейноту. Всередині розділів відступи щільніші та більш цілеспрямовані, створюючи фокусну щільність на тлі розлогої пустоти. Контраст між макрорівневою порожнечею та мікрорівневою точністю — ось що надає сайту його кінематографічний ритм.
+
+### Шкала радіусу обрамлення
+
+| Значення | Контекст |
+|----------|----------|
+| 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` | Кільце фокусу клавіатури (Неоновий зелений) |
+
+Система тіней Shopify є незвично витонченою. Замість одноступінчастих тіней картки використовують складений багатошаровий підхід: кільце 1px для визначення межі, прогресивні розмиття 2px/4px/8px для природного спадання світла та делікатне внутрішнє біле сяяння (`rgba(255,255,255,0.03)`), що імітує скляну поверхню з підсвіченням зверху. На темному тлі тіні затемнюють вже темні поверхні, тому тіні функціонують більше як "ambient occlusion", а не традиційне підняття — картка здається злегка зануреною в поверхню, а не ширяючою над нею.
+
+### Декоративна глибина
+
+- **Темні тілові градієнти**: Атмосферні радіальні промивання за секціями hero та презентаціями продуктів
+- **Ефекти прожектора**: Яскраві центровані зони, що згасають до чорного, створюючи театральне освітлення в стилі кейноту
+- **Крайове сяяння**: Тонкі світлі краї темних карток за допомогою внутрішнього box-shadow
+- **Зелені атмосферні ореоли**: Ледь помітні зелені відтінки в градієнтах фону, що відгукуються акценту бренду
+
+## 7. Що робити і що не робити
+
+### Що робити
+
+- Використовуйте ієрархію темних тілово-чорних поверхонь (Void → Deep Teal → Dark Forest → Forest) для глибини
+- Зберігайте дисплейну типографіку при насиченості 330-400 — ефемерна легкість є підписом дизайну
+- Використовуйте Неоновий зелений (`#36F4A4`) виключно для станів фокусу та критичних акцентних підсвічень
+- Застосовуйте радіус 9999px до всіх основних кнопок CTA — повна пігулка є обов'язковою
+- Використовуйте багатошарову систему тіней для підняття карток — одиночні тіні виглядають плоско
+- Підтримуйте функцію OpenType `ss03` у всьому тексті — це частина типографічної ідентичності
+- Використовуйте Inter Variable для основного тексту та NeueHaasGrotesk для заголовків — ніколи не змішуйте їх ролі
+- Створюйте театральні відступи між розділами (80px+) для кінематографічного темпу
+
+### Що не робити
+
+- Не використовуйте чистий чорний (#000000) для тексту на темному тлі — використовуйте лише білий (#FFFFFF)
+- Не вводьте теплі кольори (помаранчевий, червоний, жовтий) — палітра є суворо холодною (зелені, тілові, нейтральні)
+- Не використовуйте насиченість шрифту вище 500 для основного тексту NeueHaasGrotesk — важкі насиченості руйнують ефемерне відчуття
+- Не застосовуйте зелені акценти до великих поверхонь — Неоновий зелений призначений для малих, точних підсвічень
+- Не використовуйте гострі кути (радіус 0px) на інтерактивних елементах — все заокруглюється
+- Не додавайте яскраве тло — темна тема є фундаментальною, а не необов'язковою
+- Не використовуйте одношарові box shadows — складений підхід є системою
+- Не встановлюйте line-height вище 1.56 для основного тексту — текст Shopify є відносно компактним
+- Не змішуйте NeueHaasGrotesk та Inter при однаковому розмірі/ролі — їхні шкали насиченості відрізняються
+- Не використовуйте letter-spacing нижче 0 для заголовків — заголовки Shopify відстежують нейтрально або позитивно
+
+## 8. Адаптивна поведінка
+
+### Точки зупинки
+
+| Назва | Ширина | Ключові зміни |
+|-------|--------|---------------|
+| Мобільний | <640px | Одна колонка, бургер-навігація, дисплейний текст масштабується до 48px, відступ 16px |
+| Планшет | 640-1024px | Починаються двоколонкові сітки, дисплейний текст 70px, відступ 32px |
+| Десктоп | 1024-1440px | Повний макет, розширена навігація, дисплей 96px, відступ 64px |
+| Великий десктоп | >1440px | Контейнер max-width центрований, збільшені відступи розділів |
+
+### Цілі дотику
+
+- Мінімальна ціль дотику: 44x44px (WCAG AAA)
+- Кнопки-пігулки: мінімальна висота 48px з щедрим горизонтальним відступом
+- Навігаційні посилання: область дотику 44px
+- Поверхні карток: вся картка є натисканою при наявності посилання
+
+### Стратегія згортання
+
+- **Навігація**: Повні горизонтальні посилання → бургер-меню нижче 1024px; логотип та кнопка CTA залишаються видимими
+- **Секція hero**: дисплей 96px → 70px на планшеті → 48px на мобільному; зберігає вирівнювання по центру в одній колонці
+- **Секції функцій**: двоколонковий текст+зображення → складений в одну колонку нижче 768px
+- **Статистика**: Горизонтальний ряд → вертикальний стос на мобільному
+- **Відступ розділу**: 64px → 40px → 24px → 16px зі звуженням вьюпорту
+- **Картки**: Сітка → стос, зберігаючи повну ширину на мобільному
+
+### Поведінка зображень
+
+- Знімки екрана продукту: адаптивні в темних контейнерах, зберігають співвідношення сторін
+- Зображення hero: на всю ширину на всіх точках зупинки, відкладене завантаження з темними заповнювачами
+- Попередні перегляди адміністративного інтерфейсу: масштабуються пропорційно, можуть обрізатися на мобільному
+- Усі зображення використовують CDN (`cdn.shopify.com`) з адаптивним srcset
+
+## 9. Посібник із запитів агента
+
+### Швидка кольорова довідка
+
+- Основний CTA: Shopify White (`#FFFFFF`)
+- Фон сторінки: Void Black (`#000000`)
+- Поверхня картки: Deep Teal (`#02090A`)
+- Фон розділу: Dark Forest (`#061A1C`)
+- Піднятий фон: Forest (`#102620`)
+- Акцент: Neon Green (`#36F4A4`)
+- Текст body: White (`#FFFFFF`)
+- Приглушений текст: Muted (`#A1A1AA`)
+- Темне обрамлення: Dark Card Border (`#1E2C31`)
+
+### Приклади запитів компонентів
+
+- "Створіть секцію hero на фоні справжнього чорного (#000000) із заголовком 96px/330 NeueHaasGrotesk білого кольору, підзаголовком 20px/500 в #A1A1AA та двома кнопками-пігулками: білою заповненою (радіус 9999px) та ghost з білим обрамленням 2px"
+- "Спроектуйте картку функцій на Deep Teal (#02090A) з обрамленням 1px #1E2C31, радіусом 12px, багатошаровою тінню (кільце 1px + розмиття 2px/4px/8px при 10% чорного), що містить білий заголовок 32px/360 та основний текст 18px/400 #A1A1AA"
+- "Побудуйте секцію статистики на Dark Forest (#061A1C) з білими числами 96px/750 (NeueHaasGrotesk), описовими мітками 16px/400 #A1A1AA та щедрими відступами 64px між блоками статистики"
+- "Створіть sticky nav із прозорим фоном (стає #102620 при прокрутці), білим логотипом Shopify ліворуч, білими навігаційними посиланнями 18px/500 з letter-spacing 0.72px та білою кнопкою-пігулкою 'Почати безкоштовно' праворуч"
+- "Спроектуйте тег/значок із фоном матового скла rgba(255,255,255,0.2), радіусом 4px, відступом 12px 16px, білим текстом 16px — що ширяє над темною поверхнею картки"
+
+### Посібник з ітерацій
+
+При вдосконаленні наявних екранів, створених за допомогою цієї системи дизайну:
+1. Зосередьтеся на ОДНОМУ компоненті за раз
+2. Посилайтеся на конкретні назви кольорів та шістнадцяткові коди з цього документа
+3. Пам'ятайте: це DARK-FIRST дизайн — світлі поверхні є винятком, а не правилом
+4. Дисплейний текст завжди повинен відчуватися легким як пір'їнка (насиченість 330-400) — якщо він виглядає важким, зменшіть насиченість
+5. Неоновий зелений (#36F4A4) є цінним — використовуйте ощадно лише для фокусу та акценту
+6. Ієрархія темних поверхонь (чорний → deep teal → dark forest → forest) створює тонку глибину
+7. Тіні є багатошаровими — одне значення `box-shadow` не передасть відчуття карток Shopify
+8. Функція OpenType `ss03` має бути активована для всього тексту для типографічної узгодженості