Откройте гайд рядом с Claude. Копируйте задание, заменяйте скобки своими данными, смотрите результат. Дополнительные варианты спрятаны в раскрывающихся блоках — к ним можно вернуться позже.
VOLT — вымышленный бренд для практики. Кадр создан ИИ. Для реального продукта используйте свои материалы.
Решите, кому и зачем нужен сайт
Есть понятное предложение, посетитель и одно главное действие.
Откройте https://claude.ai и войдите. Начните новый чат кнопкой нового разговора. Ниже у задания нажмите «Скопировать». Вставьте в поле сообщения: Cmd+V на Mac или Ctrl+V на Windows. Замените фразы в квадратных скобках своими ответами, уберите скобки и отправьте сообщение кнопкой со стрелкой.
Начните с человека, который откроет страницу. Что он ищет? Что ему нужно узнать, чтобы решиться? Что вы хотите получить от сайта: запись, продажу, подписку или обращение? Ответы определяют содержание, а уже потом — внешний вид.
Начинаем с человека
«Хочу выбрать наушники»
Показывает продукт, условия и цену
«Записаться на прослушивание»
Запишите пять вещей: что предлагаете; кому; в каком городе или онлайн; почему вам можно доверять; куда должна вести главная кнопка. Если цена или условия ещё не определены, так и отметьте — агент не должен их выдумывать.
Для VOLT: «Показываем наушники людям, которые хотят сначала послушать их. На сайте — внешний вид, подтверждённые характеристики, условия прослушивания и запись». Для портфолио главным действием может быть обращение, а для журнала — чтение следующей статьи.
Сформулировать задачу сайтаПоказать текст ↓
Помоги подготовить понятное описание будущего сайта. Проект: [чем занимаемся]. Посетитель: [кто и что ищет]. Предложение: [что получит, условия, цена если известна]. География: [город / страна / онлайн]. Главное действие: [записаться / купить / написать / читать]. Факты и материалы: [что уже есть]. Если чего-то важного не хватает, задай до трёх простых вопросов. Сформулируй задачу сайта одним абзацем и перечисли, что посетителю нужно узнать перед действием. Отдельно укажи неизвестные факты. Пока не создавай код.
В ответе есть короткое описание вашего сайта и вопросы, если данных не хватило. Ответьте на них в этом же разговоре. Следующие задания шагов 1–2 отправляйте сюда же: тогда Claude помнит ваши решения.
Вы можете одним предложением сказать, для кого сайт и зачем на него приходить. Понятно, какое действие будет главным.
Нарисуйте страницы и путь посетителя
Есть карта страниц, порядок блоков и список недостающих материалов.
Страница — отдельный адрес, например /contacts/. Блок — часть одной страницы: первый экран, описание, цена. Меню связывает страницы или прокручивает к блокам. Это разные уровни структуры: сначала решаем, какие адреса нужны, затем — что будет внутри каждого.
Карта сайта: какие страницы связаны
/Предложение + выбор следующего шага
/headphones/Фото, характеристики, условия
↓ Записаться/listen/Где, когда и как попробовать
↓ Отправить заявку/journal/Если планируете полезные статьи
↓ Статья → продукт2.1. Выберите размер первой версии
Один продукт и одно действие обычно можно объяснить на одной странице. Отдельная страница полезна, когда у посетителя самостоятельная задача: сравнить модели, узнать условия доставки, прочитать статью. Не создавайте десятки пустых разделов «на будущее».
Посмотрите три сайта с похожей задачей. Выпишите, какие вопросы они закрывают: цена, процесс, примеры, условия, контакты. Затем отметьте, какие ответы есть у вас и чего пока не хватает. Чужие тексты и обещания не переносите.
Составить карту сайтаПоказать текст ↓
По нашему описанию предложи минимальную структуру сайта. Если доступен поиск, изучи три релевантных сайта и приведи ссылки; если доступа нет, попроси примеры и не выдумывай результаты исследования. Покажи таблицу: страница → вопрос посетителя → нужные блоки → главное действие → предложенный адрес. Раздели обязательное для запуска и то, что можно добавить позже. Объясни, почему каждый раздел нужен. Для одного предложения сначала рассмотри одностраничник. Если нужны статьи, покажи место раздела материалов и ссылки из статей на подходящие страницы продукта. Пока не создавай код — сначала согласуем карту.
2.2. Разложите одну страницу по блокам
Внутри страницы: в каком порядке рассказывать
- Понять за несколько секундНазвание предложения, польза, действие.
- Рассмотреть и сравнитьМатериалы и факты о продукте.
- Снять сомненияЦена, процесс, ограничения.
- Сделать следующий шагРабочая кнопка или форма.
Для каждого блока напишите его задачу и содержание. Например: «Условия прослушивания — где проходит, сколько длится, как выбрать время». Соберите фотографии, реальные характеристики, цены и контакты в папку «Материалы». Неизвестное отметьте отдельным списком.
Собрать одно задание для переноса в CodeПоказать текст ↓
Собери согласованные решения в одно сообщение, которое я целиком перенесу в Claude Code. Раздели его на три части: 1. «Содержание»: задача сайта, карта страниц, тексты и факты по блокам, список недостающего. 2. «Сборка»: страницы, меню, главное действие, куда ведёт кнопка и как проверим результат. 3. «Внешний вид»: выбранные ориентиры, изображения, шрифты и цвета. Пока не выбранное так и отметь. Не выдумывай цены, отзывы и характеристики. Начни сообщение фразой: «Сохрани эти три раздела в файлы Содержание.txt, Сборка.txt и Внешний вид.txt в папке проекта. Пока не создавай сайт». Дай весь результат одним текстовым блоком для копирования.
Оставьте этот разговор открытым. На шаге 3 скопируйте итоговое сообщение целиком кнопкой копирования у ответа Claude. Вручную создавать три текстовых файла не нужно — это сделает Code.
Два задания — одна общая карта
- Страницы и ссылки
- Тексты и данные
- Кнопки и заявки
- Проверка результата
- Композиция и шрифты
- Цвет и изображения
- Телефон и компьютер
- Движение, если нужно
Когда нужен блог или раздел статей?
Добавляйте его, если планируете регулярно отвечать на вопросы будущих клиентов. Для аудиобренда это может быть материал «Как подготовиться к прослушиванию»: он ведёт к условиям и записи. Нужны список материалов, страница статьи и понятные ссылки между ними. Категории добавляйте, когда они помогают ориентироваться; пустой раздел не даёт посетителю пользы.
Предусмотреть раздел материаловПоказать текст ↓
В этом проекте планируем публиковать полезные статьи по теме [тема]. Добавь в карту раздел материалов и шаблон статьи: заголовок, автор если известен, дата, содержание, изображения и ссылки на подходящие страницы сайта. Предложи несколько тем на основе реальных вопросов посетителей. В задании на сборку предусмотрим хранение текстов отдельно от оформления, чтобы новую статью можно было добавить по образцу. Не публикуй пустые страницы, выдуманных авторов и автоматически созданные отзывы.
Вы можете пройти по карте от входа на сайт до нужного действия. У каждой страницы есть задача; для каждого блока известно, какой текст и материал понадобятся.
Соберите каркас и откройте его в браузере
Страницы и переходы работают; вы видите первый экран и можете его менять.
3.1. Откройте папку проекта в Claude Code
Для этого маршрута понадобятся компьютер, установленное приложение Claude и доступ к вкладке Code. Для Code нужен подходящий платный план Claude. До оплаты проверьте доступность сервиса в вашей стране. Если приложение уже настроено, переходите к выбору папки.
Скачайте приложение с https://claude.com/download и войдите в свой аккаунт. Откройте вкладку Code в верхней части окна. Отдельно устанавливать терминальную версию для этого маршрута не нужно.
Создайте на рабочем столе папку «Мой сайт». Внутри — папку «Материалы». Положите туда свои фотографии и логотип, если они есть. Согласованное задание передадим через сообщение: Code сам сохранит документы.
Как создать папку на Mac или Windows
Mac: откройте Finder → «Рабочий стол» → нажмите Shift+Cmd+N, введите «Мой сайт» и Enter. Windows: откройте Проводник → «Рабочий стол» → Ctrl+Shift+N, введите название и Enter. Затем дважды щёлкните по новой папке и таким же способом создайте внутри «Материалы».
Во вкладке Code выберите Local — работу на этом компьютере. Нажмите Select folder или кнопку с папкой и укажите «Мой сайт». Проверьте, что это название появилось у поля сообщения.
Для первого запуска выберите Manual, если доступен: Claude будет спрашивать перед изменениями. В старой версии этот режим называется Ask permissions. Если стоит Plan, переключите режим перед созданием файлов: в Plan Claude только составляет план.
Возле поля сообщения видно название «Мой сайт». Если Claude остановился и показывает запрос разрешения, прочитайте его: Accept разрешает указанное действие, Reject отклоняет. Для ожидаемого создания файлов и запуска просмотра внутри проекта нажмите Accept. Если непонятно, что он собирается сделать, попросите объяснить.
Что означает экран с красными и зелёными строками?
Это сравнение изменений в файлах. Зелёным показано добавленное, красным — удалённое. На официальном снимке ниже кнопка Review code запускает проверку изменений. Для просмотра самого сайта попросите Claude открыть страницу в Browser или перейдите по выданной ссылке.
3.2. Передайте согласованную структуру
Вернитесь в обычный чат из шага 2, скопируйте итоговое сообщение с тремя разделами и вставьте в поле сообщения вкладки Code. Отправьте. Дождитесь, пока Code сохранит три файла. История обычного чата сама сюда не переносится.
Code перечислил созданные «Содержание.txt», «Сборка.txt» и «Внешний вид.txt». Попросите: «Покажи папку с этими файлами в Finder / Проводнике». Откройте «Содержание.txt» и проверьте, что там ваши факты. Затем отправляйте задание на сборку ниже.
Первый экран — то, что человек видит до прокрутки. Начнём с него: короткий заголовок, пояснение, одна главная кнопка и изображение. По этому фрагменту проще выбрать внешний вид, чем переделывать весь длинный сайт.
В этом же разговоре вкладки Code отправьте задание ниже. Дождитесь завершения: текстовый ответ с планом ещё не означает, что файлы созданы. Если агент спрашивает разрешение, ответьте на запрос и дождитесь ссылки.
Собрать каркас по картеПоказать текст ↓
В папке проекта есть согласованные «Содержание», «Сборка» и заготовка «Внешний вид». Прочитай их и собери минимальный рабочий каркас сайта. Создай нужные страницы и обычные ссылки между ними. Для одностраничника — блоки и переходы по меню. Первым подробно покажи первый экран; остальные блоки пока могут быть простыми, но с нашим содержанием. Тексты и повторяющиеся данные держи отдельно от оформления, с понятным способом редактирования. Для небольшого сайта начни с HTML, CSS и JavaScript. Если нужен другой подход, объясни причину до усложнения. Основной текст должен приходить в HTML и читаться без запуска анимации. Не добавляй выдуманные отзывы и цифры. Запусти просмотр, проверь ссылку и дай её мне. Покажи, где менять текст и как снова открыть проект. Затем остановись: сначала проверим структуру, потом займёмся красотой.
Нажмите ссылку из ответа Claude. Если она не кликается, скопируйте её целиком в адресную строку браузера и нажмите Enter. Адрес с localhost или 127.0.0.1 работает только на вашем компьютере, пока запущен просмотр. На телефон его переносить не нужно — публичную ссылку получим на шаге 6.
Открылся сам сайт: видны заголовок, пояснение и кнопка. Нажатие пункта меню ведёт к нужному блоку или странице. Если видите код или список файлов, отправьте снимок Claude и попросите открыть именно страницу сайта.
3.3. Оставьте инструкцию для следующей правки
Сохранить понятную карту проектаПоказать текст ↓
Создай короткий README: что это за сайт, где тексты и картинки, как запустить просмотр, как проверить и опубликовать обновление. Запиши принятые решения и ближайший шаг. Добавь в правила проекта: перед правкой читать эту карту, сохранять удачную версию, менять только согласованную часть. Не включай пароли, токены и личную переписку в публичные файлы.
Когда вернётесь к работе: откройте Code, выберите ту же папку «Мой сайт» и напишите: «Прочитай README и снова запусти просмотр». Не создавайте проект заново. README — короткая инструкция, которую агент только что оставил в папке.
Страница открывается. По меню можно пройти весь маршрут; нужные страницы и блоки на месте. Вы знаете, где изменить текст. Внешний вид доведём следующим шагом.
Придайте сайту характер
Рабочая структура получила выразительный и читаемый внешний вид.
Теперь выберем, что человек увидит первым и как это будет выглядеть. Для VOLT это сами наушники. Крупный предмет, графитовый фон и тёплый свет задают весь экран. Текст, кнопка и поля поддерживают эту идею.
Ближе
к музыке.
Наушники, которые хочется рассмотреть.
Запишитесь на прослушивание.
Крупный предмет и свет создают объём. Свободное место слева оставляет текст читаемым. Тёплый акцент ведёт к кнопке.
4.1. Покажите Claude, что именно вам нравится
Откройте два понравившихся сайта — свои закладки, https://www.awwwards.com или https://godly.website . Сохраните по одному снимку первого экрана в «Материалы». Подпишите, что берёте за ориентир: размер предмета, свет, шрифт или расположение текста.
Как сделать и сохранить снимок экрана
Mac: нажмите Shift+Cmd+4 и выделите нужную область. Снимок обычно появится на рабочем столе — перенесите его в «Мой сайт/Материалы». Windows: Win+Shift+S → выделите область → откройте уведомление «Ножницы» → «Сохранить» и выберите «Материалы». Назовите файлы «пример-1» и «пример-2», сохранив их расширения.
Например: «В первом нравится предмет почти во весь экран. Во втором — тёплая кнопка на тёмном фоне. Для моего сайта нужны эти два приёма». Чем точнее деталь, тем проще увидеть, получилось ли её применить.
Собрать направление из двух референсовПоказать текст ↓
Посмотри два снимка в «Материалы»: [имена файлов]. В первом мне нравится [деталь], во втором — [деталь]. Предложи одно цельное направление для нашего сайта: фон, акцент, шрифт с кириллицей, размер предмета, место заголовка. Объясни каждое решение простыми словами. Не копируй чужой сайт целиком. Пока покажи план первого экрана; после моего выбора изменим его.
4.2. Выберите: своя фотография или генерация
Самый короткий путь — своя фотография. Перенесите её в «Материалы» и попросите Code: «Возьми [имя файла], подготовь hero.jpg для первого экрана и сохрани в Материалы». Когда файл готов, переходите к пункту 4.3. Если хотите создать новый кадр, раскройте инструкцию Higgsfield ниже. Для него нужен отдельный платный план: условия проверьте на https://higgsfield.ai до оплаты.
Создать изображение через Higgsfield: подключение и генерация
Задание и файлы сайта
Кадр → видеоролик
Текст + визуал + кнопка
В том же чате Code отправьте задание ниже. Claude установит официальный инструмент Higgsfield — небольшую программу для связи с сервисом. Если система спросит разрешение на установку, сверьте название пакета: @higgsfield/cli.
Подключить Higgsfield — готовое заданиеПоказать текст ↓
Подключи Higgsfield к этому проекту через официальный CLI. Сверь актуальную инструкцию: https://higgsfield.ai/creator-hub/help-center/integrations/how-do-i-access-higgsfield-via-cli Проверь, доступен ли npm. Если нет, объясни установку Node.js из официального источника для моей системы. Затем выполни по очереди: npm i -g @higgsfield/cli higgsfield auth login npx skills add higgsfield-ai/skills Если нужно выбрать агент для навыков, выбери Claude Code. Покажи, что устанавливаешь и куда. При открытии страницы входа дождись, пока я войду сам. Пока не запускай ни одной генерации. Если доступ из этого режима Claude ограничен, объясни конкретную ошибку и предложи ручной маршрут через сайт.
Откроется браузер. Войдите в свой аккаунт Higgsfield и подтвердите подключение, прочитав запрашиваемый доступ. Вернитесь в Claude Code. Если страница не открылась, попросите Claude показать ссылку входа. Пароль в чат не отправляйте.
Проверить, что связь работаетПоказать текст ↓
Через подключённый Higgsfield покажи мой текущий баланс кредитов. Ничего не генерируй. Подтверди результат реальным ответом инструмента; если вызов не сработал, покажи ошибку и помоги исправить подключение.
Я пользуюсь обычным чатом Claude, а не вкладкой Code
В обычном Claude можно добавить коннектор: Settings → Connectors, в некоторых версиях Customize → Connectors → Add custom connector. Название — Higgsfield. Адрес — https://mcp.higgsfield.ai/mcp . Нажмите Connect, войдите и разрешите доступ. Затем попросите баланс. Это другой способ подключения; для маршрута с файлами сайта выше используется Code и CLI.
Если нужен исходный кадр в обычном чате, попросите Claude открыть окно загрузки Higgsfield. Выберите файл в этом окне и дождитесь подтверждения загрузки. Простое вложение в чат ещё не означает, что генератор получил картинку. После генерации скачайте результат и положите в папку проекта.
Создайте кадр для вашего экрана
Сначала получаем неподвижное изображение. Для нашего примера: предмет справа, слева место для текста, без букв внутри картинки. Для настоящего товара передайте генератору собственное фото и проверьте, что форма и детали сохранились.
Создать предметный кадрПоказать текст ↓
Подготовь одну генерацию изображения через Higgsfield для учебного сайта VOLT. Сначала назови доступную модель, размер и стоимость в кредитах. Дождись моего подтверждения; не запускай дополнительные варианты автоматически. Кадр: вымышленные накладные наушники графитового цвета, матовые чашки, мягкие амбушюры, тонкие металлические детали. Предмет крупный, справа в кадре, вид в три четверти. Тёмный студийный фон, мягкий тёплый свет по краю, хорошо видны материал и объём. Слева свободное тёмное место для заголовка. Горизонтальный формат 3:2. Без надписей, логотипов и интерфейса. После генерации покажи результат. Сохрани исходный файл в «Материалы» и подготовь hero.jpg для сайта. Не переименовывай расширение без преобразования формата.
Откройте картинку целиком. Проверьте форму предмета, края, мелкие детали и место для текста. Если кадр слабый, исправьте одну причину: «наушники теряются в темноте — добавь свет на переднюю чашку». Видео делаем только из выбранного кадра.
Хочу сделать изображение на сайте Higgsfield вручную
На https://higgsfield.ai откройте Image. Выберите доступную модель изображений. Вставьте описание кадра из задания выше, задайте горизонтальный формат, проверьте стоимость и нажмите Generate. Откройте удачный результат, скачайте его и сохраните в «Материалы». Если модель не поддерживает нужное соотношение сторон, выберите ближайшее и попросите Claude подготовить обрезку для сайта.
В галерее Assets можно найти предыдущие результаты. Для реального продукта загрузите его фото в поле изображения-референса выбранной модели. Названия полей зависят от модели; если сомневаетесь, покажите Claude снимок текущего экрана и спросите, где загрузить исходник.
4.3. Встройте кадр и проверьте композицию
Убедитесь, что в «Материалы» есть hero.jpg: попросите Claude показать файл в Finder / Проводнике и откройте его двойным щелчком. Если фотографий пока нет, попросите поставить простую заглушку с пометкой «Фото появится позже» — учебную сборку можно продолжить, но перед настоящим запуском замените её.
Собрать выразительный первый экранПоказать текст ↓
Переделай первый экран в выбранном направлении. Изображение: «Материалы/hero.jpg». Для учебного VOLT: графитовая основа, тёплый персиковый акцент, крупный предмет, заголовок «Ближе к музыке.», пояснение «Наушники, которые хочется рассмотреть. Запишитесь на прослушивание», кнопка «Записаться» с согласованным действием. Сделай предмет главным. Текст и кнопку размести отдельными HTML-элементами. Подбери читаемую гарнитуру с кириллицей, заметную разницу размеров, уверенные поля. На телефоне перестрой композицию, чтобы предмет не обрезался и кнопка оставалась видимой. Не добавляй случайные плашки, градиенты и выдуманные характеристики. Покажи экран на компьютере и телефоне. Для реального проекта используй наши согласованные факты вместо учебного текста.
Вы видите свой первый экран, а не только отдельную картинку. Предмет хорошо читается, заголовок не спорит с ним, кнопка заметна. Неподвижная версия уже вам нравится.
Дополнительно: движение, видео и настоящий 3D
У «объёмного сайта» может быть три разных устройства. Картинка может двигаться внутри страницы. Видеоролик может показывать пролёт камеры. А 3D-модель можно поворачивать с любой стороны. Сначала выберите нужное поведение — тогда понятно, какой файл готовить.
Приблизить, сдвинуть, проявить.
Нужен JPG · CSS или Motion02Пролететь камеройПоказать заранее заданное движение.
Нужен MP4 · Higgsfield03Крутить предметРассмотреть его со всех сторон.
Нужен GLB · Three.jsА. Сначала попробуйте движение без генерации
разницу.
Потяните ползунок: от общего плана к детали.
Исходный кадр. Текст остаётся неподвижным.
Это рабочая демонстрация движения слоя изображения. Потяните ползунок: кадр приближается и сдвигается, заголовок остаётся на месте. Так можно проверить композицию до затрат на видео. Здесь нет скрытого 3D-файла или сгенерированного ролика.
Б. Сделайте короткий пролёт камеры в Higgsfield
Вернитесь в тот же чат с подключённым Higgsfield. Укажите выбранный hero.jpg как начальный кадр. Для первой попытки хватит одного короткого движения: камера чуть обходит предмет. Не просите сразу взрыв на детали, смену комнаты и превращение товара.
Анимировать выбранный кадрПоказать текст ↓
Используй «Материалы/hero.jpg» как начальный кадр для image-to-video в Higgsfield. Убедись, что файл действительно передан генератору. Подбери доступную модель, поддерживающую исходное изображение, и ближайшую длительность к 5 секундам. Назови стоимость, дождись моего подтверждения. Один вариант, без автоматических повторов. Движение: камера медленно смещается по небольшой дуге вокруг наушников; предмет сохраняет форму, материал и положение. Мягкий тёплый свет по краю. Без монтажных склеек, текста, смены фона, деформации амбушюр и дополнительных деталей. Начало и конец спокойные. Покажи результат целиком. Сохрани исходник и подготовь «Материалы/hero.mp4» и постер «Материалы/hero.jpg». Сообщи размер готовых файлов. Не заменяй исходный выбранный кадр без моего согласия.
Тот же шаг вручную: изображение → видео
На сайте Higgsfield откройте Video. Выберите модель с поддержкой начального изображения — Image to Video. Загрузите выбранный кадр, вставьте описание движения из задания выше, задайте доступную короткую длительность. Проверьте стоимость перед Generate. Скачайте удачный ролик и положите его в «Материалы»; попросите Claude подготовить MP4 для веба.
Просмотрите начало, середину и конец ролика. Наушники должны оставаться одной и той же моделью. Если детали плывут, уменьшите движение камеры и повторите только после оценки стоимости. Не прячьте дефекты размытиями поверх видео.
В. Поставьте ролик на первый экран
Встроить видео на сайтПоказать текст ↓
В «Материалы» готовы hero.mp4 и hero.jpg. Встрой ролик в первый экран: постер виден сразу, текст и кнопка находятся поверх отдельными элементами. Видео без звука, playsinline; видимая кнопка «Проиграть / Пауза». Для первого варианта запускай по нажатию. На телефоне и при prefers-reduced-motion оставь постер до явного действия пользователя. Не загружай весь ролик до появления основного текста. При ошибке загрузки сохраняй полноценный экран с постером. Оцени вес и сожми копию видео, сохранив исходник. Проверь на узком экране и медленном соединении.
Хочу, чтобы камера двигалась от прокрутки
Сначала проверьте обычное видео. Затем можно связать прокрутку с моментом ролика: вверху его начало, внизу конец. Для резкого перехода к любому кадру видео иногда нужно перекодировать; если проигрыватель дёргается, Claude должен проверить файл, а не добавлять ещё анимаций.
Связать видео с прокруткойПоказать текст ↓
Возьми наш проверенный hero.mp4. Сделай отдельную секцию, где обычная прокрутка страницы плавно меняет currentTime видео от начала к концу. Не перехватывай колесо мыши и не блокируй выход из секции. Подписи: «Форма» → «Материал» → «Детали»; для реального товара возьми подтверждённые факты. Сначала реализуй небольшой пример и проверь плавность перемотки. При необходимости подготовь отдельную версию видео для быстрого доступа к кадрам. Если используешь GSAP ScrollTrigger, объясни зачем. На телефоне и при reduced motion покажи статичные кадры с обычным текстом. Кнопка и содержание доступны независимо от видео.
Мне нужен настоящий 3D: вращение мышью или пальцем
Для свободного вращения нужен файл модели GLB или GLTF. Его можно подготовить в 3D-редакторе либо взять из библиотеки с подходящей лицензией. Красивая сгенерированная картинка такого файла не содержит. Попросите сначала отдельный просмотр модели, затем встраивайте в сайт.
Встроить 3D-модель через Three.jsПоказать текст ↓
В папке «Материалы» есть модель [имя.glb] и постер [имя.jpg]. Сделай отдельный пример просмотра через Three.js: мягкий студийный свет, аккуратное положение камеры, вращение предмета мышью или одним пальцем. Ограничь масштаб, не мешай обычной вертикальной прокрутке. Покажи размер файлов. При недоступном WebGL или ошибке загрузки оставь постер. Текст и кнопки должны работать без 3D. Сначала покажи результат отдельно; после проверки встроим его в первый экран.
Где здесь Motion, GSAP и готовые навыки?
Motion пригодится для появления текста и переходов интерфейса. GSAP ScrollTrigger — для последовательности сцен при прокрутке. Three.js — для настоящей объёмной модели. Для одного плавного появления достаточно CSS. Назовите Claude конкретное движение; инструмент он подберёт под существующий сайт.
У Higgsfield есть готовый Website Builder: https://higgsfield.ai/skills/website . Он объединяет подготовку визуала и сборку сайта. После подключения можно попросить Claude проверить доступность этого навыка и предложить план для вашей папки. Прежде чем запускать весь процесс, согласуйте сцены и расход кредитов; не поручайте бесконтрольно переделать готовый сайт.
Вы понимаете, что используется: изображение, видео или модель. Движение помогает рассмотреть продукт. На телефоне всё читается; без анимации сайт тоже работает.
Доведите страницу до работающего сайта
Посетитель понимает предложение и может связаться с вами.
Теперь продолжите страницу в выбранном стиле. Для аудиобренда подойдут блоки: крупные детали продукта, подтверждённые характеристики, фотографии, условия прослушивания, цена, ответы на вопросы и запись. Для вымышленного примера явно помечайте учебные данные. Отдельные страницы добавляйте, когда у них есть собственная задача.
Куда на самом деле уходит заявка
Заполняет поля и нажимает кнопку
Проверяет данные и передаёт их дальше
Видит заявку в почте или рабочей системе
Собрать остальные блокиПоказать текст ↓
Первый экран согласован. Дострой страницу по нашему списку блоков и сохрани его стиль. Используй только подтверждённые факты и наши материалы. Главное действие ведёт на [настоящая ссылка на запись или контакт]. Сделай меню, работающие ссылки и понятный подвал. Проверь ширины 390 и 1440 пикселей: читаемый текст, удобные кнопки, отсутствие горизонтальной прокрутки. Добавь подписи полей, видимый фокус с клавиатуры и описания содержательных изображений. Если информации не хватает — спроси, а не публикуй заглушку.
Проверьте главное действие руками
Пока сайт работает только на компьютере, попросите Claude: «Открой просмотр шириной 390 пикселей и покажи его мне». Это узкое окно, похожее на экран телефона. Прочитайте предложение: что вы получите, сколько стоит и что произойдёт после нажатия? Проверку на настоящем телефоне сделаем после публикации.
Нажмите основную кнопку. Если это мессенджер — проверьте получателя. Если это форма — отправьте тестовую заявку и найдите её там, где будете обрабатывать обращения. Надпись «отправлено» на странице ещё не доказывает, что заявка дошла.
Как поставить задачу на форму
Подключить настоящую формуПоказать текст ↓
Нужна форма записи с полями [перечень] и получателем [куда должны приходить заявки]. Сначала предложи способ доставки и объясни, какие доступы или сервисы нужны. Не имитируй отправку. Обработай пустые поля, неверный адрес, повторное нажатие и ошибку сети. Сообщение об успехе показывай только после ответа сервера. Секреты храни на сервере. После настройки проведём тест: одна отправка — одна полученная заявка.
Подготовьте сайт к чтению поисковиком
Поисковик должен получить текст страницы и ссылки на остальные страницы. Большая красивая картинка сама по себе не объясняет, что вы предлагаете. Техническую подготовку поручите Claude; ниже уже перечислено, что проверить.
Подготовить страницы для поискаПоказать текст ↓
Подготовь сайт к публикации и индексированию. Проверь, что основное содержание есть в HTML и доступно без запуска анимации. Сделай осмысленные title и description, один главный h1, обычные ссылки между страницами, alt для содержательных изображений. Проверь HTTP-статусы страниц и отсутствие случайного noindex. Подготовь robots.txt без запрета публичных страниц и sitemap.xml только с реальными каноническими URL. Адрес сайта пока [укажу после публикации]. Не используй выдуманный домен. После получения адреса обнови canonical и sitemap. Покажи короткий отчёт: что работает, что ещё требует моего действия.
Проверьте не только красивый экран
В узком окне пройдите меню и все ссылки. Если есть форма, проверьте пустые поля и неверный адрес почты. Попросите Claude открыть несуществующую страницу и показать понятную ошибку. Важный текст должен быть виден, даже если картинка ещё загружается.
Проверить сайт перед публикациейПоказать текст ↓
Проведи проверку по нашему заданию «Сборка»: все страницы и ссылки, главное действие, ошибки формы, читаемость на телефоне, клавиатурная навигация, тяжёлые изображения и видео. Проверь отсутствие секретов и личных файлов в публичной папке. Если нужна микроразметка, добавляй только подходящий тип и подтверждённые факты, без выдуманных рейтингов. Покажи две колонки: проверено с результатом / требует моего действия. Не называй заявку доставленной без подтверждения в месте получения.
Меню и главная кнопка работают. В узком окне текст читается и ничего не уезжает за край. Если есть форма — тестовая заявка получена. Проверка на настоящем телефоне остаётся на следующий шаг.
Опубликуйте и проверьте внешнюю ссылку
Сайт открывается на другом устройстве без вашего компьютера.
Публикация — перенос готовых файлов на хостинг, который отдаёт их посетителям. Домен — удобный адрес вроде название.ru. Первый учебный сайт можно открыть по адресу хостинга, а свой домен подключить позже.
Как страница попадает в интернет
Исходные файлы и просмотр для себя
Опубликованные файлы доступны в сети
Открывает домен по HTTPS
Ниже простой маршрут для статического учебного сайта через Vercel Drop. Бесплатный Hobby рассчитан на личное некоммерческое использование. Для действующего бизнеса выберите подходящий тариф или свой хостинг. Если хостинг уже есть, попросите Claude подготовить публикацию именно туда.
Сначала отправьте задание ниже и дождитесь папки «Публикация». Попросите Claude открыть её в Finder / Проводнике. Внутри должен быть index.html и файлы оформления/изображений — именно эту папку будем загружать.
Подготовить папку к публикацииПоказать текст ↓
Подготовь статическую версию сайта для Vercel Drop в отдельной папке «Публикация». В ней должны быть index.html и только необходимые публичные ресурсы. Проверь относительные пути. Не включай переписку, исходные личные документы, скрытые файлы, пароли и ключи. Покажи, какую папку перетащить. Если наш сайт требует серверной формы или сборки, объясни отличие и дай маршрут для этого проекта вместо неработающего статического экспорта.
Откройте https://vercel.com/drop. Нажмите синюю ссылку folder («папка») и выберите «Публикация» либо перетащите её в большую область страницы. Загружайте всю папку: один index.html потеряет картинки и оформление.
Если сервис просит вход, войдите в Vercel. На экране публикации выберите свой аккаунт или команду, задайте имя проекта латиницей и нажмите Deploy («опубликовать»). Дождитесь окончания загрузки. Сохраните имя проекта и полученную ссылку с окончанием vercel.app — они понадобятся для обновлений.
Публичная ссылка открывает вашу страницу с картинками и оформлением. Если появилась ошибка сборки, раскройте её текст и передайте Claude вместе с названием проекта. Не переходите к Google, пока страница не открывается.
Откройте выданную ссылку в приватном окне и на телефоне через мобильный интернет. Страница должна открываться без входа в ваш аккаунт. Проверьте фотографии, меню и запись ещё раз.
Теперь настроим обновление прежнего адреса. Повторная загрузка на Vercel Drop создаёт новый проект. Для следующих правок используем Vercel CLI — программу, которой будет управлять Claude Code. Отправьте задание ниже и укажите имя уже созданного проекта.
Настроить обновления по прежнему адресуПоказать текст ↓
Наш сайт уже опубликован через Vercel Drop. Постоянный публичный адрес: [вставьте ссылку]. Имя существующего проекта: [имя]. Аккаунт или команда: [название в Vercel]. Настрой обновление ЭТОГО проекта через официальный Vercel CLI. Проверь наличие Node.js/npm; если их нет, помоги установить из официального источника для моей ОС. Установи vercel из npm и запусти vercel login; дождись моего входа в браузере. Из папки «Публикация» выполни vercel link и привяжи её к указанному существующему проекту в правильном аккаунте. Если не находишь проект, остановись и уточни, не создавай новый. Покажи привязанный проект. Обнови canonical и sitemap.xml под постоянный адрес во всех исходниках и публичной сборке. Перед публикацией сохрани рабочую версию, покажи изменения и результаты проверки. После моего подтверждения выполни vercel --prod из привязанной папки. Проверь именно прежний постоянный адрес. Запиши маршрут обновления в README, чтобы следующие сборки сохраняли привязку. Локальные настройки и секреты не включай в публичные файлы.
Когда Claude откроет вход Vercel, войдите в тот же аккаунт, где создан сайт. Вернитесь в Code. Сверьте имя проекта в ответе, затем напишите «Публикуй обновление». После завершения откройте сохранённую прежнюю ссылку и обновите страницу: Cmd+Shift+R на Mac или Ctrl+Shift+R на Windows.
Адрес остался тем же. Claude проверил по нему новый HTML и sitemap.xml. Теперь фраза «опубликуйте обновление» в следующих пунктах означает этот маршрут через тот же разговор Code, а не новую загрузку в Drop.
Хочу адрес вида мой-проект.ru вместо vercel.app
Свой домен — можно подключить позже
В настройках опубликованного проекта найдите Domains — домены. Добавьте купленное имя. Хостинг покажет DNS-записи: тип, имя и значение. Откройте кабинет регистратора → управление DNS и внесите именно выданные значения. Не копируйте IP из чужого примера. После проверки домена дождитесь рабочего HTTPS и снова откройте сайт.
Подготовить безопасное обновление и откатПоказать текст ↓
Запиши точный порядок обновления этого проекта на выбранном хостинге: какие файлы публикуются, как проверить внешнюю ссылку и как вернуть предыдущую версию. Перед текущей публикацией сохрани рабочую версию. Сначала покажи изменения и результаты проверки. После публикации проверь страницы, изображения и главное действие по публичному адресу. Не меняй другие проекты и настройки домена без необходимости.
Внешняя ссылка работает в приватном окне и на телефоне. Страница открывается по HTTPS. Обновления попадают в тот же проект. Вы знаете, где лежит исходная папка и как вернуться к предыдущей версии.
Подключите поиск и измеряйте результат
Поисковик может прочитать страницы, а вы видите посещения и реальные обращения.
Search Console — кабинет, где видно, может ли Google прочитать сайт. Подключение не обещает место в выдаче. Сейчас наша задача — подтвердить владение, передать адреса страниц и увидеть возможные ошибки.
Как поисковик узнаёт о сайте
Обычные ссылки и карта sitemap.xml
Страница доступна, текст есть в HTML
Search Console показывает статус и ошибки
7.1. Добавьте постоянный адрес сайта
Откройте https://search.google.com/search-console и войдите в Google. Если кабинет уже показывает другой сайт, нажмите список ресурсов слева сверху → «Добавить ресурс». Если появился выбор платформ, нажмите «Добавить сайт».
В правой карточке «Ресурс с префиксом в URL» вставьте адрес из браузера целиком: https://ваш-сайт.ru/. Затем нажмите «Продолжить». Для этого маршрута не выбираем доменный ресурс: у него другой способ подтверждения.
7.2. Добавьте метку подтверждения
В окне «Подтверждение права собственности» найдите «Другие способы подтверждения» → «Тег HTML». Раскройте строку. Google покажет фрагмент, начинающийся с <meta name="google-site-verification". Нажмите «Копировать». Оставьте это окно открытым.
Вставить метку GoogleПоказать текст ↓
Добавь в <head> главной страницы этот тег подтверждения Google Search Console без изменений: [вставьте весь тег, скопированный у Google] Не показывай его в видимом тексте страницы. Сохрани существующие метаданные. Подготовь обновление сайта и после публикации проверь наличие именно этого тега в HTML по публичному адресу.
Вернитесь в Code и напишите: «Опубликуй добавленную метку в наш прежний проект по инструкции README. Проверь её в HTML по публичной ссылке». Дождитесь подтверждения публикации. Затем вернитесь в открытое окно Search Console и нажмите «Подтвердить». После успеха откройте ресурс. Метку с сайта не удаляйте.
Google сообщил, что право собственности подтверждено. Если вместо этого ошибка — следующий раскрываемый блок поможет найти причину. Созданный на компьютере файл без публикации Google не видит.
Google не нашёл метку
Чаще всего обновление осталось на компьютере, опубликовано в другой проект или проверяется другой адрес. Скопируйте сообщение Google в Claude вместе с публичной ссылкой и попросите проверить HTML именно этой страницы. Убедитесь, что не требуется пароль и нет перенаправления на другой домен. Нажимайте повторную проверку после исправления, а не подряд.
7.3. Передайте список страниц
Sitemap — файл со списком адресов сайта. Он помогает сообщить Google, какие страницы существуют. Для небольшого одностраничника список будет коротким — это нормально.
Откройте в браузере https://ваш-сайт.ru/sitemap.xml. Замените «ваш-сайт.ru» своим адресом. Вы должны увидеть список URL, а не ошибку 404, страницу входа или главную страницу сайта. Если файла нет — попросите Claude создать и опубликовать его.
В Search Console слева нажмите «Файлы Sitemap». В поле нового файла впишите sitemap.xml, если начало адреса уже стоит слева. Если поле пустое целиком, укажите полный адрес файла. Нажмите «Отправить».
7.4. Проверьте одну страницу
Нажмите «Проверка URL» слева или верхнюю поисковую строку. Вставьте полный адрес главной страницы и нажмите Enter. Дождитесь результата.
Если написано, что URL есть в Google, страница уже известна индексу. Если его нет, нажмите «Проверить страницу на сайте» (в другой версии — «Проверить опубликованную страницу»). При отсутствии препятствий нажмите «Запросить индексирование», если кнопка доступна. Для важных внутренних страниц повторите отдельно.
Индекс — список страниц, которые Google подготовил для поиска. Проверка опубликованной страницы показывает текущее состояние, а данные об индексе могут отставать. Запрос не гарантирует включение и не задаёт точный срок. При ошибке сначала исправьте её; ежедневное повторение запроса не ускоряет очередь.
7.5. Отделите посещения от обращений
Search Console помогает понять, что происходит с сайтом в Google. Веб-аналитика показывает посещения и действия на самом сайте. Полученная заявка — отдельный результат: нажатие кнопки ещё не означает, что человек записался.
Три разных результата
Аналитика зарегистрировала визит
Сработала цель главной кнопки
Заявка дошла до получателя
Откройте https://metrika.yandex.ru и войдите. Нажмите «Добавить счётчик». Укажите имя, адрес сайта без https://, часовой пояс и валюту. Прочитайте условия сервиса, затем продолжите и заполните профиль сайта. Вебвизор для первого подсчёта визитов включать необязательно. В созданном счётчике откройте «Настройка» → «Счётчик» → «Скопировать» у кода установки. Официальный порядок: https://yandex.ru/support/metrica/ru/general/creating-counter .
Подключить аналитику и проверяемую цельПоказать текст ↓
Подключи выбранную аналитику [сервис] к нашему сайту. Код или идентификатор из моего кабинета: [вставить]. Не выдумывай идентификатор и не дублируй уже установленный счётчик. Покажи, что и куда добавил. Настройки согласия учти по принятой для проекта политике. Предложи две отдельные цели: клик по главной кнопке и успешная отправка формы, если её подтверждает сервер. Не отправляй имена, телефоны, почту и содержимое заявок в аналитику. После публикации дай мне короткие шаги проверки визита и каждой цели; непроверенное отметь отдельно.
После публикации откройте свой сайт в отдельном окне и перейдите по нескольким страницам. Вернитесь в Метрику → «Отчёты» → «Посещаемость», выберите сегодняшний день. Дайте данным время появиться. Если визита нет, попросите Claude проверить счётчик по публичному адресу; также проверьте блокировщик рекламы и настройки согласия на сайте.
В отчёте появился тестовый визит. Это ещё не заявка. Для первой версии со ссылкой на мессенджер достаточно считать клики по кнопке; полученные обращения отдельно сверяйте с самим мессенджером.
После запуска смотрите на весь путь: люди приходят → находят предложение → выполняют действие → обращение действительно получено. Если посещения есть, а обращений нет, проверьте сначала понятность предложения и работу кнопки. Новая анимация сама по себе эту проблему не решит.
Сайт открыт по постоянному адресу, формы проверены, поиску доступны страницы. Вы отличаете просмотр от заявки и знаете, как выпустить следующую правку без потери рабочей версии.
Если застряли
Одно сообщение, с которым Claude сможет разобраться.
Передайте Claude три вещи: что вы делали, что ожидали и что получилось. Приложите снимок или полный текст ошибки. Не начинайте весь сайт заново из-за одной сломанной кнопки.
Разобраться с ошибкойПоказать текст ↓
Я на шаге [номер и действие]. Ожидал [результат], но вижу [что произошло]. Прикрепляю снимок или текст ошибки. Сначала найди причину. Исправь только то, что мешает этому шагу, сохранив остальную работу. Проверь результат и объясни одним коротким списком, что мне нажать дальше.
После запуска меняйте сайт небольшими порциями: одна причина → одна правка → проверка. Сохраняйте удачную версию перед большой переделкой. Красивый экран и работающая запись проверяются отдельно — оба результата нужны.
Короткий словарь: промпт — задание, которое вы отправляете агенту; локальный просмотр — сайт пока только на вашем компьютере; публикация или deploy — новая версия в интернете; хостинг — место, где сайт работает; домен — его адрес; sitemap — список страниц для поисковика.
Инструкции сервисов
Если название кнопки изменилось, сверяйтесь с актуальной справкой.
Claude Desktop: https://code.claude.com/docs/en/desktop-quickstart — установка и начало работы. Режимы и предпросмотр: https://code.claude.com/docs/en/desktop .
Публикация: https://vercel.com/docs/deployments . Ограничения Hobby: https://vercel.com/docs/plans/hobby .
Google: добавление ресурса https://support.google.com/webmasters/answer/34592?hl=ru ; подтверждение https://support.google.com/webmasters/answer/9008080?hl=ru ; Sitemap https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=ru ; проверка URL https://support.google.com/webmasters/answer/9012289?hl=ru .
Обновление Vercel Drop: https://vercel.com/kb/guide/vercel-drop-vs-netlify-drop . Привязка прежнего проекта: https://vercel.com/docs/cli/link . Публикация через CLI: https://vercel.com/docs/cli/deploy .
Higgsfield: подключение Code https://higgsfield.ai/creator-hub/help-center/integrations/how-do-i-access-higgsfield-via-cli ; способы связи и проверка https://higgsfield.ai/creator-hub/help-center/integrations/how-do-i-connect-higgsfield-to-ai-agent ; правила кредитов https://higgsfield.ai/creator-hub/help-center/integrations/what-is-higgsfield-mcp ; обычный Claude https://higgsfield.ai/blog/claude-higgsfield-mcp-creative-studio ; изображение в видео https://higgsfield.ai/image-to-video-ai . Инструкции сверены 12 октября 2026.
Предметный кадр VOLT создан ИИ для этого учебного примера. Демонстрация движения в гайде сделана кодом из одного изображения; она не выдаётся за ролик Higgsfield. Генерацию видео вы выполняете в своём аккаунте по шагу 4.
Основы поиска: https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ru . Подключение домена: https://vercel.com/docs/domains/working-with-domains/add-a-domain . Аналитика: https://yandex.ru/support/metrica/ru/general/creating-counter ; https://support.google.com/analytics/answer/9304153?hl=ru .