Как сделать сайт через Claude Code без программирования: пошаговый гайд

Что понадобится

• Аккаунт Claude с подпиской Pro ($20/мес) — для Claude Design и Claude Code
• Claude Code установленный на компьютере — инструкция для macOS
• Аккаунт на Vercel (бесплатно) — для деплоя
• Домен (опционально) — можно начать с бесплатного *.vercel.app
• 1–2 часа времени на первый проект

Знание HTML, CSS, JavaScript не требуется.

Шаг 1: Создайте прототип дизайна в Claude Design

Claude Design — инструмент от Anthropic для создания UI-прототипов в браузере. Вы описываете страницу текстом, AI рисует HTML/CSS в режиме реального времени.

Откройте claude.ai → вкладка Design и опишите ваш сайт. Чем подробнее — тем точнее результат:

Сделай лендинг для Telegram-комьюнити AI-маркетологов.
Стиль: светлый фон, неоново-зелёные акценты (#39e06e),
футуристичный как Blade Runner, но не тёмный.
Шрифты: Space Grotesk + JetBrains Mono.
Структура:
1. Hero: заголовок "Комьюнити мидл и сеньор маркетологов",
   4 преимущества, кнопка "Вступить бесплатно", фото
2. Бегущая строка со статистикой
3. Блок "1 маркетолог = команда 10"
4. О себе: Дмитрий Коновалов, CMO, кейсы
5. Форматы: бесплатный и PRO
6. CTA на тёмном фоне

Итерируйте в чате: «сделай заголовок крупнее», «добавь соцдоказательство 400+ участников», «убери блок про цены» — каждое изменение применяется мгновенно.

Советы по работе с Claude Design

• Загружайте референсы — скриншоты сайтов которые нравятся. AI учтёт стиль
• Описывайте целевую аудиторию — это влияет на тональность и акценты
• Просите конкретные правки, не «сделай лучше»
• Используйте вкладку Tweaks для быстрого изменения цветов и текста CTA

Шаг 2: Передача в Claude Code

Когда дизайн готов — нажмите «Handoff to Code» (или иконку экспорта) в Claude Design. Это создаст архив с HTML-файлами и передаст задачу в Claude Code.

Альтернативный путь — скопировать ссылку на дизайн-файл и открыть в Claude Code:

cd ~/my-landing
claude

# В сессии Claude Code:
Fetch this design file and implement it:
https://api.anthropic.com/v1/design/h/YOUR_DESIGN_ID
Implement: landing.html

Claude Code прочитает дизайн-файл, разберёт README с инструкциями и начнёт реализацию.

Шаг 3: Доработка и наполнение контентом

Дизайн перенесён в код — теперь наполняем реальным содержимым. В сессии Claude Code:

Замени плейсхолдеры на реальный контент:
- Заголовок Hero: "Закрытое сообщество мидл и сеньор маркетологов, которые растут с ИИ"
- Преимущество 1: "Кейсы с реальными цифрами — снижаем CPL, разбираем инструменты"
- Статистика в тикере: ×6.3 рост выручки, ×33 SEO-трафик, ROMI 300%+
- CTA кнопка: "Вступить бесплатно"
- Ссылка Telegram: https://t.me/dima_konovalov_edtech

Проверьте мобильную версию:

Проверь адаптив для мобильных — ширина 375px.
Если что-то ломается — исправь.

Шаг 4: Деплой на Vercel

Vercel — бесплатный хостинг, идеальный для статических сайтов. Деплой занимает 2 минуты.

Установите Vercel CLI

npm install -g vercel
vercel login

Задеплойте проект

cd ~/my-landing
vercel deploy --yes

Через 30 секунд получите URL вида https://my-landing-xxx.vercel.app — сайт уже в интернете.

Шаг 5: Подключение собственного домена

Добавьте домен в Vercel:

vercel domains add yourdomain.ru

Vercel покажет какую DNS-запись нужно добавить у регистратора. Для большинства случаев — одна A-запись:

Тип	Хост	Значение
A	@	76.76.21.21
CNAME	www	cname.vercel-dns.com

После обновления DNS (10–60 минут) сайт будет доступен на вашем домене. HTTPS — автоматически.

Ключ к успеху: правильные промпты для Claude Code

Большинство проблем при создании сайтов через Claude Code — из-за нечётких промптов. Вот работающий подход:

Хорошая структура промпта для новой задачи

[Контекст] Это лендинг AI-комьюнити для маркетологов.
[Задача] Добавь блок с 3 кейсами после секции About.
[Требования]
- 3 карточки в ряд
- Каждая: тег, заголовок, метрика "было → стало", описание 2 предложения
[Данные]
- Кейс 1: Яндекс.Директ, CPL с 4200₽ до 1400₽
- Кейс 2: Промо-страницы, дочитывание с 380₽ до 18₽
- Кейс 3: Лендинг, конверсия с 3% до 15%

Реальный кейс: как создавался ai-mrkt.ru

Именно эта связка использовалась для создания сайта, который вы сейчас читаете:

1. Claude Design — 30 минут на прототип: итерировали hero, добавляли блоки, загружали реальные скриншоты кейсов
2. Handoff в Claude Code — 10 минут: Claude Code прочитал дизайн-файл и создал production-ready HTML
3. Наполнение контентом — 15 минут: заменили плейсхолдеры, добавили реальные цифры и ссылки
4. Vercel деплой — 5 минут: одна команда, сайт в интернете
5. Домен — 5 минут + 30 минут ожидания DNS

Итого: 1 час. Без программиста. Без дизайнера.

Часто задаваемые вопросы

Сколько стоит сделать сайт через Claude Code?

Стоимость: Claude Pro $20/мес + Vercel бесплатно + домен ~$5–15/год. Создание простого лендинга стоит $0.5–2 в токенах. Полноценный сайт с несколькими страницами — $5–15. Это несопоставимо дешевле фрилансера или агентства.

Можно ли сделать многостраничный сайт?

Да. Claude Code отлично справляется с многостраничными сайтами. Реальный пример: сайт-каталог на 1800+ страниц был создан за 1 день. Трафик вырос в 33 раза за 2 года после публикации.

Как обновлять сайт после создания?

Откройте Claude Code в папке проекта и опишите что нужно изменить. После изменений — vercel deploy. Весь цикл «изменение + деплой» занимает 5–10 минут.

Будет ли сайт нормально отображаться на телефоне?

Claude Code умеет делать адаптивный дизайн — достаточно попросить: «проверь и исправь мобильную версию для ширины 375px». В 90% случаев с первого раза.