Сайт автомойки «Быстро-Чисто» мы собрали на Slate, нашей новой теме дизайна для Webasyst. Slate устроена так, чтобы с ней работал ИИ-агент. Главную, внутренние страницы, вёрстку блоков и подготовку картинок сделали агенты, а мы ставили задачу и принимали результат. Сайт запустили за три дня. На Lighthouse главная набирает 99 баллов на десктопе и на мобильном.
О проекте
«Быстро-Чисто» — автомойка в квартале Варежки в Щёлкове: три роботизированных поста Leisuwash DG Smart и два поста самообслуживания. Сайт — лендинг из 11 страниц: слайдер, плитки услуг, робомойка, тарифы, самообслуживание, бонусная программа, видео, четыре фотоальбома, «О компании» и контакты с картой.
Задача
- Сохранить дизайн, фотографии и тексты, которые клиент уже принял.
- Оставить на сайте только нужное: у мойки нет интернет-магазина, значит каталог, корзина и их скрипты не нужны.
- Сделать так, чтобы тексты, цены и фото владелец правил сам, а доработки делались быстро.
- Запустить новый сайт без простоя: через него приходят обращения.
Slate: тема, с которой работает ИИ
Обычная тема дизайна — это вёрстка, в которой разбирается только её автор. Slate устроена иначе, и как раз поэтому ей может пользоваться агент:
- Страница — это список блоков, а не вёрстка. Главная или лендинг описываются набором блоков с данными, поэтому агент собирает и меняет страницы, не трогая общий код.
- Инструкции для агента входят в тему. В поставке лежат правила, описания блоков и готовые рецепты: как добавить страницу, свой блок или вариант карточки, как проверить себя после правки.
- Свои правки отдельно от базовых файлов. Всё, что сделано под клиента, лежит слоем поверх темы, и обновления Slate это не затирают.
- Оформление задаётся токенами дизайн-системы: цвета, шрифты и отступы. Чтобы перекрасить сайт, верстать заново не нужно.
- У владельца есть панель настроек. Тексты, цены и картинки блоков правятся в ней, для длинных текстов есть визуальный редактор.
Как делали
- Страницы. Агенты собрали главную и 10 внутренних страниц из блоков Slate. Тексты и цены перенесены дословно, тесты сверяют каждую фразу.
- Вёрстка. Под мойку агенты сделали 12 своих блоков: робомойка, тарифы, самообслуживание, бонусы, видео, альбомы, шаги и особенности. Добавили фирменное оформление, шапку, подвал и фотогалерею.
- Картинки. Все изображения переведены в WebP, у каждой картинки есть несколько размеров. На телефоне грузятся маленькие, на большом экране — крупные.
- Только нужное. На сайте работают приложения «Сайт» и «Фото», лишние стили и скрипты в сборку не попадают, jQuery не грузится.
- Проверка. Каждую страницу снимали на ширине 1440 и 390 px и сверяли с макетом. Проект проверяют 207 автотестов: тексты, ссылки, блоки, настройки, сборка и выкладка.
- Запуск. Новый сайт сначала открыли на скрытом адресе, владелец посмотрел его и одобрил. Потом один скрипт переключил главный адрес. Простоя не было, откат — одна команда.
Несколько агентов работали параллельно, каждый в своей ветке, а результат принимали по скриншотам. За счёт этого на работу, которая обычно занимает недели, ушло три дня.
Дизайн один в один, а весит меньше
Дизайн клиент принял ещё на прежнем сайте на теме Seller 2.0, поэтому блоки перенесли в Slate один в один: главная на десктопе совпадает со старой до пикселя. А весит страница заметно меньше: файлы CSS и JavaScript главной — 62 КБ вместо 352 КБ, в 5,7 раза меньше. Основную часть разницы дал магазин: в теме интернет-магазина его скрипты нужны, а лендингу мойки — нет.
Скорость
Главная на Lighthouse: производительность 99 на десктопе и 99 на мобильном, SEO 100. Главный блок отрисовывается за 0,7 с на десктопе и за 1,5 с на мобильном, вёрстка при загрузке не прыгает.
Что дальше
Сайт на Slate и дальше удобно вести с агентом. Исправить блок, добавить страницу или лендинг под акцию, обновить фотогалерею, опубликовать запись в блоге — это задача на минуты, а не на день разработчика. Агент работает по инструкциям из самой темы, а простые правки владелец делает сам в панели настроек.
Результат
У мойки тот же дизайн, который клиент уже принял, на быстром сайте без лишнего, который владелец правит сам, а мы дорабатываем с агентами. От задачи до запуска прошло три дня, сайт не простаивал ни минуты.
