Я отдал редизайн AI. Вот что получилось — честно и без прикрас

В марте я решил проверить: можно ли отдать редизайн лендинга Claude Design и получить результат, который не стыдно показать клиенту. Не «помоги написать промпт», а реальный итерационный редизайн с нуля через ИИ.

Спойлер: получилось. Но не так, как я ожидал.

## Исходная ситуация

Лендинг SaaS-продукта для управления командными задачами. Продукту 3 года, лендинг — примерно столько же. Conversion rate из посетителя в регистрацию — 2.8%. По бенчмарку для этой ниши нормой считается 4–6%.

Задача: переделать лендинг без полного редизайна продукта. Только первые 3 экрана — hero, social proof, value proposition. Бюджет времени — один рабочий день.

Инструменты: Claude (для концепции, текстов, структуры) + Figma (для визуальной части) + v0 (для быстрого прототипа в коде).

## Шаг 1: Диагностика проблем через AI — 1 час

Первое что я сделал — не «нарисовал что-то новое», а попросил Claude проанализировать текущий лендинг.

Что загрузил: скриншоты всех трёх экранов + текущие тексты заголовков и подзаголовков.

Промпт:

Вот скриншоты текущего лендинга SaaS-продукта для управления задачами.
Целевая аудитория: team leads и менеджеры в командах 5–30 человек.
Текущий conversion rate: 2.8% (норма по нише: 4–6%).

Проведи аудит с точки зрения конверсии:
1. Что сразу бросается в глаза как проблема?
2. Насколько понятно ценностное предложение за 5 секунд?
3. Оцени все тексты: заголовок, подзаголовок, CTA
4. Что не хватает для доверия?
5. Расставь проблемы по приоритету

Что получил:

Claude выдал список из 9 проблем. Часть из них я уже знал — слабый заголовок, нет social proof выше fold. Но два инсайта были неожиданными:

• Заголовок «Управляй командой эффективно» — это обещание процесса, а не результата. Пользователь хочет не «эффективно управлять», а «не тратить 2 часа в день на статус-митинги».
• Раздел с фичами идёт раньше раздела с проблемой. Пользователь ещё не согласился с тем что у него есть проблема, а ему уже предлагают решение.

Обе находки — не новые концепции. Но когда видишь их сформулированными про свой конкретный продукт — это другое.

## Шаг 2: Новая структура и тексты — 1.5 часа

Промпт для структуры:

Предложи новую структуру первых трёх экранов лендинга.

Продукт: [описание]
Аудитория: team leads, менеджеры, 5–30 человек в команде
Главная боль: слишком много времени на синхронизацию статусов и координацию

Структура должна:
— Начинаться с проблемы, которую пользователь уже чувствует
— Предлагать решение через результат, а не через фичи
— Содержать social proof в первых двух экранах
— Иметь один чёткий CTA

Предложи 2 варианта структуры с объяснением логики каждого.

Получил два варианта. Первый — более агрессивный, сразу с болью в заголовке. Второй — мягче, начинается с результата.

Выбрал гибрид: заголовок от результата, но второй абзац — сразу про боль. Попросил Claude написать три варианта заголовка:

Напиши 5 вариантов заголовка для этого лендинга.

Требования:
— Понятно за 3 секунды
— Говорит о результате, а не о процессе
— Без слов «эффективно», «просто», «умно» (банальность)
— Для team lead которому надоели хаотичные статус-митинги

Из пяти вариантов два были сильными. Один я взял почти без изменений, один — как основу для редактирования.

Важный момент: тексты от Claude — это 70% готового результата. Оставшиеся 30% — правка под голос бренда, уточнение конкретики, добавление реальных цифр и деталей, которых у ИИ нет.

## Шаг 3: Визуальная концепция — 1 час

Здесь ИИ помог меньше всего — и это ожидаемо.

Что попробовал:

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

Использовал это как «скелет» — перенёс структуру в Figma и уже там довёл до нормального состояния.

Где ИИ реально помог с визуалом:

• Описание визуальной концепции («минималистичный, B2B, без лишней декоративности, тёмный hero с акцентным синим») → это помогло быстро выбрать направление
• Подбор референсов через описание стиля
• Генерация иллюстративных элементов для hero (UI-скриншоты продукта в мокапах)

## Шаг 4: Быстрый прототип в коде — 45 минут

Это неожиданно стало лучшей частью процесса.

Взял финальный дизайн из Figma, описал его Claude и попросил сгенерировать HTML/CSS прототип для быстрого тестирования на реальных устройствах.

Получил рабочий код первых двух экранов примерно с пятого запроса (было несколько итераций с правками). Этот прототип использовал для:

• Проверки на мобайле (в Figma мобайл не так честен как в браузере)
• Демо для клиента без «это просто Figma, в реале будет иначе»
• A/B-теста через простой скрипт разделения трафика

## Что получилось в итоге

После 2 недель A/B-теста нового лендинга против старого:

• Conversion rate: вырос с 2.8% до 4.1% (+46%)
• Bounce rate на первом экране: снизился с 68% до 51%
• Time on page: вырос с 45 секунд до 1 мин 23 секунды

Это хороший результат. Но важнее другое: весь процесс занял один рабочий день вместо обычных 3–4. И большую часть этого времени я думал о продукте и пользователях, а не занимался технической работой.

## Что AI сделал хорошо

Анализ и диагностика. Это лучшее применение. ИИ быстро находит очевидные проблемы, которые «замыливаются глазом» у человека, работающего с продуктом долго.

Тексты и copy. Заголовки, подзаголовки, CTA — Claude генерирует достаточно вариантов чтобы найти хороший. Финальная правка нужна, но это правка хорошей основы, а не написание с нуля.

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

Генерация вариантов. Нужно 5 версий CTA или 3 варианта структуры? Вместо мозгового штурма — один запрос.

## Что AI сделал плохо

Визуальный дизайн. Генерируемые макеты пригодны как отправная точка, не как результат. Типографика, пропорции, визуальная иерархия — всё требует серьёзной доработки.

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

Нюансы аудитории. «Team lead в B2B SaaS» — это очень широко. Нюансы понимаешь только из реальных интервью с пользователями. ИИ работает с обобщениями.

Итерации с визуалом. Словесное описание дизайна работает до определённого предела. Когда нужна точная пиксельная работа — Figma всё равно обязательна.

## Честный вывод

AI-редизайн — это не замена дизайнера. Это другая организация работы.

Раньше: много времени на генерацию вариантов (тексты, структура, концепция) → меньше времени на оценку и выбор.

Теперь: мало времени на генерацию → больше времени на оценку, принятие решений, доводку и верификацию с данными.

Навык, который стал нужнее: умение ставить точные задачи ИИ. Плохой промпт → плохой результат → потеря времени. Хороший промпт → 70% готового решения → быстрый финиш.

## Пошаговый процесс AI-редизайна: шпаргалка

1. ДИАГНОСТИКА (1 час)
   Загрузи скриншоты + контекст в Claude
   Получи список проблем
   Отдели новые инсайты от того, что уже знал
   
2. СТРУКТУРА (30 минут)
   Попроси предложить 2 варианта структуры
   Выбери или создай гибрид
   Зафикси логику каждого блока

3. ТЕКСТЫ (1 час)
   Hero: 5 вариантов заголовка, 3 подзаголовка, 3 CTA
   Выбери лучшие, доработай под голос бренда
   Добавь реальные цифры и конкретику

4. ВИЗУАЛ (Figma, самостоятельно)
   ИИ-генерация как отправная точка
   Финальная доводка руками в Figma
   
5. ПРОТОТИП (30 минут)
   HTML-прототип через Claude Code или v0
   Проверка на реальных устройствах
   
6. ТЕСТ
   A/B-тест против текущей версии
   Минимум 2 недели, достаточная выборка

## Как строить процесс AI-редизайна: детальный разбор каждого этапа

Пошаговая схема выше — это скелет. Вот что реально происходит на каждом этапе и где чаще всего теряют время.

### Диагностика: как получить максимум от AI-анализа

Качество вывода Claude напрямую зависит от качества входных данных. «Проверь мой лендинг» даёт общие рекомендации. Контекстный запрос с данными — конкретные инсайты.

Что обязательно давать:

• Тип продукта и аудиторию — AI должен понимать кто пользователь
• Текущие метрики — conversion rate, bounce rate, данные о проблемах
• Известные жалобы — что говорят пользователи в поддержке
• Скриншоты — не только главного экрана, но и проблемных мест

Что часто пропускают:

• Конкурентный контекст — что делают конкуренты по-другому
• Канал трафика — пользователь с SEO и с рекламы имеют разные ожидания
• Мобайл vs. десктоп — если разница существенна, скриншоты нужны для обоих

### Тексты: итерационный процесс, не один запрос

Первая версия текстов от Claude — это материал для работы, не финал. Реальный процесс:

1. Генерируешь 5 вариантов заголовка
2. Выбираешь 2 которые близко
3. Просишь доработать их с учётом конкретных деталей продукта (реальные числа, реальные кейсы)
4. Редактируешь финальный вариант под голос бренда

Ошибка: взять первый сгенерированный текст без итерации. Результат будет «правильным, но безликим». Итерации с конкретными правками дают живой текст.

Полезный промпт для итерации:

Вот вариант заголовка: [текст]

Он хороший, но звучит слишком [общо / корпоративно / агрессивно].
Наш бренд-голос: [описание — дружелюбный / серьёзный / экспертный].
Сделай 3 варианта с сохранением смысла но другим тоном.

### Визуал: где AI помогает а где мешает

Помогает:

• Описать визуальную концепцию словами («минималистичный, тёмный hero, синий акцент, B2B-серьёзность без скуки»)
• Найти референсы через описание стиля
• Сгенерировать первый черновик для обсуждения с командой
• Создать иллюстративные UI-мокапы продукта для hero-блока

Не помогает (нужны руки в Figma):

• Финальная типографическая работа (кернинг, ритм, иерархия)
• Точные пропорции и сетка
• Анимация и переходы
• Адаптация под разные размеры экрана

Практичный подход: используй AI-генерацию как «быстрый черновик для выравнивания ожиданий» с клиентом или командой. Когда все согласны с направлением — переходи в Figma.

## Разные типы задач: когда AI-редизайн работает лучше всего

Не все задачи одинаково хорошо решаются через AI. Вот карта:

### Отлично подходит для AI-процесса

Лендинги и маркетинговые страницы. Здесь самое большое влияние текстов и структуры — а это сильная сторона AI. Визуал менее критичен чем в UI-продукте.

Email-шаблоны. Структура + текст + простая визуализация. AI справляется хорошо.

Онбординг-флоу. Логическая последовательность шагов, тексты подсказок, структура — всё это AI генерирует хорошо. Визуальное оформление дорабатываешь в Figma.

Информационная архитектура. «Как структурировать навигацию для этого продукта» — вопрос на который AI даёт полезные варианты для обсуждения.

### Требует больше работы руками

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

Мобильные приложения. Мобайл-специфика (жесты, размеры, навигационные паттерны iOS/Android) — AI знает, но реализовать правильно требует опыта работы на платформе.

Сложные data-heavy интерфейсы. Таблицы, графики, фильтры — где дьявол в деталях взаимодействия. AI помогает с концепцией, финал — руками.

## Клиентский AI-редизайн: как выстроить процесс

Если работаешь с клиентом (не внутренний проект), AI меняет не только инструменты но и коммуникацию.

### Что объяснить клиенту

Клиент может удивиться: «Вы используете ИИ? Так я сам могу в ChatGPT написать». Важно объяснить в чём ценность:

«AI генерирует варианты быстро. Моя работа — правильно сформулировать задачу, оценить качество вывода, выбрать лучшее, доработать детали и проверить на пользователях. AI ускоряет процесс — но решения принимает человек с экспертизой».

### Документирование для клиента

AI-процесс хорошо документируется: можно показать «мы генерировали 10 вариантов заголовка и вот почему выбрали именно этот». Это делает процесс принятия решений прозрачным.

## Типичные ошибки AI-редизайна и как их избежать

Ошибка 1: Принять первый вариант AI выдаёт работоспособное решение с первого запроса — и соблазн велик на этом остановиться. Первый вариант всегда «достаточно хорош» но редко лучший. Минимум 3 итерации.

Ошибка 2: Забыть про данные пользователей AI работает с обобщениями. У вас есть конкретные данные: интервью, session recordings, данные поддержки. Используй их как корректирующий сигнал — «AI предложил X, но наши пользователи говорят Y».

Ошибка 3: Пропустить валидацию AI-редизайн не заменяет тест с пользователями. Покажи прототип 5 реальным пользователям прежде чем запускать в разработку. Это 2–3 часа, которые могут сэкономить недели переработок.

Ошибка 4: Использовать AI-тексты без редактуры AI пишет на «среднем» языке. Без редактуры под голос бренда результат будет правильным но безликим. Каждый текст должен пройти через редактора или самого дизайнера.

Ошибка 5: Пропустить A/B-тест «AI помог, значит это лучше» — не доказательство. Тест против старой версии — единственный способ знать наверняка.

## Как оценить качество AI-вывода: чеклист для дизайнера

Главный навык при работе с AI — не «как спросить», а «как оценить ответ». Без этого навыка AI-процесс генерирует много шума и мало сигнала.

### Для текстов: 5 вопросов оценки

1. Это говорит о ценности или о функции? «Управляй задачами в одном месте» — функция. «Освободи 2 часа в неделю от статус-митингов» — ценность. Хороший заголовок говорит о ценности.

2. Это конкретно или обобщённо? «Сэкономьте время» — обобщённо. «Сэкономьте 4 часа в неделю» — конкретно. AI склонен к обобщениям — добавляй конкретику сам.

3. Это звучит как ваш бренд? AI пишет «усреднённо». Голос бренда — индивидуален. Если текст мог бы принадлежать любому конкуренту — нужна правка.

4. Это отвечает на вопрос пользователя? У пользователя, который пришёл на лендинг, есть конкретный вопрос: «это решит мою проблему?». Текст должен отвечать именно на него.

5. Это можно сократить без потери смысла? AI часто многословен. Если можно убрать 30% слов не потеряв смысла — убирай.

### Для структуры: 3 вопроса оценки

1. Логична ли последовательность? Каждый следующий блок должен следовать из предыдущего. «Проблема → агравация → решение → доказательство → CTA» — логично. «Фичи → CTA → проблема» — нет.

2. Есть ли пропущенный шаг? AI иногда пропускает важный элемент. Нет social proof? Нет ответа на главное возражение? Проверяй чеклист конвертирующего лендинга.

3. Это для вашей аудитории или для «средней»? AI предлагает структуру для «типичного SaaS». Если ваша аудитория нетипичная (очень узкая ниша, специфический рынок) — структура нуждается в адаптации.

## Промпт-инжиниринг для редизайна: продвинутые техники

После базовых промптов — несколько приёмов, которые существенно улучшают качество вывода.

### Техника «Играй роль»

Ты — опытный CRO-специалист (conversion rate optimization) с 10+ годами практики в B2B SaaS.

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

[скриншоты / описание]

Указание роли резко меняет качество анализа — Claude переключается в режим эксперта, а не общего помощника.

### Техника «Адвокат дьявола»

После того, как получил рекомендации — попроси найти слабые места:

Вот 5 изменений, которые ты рекомендовал для лендинга.

Теперь сыграй роль скептика: какие из них могут не сработать и почему? Что мы упускаем? Где наши предположения могут быть неверны?

Это выявляет риски до запуска, а не после.

### Техника «Конкурентный контекст»

Вот наш лендинг: [описание]
Вот что делают 3 главных конкурента: [описание или скриншоты]

Что мы делаем хуже конкурентов с точки зрения конверсии? Что — лучше? Где наша возможность дифференцироваться?

### Техника «Пользователь в голове»

Представь что ты — [описание целевого пользователя: должность, задачи, боли].

Ты впервые попал на этот лендинг через рекламу с объявлением «[текст объявления]».

Опиши свои мысли и ощущения при просмотре каждого блока. Что тебя убеждает, что — нет? На каком моменте ты бы нажал на CTA? На каком — закрыл вкладку?

Это симуляция пользовательского интервью без рекрутинга.

## Инструменты AI-редизайна в 2025–2026: что использовать

Экосистема быстро меняется. Актуальная карта инструментов:

### Для анализа и текстов

Claude (claude.ai) — лучший для длинных аналитических задач, структурирования, написания текстов. Понимает сложный контекст, работает со скриншотами.

ChatGPT (openai.com) — сильный для генерации вариантов copy, особенно маркетинговых. Хорошо работает в режиме «сгенерируй 10 вариантов».

### Для визуального дизайна

Claude Design — генерация mockup'ов и визуальных концепций. Лучший для быстрых набросков под обсуждение.

v0 (v0.dev) — генерация React-компонентов и лендингов из описания. Хорош для создания быстрых прототипов в коде.

Figma AI — встроенные AI-функции в Figma: генерация контента для placeholder, варианты компонентов.

### Для кода

Claude Code — написание, рефакторинг и объяснение кода. Идеален для создания HTML/CSS прототипов из Figma-макетов.

GitHub Copilot — ассистент прямо в редакторе кода. Ускоряет реализацию прототипов.

### Для исследований

Perplexity / Claude с поиском — быстрое исследование конкурентов, бенчмарков, лучших практик в нише.

## Этика AI-редизайна: что важно помнить

Быстрый редизайн через AI создаёт соблазны, которым не стоит поддаваться.

### Не пропускай пользовательскую валидацию

AI не заменяет 5 интервью с реальными пользователями. Покажи прототип живым людям перед запуском — особенно если редизайн затрагивает критичные флоу.

### Не приписывай AI результат без проверки

«AI предложил — значит оптимально» — это не аргумент. AI оптимизирует под паттерны из обучающих данных, не под вашу конкретную аудиторию. Всегда проверяй A/B-тестом.

### Сохраняй авторство решений

AI генерирует варианты — ты принимаешь решения. В документации, в разговоре с командой — будь честен что использовал AI как инструмент, а не как замену профессиональной экспертизы.