Макс Ширко

Веб і графічний дизайнер

Бот для прототипів у Figma за 3 хвилини: анатомія Blank і відмова від рутини

Щоразу, коли дизайнер бере в роботу нове ТЗ, починається одна й та сама марудна історія: ти відкриваєш чисте полотно у Фігмі й руками перекладаєш текст по блоках. Копіювати заголовок, вставити, створити фрейм, налаштувати автолейаут, розкидати булети, підігнати відступи.

Це не дизайн. Це механічне перенесення символів, яке спалює творчу енергію ще до того, як ти встиг подумати про стиль. Щоб назавжди закрити цю проблему, я зібрав власного бота Blank. Розповідаю, як він влаштований усередині та чому я принципово не довіряю нейромережам фінальну картинку.

Протестувати збірку прототипів та запитати інвайт можна в боті Blank

Пастка «дизайну однією кнопкою»

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

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

Але нульовий крок — узяти неструктурований текст клієнта й розкласти його в логічні, акуратні, технічно чисті контейнери — це ідеальне завдання для машини.

Анатомія Blank: що відбувається під капотом

Бот називається Blank («Чистий аркуш»). Його завдання — позбавити дизайнера страху білого аркуша й за 3 хвилини перетворити сире ТЗ на готову структуру просто всередині Figma.

Як влаштований робочий процес:

1. На вході — сирий контент. Ти згодовуєш боту файл брифу, текстові нотатки зі зідзвону чи навіть невідформатовані тези від замовника.

2. Сенсовий парсинг. Нейромережеве ядро аналізує логіку продукту й розбиває контент на семантичні патерни: перший екран з офером, матриця переваг, картки тарифів, соціальний доказ, випадний FAQ та форма заявки.

3. Нативна генерація під Figma. Бот віддає не картинку й не сторонній HTML. Він генерує нативний JSON-маніфест, оптимізований під внутрішній рушій Figma. Ти просто натискаєш кнопку — і у твоєму файлі з’являються готові компоненти.

4. Ідеальні автолейаути. Усі фрейми одразу зібрані на Auto Layout: відступи кратні 8px, коректно налаштовані параметри стиснення (Hug/Fill), шрифтові стилі та вкладеність шарів. Жодної каші з безіменних груп Frame 492.

Жодних «сірих квадратів»: проєктування на реальному тексті

Я принципово не працюю із сірими вайрфреймами та текстом lorem ipsum. Уся ця псевдопроєктувальна метушня відірвана від життя. Ти малюєш ідеальний прямокутник під три слова, а клієнт потім надсилає абзац на 400 знаків, і вся твоя сітка ламається.

У Blank прототип одразу збирається на реальному тексті. Ти відкриваєш макет і відразу бачиш: де текст задовгий, де заголовок спотикається, де бракує візуальної паузи. І замість двох годин марудного копіпасту ти вже за три хвилини займаєшся справжньою роботою — стилем, графікою та типографікою.

Чому бот закритий і працює за інвайтами

Багато хто запитував: «Максе, чому бот не лежить у відкритому доступі для всіх?». На це є дві жорсткі причини.

Перша — економіка. Кожна генерація задіює просунуті моделі й вимагає відчутних обчислювальних потужностей. Якщо відкрити сервіс навстіж, прийдуть тисячі випадкових роззяв, які вбиватимуть «зроби сайт про мого кота» і зливатимуть тисячі доларів на токени намарно.

Друга — якість аудиторії. Щоб отримати доступ, потрібно докласти мінімального зусилля: знайти інвайт у колеги, у моєму Telegram-чаті або в публікаціях. Це одразу відсікає випадкових людей і залишає лише практикуючих дизайнерів. Під час входу кожен користувач отримує квоту на генерації та 3 особисті інвайти, якими може поділитися з перевіреними друзями.

У підсумку бот став не просто утилітою, а закритим клубом сильних фахівців, які економлять години рутини щодня. Автоматизуйте механіку, а мистецтво залишайте собі.