Раніше створення повноцінного, адаптивного та інтерактивного макету інтерфейсу вимагало тижнів кропіткої праці дизайнера та фронтенд-розробника. Сьогодні, завдяки генеративним системам проектування інтерфейсів, відбувається перехід на рівень генеративного UI/UX-оркестування.

Лабораторна робота №7 — це екватор і водночас критично важливий етап в навчальному робочому процесі. Тут студенти переходять від абстрактних аналітичних даних, контент-карт (з ЛР №2) та статичних Figma-прототипів (з ЛР №4) до автоматизованого збирання робочого, інтерактивного фронтенд-коду цілісної сторінки за допомогою ШІ.

• VS Code. Локальний редактор коду з обов’язковим розширенням Tailwind CSS IntelliSense, що підсвічує класи та пропонує варіанти.
• Claude (Anthropic). Сімейство мовних моделей штучного інтелекту від компанії Anthropic, призначене для аналізу інформації, написання текстів, програмування та розв'язання складних задач. Claude вирізняється великим контекстним вікном, високою якістю роботи з кодом і документами та підтримкою природного діалогу.
• Google Gemini. Потужний креативний та технічний рушій. Маючи доступ до величезного вікна контексту (до 2 мільйонів токенів в сучасних моделях Gemini), цей ШІ здатний обробляти згенеровані структури, перетворюючи їх на фінальні інтерфейсні тексти та програмні теги.

Лендинг (Landing Page) та його сутність

Лендинг (цільова або посадкова сторінка) — це односторінковий вебсайт, який створюють з метою спонукати відвідувача до виконання однієї конкретної цільової дії.

На відміну від корпоративних сайтів чи інтернет-магазинів, де користувач може хаотично блукати десятками посилань, лендинг будується за принципом «лінійного тунелю». Тут немає зайвої навігації, яка б відволікала увагу. Користувач рухається зверху вниз, послідовно знайомлячись з продуктом, послугою або ідеєю, та просувається до фінального рішення.

Головна метрика успіху лендингу — це конверсія (Conversion), тобто відсоток відвідувачів сайту, які виконали цільову дію: заповнили форму, підписалися на розсилку, завантажили утиліту тощо.

Сьогодні, завдяки методу ітераційного промптингу, можна керувати збіркою складного мультимедійного лендингу на рівні розробника інтерфейсу, де ШІ виконує роль миттєвого виконавця, а хмарні платформи роблять реліз доступним для всього світу за секунди.

Ітераційний промптинг

Ітераційний промптинг (Iterative Prompting) — це методологія послідовної, покрокової взаємодії зі штучним інтелектом для отримання ідеального результату. Замість того, щоб намагатися написати один гігантський «ідеальний» запит, розробник проводить з ШІ діалог: щадає базову задачу, аналізує результат, а потім серією уточнювальних промптів коригує, шліфує та оптимізує код.

В контексті цієї лабораторної роботи (де крок за кроком «div-мішанина» перетворюється на семантичний CSS-Grid макет), ітераційний промптинг є головним робочим інструментом інженера.

Нейромережі мають обмежене вікно уваги (контекстне вікно) та схильні «втрачати» або ігнорувати деталі, якщо в одному запиті змішати занадто багато вимог (наприклад: «Згенеруй сайт, зроби його семантичним, додай віджети, пропиши змінні, адаптуй під мобільні...»).

Ітераційний підхід поділяє велике завдання на мікро-етапи, допомагаючи контролювати якість коду на кожному кроці.

Ембеддинг (Embedding)

Ембеддинг — це технологія інтеграції стороннього контенту, інтерактивних віджетів або мультимедійних модулів безпосередньо в структуру HTML-сторінки. Замість розробки складного функціоналу з нуля (наприклад, карт, систем коментування чи відеоплеєрів), можна використовувати готові рішення від сторонніх сервісів.

HTML
<section id="contacts-map" class="map-section">
	<h2>Наше розташування</h2>
	<div class="map-container">
		<iframe 
			src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2573.072235948753!2d24.029717!3d49.839683!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDnCsDUwJzIyLjkiTiAyNMKwMDEnNDcuMCJF!5e0!3m2!1suk!2sua!4v1710000000000!5m2!1suk!2sua" 
			title="Інтерактивна карта проїзду до сервісного центру" 
			allowfullscreen="" 
			loading="lazy" 
			referrerpolicy="no-referrer-when-downgrade">
		</iframe>
	</div>
</section>

CSS
:root {
  --map-border-radius: 12px;
  --map-height: 450px;
  --accent-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
/* Контейнер карти інтегруємо в загальну сітку сайту */
.map-section {
  padding: var(--main-padding);
}
/* Робимо карту гнучкою та адаптивною */
.map-container {
  position: relative;
  width: 100%;
  height: var(--map-height);
  overflow: hidden;
  border-radius: var(--map-border-radius);
  box-shadow: var(--accent-shadow);
}
.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0; /* Видаляємо дефолтну рамку iframe */
}

Промпт для AI: 
"Дій як Senior Frontend Developer. Мені потрібно інтегрувати <iframe> з інтерактивною картою Google Maps у секцію контактів мого index.html. 
Проведи рефакторинг коду: обгорни карту в правильний семантичний тег, додай атрибути доступності (Accessibility) та лінивого завантаження. 
В файлі style.css зроби цей iframe повністю адаптивним під мобільні екрани, використовуючи CSS-змінні з :root для відступів, радіусу закруглення кутів та тіней. Код має відповідати принципу DRY."

HTML
<section id="promo-video" class="video-section">
	<h2>Відеопрезентація нашого сервісу</h2>
	<div class="video-responsive">
		<iframe 
			src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
			title="Презентаційне відео про ремонт техніки в нашому сервісному центрі" 
			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
			allowfullscreen
			loading="lazy">
		</iframe>
	</div>
</section>

CSS
:root {
  --video-max-width: 800px;
  --video-radius: 16px;
  --video-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.video-section {
  padding: var(--main-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.video-responsive {
  width: 100%;
  max-width: var(--video-max-width);
  /* Автоматично тримає пропорцію екрана 16:9 на будь-яких мобільних пристроях */
  aspect-ratio: 16 / 9; 
  overflow: hidden;
  border-radius: var(--video-radius);
  box-shadow: var(--video-shadow);
}
.video-responsive iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

HTML
<section class="hero-section">
	<video autoplay loop muted playsinline class="hero-bg-video">
		<source src="assets/videos/hero-background.mp4" type="video/mp4">
		<source src="assets/videos/hero-background.webm" type="video/webm">
		Ваш браузер не підтримує тег відео.
	</video>

	<div class="hero-content">
		<h1>Професійний ремонт вашої техніки</h1>
		<p>Якість, що перевірена часом та штучним інтелектом.</p>
	</div>
</section>

HTML
<aside class="informer-sidebar">
	<section class="widget-card weather-widget">
		<h3>Погода у місті</h3>
		<div id="weather-informer-container">
			Завантаження погоди...
		</div>
	</section>

	<script src="https://weather-service.com/api/widget.js" async defer></script>
</aside>

CSS
:root {
  --widget-bg: #ffffff;
  --widget-text: #2c3e50;
  --widget-border: 1px solid #e2e8f0;
  --widget-radius: 12px;
}
/* Організовуємо розташування віджетів за допомогою Flexbox або Grid */
.informer-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Захищає віджети від налізання один на одного */
  padding: var(--main-padding);
}
.widget-card {
  background-color: var(--widget-bg);
  color: var(--widget-text);
  border: var(--widget-border);
  border-radius: var(--widget-radius);
  padding: 15px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
.widget-card:hover {
  transform: translateY(-2px); /* Легкий інтерактивний ефект */
}

Промпт для ШІ. 
"Дій як Senior Frontend Developer. Мені потрібно інтегрувати динамічний інформер курсу валют та погоди у файл index.html. Розмісти їх всередині семантичного тегу <aside> (для сайдбару). 
Підготуй чисту HTML-структуру з контейнерами та підключи зовнішній скрипт асинхронно за допомогою async. 
В файлі style.css стилізуй ці віджети як картки, використовуючи Flexbox для їх вертикального вирівнювання та властивість gap. Всі кольори фону, тексту та закруглення кутів карток зв'яжи з CSS-змінними в :root, щоб дизайн відповідав загальному стилю сайту. 
Код має бути лаконічним і без дублювання."

Метод точкового рефакторингу (Pick element)

Метод точкового рефакторингу — це інженерна практика в ШІ-розробці, коли замість аналізу всього файлу чи великого фрагменту коду, розробник ізольовано виділяє один конкретний тег, блок або правило CSS та фокусує на ньому увагу ШІ-асистента.

В лабораторній роботі цей метод є критично важливим на етапах тестування та валідації, коли автоматична генерація коду всієї сторінки може призвести до помилок, а фокусоване виправлення конкретного елемента надає ідеальний результат.

HTML
<div class="user-review">
	<div class="user-name">Олексій</div>
	<div class="review-text">Чудовий сервіс!</div>
</div>

«Застосуй метод Pick element: перетвори цей блок на семантичний вузол article. Імена авторів та відгуки мають бути оформлені за стандартами W3C для семантики відгуків.»

HTML
<article class="user-review">
	<header><strong class="user-name">Олексій</strong></header>
	<p class="review-text">Чудовий сервіс!</p>
</article>

CSS
.cta-button {
  background-color: #3b82f6;
  padding: 10px 20px;
  border: none;
}

«Оптимізуй цей елемент: заміни колір фону на CSS-змінну --primary-color, а паддінги — на --main-padding. Додай плавний перехід transition для hover-ефекту.»

CSS
.cta-button {
  background-color: var(--primary-color);
  padding: var(--main-padding);
  border: none;
  transition: background-color 0.3s ease;
}

Покроковий хід виконання роботи

Лабораторна робота виконується на основі вебпроєкту, який студент послідовно розробляв в ЛР №4–6.

В попередніх роботах створено UX/UI-прототип, дизайн система, графічні активи, семантичний HTML-код, CSS-архітектура, Tailwind-компоненти, адаптивні Header, Card, Button, Footer.

В ЛР №7 ці окремі елементи потрібно об'єднати в єдину цілісну вебсторінку — лендинг. Саме таку послідовність закладено в поточній роботі: від напрацювань ЛР №5–6 до глобальної структури лендингу та його ітераційного доопрацювання.

Етап 1. Аналіз та збір матеріалів

Студент не генерує новий дизайн, а використовує макети, код та графічні активи з попередніх лабораторних робіт.

1. Відкрити матеріали попередніх робіт і підготувати раніше створені компоненти.
   • ЛР №2. Назва проєкту, цільова аудиторія, ключові повідомлення, SEO-ключові слова, тексти.
   • ЛР №3. Логотип, іконки, банер, зображення, відео.
   • ЛР №4. Каркас, UI-прототип, дизайн система, кольори, типографіка.
   • ЛР №5. Структура сторінки, семантичний HTML-код.
   • ЛР №6. Tailwind-компоненти, адаптивність.

Етап 2. Проєктування структури Landing Page

1. Визначити логіку сторінки. Для кожного проєкту структура буде дещо різною, але типовий лендинг може мати:

Шапка
├── Головний екран (Hero-секція)
├── Переваги / Особливості
├── Послуги / Продукти
├── Про нас / Як це працює
├── Соціальні докази / Відгуки
├── Заклик до дії (CTA)
└── Підвал (футер)

2. За потреби: Медіа-активи, Розташування, Часті запитання. Студент формує секції, які потрібні для його конкретного проєкту.
3. Побудувати карту секцій

Секція	Мета	Основний CTA
Шапка (Header)	Навігація	Приєднатися
Головний екран (Hero-секція)	Представити продукт	Дізнатися більше
Переваги (Benefits)	Показати переваги
Послуги (Services)	Представити послуги	Обрати
Про нас (Testimonials)	Підвищити довіру
Заклик до дії (CTA)	Спонукати до дії	Зареєструватися
Підвал (Footer)	Навігація та контакти

4. Такий підхід допомагає студенту спочатку спроєктувати інформаційну логіку, а вже потім з ШІ писати код.

Етап 3. Формування глобального системного промпту

Студенти складають детальний інженерний промпт (Master Prompt) за структурою: Роль -> Тематика -> Структура -> Стилістика -> Обмеження.

Головною помилкою студентів на цьому етапі є використання абстрактних запитів «Зроби сучасний сайт для бізнесу». Штучний інтелект в такому разі генерує випадковий макет, який не відповідає бізнес-логіці та архітектурним вимогам.

Професійний підхід полягає у використанні структурованого інженерного промпту. Він працює за формулою контекстного проектування, де кожен елемент обмежує простір генерації ШІ та спрямовує його на створення чистого, валідного та семантичного коду.

Анатомія структури Master Prompt

1. Роль (Role). Задає для ШІ професійну ідентичність (наприклад, Senior UI/UX Engineer, Frontend Developer). Це змушує модель використовувати кращі практики програмування та шаблони UX.
2. Тематика (Context/Topic). Чіткий опис продукту, назви бренду/спільноти та ключової мети.
3. Структура (Structure/Wireframe). Посекційний опис майбутнього лендингу. ШІ повинен чітко розуміти, скільки блоків буде на сторінці та що містить кожен з них.
4. Засоби (Technology). Вказування в якому форматі має генеруватися код, семантичний HTML5, користувацькі стилі та використання фреймворку Tailwind CSS.
5. Вимоги до адаптивності (Responsive requirements). Збереження адаптивності для всіх типів екранів Mobile, Tablet, Desktop.
6. Доступність (Accessibility). Виконання вимог доступності для користувачів з вадами здоров’я. Обов’язкова семантика HTML-коду, достатній контраст, наявність атрибутів alt в зображеннях.
7. Стилістика (Design System). Технічні параметри дизайну (колірна палітра в HEX-кодах, радіуси закруглень, шрифтові пари, ефекти наведення hover).
8. Обмеження (Constraints/Technical requirements). Жорсткі рамки для коду (використання семантичних тегів HTML5, утиліт Tailwind CSS, адаптивність для мобільних пристроїв, відсутність стороннього JS або inline-стилів).

Головною помилкою студентів на цьому етапі є використання абстрактних запитів «Зроби сучасний сайт для бізнесу». Штучний інтелект в такому разі генерує випадковий макет, який не відповідає бізнес-логіці та архітектурним вимогам.

Професійний підхід полягає у використанні структурованого інженерного промпту. Він працює за формулою контекстного проектування, де кожен елемент обмежує простір генерації ШІ та спрямовує його на створення чистого, валідного та семантичного коду.

Приклади промптів

1. Шаблон промпту

Ти — Senior Frontend Developer та UI/UX Engineer. Працюй над моїм існуючим вебпроєктом.
## Проєкт
Назва: [назва]
Тематика: [тематика]
Цільова аудиторія: [аудиторія]
## Мета
Головна мета лендингу: [опис цільової дії]
## Структура
Створи сторінку з такими секціями:
1. Header
2. Hero
3. Benefits
4. Services
5. Testimonials
6. CTA
7. Footer
## Design System
Primary: #...
Secondary: #...
Background: #...
Text: #...
Border radius: ...
Font: ...
Використовуй дизайн систему з ЛР №4.
## Технології
- HTML5
- Tailwind CSS
- семантичні HTML-елементи
- адаптивний дизайн за принципом mobile-first
## Адаптивність
Mobile: 1 колонка.
Tablet: 2 колонки.
Desktop: 3 колонки, де це доречно.
Використовуй sm:, md:, lg:, xl:.
## Доступність
- один h1;
- логічна ієрархія h2/h3;
- alt для зображень;
- доступні кнопки та посилання;
- видимий стан фокусу.
## Обмеження
- не використовуй Bootstrap;
- не створюй нову дизайн-систему;
- не змінюй кольори без необхідності;
- не використовуй Lorem Ipsum;
- не додавай непотрібні бібліотеки;
- не створюй JavaScript, якщо він не потрібен для описаної функціональності.
Використовуй існуючі компоненти Header, Button, Card та Footer з ЛР №6.
Спочатку проаналізуй існуючу структуру. Не переписуй весь проєкт без необхідності.

2. Інженерний промпт англійською, оскільки сучасні ШІ так генерують архітектурно чистіший код.

Act as a Senior UI/UX Engineer and Expert Frontend Developer. Generate a modern, highly converting Single-Page Landing Page for a student tech community called "Автоматизація веб-розробки" (Web Dev Automation Club). 
[Design System & Aesthetics]
- Theme: Clean, modern dark tech theme (Slate/Zinc palette).
- Primary Color: Deep Electric Indigo (#4F46E5), Secondary Color: Cyber Teal (#06B6D4).
- Layout: Sharp grid layout with soft borders (rounded-2xl) and premium padding.
- Typography: Modern sans-serif, strict font-size scale.
- Interactions: Smooth transitions on all hover states and interactive elements.
[Strict Technical Requirements]
- Use 100% pure Tailwind CSS utility classes. No custom CSS blocks, no inline style tags.
- Code must be fully responsive (Mobile-first approach using Tailwind sm:, md:, lg: breakpoints). No horizontal scrolling allowed.
- Semantic HTML5 markup only: Use <header>, <main>, <section>, <footer>, <h1>-<h3> tags properly.
- Use Lucide React icons for all visual elements. Do not use generic image placeholders where icons fit better.
[Page Structure & Content Blocks]
1. Header: Fixed or sticky blur background, club logo ("Автоматизація вебу"), 4 navigation anchors (Переваги, Стек, Проекти, Відгуки), and a highlighted CTA button "Приєднатися".
2. Hero Section: Left column: High-impact typography. Title (H1): Use a temporary bold statement about AI and Web Dev. Subtitle: Explaining that we automate layout, CI/CD, and scripts. Right column: A futuristic visual element mimicking a code-editor window with syntax highlighting.
3. Features Section: 2x2 grid displaying 4 key features: "ШІ-Workflow", "CI/CD Автоматизація", "Генеративний UI", "Оптимізація коду". Each card must have a specific Lucide icon, a bold H3 title, and a 2-sentence description.
4. Social Proof / Metrics: A minimal block showing club statistics: "40+ Резидентів", "15+ ШІ-скриптів", "100% Практика".
5. Lead Capture (CTA Form): A container with a prominent heading, a single clean input field for Email, and an Indigo "Підписатися" button to access open-source tools.
6. Footer: Copyright notice for 2026, tech stack badges, and mockup social media icons.
Output ONLY clean, production-ready HTML code or React component with standard Tailwind script. No conversational text.

3. Альтернативний варіант промпту українською мовою

Дій як Senior UI/UX спеціаліст та досвідчений Frontend розробник. Створи код сучасного, конверсійного односторінкового сайту (Landing Page) для студентського IT-гуртка "Автоматизація веб-розробки".
Технічні вимоги та стилістика:
1. Стиль: Темна тема (Dark tech theme). Основні кольори: глибокий індиго (#4F46E5) та кібер-бірюзовий (#06B6D4). Фон сайту: slate-950, картки: slate-900.
2. Фреймворк: Тільки класи Tailwind CSS для стилізації. Жодного інлайнового CSS стилю в тегах style="".
3. Адаптивність: На 100% адаптивний дизайн (Mobile-first). Сітки повинні автоматично перебудовуватися з 1 колонки на мобільному (grid-cols-1) до 3-4 на десктопі (md:grid-cols-3).
4. Семантика: Обов'язкове використання тегів <header>, <main>, <section>, <footer>. Один заголовок <h1> на сторінці.
Посекційна структура сайту:
- Шапка (Header): Логотип гуртка, навігація (Якірні посилання: Переваги, Стек, Проекти, Контакти) та контрастна кнопка "Приєднатися".
- Головний екран (Hero Section): Велика типографіка з Унікальною Торговою Пропозицією, короткий підзаголовок про роботу з ШІ та автоматизацію, дві кнопки дії та інтерактивний блок-заглушка праворуч (імітація редактора коду VS Code із різнокольоровим підсвічуванням тегів).
- Блок переваг (Features): Сітка карток. Кожна картка має містити тематичну іконку (використовуй бібліотеку Lucide), чіткий заголовок та опис на 2 речення для таких напрямків: ШІ-Workflow, CI/CD процеси, Генеративний UI, Рефакторинг коду.
- Блок довіри (Social Proof): Мінімалістична плашка з цифрами успіху гуртка (Кількість студентів, Створені репозиторії, Автоматизовані проекти).
- Форма захоплення (CTA Block): Секція з інпутом для Email та кнопкою "Отримати доступ до скриптів".
- Підвал (Footer): Копірайт 2026, посилання на соцмережі гуртка (GitHub, Telegram).
Поверни виключно готовий до запуску чистий код в один HTML файл, підключивши Tailwind CSS через офіційний CDN скрипт у <head>. Без зайвих розмов та коментарів навколо коду.

4. Під час перевірки цього етапу звернути увагу на те, що якість вихідного коду безпосередньо залежить від деталізації блоку [Design System] та [Strict Technical Requirements].
5. Якщо студент забуде вказати обмеження Use 100% pure Tailwind CSS utility classes, ШІ спробує написати звичайний довгий CSS-файл в тезі <style>, що повністю порушить концепцію компонентної Tailwind-верстки, яку пояснено в попередній Лабораторній роботі №6.

Етап 4. Створення першої версії лендингу

1. Запустити генерацію. ШІ повинен сформувати нульову версію сторінки.
2. Після генерації проаналізувати результат і перевірити:
   • Структура. Чи присутні всі секції? Чи збережено логічний порядок секцій? Чи немає зайвих блоків?
   • Візуальна ієрархія. Чи є зрозумілим H1? Чи помітно заклик до дії (CTA)? Чи є візуальне розмежування різних секці?
   • Код. Чи використано семантичний HTML? Чи добре застосовано стилі Tailwind? Чи немає зайвих користувацьких стилів CSS? Чи є дублювання стилів?
   • Адаптивність. Чи виникає горизонтальний скрол сторінки? Чи правильно перебудовується структура сторінки за різної ширини екрану?
3. На підставі перевірки сформулювати промпт для виправлення конкретних проблем. Наприклад

Виправ в згенерованому коді наступні проблеми.
Hero-секція:
- заголовок занадто великий;
- CTA недостатньо контрастний;
- зображення займає занадто багато місця.
Переваги:
- картки занадто щільні;
- недостатньо відступів.
Мобільна версія:
- Header займає забагато вертикального простору;
- кнопки виходять за межі контейнера.

Етап 5. Ітераційний промптинг

На цьому етапі відбувається корекція цілої сторінки через послідовність ітерацій.

Промпт → Генерація → Аналіз → Корекція → Повторний промпт.

1. Ітерація №1. Корекція структури сторінки

Проаналізуй поточний лендинг. Не змінюй кольори та типографіку. Зосередься лише на інформаційній архітектурі.
Перевір:
- порядок секцій;
- логіку переходу між ними;
- дублювання контенту;
- розміщення CTA.
Запропонуй зміни, але спочатку не переписуй код.

2. Ітерація №2. Крекція Hero-секції

Працюй тільки з Hero Section. Збережи існуючу дизайн систему. Зміни структуру секції так, щоб:
- H1 був головним візуальним елементом;
- підзаголовок пояснював цінність продукту;
- Кнопка CTA була помітною;
- зображення/візуал не конкурував з заголовком;
- на мобільній версії блоки розташовувалися вертикально;
- на десктоп версії використовувалася двоколонкова структура.
Не змінюй інші секції.

3. Ітерація №3. Уставляння реального контенту. Це особливо важливо, оскільки в ЛР №2 вже були підготовлено контент і SEO-матеріали.

Заміни всі Lorem Ipsum та тестові тексти в поточній сторінці.
Використовуй тільки наданий контент:
Назва: [...]
Hero-секція: [...]
Переваги: [...]
Послуги: [...]
Про нас: [...]
Заклик до дії: [...]
Не вигадуй статистику, відгуки або характеристики, яких немає у вихідних матеріалах. Збережи існуючу HTML-структуру та Tailwind-класи.

4. Ітерація №4. Корекція дизайну. Узгодити сторінку з дизайн системою

Проведи аудит лендингу відповідно до визначеної дизайн системи з Лабораторної роботи №4.
Перевір:
- кольори;
- типографіку;
- spacing;
- border-radius;
- стилі кнопок;
- стилі карток;
- тіні;
- hover стани.
Не створюй нову дизайн-систему. Використовуй існуючі значення. Спочатку сформуй список невідповідностей. Не змінюй код.

Після отримання аналізу:

Виправ лише ті невідповідності, які ти виявив у попередньому аудиті. Не змінюй структуру сторінки. Не змінюй контент. Не додавай нових компонентів.

5. Ітерація №5. Корекція адаптивності

Проведи аудит адаптивності лендингу. Перевір відображення сторінки для таких розмірів екрану: 320px, 375px, 768px, 992px, 1024px, 1280px, 1440px.
Знайди:
- появу горизонтального скролу на екрані;
- занадто широкі елементи;
- проблеми Grid;
- проблеми Flexbox;
- переповнення тексту;
- проблеми з заголовками;
- проблеми з кнопками CTA;
- проблеми зображень.
Не змінюй код.
Сформуй таблицю:
Секція | Проблема | Breakpoint | Рекомендоване рішення.

Етап 6. Точковий рефакторинг Pick Element

Техніка Pick Element є способом ізолювати конкретний фрагмент коду та не дозволяти ШІ випадково змінювати інші частини сторінки.

1. Вибрати один проблемний компонент, наприклад, кнопка, картка, Hero-секція, навігація.

Працюй тільки з цим компонентом. Не змінюй жоден інший елемент сторінки.
Завдання: зменшити вертикальні відступи на мобільній версії, але зберегти поточний дизайн на десктопі.
Використовуй адаптивні класи Tailwind.
Після зміни коротко поясни, які класи були змінені.

2. Проаналізувати вигляд кнопок CTA. Перевірити:
   • Чи зрозумілий текст на ній?
   • Чи помітна кнопка на сторінці?
   • Чи є достатнім контраст кольору кнопки та тексту?
   • Чи зрозуміло, куди буде перехід після натискання на кнопці?
   • Чи не конкурує певна кнопка з іншими CTA?

Проаналізуй CTA-елементи лендингу. Перевір:
1. зрозумілість тексту;
2. візуальну ієрархію;
3. контраст;
4. розмір;
5. розташування;
6. відповідність цільовій дії.
Не змінюй код. Надай конкретні рекомендації.

3. Мікровзаємодії без складного JavaScript

Додай до кнопок лендингу делікатні hover та focus ефекти.
Використовуй тільки Tailwind CSS.
Додай:
- transition;
- зміну кольору;
- легку зміну тіні;
- помітний focus стан.
Не використовуй JavaScript. Не змінюй розмір кнопки під час hover. Не створюй надмірні анімації.

Етап 7. Інтеграція мультимедіа

Лендинг має стати інтерактивним хабом. Виконати інтеграцію таких обов'язкових медіа-активів:

1. Вбудовування відео (YouTube/Vimeo).
   • Знайти або завантажити тематичне відео на YouTube. Натиснути Поділитися -> Вбудувати (Embed), скопіювати згенерований тег <iframe>. Вставити його в медіа-секцію лендингу. За допомогою ШІ або Tailwind-класів зробити контейнер адаптивним (aspect-video w-full rounded-xl shadow-lg).
   • Якщо додавати відео в проєкт за допомогою ШІ у VS Code, то задати подібний промпт для ШІ:

   "Дій як Senior Frontend Developer. Мені потрібно інтегрувати YouTube-відео в файл index.html всередину секції послуг. Зроби HTML-структуру семантичною, додай обов'язковий атрибут доступності title та ліниве завантаження loading="lazy". В файлі style.css реалізуй адаптивність цього плеєра, використовуючи сучасну властивість aspect-ratio: 16/9. Винеси максимальну ширину та закруглення кутів відео в змінні в :root. Переконайся, що код чистий і не має дублювання."
   

2. Вбудовування інтерактивної карти (Google Maps).
   • Відкрити Google Maps, знайти адресу умовного бізнесу. Натиснути Поділитися -> Вбудовування карти, обрати розмір і скопіювати HTML-код. Інтегрувати його в блок контактів лендингу.
   • Якщо потрібно доручити інтеграцію або оптимізацію карти штучному інтелекту, можна використати такий точний запит:

   "Дій як Senior Frontend Developer. Мені потрібно інтегрувати <iframe> з інтерактивною картою Google Maps в секцію контактів index.html. Проведи рефакторинг коду: обгорни карту в правильний семантичний тег, додай атрибути доступності (Accessibility) та лінивого завантаження. В файлі style.css зроби цей iframe повністю адаптивним під мобільні екрани, використовуючи CSS-змінні з :root для відступів, радіусу закруглення кутів та тіней. Код має відповідати принципу DRY."
   

   * Принцип DRY (Don't Repeat Yourself, "не повторюйся") означає, що кожен фрагмент логіки або даних в програмі повинен мати лише одне унікальне місце і одне авторитетне представлення в коді.

3. Перевірити локально через Live Server, чи інтегровані відео та карта завантажуються коректно і не створюють зсувів макета.

Етап 8. Фінальний аудит

1. Перевірити семантику HTML

Проведи аудит семантичності HTML-елементів в лендингу. Перевір, щоб було використано теги:
- header;
- nav;
- main;
- section;
- article;
- footer;
Також перевір правильне застосування
- ієрархії заголовків;
- підписи до посилань, кнопок та зображень;
- пропорції відображення iframe.
Перевір, чи є тільки один h1. Не змінюй код. Сформуй список проблем.

2. Здійснити Tailwind-аудит

Проведи аудит Tailwind CSS в моєму лендингу. Знайди:
- дубльовані класи;
- суперечливі utility-класи;
- зайві класи;
- неправильні префікси адаптивності;
- використання arbitrary values без необхідності;
- відсутність hover/focus станів;
- проблеми mobile-first.
Не змінюй код. Сформуй список проблем з поясненнями.

3. Провести аудит доступності

Проведи аудит доступності лендингу. Перевір:
- ієрархію заголовків;
- наявність атрибуту alt в зображеннях;
- наявність labels у кнопок;
- назви title у посиланнях;
- стани фокусування;
- клавіатурна навігація;
- контраст кольорів;
- заголовок iframe;
Орієнтуйся на WCAG 2.2 AA. Не переписуй код. Сформуй список проблем та рекомендацій.

Етап 9. Перевірка через Chrome DevTools

1. Відкрити Інструменти розробника (DevTools) в браузері Chrome (F12) та перевірити на вкладках:
   • Elements. Структуру HTML, Tailwind-класи; обчислені стилі.
   • Device Toolbar. Вигляд сторінки на ширині екрану 320 px, 375 px, 768 px, 992px, 1024 px, 1280 px, 1440 px.
   • Console Не повинно бути помилок JavaScript.
   • Network. Статус, розмір та час завантаження зображень, шрифтів, зовнішніх ресурсів.
2. Запустити Lighthouse. Перевірити метрики Performance, Accessibility, Best Practices, SEO.

Проаналізуй результати Lighthouse мого лендингу.
Performance: ...
Accessibility: ...
Best Practices: ...
SEO: ...
Визнач:
1. критичні проблеми;
2. проблеми середньої важливості;
3. незначні проблеми.
Для кожної проблеми запропонуй конкретне технічне виправлення. Не змінюй код автоматично.

3. Перед публікацією студент повинен перевірити:
   • Структура. Чи всі секції лендингу присутні.
   • Код. Семантичні HTML-елементи, лише один <h1> на сторінці, немає фрагментів з шаблонним текстом "Lorem Ipsum".
   • Tailwind. Немає зайвого CSS, немає дубльованих класів.
   • Адаптивність. Сторінка має різну структуру для перегляду на телефоні, планшеті, ноутбуці, комп’ютері. За любої ширини екрану не з’являється горизонтальний скрол.
   • Доступність. Наявність alt в зображеннях, focus стан для кнопок, контрастність кольорів, title у посиланнях.
   • Медіа активи. Відео та карти правильно відображаються в зазначених пропорціях на екранах різної ширини.

Етап 10. Фінальна публікація та оновлення на Netlify

1. Відкрити свій акаунт на Netlify.
2. Оскільки там вже була публікація сайту з ЛР №6, виконати ітераційне оновлення:
   • Перейти на сторінку сайту в Netlify App.
   • Відкрити вкладку Deploys.
   • Знайти зону для завантаження оновлень оновленої папки (Drag and drop) та перетягнути туди актуальний каталог проєкту.
3. Перевірити фінальний результат за постійним посиланням. Переконатися, що медіаконтент працює без збоїв.

Навчальний кейс. Гурток "Автоматизація веб-розробки"

Щоб продемонструвати логіку роботи, нижче наведено приклад умовного студентського гуртка "Автоматизація веб-розробки". Студенти цього гуртка автоматизують процеси розробки та хочуть створити лендинг для залучення нових резидентів і презентації своїх ШІ-скриптів.

Потрібно застерегти студентів, що коли ШІ видає готову сторінку за 20 секунд, може виникнути ейфорія: "Я супер-майстер веб-розробки!". Це не так, ШІ згенерував код на основі середньостатистичних шаблонів з інтернету.

Цінність інженерів 2026 року — це UX-емпатія та критичний контроль деталей. Вміння використати інструмент Pick Element, помітити мікро-помилку в ієрархії заголовків чи відступах Tailwind, і змусити модель виправити баги, власне тут й починається справжня інженерна майстерність. ШІ — це ультрашвидкий конвеєр, але напрямок руху та фінальний стандарт якості задаєте виключно розробник.

Зміст звіту та технічні фінальні артефакти

В результаті виконання роботи студент формує та завантажує на диск (у власну папку) звіт в форматі PDF.

1. Титульний лист з назвою лабораторної роботи, даними студента та обраною бізнес-тематикою.
2. Мета роботи. Опис проєкту: тематика, цільова аудиторія, цільова дія.
3. Посилання на опублікований та повністю укомплектований лендинг на Netlify.
4. Структура лендингу: Шапка, Головний блок (Hero-секція), Переваги, Послуги, Про нас, Заклик до дії (CTA), Підвал.
5. Текст Master Prompt (англійською або українською мовою), який використовувався для первинної генерації сайту.
6. Скріншоти результатів, фінальний вигляд лендингу в десктопній та мобільній версіях.
7. Скріншоти працездатності вбудованої карти, відео (як на десктопній, так і на мобільній версії).
8. Скріншоти прикладів точкового редагування Pick Element.
9. Результати перевірки Chrome DevTools/Lighthouse.
10. Лістинг фінального коду index.html (блоки медіаінтеграцій мають бути чітко прокоментовані).
11. Промпт-паспорт (Prompt Log). Історія промптів, які використовувалися для ітераційної збірки сторінки, заміни контенту та адаптації сторонніх фреймів.

Критерії оцінювання лабораторної роботи

• Цілісність та архітектура лендингу. Наявність всіх логічних блоків структури, відсутність «сирих» або недороблених секцій. Відповідність згенерованого контенту SEO-стратегії з ЛР №2.
• Якість інтеграції мультимедіа та iframe-сервісів. Коректне вбудовування карти та відео. Обов'язкова умова — повна адаптивність вікон <iframe> (вони не повинні поширюватися за межі мобільного екрану).
• Інтерактивні інформери/віджети. Успішне підключення хоча б одного стороннього динамічного віджета (CodePen, соцмережі, валюта/погода тощо).
• Ітераційний промпт-інжиніринг. Оцінюється здатність керувати кодом покроково. Звіт має демонструвати еволюцію сторінки від скелета до фінального медіа-хабу.
• Публікація та реліз на Netlify. Доступність сайту за посиланням, відсутність невірних шляхів до локальних ресурсів (картинок, стилів).

Контрольні запитання

1. В чому полягає суть методу «Ітераційного промптингу», який використовується в цій роботі, і яка його головна інженерна перевага?
2. Пояснити суть методу точкового рефакторингу «Pick element». В яких ситуаціях його найдоцільніше використовувати?
3. Що таке «ембединг» і який HTML-тег є основним інструментом для реалізації цієї технології на сторінці?
4. Чому скопійований «з коробки» код <iframe> від YouTube чи Google Maps може зламати адаптивну верстку сайту, і як розробник має це виправити згідно з промптами до роботи?
5. З якою метою в промптах для ШІ до карт та відео додається вимога прописати атрибути title та loading="lazy"?
6. Яку логічну структуру та послідовність блоків повинен мати повноцінний лендинг?
7. В який семантичний тег згідно з системними промптами інструкції рекомендується загортати динамічні інформери (погоди/валют) сайдбару і чому?
8. Якщо інформер погоди підключається не через <iframe>, а через зовнішній JavaScript-код, які атрибути тегу <script> варто використати і навіщо?
9. Як в стилістиці вашої сторінки поєднуються Tailwind CSS та нативні CSS-змінні в :root?
10. Як за допомогою Tailwind CSS налаштувати кнопки для підвищення конверсії сторінки?
11. Опишіть алгоритм ітераційного оновлення сайту на платформі Netlify, якщо перша версія проєкту вже була опублікована раніше.
12. Що саме розробник має перевірити локально через «Live Server» перед тим, як завантажувати оновлення сайту на Netlify?

Глосарій термінів. Проєктування та реалізація повноцінного лендингу

Рекомендовано для вивчення перед захистом Лабораторної роботи №7