Редизайн Express Agency: увесь сайт за три дні

Коли ми запускали Express Agency, треба було обрати: витратити тижні на дизайн або спершу зробити те, заради чого сайт потрібен. Послуги, кейси, форму заявки, три мови. Ми обрали друге. Сайт зібрали агенти на готових дизайн-скілах і за коротким описом стилю в DESIGN.md, а у візуальну частину ми свідомо майже нічого не вкладали. Вийшов робочий сайт із типовим дизайном: усе на місці, усе читається, нічого не запам’ятовується.

У рішення був запасний план. Колись ми збиралися переробити сайт на щось насичене: з 3D, відео та іншими «вау»-ефектами. Але це велика робота, і на старті вона себе не виправдовувала.

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

Сайт і мав бути простим: ми в нього не вкладалися. Але термін «колись» вийшов. Питання постало так: як швидко можна зібрати гарний дизайн, використовуючи агентів і нові скіли? О 21:08 пішов перший промпт. Приблизно за 70 годин новий дизайн був в основній гілці.

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

Основою стали дизайн-скіли, передусім taste-skill. Він змушує агента ухвалювати дизайн-рішення, а не видавати шаблон.

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

Першу пробу агент зробив у трьох напрямах: «Імпульс», «Редакція» і «Масштаб». Кожен показали на чотирьох сторінках, усього вийшло 12 комбінацій. Вердикт був двоякий:

На «недостатньо» можна було відповісти ще одним екраном. Ми обрали інше: попросили агента вивчити референс серйозно.

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

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

Так з’явилася версія 02. Реакція була короткою:

Нижче всі чотири стани головної сторінки: від старого сайту до фіналу. Кожен кадр відкривається великим планом.

Коли систему закріпили, сайт почав зростати пакетами: 4 сторінки, потім 10, 13, 18, 26 і, нарешті, 28. Ми дивилися сторінку в браузері й залишали коментарі просто на елементах, а агент розбирав їх пакетом і повертав нову версію. За ці дні набралося 328 коментарів у 52 повідомленнях.

Швидко з’ясувалося, що головний ворог — одноманітність. Коли розділи поспіль виглядають однаково, сторінка читається як список, а не як історія. Такі блоки ми повертали на доопрацювання, і агент пропонував нові варіанти.

Щоб не вирішувати те саме по сто разів, рішення перетворювалися на правила. З коментарів агент зібрав каталог із 13 композицій, які можна чергувати між розділами. Так само з’явилося правило для цін: спершу проба на одній сторінці, потім схвалення і лише після цього — на весь сайт. Долар і цифри тепер усюди сині.

Якщо подивитися, скільки коментарів отримувала кожна сторінка в порядку появи, помітна тенденція. Головна — 44 коментарі, інтернет-магазин — 29, сайт компанії — 15. У пізніх сторінок WordPress їх від одного до п’яти, у сторінок про ботів — від чотирьох до десяти.

Хочеться сказати, що агент навчався. Але дані не дозволяють так упевнено. До чисел входять наскрізні правки 29 жовтня, як-от кольори кнопок і шапка. А сторінки AIGC — це взагалі не редизайн: ми створювали повністю нові лендинги з відео та галереями, яких раніше не було, від старих сторінок лишилися тільки тексти. Тому там і правок багато: 40 та 23.

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

Кожну сторінку треба було зробити російською, англійською та українською. Основним агентом був Codex, а з перекладами англійською та українською допомагав Claude Code. Загалом 28 сторінок трьома мовами дали 84 адреси.

Окремо пройшли мобільними екранами та доступністю. Історичний QA охопив 91 браузерний профіль, автоматична перевірка axe порушень не виявила. Це не сертифікація доступності, а лише автоматичний контроль.

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

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

На деяких нових сторінках поспіль ішли по чотири візуально однакові розділи. Інструкція була простою:

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

Рутину агент прискорив дуже. За нашою оцінкою, близько 70% роботи він виконав із пари промптів, решта пішла на ітерації. З доопрацьованими інструкціями, за нашою оцінкою, частка могла б дійти до 90%, але це гіпотеза, а не вимір.

Для порівняння: за нашою оцінкою, вручну такий редизайн забрав би щонайменше три тижні, з них один–два — дизайнер. Орієнтир для верстки вручну — одна–три адаптивні сторінки на день. Це теж оцінка: паралельного проєкту ми не робили.

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

Головну ми показали на початку. Ось решта ключових сторінок: потягніть роздільник, щоб порівняти.