Ферма Цветковых. Редизайн с Claude Code
Задача: у фермы был сайт, который выглядел устаревшим и не давал ни управлять магазином без разработчика, ни понимать спрос. Нужно было показать ферму живым местом и сделать магазин, который семья ведёт сама.
Результат: правка цены — ~30 секунд вместо ожидания разработчика; впервые видно, что и сколько заказывают.
Для меня это кейс не про «написала промпт и получила сайт», а про то, как дизайнер выстраивает процесс с ИИ-инструментом на длинной дистанции: превращает бриф в проверяемые ТЗ, держит факты о бизнесе под контролем, тестирует каждое решение на реальных сценариях и доводит его до продакшена.
Проблемы старого сайта
- На старом сайте korovamy.ru (на MODX с базой MySQL) корзина и оформление заказа были, но жили отдельно от каталога: цены и товары приходилось дублировать вручную, а данных о конверсии, брошенных корзинах и спросе по товарам не было.
Старый сайт korovamy.ru — корзина и каталог
- Яндекс.Метрика на старом сайте запускалась до согласия посетителя на cookie — собранные данные были юридически уязвимы и не отражали реальную аудиторию.
- Контакты работали со сбоями: ссылка на почту вела на чужой домен — часть обращений клиентов терялась, не доходя до фермы.
- У карточек товаров и новостей не было микроразметки для поисковиков (Product/Offer, NewsArticle) — это ограничивало их видимость в поиске.
- Отдельное требование заказчика — сделать сайт современным и запоминающимся: именно для этой «узнаваемости» и был придуман маскот-корова.
Кто пользуется сайтом
- Ферма — семейная, её часто посещают дети и школьники; стиль сайта поэтому нарочно немного «детский» — задача показать подрастающему поколению, что ферма — это не старое и грязное хозяйство, а доброе и, самое главное, полезное место.
- Это бизнес моей семьи — я не понаслышке знаю о проблемах старого сайта: например, расхождения между тем, что покупатель проговорил по телефону, и тем, что по факту привезли, — такие споры теперь закрывает журнал заказов, который фиксирует состав и сумму на момент оформления. Я вижу, насколько важен презентабельный сайт на встречах с министерствами, и знаю, что быстрый и удобный заказ особенно важен: не все покупатели могут доехать до фермы.
- Покупатели — в основном местные семьи и оптовики: заказывают через корзину на сайте или приходят в фирменный магазин и просят привезти нужное к определённому дню; заказов по телефону не принимали и раньше.
- У сайта две аудитории: покупатели, которые оформляют заказ, и партнёры, ведомства и СМИ, для которых сайт — витрина фермы на переговорах; отсюда разделы «Награды», «СМИ о нас» и «Ферма в цифрах».
- Любая цифра, дата, награда или факт о ферме должны быть подтверждены заказчиком — ничего нельзя придумывать; неподтверждённое остаётся плейсхолдером до ответа фермы.
- Юридические требования: 152-ФЗ о персональных данных, закон о защите прав потребителей, закон о рекламе — часть текстов и функций (согласие, cookie, способ оплаты) пришлось переписать по итогам юридического аудита.
- Данные посетителей не должны уходить за рубеж: отказ от Google Fonts и сторонних сервисов, видео и карты грузятся только после согласия на cookie.
- Решила не использовать фреймворки и сборщики — ванильные HTML/CSS/JS, чтобы сайт был лёгким и быстро грузился на мобильном у фермы за городом, где не всегда хороший интернет.
- Без дизайн-команды и без иллюстратора — все иллюстрации и позы маскота генерирую сама через ChatGPT.
- Оформление заказа: зоны, минимум и оплата. Зоны доставки и дни по округам согласовали с фермой не с первого раза: в одной итерации была пилюля «Москва» с порогом заказа от 3000 ₽ — ферма от неё отказалась (в Москву не возим, там есть свои точки продаж), и остались три округа с единым минимумом 2500 ₽ и бесплатной доставкой. Оплата тоже менялась по ходу: сначала только наличными курьеру, потом добавили оплату картой при получении — карта была нужна тем, кто не держит наличные. Если товара нет в наличии или адрес вне зон доставки — менеджер звонит и договаривается отдельно, сама корзина это не блокирует. 58 товаров с фасовками, ценами, составом и КБЖУ; общая корзина для всех страниц; подсказки адреса из открытых данных ОСМ.
Корзина и форма оформления заказа
- Мобильная версия и доступность. Три круга мобильных правок по скриншотам, отдельный режим «уменьшить движение» для анимаций, проверка без JavaScript — контент виден в любом случае.
Сайт на мобильном экране 375 px
- Админка и «фото в один клик». Полностью — в разделе «Админка» ниже: интерфейс без кода для заказчика и правка фото прямо на странице.
- Юридический аудит. Выявила юридические риски по 152-ФЗ, ЗоЗПП и закону о рекламе (согласие на обработку данных, cookie, формулировки на сайте) и подготовила для фермы список решений — часть текстов и функций переписана по его итогам.
Фрагмент документа юридического аудита
- Осознанные компромиссы: опт и день доставки. Для оптовиков на сайте пока нет отдельного раздела — у фермы нет отдельного оптового контакта, их ведут через общий телефон и почту. Выбора дня доставки в корзине тоже нет — доставка идёт по фиксированным дням округа. Оба случая — осознанный приоритет первой версии: особые запросы ферма по-прежнему обрабатывает вручную, по телефону или в магазине.
Стиль собирала по референсам: kinokyxnia.ru, vkusvill.ru (цветовые категории каталога), bonduelle.ru (дружелюбная тёплая иллюстративность), eathungrytiger.com (крупный объект — бутылка молока, который сопровождает прокрутку), palais.bio (рисованные тёплые фоны и ощущение «домашнего»).
- Палитра. Основной зелёный #16793F и акцентный #239A4E, тёплый молочный фон #FFFDF7, текст #333. У каждой категории товаров — свой цвет плитки (молоко — голубой, творог и сметана — лавандовый, сыры — жёлтый, масло — персиковый, йогурты — розовый), чтобы каталог читался с одного взгляда. Зелёный здесь — природа и свежесть, тёплый молочный фон — сам продукт.
- Шрифты. Manrope для заголовков и кнопок, Inter для текста — пара выбрана для контраста «крупное и дружелюбное» / «спокойное и читаемое».
- Ключевые компоненты. Цветная плитка категории с лёгким «живым» наклоном и фото-вырезом товара на прозрачном фоне в углу, пилюля-наклейка с акциями, «липкая» шапка, которая становится компактнее при прокрутке — эти компоненты повторяются на 150+ страницах и держат сайт визуально единым; сам наклон плиток — неформальная, дружелюбная подача для семей с детьми.
- До / после.
Главный экран старого сайта рядом с новым
Карточка товара — было / стало
Отдельная задача, которую я вела от идеи до готовой иллюстрации сама, без иллюстратора: придумала маскота фермы — коричневую корову без пятен, с доброй мордочкой — и единый визуальный язык, в котором она появляется на каждой странице сайта в разных позах, но остаётся узнаваемой. Маскот — прямой ответ на задачу «современный и запоминающийся», которая описана в разделе «Контекст». Все позы и фоны я сгенерировала сама через ChatGPT.
Маскот-корова — несколько поз рядом
- Метод консистентности. В каждом промпте — фиксированное описание персонажа (порода, окрас без пятен, добрая мордочка, пропорции); на каждую позу — несколько генераций в ChatGPT, худшие по композиции и анатомии отбраковывала вручную.
- Матрица поз. Расписала по каждому разделу сайта — где именно стоит корова и что делает: встречает гостей у ворот на «Экскурсиях», листает фотоальбом на «Истории», держит карту на «Контактах», заглядывает в пустую корзину, машет на прощание с бутылкой молока.
Таблица поз маскота по разделам сайта
- Правила согласованности. Зафиксировала технические требования к позам: единый масштаб и точка опоры у всех поз хронологии (чтобы корова не «прыгала» при смене кадра), размеры для разных мест (300–400 px на первых экранах, 80–120 px в мелких элементах), стиль обводки и палитра.
Несколько поз в одном масштабе рядом
- Разграничение персонажей. Отдельно описала, что маскот фермы — не то же самое, что маскот агродеревни «Бурёнкино царство» (корова в венке со своим логотипом), чтобы персонажи не путались в контенте.
Маскот фермы и маскот «Бурёнкина царства» рядом
- Расширение в новый визуальный мир. Для альтернативной версии главной страницы сама сгенерировала в ChatGPT рисованные фоны «в мире маскота» — та же эстетика, но приглушенная, как второй план.
Рисованный фон главной страницы с маскотом
Старый сайт korovamy.ru работал на MODX с базой MySQL: административная часть у неё была, но очень неудобная и ограниченная — многое в ней нельзя было поменять руками: цену, фото или новость можно было поменять только через разработчика или по его подсказкам. Для нового сайта я отдельно поставила ТЗ на админку и вела её через несколько этапов: теперь весь контент фермы правится через браузер, без разработчика.
Вход в админку и список разделов
- Заказы. Журнал только на просмотр: покупатель, состав заказа и сумма на момент оформления, способ оплаты, статус писем ферме и клиенту; поиск по номеру, телефону, периоду и зоне доставки.
Карточка заказа
- Каталог. Цены, наличие, фасовки, состав и КБЖУ, видимость товара (скрыть — в архив) — правки сразу пересбирают сайт, скрытый товар исчезает с сайта.
Раздел «Каталог» — правка цены
- Контент. Новости (свой редактор текста, вставка из Word очищается автоматически), СМИ, видео, награды, «Ферма в цифрах», площадки, отзывы, праздники, хронология и команда — 14+ разделов на одной панели.
Список разделов админки слева
- Фото в один клик. Раньше любая замена фото на сайте значила просить разработчика найти нужное место в коде — для фермы это значило ждать. Идея: дать возможность тыкать по самой странице сайта внутри админки и выбирать место кликом, без упоминания названий файлов. Проверила на реальных страницах: открываешь любую страницу сайта в рамке админки, кликаешь по нужному месту — и меняешь там фото, без поиска по коду.
Режим «фото на страницах» поверх сайта
Попросила человека с фермы, который будет вести админку, сделать три реальные задачи без подсказок, с секундомером в руках.
Раньше: правка цены, фото или новости на старом сайте — заявка разработчику и 2–3 дня простоя. Теперь — самостоятельно, без разработчика:
- Правка цены товара — ~30 секунд
- Добавление новости — ~2–3 минуты
- Замена фото через «фото в один клик» — ~40 секунд
- Где возникли вопросы или заминки — первый запуск потребовал двух подсказок, куда кликнуть — дальше вопросов не было
- Единый источник правды. В начале работы ИИ несколько раз выдавал правдоподобные, но неверные детали о ферме и старом сайте — например, сам придумывал, что на старом сайте вообще не было ни корзины, ни админки, хотя они были. Я ловила это, только сверяя каждый такой ответ с реальным сайтом и документами фермы. После этого собрала базу знаний проекта — факты о ферме, тексты, разметку каждой страницы — в отдельные документы, и завела правило: неподтверждённый факт остаётся плейсхолдером, а не придумывается. Claude Code сверяет с этой базой любой текст и цифру, прежде чем поставить их на сайт.
Файл базы фактов, например docs/02_facts.md
- Прототип → ТЗ → код. Каждый раздел (каталог, корзина, админка, доставка) начинался с подробного технического задания: структура данных, сценарии пользователя, состояния — и только потом реализовывался.
Фрагмент ТЗ раздела рядом с готовым экраном
- Проверка без чтения кода. Код не читала и не писала сама — каждую правку проверяла визуально: по сценариям, автотестам и скриншотам, а не по исходникам.
- Сборка настоящего сайта. Прототип переведён в реальный проект: сервер обработки заказов, email-уведомления и автотесты перед каждой выкладкой — правки видно на сайте сразу после публикации.
Отчёт автотестов или структура проекта site/
- Ферма больше не ждёт разработчика на правки: по тесту на ферме — ~30 секунд на правку цены, ~2–3 минуты на новость, ~40 секунд на фото (подробности — в разделе «Проверка админки на заказчике» выше).
- Теперь считается то, чего не было: цели в Яндекс.Метрике на отправку и оформление заказа (с суммой и зоной), ошибки отправки формы — плюс журнал заказов в админке, который показывает состав и сумму каждого заказа, то есть реальный спрос по товарам.
- Выявленные юридические риски закрыты до запуска корзины на новом сайте: согласие на обработку данных отделено от политики, видео и карты грузятся только после cookie, персональные данные хранятся в РФ. Почта и SEO тоже починены: письма с заказами доходят до фермы без потерь, у товаров и новостей — микроразметка (Product/Offer, NewsArticle) для поиска.
- Консистентный маскот-персонаж в 20+ уникальных позах, которые я сама сгенерировала в ChatGPT — вместо разрозненных стоковых иллюстраций.
- 58 товаров в каталоге, 150+ страниц сайта (каталог, 52 новости, 15 публикаций СМИ, админка).