От быстрого прототипа до сайта в интернете

Экран делится на две части. Слева — чат, где вы объясняете словами. Справа — то, что вы создаёте, уже работающее.

01 02 03 04 Выбор План Сборка Результат Сайт, документ, игра или Предлагает структуру и Справа видно, как Готовая штука, с которой с нуля. Claude задаёт уточняет детали. Можно пишется код на HTML, можно заготовленные вопросы. поправить или сказать CSS и JavaScript. взаимодействовать и «погнали». давать правки.

→ → →

✓ 5 вопросов Сайт ✓ Карточка результата <section> Какая профессия тебе подходит? Документ ✓ Кнопка «заново» <h1>Тест</h1> <button>… Погнали → Логика и данные Игра </section>

СУТЬ Достаточно говорить, что хотите — без вникания в то, как оно устроено под капотом.

Поделиться — одной кнопкой claude.site/proftest-x9k 2

Кнопка Share создаёт публичную ссылку — отправляйте кому угодно. Никакого хостинга подключать не нужно, Claude держит всё у себя. Ссылка полностью публичная — Artifacts закрывают первый этап: идея есть, времени откроет каждый, у кого она есть. ИТОГ Без секретов и личных данных. мало — за минуту смотрите на работающий результат. Работает, пока артефакт Если идея рабочая — переходите к более серьёзным инструментам. опубликован — закрыли доступ, Если нет — выкинули и пробуете дальше. ссылка перестала открываться.

Бесплатные тарифы дают лимит на публичные артефакты — для прототипа хватает.

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

Никаких постоянных интеграций — только текущее состояние фоновые задачи Артефакт не держит живых подключений и ничего не делает в фоне. Он показывает данные на момент живые подключения открытия — и всё. Нужны свежие данные или работа по расписанию — это Cowork и коннекторы. ✓ снимок «сейчас»

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

Это прототип, не продакшн Живёт внутри Claude Маленькая самостоятельная вещь. Для серьёзного проекта Крутится в браузерном окне Claude — не на вашем домене и — Claude Code и настоящий хостинг. инфраструктуре.

ВЫВОД Artifacts — чтобы быстро проверить идею. Идея рабочая — переходите к более серьёзным инструментам.

Не описываете каждый шаг и не копируете результаты руками. Сказали, какой нужен результат — дальше агент сам решает, как его собрать.

Ваша цель Открывает документы Переключает программы словами, один раз → Решает порядок шагов Складывает на диск

Cowork есть только в десктопном приложении — агенту нужен доступ к вашей файловой системе, а у браузера его нет.

«Прочитай каждый PDF, переименуй по схеме ГГГГ-ММ-ДД_описание из содержимого, дубликаты убери в подпапку».

scan_001.pdf

→ 2026-01-15_счёт-хостинг-таймвеб.pdf IMG_20260228.pdf 2026-02-28_счёт-аренда-офиса.pdf dogovor_final_FINAL.pdf Агент читает содержимое 2026-01-10_договор-услуги-ромашка.pdf Документ_новый(1).pdf а не имена 2026-04-02_счёт-хостинг-таймвеб.pdf · scan_004 scan_004.pdf дубликаты · 1 файл внутри …ещё 10 файлов

scan_001 = Документ_новый(1) — дубль, в подпапку. А scan_004 — тот же хостинг и сумма, но дата другая — счёт за апрель, не дубль. Кто сравнивает имена, ошибётся; кто читает содержимое — нет.

Каждый квартал — та же папка ИП, те же правила именования. Проект хранит файлы, инструкции и память между запусками.

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

вы: «Таймвеб — это хостинг» Файлы Инструкции Память → в следующей сессии агент уже это знает

Обычный ответ — снимок: верен в момент написания, устаревает на следующий день. Живой артефакт устроен иначе.

Что это Как открываете HTML-страница, которую Claude собирает один раз. При каждом открытии она через коннекторы заново берёт свежие данные и сама рисует таблицы и графики. Фильтры и сортировка запоминаются. 1 Открываете вкладку утром 2 Жмёте «Обновить» 3 Видите картину дня на сейчас

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

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

«New task» и частота ГЛАВНОЕ ОГРАНИЧЕНИЕ

01 Описываете, что нужно сделать, и задаёте, как часто Только пока компьютер включён повторять. Запуск по расписанию работает, только если приложение Claude открыто. Всё происходит на вашей машине.

Claude берётся сам 02 В нужное время выполняет задачу и сохраняет результат — без вас.

Можно привязать к проекту 03 Тогда задача работает в его контексте и с его файлами. 😴 Спящий ноутбук задачу не выполнит.

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

📁 Документы и файлы 📊 Данные и таблицы

→ Разобрать папку загрузок и разложить по темам → Свести выгрузки из банка в одну таблицу → Переименовать сканы по содержимому → Посчитать итоги и построить график → Собрать из десятка docx один отчёт → Вынуть данные из PDF-счетов в Excel

✉️ Почта и календарь 🧩 Разбор и подготовка

→ Собрать письма без ответа дольше суток → Конспект из длинного PDF или записи → Сводка встреч на сегодня из календаря → Презентацию из текста заметок → Черновики ответов по шаблону → Проверить договоры по чек-листу

ПРИНЦИП Это не предел: есть цель и доступ к нужному — остальное агент берёт на себя.

Те же четыре группы под другим углом — от учёбы до рутины по расписанию.

📚 Учёба и тексты 🏠 Личное и быт

→ Конспект и карточки из учебника → Разобрать фотоархив по датам и событиям → Вычитать текст и собрать правки в список → Свести чеки и посчитать траты за месяц → Перевести папку документов и сохранить рядом → Спланировать поездку из заметок и ссылок

🔎 Веб и ресёрч 🔁 Рутина по расписанию

→ Сравнить варианты и собрать таблицу плюсов → Каждое утро разобрать папку загрузок → Выписать цены и условия с нескольких сайтов → Раз в неделю собрать сводку продаж → Собрать список источников по теме → В конце месяца подготовить отчёт по шаблону

КАК ПОНЯТЬ Если задача повторяется, требует ваших файлов или нескольких сервисов сразу — это кандидат на Cowork.

За всеми инструментами один и тот же Claude. Отличие — куда он дотягивается и где остаётся результат. Чем ниже в списке, тем «глубже» в ваш проект.

Чат только разговор 💬 в окне диалога Отвечает текстом и кодом. До ваших файлов и проектов не дотягивается.

Artifacts рабочая вещь 🖥 внутри окна Claude Результат — живая страница в браузерном окне Claude. На ваш компьютер не выходит.

Cowork ваши файлы 📁 файлы на диске Открывает документы и программы на вашем компьютере и складывает готовое обратно.

Claude Code код проекта 📦 репозиторий с кодом Меняет исходники проекта напрямую и фиксирует коммитами — результат растёт вместе с проектом.

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

Ваш компьютер claude.ai/code В десктопном приложении открываете репозиторий с диска — агент работает прямо на нём. Удобно, Вы → задача → Claude клонирует репо → когда проект уже скачан. Pull request на проверку

Агент работает на серверах Anthropic, через GitHub. Локально качать ничего не нужно.

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

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

1 · Задача 2 · Дифф 3 · Правки 4 · Коммит Описали цель словами — Не то — говорите Устраивает — фиксируем что хотите получить. словами, агент и берём следующую докручивает. задачу.

+ <section class="reviews"> + <blockquote>Отлично!… → + </section> → → <a href="tg">Связаться</a>

«Добавь секцию с «Сделай отзывы в две ✓ commit: add Видно построчно: что было и что тремя отзывами» колонки» reviews стало.

↺ Вы держите в голове, что хотите получить, а механическую работу с кодом ведёт агент.

CLAUDE.md — память проекта # Лендинг студии Чтобы не повторять одно и то же каждую сессию, в Статический сайт, HTML + репозитории заводят файл CLAUDE.md. Агент читает его в CSS. начале каждой сессии. ## Запуск открыть index.html в О чём проект и как он устроен браузере Какие приняты договорённости ## Договорённости Как запускать и проверять цвета — из brand.css Один раз написали — агент перестаёт переспрашивать очевидное и без сторонних библиотек реже уходит в сторону.

Задачи через GitHub Routines Несколько сессий Завели issue, упомянули @claude — Повторяющиеся задачи в облаке по Задачи не обязательно делать по агент берёт задачу и присылает pull расписанию или по событию. Раз в очереди. У каждой сессии свой request, привязанный к карточке. неделю обновить зависимости, статус. Мержите — issue закрывается сам. каждое утро собрать сводку issue.

верстает — работает Как в командах разработчиков — но Не переспрашивают — права заданы сводка — ждёт ответа делает агент при настройке баг — готово

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

localhost:3000 🔒 mysite.com

🔒 Только на вашем компьютере

→ 🌍 Открывается с любого устройства

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

Раньше нужно было арендовать сервер и всё настраивать. Сейчас хватает бесплатных сервисов: GitHub Pages, Netlify, Vercel, Cloudflare Pages — подключаете репозиторий, сервис публикует файлы.

HTML + CSS + JS Код + база данных Аренда машины Без сервера. Лендинги, портфолио, Без управления сервером. Ставите всё сами. Гибко, но нужно блоги, документация, прототипы. Динамические сайты с логином и уметь работать с Linux. Для первых личным кабинетом. проектов избыточно.

бесплатно $0–50/мес $5–100/мес GitHub Pages Cloudflare Netlify Vercel Railway Render Hetzner DigitalOcean Linode

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

Stateless Stateful Ничего не помнит между запросами. Открыли Помнит данные пользователя между сессиями. страницу, посмотрели, закрыли. Каждый запрос — с Залогинились — сайт знает, кто вы, и завтра с другого чистого листа. устройства покажет ваш профиль и историю.

Лендинг · документация · витрина товаров Аккаунт · история заказов · персональная лента

→ отлично живёт на статике → нужен serverless или свой сервер

Сама витрина товаров — stateless: это просто страницы. Stateful делает её только запоминание пользователя — кто вы, ваш профиль и история.

✓ Хорошая новость: первые проекты почти всегда stateless — спокойно живут на бесплатном GitHub Pages.

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

01 02 03 04 Изменили файлы Коммит на GitHub Pages собирает Через минуту — в сети Правите код сайта в Отправили изменения в GitHub сам собирает и Сайт открыт всему миру. своём репозитории — как репозиторий — и больше выкладывает сайт — без Каждый следующий коммит обычно. ничего не нужно. вашего участия. обновляет его сам.

→ → →

index.html · style.css git commit · push ~ 1 минута username.github.io/repo

✓ Никакого SSH, настроек сервера и сертификатов ✓ Свой сам домен можно подключить, SSL для https — бесплатно и

Pages отдаёт готовые файлы. Как только нужен серверный код — форма, обращение к API, личный кабинет — берут Vercel: тот же принцип «подключил репозиторий — он публикует», но с бэкендом.

Статика Статика + бэкенд ✓ HTML, CSS, JS — лендинги, портфолио, доки ✓ Серверные функции, формы, обращения к API ✓ Бесплатно, просто, привязан к GitHub ✓ Push в репозиторий → авто-сборка и деплой ✗ Не умеет серверный код и базы данных ✓ На каждый pull request — отдельная превью-ссылка ! Сильнее завязаны на платформу, чем простой статикой

username.github.io/repo проект.vercel.app

На GitHub Pages настоящего логина не сделать — нет бэкенда, любой пароль виден в коде. Вход в аккаунт, личный кабинет — это Vercel (серверные функции) или внешний сервис: Auth0, Firebase, Supabase.

Чистая статика — оставайтесь на GitHub Pages. Нужен бэкенд или превью веток — Vercel. Бесплатного тарифа для личных проектов хватает обоим.

✨ Это задание не обязательно. Но если пройдёте сами весь путь от прототипа до сайта — всё уляжется в голове куда прочнее.

01 02 03 Соберите артефакт Разберите папку в Cowork Первая правка в Claude Code Опишите идею из своей сферы и доведите её Дайте агенту папку со своими файлами и Подключите репозиторий, попросите внести до работающей вещи в Artifacts. Опубликуйте поручите задачу — переименовать по небольшую правку и разберите дифф — что через Share и поделитесь ссылкой. содержимому или свести данные в таблицу. было и что стало.

04 05 Напишите CLAUDE.md Выложите на GitHub Pages Опишите свой проект словами: о чём он, как Попросите Claude Code «выложи это на Необязательно всё сразу запускать, какие договорённости. GitHub Pages» и откройте готовый сайт по Даже один шаг из пяти заметно продвинет Посмотрите, как изменится поведение ссылке в интернете. вас. Начните с того, что ближе к вашей агента. работе.

внимание Четыре инструмента — весь путь: от прототипа в Artifacts до сайта в интернете.

Данила Гурачевский tg @dgurachevskii