Как я собрал новый сайт Qtim с Claude за две недели

Старый qtim.pro постепенно разрастался: появлялись услуги, проекты, видео и новые страницы. Вместе с ними накапливались проблемы. Ролики иногда не загружались, возникали баги, оформление становилось всё пестрее.

За обилием деталей было всё сложнее понять, чем занимается Qtim. Я решил полностью пересобрать сайт: пересмотреть содержание страниц, упростить оформление и убрать лишнее.

Привет, я Антон Фокин — CEO Qtim. На работу ушло две недели. Я принимал продуктовые решения, выбирал референсы и проверял результат. Код писали и тестировали агенты, работой которых я управлял через свой плагин для Claude.

Мне было важно, чтобы посетитель мог быстро разобраться, чем занимается Qtim. Поэтому я оценивал каждый блок: что он объясняет о компании и её проектах, зачем нужен на этой странице.

В одних местах было слишком много текста, в других яркие цвета отвлекали от содержания. Некоторые анимации служили только украшением. Я убирал лишнее, чтобы посетителю было легче ориентироваться на сайте.

Изучал российские и зарубежные сайты, обращал внимание на расположение текста и графики, цветовые акценты и анимацию. Пытался понять, почему одни страницы легко воспринимать, а на других трудно сосредоточиться на содержании.

Одну из идей подсказала сцена из «Железного человека 2», в которой Тони Старк создаёт новый элемент. Она стала референсом для анимации переходов между экранами. Так в новой версии появились глобус и частицы. Мне хотелось, чтобы эти эффекты связывали страницы и дополняли их оформление.

На готовых страницах я проверял, как текст, графика и анимация сочетаются друг с другом. Результат можно увидеть на новом сайте.

Раньше я работал с агентами в нескольких терминалах: в одном обсуждал план, в другом запускал разработку, в третьем проверял результат. Приходилось следить за каждой сессией и переносить между ними информацию о задаче. Чтобы организовать эту работу, я написал плагин для Claude.

При запуске плагин определяет технологии проекта и подбирает роли агентов под задачу. В команде могут быть архитектор, разработчики интерфейса и базы данных, тестировщик, ревьюер, продуктовый агент, DevOps и аудитор. Это роли, которые в обычной команде распределяют между специалистами. Здесь соответствующие задачи выполняют агенты: пишут код, проверяют сайт в браузере, оценивают качество, производительность и безопасность перед выпуском.

Для продуктовых задач предусмотрен отдельный процесс: описание идеи превращается в документ с требованиями, затем задачу разбивают на части и составляют план работ. Состав агентов зависит от проекта.

Над qtim.pro работали много агентов со своими ролями, например, агент-разработчик и агент-тестировщик. Я объяснял, что должен делать экран, сравнивал результат с референсами и решал, что ещё нужно доработать. После проверки принимал версию или возвращал её агентам с замечаниями.

При таком распределении я отвечал за содержание и устройство страниц. Агенты помогали реализовать решения и проверить, как всё работает. Даже технически исправный интерфейс может быть перегруженным, поэтому оценка результата оставалась за мной.

Сайт сохранил прежний стек: Nuxt и Strapi для управления контентом. Это позволило сосредоточиться на интерфейсе, структуре страниц и переходах между ними.

На этот проект ушло две недели. Сроки другого редизайна будут зависеть от объёма изменений и состояния существующего сайта. Для себя я бы сохранил такое распределение работы: агентам поручить написание кода и тестирование, а самому определять требования и принимать результат.

В случае qtim.pro задача была в том, чтобы убрать накопившуюся перегруженность и яснее представить компанию. Посмотрите новый сайт и оцените, насколько это получилось.