УРОК 01 / 16 · 4 ШАГА · 45-60 минут с практикой
Ваш первый сайт
Создадим сайт для вымышленного фотографа Анны, откроем его и внесём одно улучшение.
- Зачем это вашему бизнесу
- Первая работающая страница покажет, на что способен Claude, — и у бизнеса появится что-то настоящее вместо идеи в голове.
- В конце урока
- Изменение видно, главная кнопка по-прежнему работает.
ШАГ 01
Откройте проект в Claude
- Откройте приложение на компьютере, войдите и выберите Claude. Если приложение ещё не установлено, откройте официальную инструкцию внизу урока.
- Создайте пустую папку anna-first-site и выберите её как проект. Попросите Claude подтвердить, в какой папке он работает.
Результат: Claude называет вашу пустую папку проекта.
Показать, где нажать
Claude / РАЗБОР ИНТЕРФЕЙСА
Найдите свой проект и вернитесь к задаче
Папки проектов
Выберите локальную папку с вашим сайтом. Названия сессий выше — не папки.
ШАГ 02
Отправьте запрос на создание сайта
- Скопируйте запрос ниже в эту задачу. Дождитесь результата и выполните настройки, которые предложит Claude.
Прочитать запрос
В этой пустой папке создай адаптивный сайт на Next.js для Анны — вымышленного семейного фотографа. Нужны первый экран, услуги, три этапа съёмки и контакты. Стиль: тёмный графит, тёплый светлый текст и медный акцент. Кнопка «Обсудить съёмку» должна прокручивать страницу к контактам. Обозначь учебные данные; не выдумывай отзывы и контакты. Пока работаем локально, без аккаунтов и оплаты. Просто объясни недостающие настройки, запусти сайт и дай точный адрес просмотра. Если папка не пустая, сохрани существующие файлы.
Результат: Вы получили адрес просмотра сайта или конкретный шаг, который нужен для запуска.
Показать, где нажать
Claude / РАЗБОР ИНТЕРФЕЙСА
Где написать задание для Claude
Напишите или вставьте запрос
Нажмите на поле сообщения и вставьте своё задание. В примере — запрос на создание сайта фотографа.
ШАГ 03
Откройте и попробуйте сайт
- Откройте точный адрес от Claude. Прокрутите страницу до конца, нажмите главную кнопку и обновите сайт.
- Сузьте окно браузера: текст и кнопки должны помещаться. Адрес localhost работает на компьютере, где запущен проект.
Результат: Страница открывается после обновления, кнопка ведёт к контактам.
Показать, где нажать
Claude / РАЗБОР ИНТЕРФЕЙСА
Слева — задание, справа — сайт
Переписка
Здесь отправьте задание Claude и прочитайте ответ.
ШАГ 04
Сделайте одно улучшение
- Попросите одно конкретное изменение — например, сократить заголовок. Откройте результат и сравните.
- Если что-то не работает, напишите адрес, что нажали, чего ожидали и что произошло. Следующий урок продолжайте в этом же проекте.
Результат: Изменение видно, главная кнопка по-прежнему работает.
Если что-то не получается
Сайт не открывается
Отправьте Claude точный адрес и ошибку. Попросите запустить сайт в этом проекте и дать работающий адрес.
Claude объясняет, но не создаёт сайт
Проверьте выбранную папку. Попросите Claude внести в ней изменения, открыть результат и объяснить недостающие настройки.