Редизайн 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%, но это гипотеза, а не замер.

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

Кейс не про рост трафика или конверсии, мы их не заявляем. Он про скорость и про то, как устроена такая работа.

Главную мы показали в начале. Вот остальные ключевые страницы: потяните разделитель, чтобы сравнить.