Как собрать первую версию сайта с Claude Code: от описания продукта до собственного домена

Название выбрано, домен куплен. Теперь нужно сделать так, чтобы человек, открывший этот домен, увидел продукт, понял его назначение и смог перейти к следующему действию.

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

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

Сначала выберите рабочий процесс

Claude Code умеет читать проект, изменять файлы и запускать команды. Поэтому он подходит для последовательной разработки и доработки одного сайта. В этой статье используется Claude Code в локальном терминале.

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

Если Claude Code уже настроен и работает, используйте текущий способ подключения. Настройка поставщика модели потребуется, когда вы выбираете доступ по API с оплатой по использованию.

Чтобы использовать Claude Code через BetterToken, следуйте инструкции по подключению Claude Code и укажите API Key и Base URL. Храните эти параметры в локальной среде разработки, где ими пользуется инструмент, и не добавляйте их в публичный код сайта. Доступные модели и условия подключения зависят от текущей конфигурации аккаунта.

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

Шаг 1. Дайте AI задание, по которому можно сразу строить сайт

Фраза «сделай дорогой и технологичный сайт» не объясняет, для кого предназначен продукт и что должна делать главная кнопка.

Передайте инструменту утвержденное название и материалы, а затем отправьте такое задание:

Цель: создать первую версию сайта сервиса для управления обратной связью от клиентов, рассчитанного на фрилансеров. Продукт помогает собирать правки клиентов в одном месте и не искать требования по истории чатов. Регистрация пока закрыта, основная кнопка — «Подать заявку на ранний доступ».

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

Не делать: не добавлять вход в аккаунт, оплату или интерфейс самого продукта; не придумывать число клиентов, отзывы или логотипы партнеров.

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

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

Этого описания достаточно, чтобы задать границы первой версии. Детали можно добавлять после просмотра страницы.

При первой проверке убедитесь, что сайт правильно объясняет продукт. Откуда поступает обратная связь клиентов? Зачем посетителю пробовать сервис? Что произойдет после нажатия кнопки? Цвета и анимацию можно улучшить позже, но сначала страница должна ответить на эти вопросы.

Шаг 2. Привязывайте каждую правку к конкретной части страницы

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

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

Цель: изменить первый экран текущей главной страницы на мобильных устройствах, чтобы посетитель сначала увидел назначение продукта и кнопку «Подать заявку на ранний доступ».

Разрешенный объем: менять только макет и стили первого экрана главной страницы.

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

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

Проверка: проверить одну мобильную и одну десктопную ширину. Исправить только проблемы, возникшие из-за этой правки.

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

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

Шаг 3. Убедитесь, что заявки на ранний доступ действительно приходят

Для этой версии сайта важнее всего не сложные взаимодействия, а получение заявок.

На первом этапе кнопка может открывать уже настроенную внешнюю форму. Тогда ради сбора email не придется заранее строить систему аккаунтов. В форме достаточно запросить адрес электронной почты и задать необязательный вопрос: «Как вы сейчас работаете с обратной связью клиентов?» Рядом укажите, что данные используются для связи по раннему доступу и исследования продукта.

Передайте Claude Code реальную ссылку на форму и попросите заменить демонстрационный переход. Затем откройте сайт, отправьте тестовую заявку и проверьте, что запись появилась в системе приема данных.

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

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

Шаг 4. Проверьте публичную версию, а затем подключайте домен

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

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

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

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

Шаг 5. Публикуйте продукт с уже работающим сайтом

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

Когда сайт готов, посмотрите каталог стартапов на NewName.ai, чтобы изучить, как похожие продукты описывают свою пользу, и отправьте собственный проект. В описании используйте реальные функции, актуальные скриншоты и рабочую ссылку.

Затем возвращайте в проект конкретные наблюдения из посещений и заявок. Если люди не понимают, чем продукт отличается от обычного чата, уточните объяснение. Если они нажимают кнопку, но не заканчивают заявку, проверьте форму и весь путь. Решайте по одной четко определенной проблеме и постепенно улучшайте сайт.

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