Рита
Два этапа — главное правило
Никогда не начинаем с «сделай мне сайт» прямо в Claude Code. Это непрофессионально и даёт плохой результат. Сначала — смыслы и стиль в обычном чате. Потом — разработка.
Этап 1
Смыслы и стиль
Обычный чат GPT или Claude. Без кодинга. Результат — 2 файла .txt.
Этап 2
Разработка и доработка
Claude Code или Codex. Итеративно, блок за блоком.
Полный маршрут — шаг за шагом
1
Загрузить всю информацию о бизнесе в чат
Новый чат GPT / Claude (не Claude Code!)
Берём всё что есть: холст с описанием компании, КП, презентации, описания продуктов, прайсы. Чем больше — тем точнее смыслы. Закидываем в чат и пишем:
ПромтПервое сообщение
Изучи мою компанию. [прикрепить все документы]
Он читает, формирует контекст. Не обязательно вычитывать ответ — нам нужно только чтобы он знал бизнес перед следующим шагом.
2
Отправить промт на смысловое ТЗ
Тот же чат, следующее сообщение
Скачайте промт по ссылке ниже → скачайте как .txt через Textify → закиньте файл в чат:
Промт для смыслов сайта
Google Docs · скачать как .txt через Textify → закинуть в чат
ПромтЗапуск смыслового ТЗ
Давай теперь составим смысловую часть сайта. [прикрепить скачанный .txt файл с промтом]
Получится большой документ — полное ТЗ для каждого блока сайта с конкретными текстами. Обязательно вычитать — исправить неточности, добавить нюансы прямо в чате. Когда всё устраивает — скопировать в Google Docs и скачать через Textify как Смысловое ТЗ сайта.txt.
3
Зафиксировать фирменный стиль
Тот же чат — продолжаем
A
Загрузить презентации и брендбук
Любые материалы где есть цвета, шрифты, логотип. Пишем: «Зафиксируй основной фирменный стиль компании».
B
Перевести в цифровой формат
«Превrati этот фирменный стиль в цифровой вид — как для дизайнера. Цвета в HEX, шрифты с названиями и размерами, отступы». Копируем в Google Docs и скачиваем через Textify как Стиль сайта.txt.
На выходе — 2 файла .txt
Смысловое ТЗ сайта.txt — структура и тексты всех блоков
Стиль сайта.txt — цвета, шрифты, визуальный язык
Эти два файла идут в Claude Code / Codex на следующем этапе.
Стиль сайта.txt — цвета, шрифты, визуальный язык
Эти два файла идут в Claude Code / Codex на следующем этапе.
4
Запустить сборку в Claude Code / Codex
Новый проект — начинаем с нуля
1
Создать новый проект
Codex: «Начать с нуля» — папку создаст сам автоматически.
Claude Code: создайте папку где удобно (Документы, Рабочий стол) → в приложении «Новая сессия» → укажите папку → «Открыть».
Claude Code: создайте папку где удобно (Документы, Рабочий стол) → в приложении «Новая сессия» → укажите папку → «Открыть».
2
Загрузить оба файла в чат
Перетаскиваем или прикрепляем оба .txt файла — Смысловое ТЗ и Стиль.
3
Попросить план, затем стартовать
«Мне необходимо создать сайт по смысловому ТЗ и ТЗ по фирменному стилю. Сначала составь план работы, а потом приступим к разработке». Читаете план → «Ок, давай стартуем, начинаем с нуля». Ждёте 10–15 минут — он пишет весь код.
Первый результат будет ужасным — это нормально
Первая версия = просто верстка смыслов. Некрасивая, без дизайна. Не расстраивайтесь — именно это и нужно. Вы убедились, что структура правильная, теперь начинаем улучшать визуально.
5
Итеративная доработка каждого блока
GPT (смысловой чат) + GPT Image + Claude Code — по блоку за раз
Один цикл на один блок. Не пытаемся сразу переделать весь сайт:
1
Смотрим блок в браузере — открываем локальный сервер Claude Code
Браузер
2
Делаем скриншот конкретного блока
Скрин
3
Идём в GPT-чат с нашими смыслами (тот же чат — он знает весь контекст). Отправляем скрин: «Вот первый блок, он очень слабый. Покажи, как мог бы выглядеть с продуманным UX/UI дизайном, чтобы продавал с первого взгляда»
GPT
4
GPT показывает концепт. Итерируем: «Замени шрифт вверху», «Сделай фон темнее», «Убери дублирование» — пока не нравится
GPT
5
Говорим GPT: «Теперь подробно опиши этот блок — все элементы, шрифты, цвета, размеры, отступы до мелочей — чтобы я отправила промпт в Codex и он изменил визуал»
GPT
6
Копируем описание целиком (оно будет длинным) → вставляем в Claude Code / Codex без изменений
Claude Code
7
Открываем браузер — смотрим результат. Если что-то не так: делаем скрин с описанием проблемы → отправляем в Claude Code: «В третьем блоке цифры стоят неровно — поправь», «Здесь градиент не совпадает с фоном — выровняй»
Claude Code
↩
Блок готов → переходим к следующему, повторяем цикл с шага 1
Все блоки
GPT Image — когда Claude Code «не умеет рисовать»
Claude Code верстает код, но не генерирует картинки. Если нужен фон, иллюстрация или иконка — генерируем в GPT Image отдельно, затем в Claude Code: «Замени фон первого блока вот на эту картинку». Codex может генерировать сам, но результат непредсказуем.
6
Кнопки, ссылки и публикация
Финальный шаг
1
Прописать все ссылки и действия кнопок
Прямо в чате Claude Code: «Кнопка "Заказать звонок" должна вести на этот номер, кнопка "Оставить заявку" — на эту форму». Если есть виджет Tilda — вставить как HTML-код в кнопку.
2
Задеплоить для показа клиенту
Пишем в чате: «Мне нужно посадить сайт на домен, чтобы клиент мог открыть по ссылке. Что сделать?» — он даст пошаговую инструкцию. Если непонятно — скрин экрана + «Я вот здесь, не понимаю куда нажать». Рита отправит ссылку на простую инструкцию деплоя (бесплатный вариант).
3
Разместить на финальной платформе
WordPress, Tilda, Bitrix — зависит от задачи клиента. Просто скажите Claude Code, на какую платформу — он объяснит шаги под неё. Не знаете — не страшно, он поможет разобраться.
Полезные нюансы
Лимиты кончились
Ждите ~5 часов (лимиты Claude Code обновляются) или откройте ту же папку в Codex. Папка с сайтом одна — переключение работает бесшовно.
VPN
Нужен для Codex (ChatGPT) и Claude Code. Без VPN работать не получится.
Мобильная адаптация
Прописывается в промте при первом запуске — делается автоматически. Если что-то поехало — скрин мобильной версии + описание проблемы.
Анимации
Claude Code добавляет анимации появления автоматически — если указать в промте при запуске. Не надо просить отдельно для каждого блока.
Тёмная тема
Если презентации тёмные — машина возьмёт тёмный как основной цвет. Хотите светлый — явно укажите в ТЗ по стилю.
Code Design не использовать
Рита не использует Code Design — Claude Code не умеет рисовать нормально. Её алгоритм (GPT → промт → Code) даёт лучший результат.