Figma в код з AI: я написав 237 промтів, щоб нейромережа перестала вгадувати дизайн

Звідки взялась ідея

Мої Figma-добірки дизайнери купували давно, і у відгуках раз у раз повторювалась одна думка: добірка потрібна не щоб скопіювати, а щоб мати від чого відштовхнутись. В одному з відгуків це сказано просто: «я беру за основу якийсь екран і допрацьовую, в результаті виходить щось нове».

А потім змінився сам спосіб, яким робляться сайти. Сьогодні макет усе частіше не перемальовують руками, а віддають нейромережі: «зроби мені такий самий блок». І тут виявилось, що нейромережа чудово пише код, але погано читає дизайн з картинки. Вона вгадує, а вгадує завжди по середньому.

Тож я вирішив дати нейромережі те, чого їй бракує: не картинку, а точну інструкцію. Так звичайна добірка секцій стала Sage AI-Kit.

Що таке Sage AI-Kit

Sage AI-Kit це файл Figma з 237 адаптивними секціями сайту, і до кожної секції написаний окремий AI-промт. Промт описує секцію для десктопа, планшета й мобайлу з точними шрифтами, кольорами та відступами. Тому нейромережа відтворює саме цей дизайн у коді, а не вигадує власний.

Чому лендінг з нейромережі виглядає як AI-slop

Попросіть нейромережу «зробити лендінг для кавʼярні», і ви майже напевно отримаєте той самий набір: перший екран із градієнтом, три картки переваг, заголовки по центру. Такий результат називають AI-slop. Він не зламаний, він просто нічий: сторінка схожа на сотні інших і нічим не запамʼятовується.

Це як замовити в кравця костюм словами «щось ділове». Пошиють, але по середньому лекалу. Промт із розмірами працює як мірки: сітка, кегль, відступи, поведінка на телефоні. Чим точніші мірки, тим менше нейромережі доводиться вигадувати.

Як влаштований промт для секції сайту

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

1. Перший рядок каже, що це за секція: «повноекранне темне фото із сіткою ціни та знижки». Нейромережа одразу розуміє жанр і не вигадує зайвого.
2. DESKTOP (1920×1000) дає мірки: дві колонки по 872 px, відступ між ними 48 px, заголовок Bold 128 px у три рядки, сітка 2×2 з тонкими лініями.
3. TABLET (834) і MOBILE (390) описують, що відбувається з тією самою секцією на вужчих екранах. Без цих блоків адаптив нейромережа вигадує сама, і саме тут найчастіше все розʼїжджається.
4. GLOBAL STYLE однаковий для всіх секцій добірки: шрифт Geist, кольори #EAF9FF і #5500FF, кнопки, хедер, брейкпоінти. Тому секції з різних категорій складаються в один сайт, а не в колаж.
5. OUTPUT пояснює, яким має бути код: семантичний HTML, React і Tailwind (або чистий HTML/CSS), ховери, повага до налаштування «зменшити рух». Це те, про що в живому проєкті потім питає розробник.

Тест: макет у Figma проти коду за промтом

Перш ніж продавати добірку, я перевірив промт на собі. Узяв Hero 06, віддав його промт нейромережі (у моєму випадку Claude) і попросив зверстати секцію на чистому HTML і CSS. Фото в макеті я потім замінив на своє, щоб перевірити, як секція переживе чужий контент.

На десктопі збіглося головне: дві колонки, заголовок «CRAFT DESIGN EASY» у три рядки, сітка ціни й знижки з тонкими лініями, біла кнопка й хедер.

А от тест на планшеті й телефоні показав слабкі місця самого промта. Макет мав деталі, яких опис не згадував: ширину абзацу на планшеті, лінії на картках ціни на телефоні, інше затемнення фото. Нейромережа зробила розумно, але по-своєму.

Найважливіше, що я виніс з цього тесту:

• Чого немає в промті, того немає в коді. У першій версії не було сказано, що перший екран має займати всю висоту вікна, і код цього не робив. Я дописав це правило в промт Hero 06.
• Нейромережа не знає, яке фото ви поставите. Коли я замінив темне фото на каньйон зі світлим небом, підписи ціни й знижки перестали читатись, довелось додати затемнення зверху. Після заміни зображень завжди перевіряйте контраст тексту.
• Адаптив треба дивитись очима на трьох ширинах: 1920, 834 і 390. Саме там живуть дрібні розбіжності, яких не видно на десктопі.

Як перенести дизайн з Figma в код за допомогою AI: 5 кроків

1. Оберіть секцію у файлі Figma. Їх 237 у 21 категорії: від першого екрана й меню до цін, FAQ і футера.
2. Скопіюйте промт, який лежить поруч із секцією. Нічого дописувати не треба, але свої тексти можна вписати одразу.
3. Вставте промт у свій AI-інструмент: Claude Code, Codex, Cursor, Lovable, v0, Bolt або Figma Make.
4. Перевірте результат на трьох ширинах (1920, 834 і 390 px) і порівняйте з макетом у Figma. Промт уже описує всі три, тож окремо просити адаптивну версію не треба.
5. Замініть фото й тексти на свої, перевірте контраст і переходьте до наступної секції. Глобальний стиль спільний, тому секції стикуються між собою.

Що всередині добірки

• 237 унікальних секцій і 237 AI-промтів, по одному на кожну секцію.
• 20 стилів і 21 категорія: перші екрани, повноекранне меню, про нас, кроки, блог, e-commerce, відгуки, послуги, портфоліо, цифри й статистика, форми й CTA, ціни, галерея, логотипи, команда, вакансії, FAQ, програма, списки подій, футери та хедери.
• Кожна секція адаптивна: десктоп, планшет і мобайл.
• Текстові стилі, змінні, компоненти й Auto Layout у Figma, тому секцію можна правити як звичайний макет, а не як картинку.
• Безкоштовні оновлення: нові секції й промти додаються в той самий файл.

Перевірити підхід можна до покупки. На сторінці добірки лежить повний промт секції Hero 17 з кнопкою «Скопіювати промт», а ще 5 промтів разом із секціями у Figma приходять на пошту.

Який AI-інструмент обрати для лендінгу

Промти написані для будь-якої сучасної нейромережі, що пише код. Різниця між інструментами не в якості дизайну, а в тому, де ви працюєте:

• Lovable, v0 і Bolt збирають сторінку прямо в браузері й одразу її показують. Найпростіший старт, якщо ви не програмуєте.
• Figma Make працює всередині Figma: зручно, якщо ви дизайнер і не хочете виходити з робочого інструмента.
• Cursor це редактор коду з AI. Підходить, якщо ви правите код самі й хочете бачити кожну зміну.
• Claude Code і Codex працюють у вашому проєкті й самі створюють файли. Мій вибір, коли сайт уже є в коді й секцію треба вбудувати в нього.

Кому підійде, а кому ні

• Дизайнерам, які хочуть самостійно довести ідею від макета до живого сайту, без черги до розробника.
• Розробникам, яким набридло верстати типові секції з нуля.
• Маркетологам і власникам бізнесу, які хочуть зібрати лендінг з AI за вечір і не соромитись його показати.

Чесно про межі: добірка не замінить продумування продукту. Якщо у вас складний сайт з логікою, інтеграціями, особистим кабінетом чи CMS, секції дадуть основу інтерфейсу, але структуру, тексти під вашу аудиторію й технічну частину все одно треба вибудувати. Для таких проєктів я працюю з клієнтами напряму, і їх можна обговорити тут.

Скільки коштує Sage AI-Kit

Станом на жовтень 2026 року добірка коштує 490 грн, оплата разова, без підписки. У ціну входять усі 237 секцій і промтів, безкоштовні оновлення назавжди та комерційна ліцензія на необмежену кількість клієнтських і власних проєктів.

Доступ приходить одразу після оплати карткою, Apple Pay чи Google Pay. Якщо добірка не підійде, гроші можна повернути протягом 14 днів.

Питання й відповіді