Technical Context
Я подивився на ваш кейс як на прототип «системного промпта», який перетворює модель на міні-команду: стратег/копірайтер → дизайнер → фронтендер. У запиті зафіксовано вимоги до ринку (HVAC у NYC), позиціонування, англомовного copy та фінального постачання у вигляді статичного проєкту (HTML + CSS + JS) з бібліотеками через CDN.
Технічно промпт задає високий рівень складності: «стильний дизайн», «класний лейаут», анімації та інтеракції, плюс вказівка на Framer Motion/GSAP, Google Fonts і Tailwind «тільки утиліти». Я відразу відзначаю конфлікт: Framer Motion — це React-орієнтований інструмент, а ви просите чисту статику без React. У таких постановках модель часто імітує Framer Motion або підміняє його vanilla-анімаціями, а реально працює GSAP.
Ключовий спостережуваний дефект ви вже спіймали: «захаращує нескінченними боксами в боксах». Це класичний симптом генерації «візуально схожого» замість «архітектурно правильного»: зайві div-обгортки, повторювані секції, відсутність семантики, роздута структура заради піксельної подібності.
Плюс є організаційна проблема у форматі постачання: «дай готовий проєкт у zip» — у чат-інтерфейсі це часто перетворюється на текстове простирадло. Я в таких випадках вбудовую в промпт файловий маніфест (дерево проєкту) і вимагаю виведення пофайлово з контрольними хешами або хоча б із чіткими маркерами початку/кінця файлу.
Business & Automation Impact
Для HVAC-компанії в Нью-Йорку цінність очевидна: скорочення time-to-market. Замість тижня на зв'язці «маркетолог → дизайнер → верстальник» можна за 1–2 дні отримати першу версію, прогнати A/B гіпотези оффера та швидко зібрати ліди.
Але якщо залишити генерацію без рамок, ви платите прихований податок: підтримка та швидкість. Роздутий DOM погіршує LCP/INP, ускладнює правки, ламає адаптив під час дрібних змін, а іноді б'є по індексації через слабку семантику та неправильну ієрархію заголовків.
У проєктах Nahornyi AI Lab я розглядаю таку ШІ автоматизацію як конвеєр із контролем якості, а не як «написав промпт — отримав прод». Я додаю автоматичні гейти: ліміт глибини DOM (наприклад, max depth 12), заборону на div-обгортки без ролі, перевірки Lighthouse, валідатор HTML, і окремий чек на доступність (aria-label, контраст, tab order).
Хто виграє? Команди продажу та маркетингу, яким потрібен швидкий лендінг під сезонні кампанії. Хто програє? Ті, хто намагається відразу в прод без інженерного шару: вартість володіння починає зростати вже на другій ітерації правок.
Strategic Vision & Deep Dive
Мій головний висновок: системний промпт повинен описувати не «красу», а контракт на структуру. Якщо контракт не заданий, модель оптимізує «враження», а не «інженерність», тому й з'являються «бокси в боксах». Я б переписав вимоги як набір вимірюваних правил: максимум 1 обгортка на секцію, семантичні теги (<header>, <main>, <section>, <footer>), BEM/utility-only без змішування, і суворе обмеження на повторювані компоненти.
Другий момент — бібліотечна дисципліна. Для статичного лендінгу я вибираю GSAP (або Web Animations API) і забороняю Framer Motion, якщо немає React-збірки. Це знижує «галюцинації залежностей» і дає прогнозовану підтримку.
Третє — двопрохідна генерація. У наших впровадженнях ШІ я розділяю «перший прохід» (копірайтинг + макет + базова верстка) і «другий прохід» (рефакторинг DOM, оптимізація performance, доступність). Модель може сама провести рефакторинг, але тільки якщо їй видати метрики та жорсткі обмеження, інакше вона знову додасть обгортки.
І нарешті, я б перестав просити «згенерируй графіку» без формату. Краще вимагати SVG-іконки в одному спрайті, 2–3 ілюстрації в чистому SVG або WebP із заданим розміром і ліцензованим стилем. Ви вже бачите користь: «svg-шки… нагенерувала» — це хороший сигнал, але його потрібно довести до стандарту бренду.
Цей розбір підготував Вадим Нагорний — провідний практик Nahornyi AI Lab з AI-архітектури, впровадження штучного інтелекту та ШІ автоматизації в реальних бізнес-процесах. Якщо ви хочете перетворити «генерацію лендінгів» на керований конвеєр (контракт на DOM, performance-гейти, повторюваний стиль, швидкі ітерації для маркетингу), напишіть мені — я запропоную архітектуру та зберу робочий пайплайн під ваш стек і команду.