Denys Osadchyi

2026 Product Designer Design Engineer контракт AI Design Tooling

LayoutLab: зробив генератор макетів, який пришвидшив дизайн в 7 раз

Що бачить дизайнер у макеті генератора, те і іде в розробку: він рендерить реальні продакшн-компоненти

Records Marine законтрактувала мене спроєктувати і збудувати інструмент end-to-end, самостійно.

На мені було продуктове мислення, система, архітектура і код. LayoutLab закриває найстарішу дірку продуктового дизайну, ту, що між макетом і кодом у продакшні: замість малювати екрани, схожі на продукт, він генерує живі сторінки на реальній темі.

Next.js Chakra UI Playwright Claude Code

Дизайн за пару годин

Макети, які раніше малювали тиждень, тепер готові за години. Бізнес ітерує дешево, коли вимоги міняються.

Оптимізація дизайну

Покращив дизайн процеси: скоротилися помилки на хендоффі, прискорилась розробка і зменшився дрифт макетів

Зробив все сам

Спроєктував і збудував інструмент сам за 2 місяці — продукт, дизайн-систему, архітектуру і код.

В чому суть

Ітерація дизайну скоротилася з одного тижня до пари годин: протестовано на 263 екранах у 15 задачах

Я зробив макет справжньою річчю: кожен екран це жива Next.js-сторінка, яка імпортує реальні компоненти продукту з read-only продакшн-джерела і рендерить їх на реальній темі.

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

браузер · SPA + iframe єдиний вхід · один порт назовні workbench Express + SPA · auth чат у продукті · CLI plan ▸ build ▸ verify 14 гейтів · 2 людські /render/* проксі + WS пише page.tsx task-data спільний том render-host next dev :3000тільки внутрішньо мокапи = маршрутиз тому @/ alias → /source (read-only) 1 293 реальні компоненти error sidecar :3001поза Next HMR + stdout → помилки помилки компіляції та рантайму мокап — це дані: один каталог task-data змонтований у два контейнери, тому запис одразу рендериться
Архітектура: єдиний вхід через workbench, мокапи як дані, read-only продакшн-джерело, помилки повертаються в цикл.
Згенеровані екрани Records Marine у роботі.

Пайплайн, а не промпт

Генератор макетів ніколи не оцінює власну роботу. Тому і не допускає помилок в роботі 

Я зробив генерацію як строгий контрольований процес із двома перевірками дизайнером протягом всього циклу

Полишена сама на себе, модель оптимізує будь-який видимий їй проксі, тобто «рендериться 200» чи «typecheck зелений», і тихо будує з уяви. Бриф нормалізується в README як єдине джерело правди, проходить перевірку покриття і людський Flow-гейт; далі кожен екран іде через Plan, Build, Verify, незалежну критику і 14 детермінованих гейтів, і завершується вирішальним людським Visual-гейтом.

Згенерований екран на всю ширину, на реальних продакшн-компонентах.

Агент бачить дизайн

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

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

Один екран пережив шість раундів людських правок, і кожна правка вела до файлу, який агент жодного разу не відкривав.

Реєстр компонентів: кожен новий блок, який згенерував інструмент, відстежений і названий.

Висновки

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

Щойно макет імпортує реальні компоненти, схожість стається за конструкцією, а AI масштабує твою дисципліну або твою неохайність.

Більшість цінності LayoutLab у тому, що я в моделі забрав: можливість самосертифікуватись, будувати без ґрунту, дивитись на результат в останню чергу. Смак, який лишається в голові, не переживає втомлений вечір; смак, скомпільований у гейт, переживає.