Соберите сайт двумя способами

Привет! Это Built by You, наш практикум. Сегодня будем делать артефакт — то, что можно показать людям. Мы создадим сайт.

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

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

Скажу честно: сейчас создание чего угодно — сайта, приложения, любого проекта — у разных людей может проходить совсем по-разному. Новые инструменты, новые подключения, новые MCP, новая документация — практически каждую неделю что-то меняется. В видео я показываю свой способ на тот момент. Через полгода, через месяц, а может, и завтра некоторые шаги будут выглядеть иначе. Это нормально: мы учимся. И прежде всего учимся тому, что важнее всего контекст, маленькие шаги и проверка результата по ходу дела. Это остаётся с нами при любой смене инструментов.

Поэтому я выбрала два способа, которыми пользуюсь сама:

• Способ с Lovable. Вы собираете сайт в Lovable, визуально, прямо в браузере. Сейчас Lovable — пожалуй, самый быстрый путь к ссылке на готовый сайт. Этот вариант подойдёт 99% людей. Просто пишете, чего хотите и как это должно выглядеть, — и получаете результат.
• Способ с Claude Code. Мы работаем в Claude Code, в папке на своём устройстве: наши файлы, наш контроль. А в конце самостоятельно публикуем сайт. Он становится доступен в интернете без Lovable и подобных сервисов.

Неправильного выбора здесь нет. Если вам интересно, как всё работает, можно пробовать и переделывать хоть каждый день. Начните с того способа, который вам больше нравится, и постарайтесь не идти на поводу у страха что-то упустить — того самого FOMO.

Откройте это руководство, откройте выбранный ИИ и проведите эксперимент вместе со мной.

Что изменилось после записи (проверено в ноябре 2026 года)

Суть практики в видео осталась прежней. Несколько кнопок переехали. Если ваш экран отличается от того, что вы видите в видео, сначала загляните сюда. А потом сделайте то, что всегда помогает: спросите ИИ.

Claude Design

• Название по-прежнему Claude Design. Открыть его можно на вкладке Дизайн внизу боковой панели claude.ai или по адресу claude.ai/design.
• Функция дизайн-систем пока в бета-версии и доступна на тарифах Pro, Max, Ultra и Team. Сам Claude Design работает и на бесплатном тарифе, но для этого практикума всё равно понадобится платный — он нужен для Claude Code.
• По-прежнему можно передать ему несколько абзацев, файл Figma, репозиторий с кодом, логотипы, шрифты и заметки. Пользователям Claude Code также доступна команда /design-sync, которая создаёт систему прямо из проекта, — сегодня она нам не нужна.
• Когда система готова, включите Опубликовано — так новые проекты и другие инструменты смогут её использовать.
• Варианты отправки переехали. Теперь они находятся под кнопкой Экспорт справа вверху, а не в меню «Поделиться». В экспорте есть: Отправить в Lovable (а также Base44, Canva, Replit, Vercel, Wix и другие), Отправить локальному агенту для работы с кодом, Отправить в Claude Code в браузере и Скачать zip вместо этого. «Поделиться» теперь определяет только то, кто может открыть ваш дизайн.

Lovable

• «Режим агента» теперь называется Режим сборки. Режим планирования и Режим чата остались; переключаться между ними можно в любой момент в поле чата.
• Связь между Claude и Lovable настраивается со стороны Claude, а не в настройках Lovable: в Claude нажмите + → Подключения → Обзор подключений → найдите Lovable → Подключить → войдите в аккаунт. После этого Claude Design сможет отправить дизайн в новый проект Lovable.
• Проверка безопасности теперь запускается автоматически при открытии окна Опубликовать: около десяти секунд, затем сообщение «Проблем с безопасностью не найдено» или число найденных проблем. Для последующих обновлений кнопка называется Опубликовать изменения.
• Над предпросмотром есть переключатель устройств: Компьютер / Планшет / Телефон.
• Бесплатный тариф даёт 5 кредитов на сборку в день, но не больше 30 в месяц, и позволяет показать сайт максимум 10 приглашённым людям. Публичная ссылка для всех доступна на тарифе Pro. Перед началом проверьте lovable.dev/pricing — условия часто меняются.

Claude Code

• Приложение для компьютера называется Claude Desktop; Claude Code находится на его вкладке Код. Установка на Mac: скачайте .dmg, откройте его, войдите в аккаунт и нажмите «Код». Ни терминала, ни Node, ни команд для ввода. Нужен тариф Pro или выше.
• Новый сеанс: выберите Локально → Открыть папку… → вашу папку website/. Режимы разрешений теперь называются Вручную, Принимать правки, Планирование, Автоматически. Оставьте «Вручную»: перед каждой правкой и командой агент спрашивает разрешение, а решение принимаете вы.
• Вам будут доступны модели Opus 5.5 (по умолчанию), Sonnet 5.5, Haiku 5.5. Модель «Sonnet 5» из видео больше недоступна. Для небольших задач — создать CLAUDE.md, переместить файл — выбирайте Haiku 5.5. Для сборки оставьте модель по умолчанию.
• Облачные сеансы называются Claude Code в облаке (claude.ai/code, «Claude Code в браузере»). Именно туда ведёт пункт «Отправить в Claude Code в браузере».
• Процент заполнения контекстного окна находится в карточке Контекст на панели сеанса.

Codex (агент, который обновляет canvas в видео)

• В июле 2026 года OpenAI объединила приложение Codex с приложением ChatGPT для компьютера. Теперь Codex — один из его режимов, рядом с «Чат» и «Работа». Если пользуетесь им: откройте ChatGPT, переключитесь на Codex и откройте папку рабочего пространства. Или просто выполните подготовку в Claude Code — промпты те же.

GitHub, Netlify, Figma

• GitHub: без изменений. Бесплатно, неограниченное количество закрытых репозиториев, регистрация через почту, Google или Apple.
• Netlify: по-прежнему бесплатно. Бесплатный тариф теперь даёт 300 кредитов в месяц — для одной страницы более чем достаточно. Путь импорта: Добавить новый проект → Импортировать существующий проект → GitHub → разрешите доступ → выберите репозиторий → Развернуть сайт. Каждая отправка изменений в GitHub по-прежнему автоматически обновляет сайт. Есть нововведение: у некоторых новых аккаунтов сайт по умолчанию закрытый — если посторонние не могут открыть ссылку, сделайте сайт общедоступным в настройках.
• Figma: команда «Файл» → «Сохранить локальную копию» по-прежнему скачивает файл .fig.

Если ваш экран не похож ни на видео, ни на этот список — это нормально. Каждый раз ИИ, даже тот же самый и при тех же действиях, работает немного иначе. Сделайте скриншот, отправьте его в любой ИИ-чат и спросите, на что нажать.

Часть 1. Что мы создаём и как всё устроено

Артефакт

Одна страница. Ваш продукт в одном предложении, ваша аудитория её же словами, проблема словами клиента, описание того, как всё работает, и одна кнопка: записаться в лист ожидания. Не оплата, не регистрация. На этой неделе мы проверяем идею на прочность, а не запускаем продукт. Лист ожидания ещё и помогает начать разговор с людьми, пока мы только создаём что-то, — как было с этим курсом во время записи видео.

Два способа рядом

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

Что решаете вы и что делает агент

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

• Вы собираете контекст, записываете его в файлы и объясняете, что считать готовым результатом.
• Агент читает файлы, предлагает план и собирает сайт.
• Вы смотрите, что изменилось, прежде чем принять результат. Полезная привычка при работе с ИИ: обсуждать, просить показать изменения, проверять их по ходу дела и только потом говорить «да».

Начинайте с режима планирования даже в таких задачах, как обновление canvas. Это самый безопасный и продуктивный подход.

Правило конфиденциальности для обоих способов

Всё, что вы вставляете в облачный инструмент, покидает ваш ноутбук. Бриф продукта — нормально. Расшифровки интервью с настоящими именами, адреса почты, пароли, токены — никогда. Не передавайте ИИ-агентам конфиденциальные данные, в том числе свой адрес почты. Не советую, совсем не советую. А когда будете делать скриншот, чтобы попросить ИИ о помощи, — а вы будете — сначала проверьте, что на нём видно.

Часть 2. Подготовка инструментов

До начала практикума подготовьте всё из списка. Честная оценка времени на весь процесс: около 90 минут для одного способа. Генерация и подключения занимают время, и это нормально.

Для всех

• Ваше рабочее пространство Obsidian из спринта 2 — с папкой market (анализ комментариев, карта конкурентов, обзор рынка) и папкой product.
• Ваш lean canvas в виде заметки в этом рабочем пространстве. Если его там ещё нет, это ваш первый маленький шаг (ниже).
• Claude — тариф Pro или выше. В него входят и Claude Design, и Claude Code.
• ИИ-агент, который умеет читать ваше рабочее пространство. В видео canvas и бриф создаются в Codex, а сайт — в Claude Code. Для подготовки подойдёт любой из них. Codex теперь находится в приложении ChatGPT для компьютера как отдельный режим. В этом руководстве промпты написаны для Claude Code, потому что для одного из способов он вам всё равно понадобится.

Дополнительно для способа с Lovable

• Аккаунт Lovable на lovable.dev. Бесплатного тарифа достаточно, чтобы собрать и опубликовать эту страницу.

Дополнительно для способа с Claude Code

• Аккаунт GitHub на github.com. Это бесплатно и очень просто. Придумайте имя пользователя и пароль или войдите через Google или Apple — и всё готово.
• Аккаунт Netlify на netlify.com. Зарегистрируйтесь через Google — так проще.
• Приложение Claude Desktop со встроенным Claude Code — вкладка Код. Claude Code работает двумя способами: в терминале на устройстве и в приложении для компьютера. Мы используем приложение. Никакого терминала, обещаю.

Ваш первый маленький шаг — меньше пяти минут

Откройте рабочее пространство и положите свой lean canvas в папку product/, назвав так, чтобы потом найти. Подойдёт lean-canvas.md. Главное не само название, а правила именования. Позже вы будете искать файлы в папках и скажете себе спасибо.

Часть 3. Подготовка контекста — для всех

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

3.1 Обновите lean canvas с учётом данных о рынке

У нас есть lean canvas, который мы когда-то создали по методу Running Lean. Но появились и обновления — новая информация о рынке: анализ комментариев, карта конкурентов, сами конкуренты, обзор рынка и всё такое. Теперь мы обновим canvas.

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

Теперь важная часть. В идеале результат нужно проверить — прочитать и оценить, — прежде чем им пользоваться. Посмотрите, что изменилось. Если всё устраивает, примите изменения. Если нет, объясните, что не так, и дайте агенту попробовать снова.

Такое бывает. В видео агент говорит, что не видит данных canvas, хотя папку мы выбрали. Решение — самое старое правило работы с ИИ: дайте прямой путь к файлу. Чем продвинутее модель, тем меньше объяснений ей нужно. Но если она запуталась, прямой путь всегда лучше описания.

3.2 Превратите canvas в бриф для одностраничного сайта

На основе этого lean canvas мы создадим сайт. Но сначала — бриф.

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

Теперь этот файл — единый источник правды. Создайте в рабочем пространстве новую папку website/ и сохраните туда бриф под именем site-brief.md. Можно скопировать его самостоятельно или попросить агента. В любом случае зайдите в Obsidian и проверьте, что файл действительно там.

Именно так выглядит передача контекста агенту.

3.3 Создайте дизайн-систему в Claude Design

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

Расскажу, как родилась моя дизайн-система, — этот подход можно повторить. Я работала над курсом с ментором. Она специализируется на консультировании по бренду и рассказала мне о тесте сильных сторон характера. Я прошла его, получила свой профиль сильных сторон, а ментор обработала результаты своими инструментами и подготовила аудит моего бренда на их основе. Частью аудита были визуальный стиль и стиль общения — несколько абзацев, буквально несколько. Я передала их Claude Design, и он создал целую систему: для кого она, источники, все файлы, компоненты, цвета, рекомендации по шрифтам. По ходу он задавал мне вопросы. Это заняло какое-то время.

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

• Несколько абзацев о вашем продукте и о том, какое впечатление он должен создавать.
• Файл .fig, если у вас есть макеты в Figma. В Figma: «Файл» → «Сохранить локальную копию», затем загрузите его.
• Код, если он есть, — из GitHub или с вашего компьютера.
• Шрифты, заметки, отзыв ментора — всё, что у вас есть.
• Сайты, которые вам очень нравятся. Отличный способ объяснить, какой дизайн вы хотите: откройте любимый сайт и попросите ИИ описать его бренд, палитру и всё остальное. Можно взять несколько сайтов, объединить то, что вам нравится, и создать что-то очень личное.

Это не замена дизайнеру. Но если вы только начинаете и работаете в одиночку, такой вариант вполне подойдёт. Claude Design рассчитан и на людей без технического опыта.

Когда всё рассказали, просто нажмите «Продолжить». Генерация займёт несколько минут, до пяти. И вы получите дизайн-систему.

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

Сохраните его в рабочем пространстве как design-system.md. Придерживайтесь своих правил именования. Теперь у нас есть ещё одна очень полезная часть контекста.

Более короткий путь, если не хочется проходить весь процесс: попросите Claude Code описать дизайн-систему простыми словами, сохранить её в MD-файл и используйте его дальше. Это может сработать чуть хуже, чем компоненты, потому что компоненты показывают, как всё устроено. Но для быстрого старта, без всех промежуточных шагов, так бывает проще.

Подготовка закончена, когда: файлы site-brief.md и design-system.md лежат в папке website/, и вы прочитали оба.

Часть 4. Способ с Lovable

Выбрали Claude Code? Переходите к части 5.

4.1 Отправьте дизайн-систему в Lovable

Возвращаемся в Lovable. С этого момента мы на серверах Lovable. Поэтому ни бриф, ни другая информация, которую вы вводите, не должны быть конфиденциальными.

Из Claude Design можно отправить то, над чем вы работаете, в Lovable. Можно подключить и другие сервисы, которыми вы пользуетесь: Base44, Replit, Vercel, Wix и так далее. Сегодня работаем с Lovable.

Нужны два условия, а потом всё делается одним нажатием:

1. Claude подключён к Lovable. В Claude: + → Подключения → Обзор подключений → Lovable → Подключить → войдите в свой аккаунт Lovable. У меня подключение уже настроено; это нужно сделать один раз.
2. В Claude Design откройте свою дизайн-систему, убедитесь, что включено Опубликовано, нажмите Экспорт (справа вверху) → Отправить в Lovable.

После этого Lovable добавит стили в проект: вы увидите свои цвета и шрифты как образец дизайна. Если Claude начнёт делать с дизайном что-то не то — в видео он предложил систему для слайдов, — скажите прямо:

Это занимает время. Сейчас связать все инструменты между собой — MCP и прочее — бывает немного непросто, и на это уходит время. В видео это длилось целую вечность. Нам нужно запастись терпением, а если у меня возникают трудности, я спрашиваю ИИ. Мой первый преподаватель по ИИ сказал на курсе «Как создать ИИ-чатбота с ChatGPT»: если возникает проблема, я не паникую, а просто спрашиваю ИИ. Оттуда я это и взяла.

4.2 Первый промпт — в режиме планирования

Переключитесь в режим планирования. Прикрепите site-brief.md или просто скопируйте его содержимое. Затем отправьте первый промпт. Последняя строка делает половину работы.

Сначала план, потом действия. Все агенты в этом курсе работают по этому правилу.

Он задаст вопросы. Отвечайте, как я, намеренно не усложняя:

• Новый проект или существующий? Новый. Если захотим, перенесём позже.
• Какая дизайн-система? Та, что из подключённого проекта Claude Design. Следуй ей в точности.
• Куда отправлять письма для листа ожидания? На вашу почту через кнопку mailto — она открывает почтовое приложение посетителя. Чтобы не усложнять. Позже при желании можно попросить ИИ настроить целую систему управления листом ожидания. Сегодня мы на этом не сосредотачиваемся.
• Дополнительные предложения? Вообще-то предложения хорошие. Но давайте придерживаться брифа, отправим его и посмотрим, что получится.

Одобрите план. Теперь идёт генерация — можно сходить за чаем или сгенерировать что-нибудь своё.

4.3 Честно посмотрите на первый результат

Мой первый результат: курс, присоединяйтесь, хватит просто болтать с ИИ, начните что-то создавать — как это работает — запишитесь в лист ожидания. Довольно аккуратно, я бы сказала. Немного скучно. Определённо нужно дорабатывать. Как и всё остальное.

Для первого результата это нормально. Умение его улучшить — и есть навык.

4.4 Проверьте кнопку, посмотрите на разных устройствах, правьте маленькими шагами

Сначала проверьте кнопку. Нажмите «Записаться в лист ожидания». В видео почтовое приложение не открылось — вместо этого меня перебросило к разделу страницы. Так не пойдёт. Один промпт это исправит.

Пока он исправляет, проверьте устройства. Над предпросмотром есть переключатель: компьютер, планшет, телефон. Посмотрите все три варианта. У меня всё выглядело довольно аккуратно.

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

4.5 По желанию: перенесите страницу в уже существующий проект

Если у вас уже есть сайт в Lovable и вы хотите добавить страницу туда, попросите перенести её в другой проект. Агент предложит варианты. А потом честно скажите:

Самый простой путь, который он мне предложил: открыть другой проект и попросить добавить страницу туда. Предупреждение из записи: при переносе изменился цвет. Любопытно. Но это ИИ, и всё можно поправить: попросите вернуть цвет фона и снова проверьте кнопку на новом месте.

4.6 Опубликуйте

Нажмите Опубликовать справа вверху. Автоматически запустится быстрая проверка безопасности — около десяти секунд. Если она что-то найдёт, дайте Lovable исправить: в видео он именно так и сделал, и исправление сразу опубликовалось. Подтвердите, дождитесь сообщения о публикации и скопируйте URL. Ссылка общедоступная. Откройте её заново и ещё раз нажмите кнопку. Если страница — часть большого сайта, добавьте её в меню. С этого момента после каждой правки нажимайте Опубликовать изменения.

Вообще-то это очень здорово. Мы сделали это вместе.

Если вы выбрали способ с Lovable, сборка закончена. Переходите к части 6.

Часть 5. Способ с Claude Code

Выбрали Lovable? Вы уже всё собрали — переходите к части 6.

5.1 Папка и CLAUDE.md

Откройте приложение Claude Desktop и нажмите Код. Новый сеанс → Локально → Открыть папку… → папка вашего рабочего пространства — та, которую мы создали раньше и в которой только что собрали весь контекст. Можно зайти на уровень глубже и открыть папку website/, ведь мы будем работать над сайтом. Оставьте режим разрешений Вручную: агент спрашивает, вы решаете.

Первый файл — CLAUDE.md. Это заметка, которую каждый новый сеанс читает перед началом работы, чтобы вам не приходилось объяснять всё заново. Задача небольшая — подойдёт модель попроще. В видео это была Sonnet 5; сейчас выберите Haiku 5.5 в списке моделей, а для сборки вернитесь к модели по умолчанию (Opus 5.5).

Проверьте, что файл действительно появился в папке.

5.2 Поместите пакет файлов дизайна в папку

Теперь отправим ту же дизайн-систему в Claude Code. В Claude Design откройте свою дизайн-систему → Экспорт (справа вверху). Вы увидите пункты Отправить локальному агенту для работы с кодом, Отправить в Claude Code в браузере и Скачать zip вместо этого.

В видео я использовала сеанс в браузере. Честно говоря, облачный сеанс не может записывать файлы прямо на ваш Mac. И давать ИИ ссылки, ведущие внутрь ноутбука, тоже не очень безопасно: ими может кто-то воспользоваться. Так что это нормально. Зато он может выдать вам zip — пакет файлов дизайна. Он предложит команды для терминала. Но мы не используем терминал. Нет.

Сейчас самый короткий путь — Скачать zip вместо этого: прямо на Mac, без промежуточного облачного сеанса. Оба пути заканчиваются одинаково: zip-архивом в папке website/.

Скачайте zip в папку website/. Распакуйте двойным щелчком. Ничего сложного. Откройте папку и убедитесь, что файлы на месте.

Затем вернитесь в Claude Code. Посмотрите, насколько заполнен контекст, — на процент в карточке «Контекст». 5% — нормально; свежего сеанса вполне хватит на всю сборку.

5.3 Соберите сайт и проверьте его на localhost

По ходу работы агент будет запрашивать разрешения — читайте, что он хочет сделать, и разрешайте. В видео он сам проверяет вёрстку: первый экран на компьютере, выравнивание. Он знает своё дело. Мне нравится.

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

Мой первый результат: я бы сказала, немного слишком спокойный. И немного затянутый. Но это нормально. Небольшие правки — после публикации: не стоит полировать страницу, на которую пока никто не может зайти.

Что появилось в папке: index.html, файл стилей, ресурсы — плюс ваш бриф, CLAUDE.md и пакет файлов дизайна. Все эти файлы хранят нашу память о проекте. Новый сеанс может подхватить работу в любой момент. В этом и смысл работы в папке.

Теперь можно сравнить. Кто справился лучше — Claude Design вместе с Lovable или Claude Design вместе с Claude Code? Какой вариант вам нравится больше? Мне правда интересно.

5.4 GitHub — память сайта

Мы размещаем сайт в интернете и используем GitHub. GitHub — это своего рода память сайта: там будет сохраняться каждая версия.

Нужен ваш аккаунт GitHub — бесплатно, регистрация через почту, а всё остальное сделает ИИ.

Агент проверит состояние репозитория, подготовит все файлы к сохранению, создаст закрытый репозиторий, отправит файлы и проверит, что они на месте. Вы разрешаете каждый шаг. Затем зайдите на github.com и найдите проект в списке. Я нечасто пользуюсь GitHub, репозиториев у меня немного, — но этот там есть. Видите, всё правда просто.

Если что-то пойдёт не так, вы знаете, что делать: просто попросите ИИ помочь.

5.5 Netlify — разместите сайт в интернете

Зарегистрируйтесь на netlify.com через Google. Честно ответьте на вопросы при первом входе: совсем новичок, хочу опубликовать сайт, менеджер продукта — выбирайте то, что соответствует вам.

Затем:

1. Добавить новый проект → Импортировать существующий проект → GitHub.
2. Разрешите Netlify доступ к GitHub. GitHub может попросить код подтверждения — так он заботится о нашей безопасности.
3. Выберите репозиторий. Подключите к нему Netlify. Настройки сборки определятся автоматически — значения по умолчанию подойдут, Claude Code уже всё подготовил.
4. Развернуть сайт. Идёт развёртывание. Пара минут.

И вот ваша ссылка. Длинная, зато бесплатная, и теперь есть что показать. Проверьте сайт: он подстраивается, когда вы сужаете окно, под планшет и телефон. Откройте его на телефоне. Настоящая страница в настоящем мире.

Если друг откроет ссылку и увидит «сайт не найден» или требование войти в аккаунт, ваш новый сайт Netlify по умолчанию закрытый. Откройте настройки сайта и сделайте его общедоступным.

5.6 Внесите изменение и посмотрите, как сайт обновится

Вернитесь в Claude Code и внесите одну небольшую правку — в видео это был заголовок первого экрана. Затем попросите сохранить изменение коммитом и отправить его в GitHub. Netlify заметит это и сам обновит сайт. Зайдите в Netlify → «Развёртывания»: первое, второе, с упоминанием правки. Кажется, очень полезно.

Теперь у нас две версии одного и того же, обе опубликованы, но разными способами. И мы подключили GitHub. Вообще-то это может пугать. Я знаю. Знаю, потому что сама не технический специалист.

Какой ссылкой делиться. Netlify даёт каждому развёртыванию отдельную ссылку на неизменную версию и один адрес сайта, который всегда показывает последнюю версию. Делитесь адресом сайта. Если вы открыли ссылку и не видите правку, вы скопировали ссылку на отдельное развёртывание. Спросите Claude Code: «Какой у меня постоянный URL в Netlify?»

5.7 Бонус: создайте страницу по скриншоту

В конце видео есть ещё один приём. Чтобы сделать витрину проектов курса, я не писала техническое задание. Я сделала скриншот страницы-образца и отправила его в Claude Code: создай витрину продуктов, которые сделают участники курса, используй скриншот как образец структуры. Та же папка, GitHub уже подключён. Через несколько минут: Создано участниками, опубликовано по-настоящему. Каждый проект здесь начался с идеи человека без технического опыта, а затем прошёл проверку, был собран с помощью ИИ и опубликован. Посмотрите, что получилось у людей. Очень мило. Мне нравится.

Используйте этот приём, когда вам нравится, как устроена какая-то страница.

Часть 6. Опубликуйте, а потом покажите

Какой бы способ вы ни выбрали, теперь у вас есть общедоступная ссылка. Осталось три действия.

Откройте её на телефоне. Настоящее устройство, настоящие впечатления. То, как страница подстраивается под узкий экран, — ваша проверка качества. Ещё раз нажмите кнопку на опубликованной странице.

Отправьте ссылку. Вот тот артефакт, которого вам не хватало на интервью: страница, которую можно отправить человеку или обсудить на интервью и посмотреть, что он на самом деле делает. Отправьте её трём участникам ваших интервью с одним вопросом: вы бы записались? Ответ, письмо, встречный вопрос — это данные, которых пока нет в вашем canvas.

Добавьте её в контрольную точку. Вставьте ссылку на опубликованный сайт и одно предложение в заметку контрольной точки спринта 3, пройдите самооценку и отметьте контрольную точку выполненной. А в самом конце курса, на странице подачи проектов для витрины, я предложу вам поделиться результатом и немного о нём рассказать — как это сделали участники хакатона. Ради этого мы всё и делаем: чтобы вы дошли до момента, когда сможете показать результат и опубликовать его для всего мира.

Пара строк о конфиденциальности, ведь теперь страница открыта всем. Никаких клиентских данных, имён участников интервью и ничего, что вы не показали бы незнакомцу. А если вы собираете почту для листа ожидания, добавьте простую заметку внизу страницы: «Мы используем вашу почту только для связи с вами по поводу этого продукта. Без спама; вы можете в любой момент попросить удалить свой адрес».

Часть 7. Как работать уверенно — что делать, если всё идёт не как в видео

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

Если застряли в любом инструменте, спросите ИИ. Просто откройте любой чат — ChatGPT, Claude, любой чат с ИИ. Отправьте скриншот. Спросите, что делать, куда перейти, как что-то найти. Не отправляйте конфиденциальные данные: адреса почты, пароли, токены и всё подобное, что может оказаться на экране. Следите за этим.

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

Подключения занимают время. MCP, разрешения, коды подтверждения, «ещё генерируется». Терпение — часть настройки. Сходите за чаем.

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

Один промпт — одно изменение. И говорите, что нельзя трогать. «Больше ничего не меняй» — совершенно нормальная фраза.

Если агент не находит файл, дайте прямой путь. Не описание, а путь.

Если модель съедает ваш лимит. Небольшие задачи — CLAUDE.md, переименование, перенос файла — поручайте модели попроще. Мощную оставьте для сборки.

Если при переносе изменились цвета. Это ИИ. Попросите вернуть их обратно. Затем снова проверьте кнопку.

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

Часть 8. С чего начать — план на семь дней

Необязательно проходить весь практикум за один раз. Вот какой темп я выбрала бы, если бы только знакомилась со всем этим.

День 1 — контекст. Положите lean canvas в рабочее пространство. Обновите его с учётом папки market в режиме планирования. Прочитайте, что изменилось. Больше ничего.

День 2 — бриф. Создайте site-brief.md. Прочитайте вслух. Описание проблемы звучит как слова ваших клиентов? Если нет, исправьте формулировки, а не дизайн.

День 3 — дизайн-система. Несколько честных абзацев в Claude Design или один любимый сайт. Экспортируйте MD. Выберите свой способ и запишите его.

День 4 — сборка. Способ с Lovable: подключение, первый промпт в режиме планирования, ответы на вопросы, одобрение плана. Способ с Claude Code: папка, CLAUDE.md, пакет файлов дизайна, сборка, localhost.

День 5 — публикация. Lovable: «Опубликовать», скопировать URL. Claude Code: GitHub, затем Netlify. Откройте сайт на телефоне. Проверьте кнопку на опубликованной странице.

День 6 — отправка. Три участника ваших интервью, по одному вопросу каждому. Наблюдайте за их действиями.

День 7 — проверка и завершение. Одна небольшая правка по результатам наблюдений. Вставьте URL и одно предложение в контрольную точку спринта 3, пройдите самооценку и отметьте её выполненной.

Начните сегодня: откройте рабочее пространство, положите туда lean canvas и отправьте промпт для обновления. Вот и всё. Всё остальное вырастет из этого.

Вы закончили, когда…

• Ссылка на опубликованный сайт открывается на телефоне.
• Кнопка «Записаться в лист ожидания» открывает почтовое приложение — проверено на опубликованной странице, а не в предпросмотре.
• Каждое слово на странице опирается на реальные данные: аудитория и проблема описаны словами клиентов из вашего canvas и исследования комментариев.
• Дизайн соответствует вашей дизайн-системе, а не стандартным настройкам инструмента.
• Для способа с Claude Code: вы знаете, какая ссылка постоянная.
• Ваш URL и одно предложение добавлены в контрольную точку спринта 3.
• Ссылка отправлена минимум трём участникам ваших интервью.

Ваш чек-лист

Отмечайте пункты по ходу дела — маленькие шаги тоже считаются.

Прямо сейчас — прежде чем закрыть эту вкладку

• Положите lean canvas в рабочее пространство — в product/, по своим правилам именования; попросите агента обновить его с учётом папки market в режиме планирования и прочитайте изменения.
• Создайте бриф — агент + canvas + папка → site-brief.md в новой папке website/. Аудитория её словами, проблема её словами, призыв к действию — записаться в лист ожидания.
• Создайте дизайн-систему — несколько честных абзацев в Claude Design или один любимый сайт; экспортируйте MD в рабочее пространство. Выберите свой способ и запишите его.

На этой неделе

• Пройдите весь путь до публикации — выбранным способом, до общедоступного URL. Проверьте кнопку на опубликованной странице. Откройте сайт на телефоне.
• Только для способа с Claude Code: одна правка, коммит и отправка — проверьте, что обновление появилось по постоянной ссылке. Именно ею нужно делиться.
• Отправьте ссылку трём участникам интервью — страница и есть тот артефакт, которого не хватало вашим интервью. Наблюдайте за действиями людей.
• Завершите контрольную точку спринта 3 — URL опубликованного сайта + одно предложение; самооценка; отметка о выполнении. В конце курса именно этот результат попадёт на витрину.

Дальше — контрольная точка спринта 3, затем спринт 4

Вставьте URL опубликованного сайта и одно предложение о нём в заметку контрольной точки спринта 3. Добавьте ответы на два вопроса для размышления: что вы изменили, увидев опубликованную страницу, и о чём спросите первых трёх людей, которым отправите ссылку? Отметьте, как вы использовали ИИ по ходу работы. Пройдите самооценку контрольной точки, затем отметьте её выполненной.

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

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