🎯 О чём этот конспект: Пошаговое руководство по созданию прибыльного контентного веб-сервиса с использованием AI-агента Claude Code. Автор демонстрирует полный цикл: от анализа ниши и конкурентов до разработки на Astro, SEO-оптимизации и получения реального трафика (2600+ сессий) в первый месяц.
👤 Кому будет полезно: Вайбкодерам, инди-хакерам и SEO-специалистам, которые хотят быстро запускать автоматизированные веб-проекты без глубокого написания кода вручную.
✨ Что получите: Готовую методику запуска сайта на базе API, навыки работы с Claude Code в режиме планирования, интеграции с Cloudflare и настройки аналитики для отслеживания AI-трафика (Perplexity, ChatGPT, Bing).
1. Исследование ниши и выбор домена
Контекст: Успех проекта на 80% зависит от выбора правильной ниши. Автор анализирует конкурента в узкой нише (цены на топливо в Чили), выявляет слабые места в их SEO и находит свободный домен с локальным расширением. Использование национального домена (например, .cl для Чили) критически важно для локального ранжирования.
Тайминг: [00:44], [01:26]
Выгода: Понимание потенциала трафика до начала разработки и упрощение SEO-продвижения за счет гео-привязки домена.
Как применить:
- Шаг 1: Анализ конкурентов — [DataWise / Ahrefs] — Проверьте объем трафика и ключевые слова конкурентов. Если у сайта с плохим UX много трафика — это ваша цель.
- Шаг 2: Покупка домена — [Cloudflare / Регистратор] — Выбирайте доменную зону той страны, на которую ориентирован контент.
- Шаг 3: Сбор ключевых слов — [DataWise] — Экспортируйте список ключевых слов конкурента для последующей передачи в AI.
Результат: Подтвержденная ниша с потенциалом 20k+ визитов в месяц и купленный целевой домен.
2. Инициализация проекта и планирование в Claude Code
Контекст: Вместо того чтобы сразу писать код, автор использует режим ultra think в Claude Code. Это позволяет AI-агенту проанализировать задачу, составить архитектуру и задать уточняющие вопросы (например, про выбор карт или доступ к API).
Тайминг: [01:51], [02:40]
Выгода: Минимизация ошибок в архитектуре и автоматическое делегирование задач под-агентам.
Как применить:
- Шаг 1: Подготовка брифа — [Otter.ai] — Надиктуйте идею голосом, транскрибируйте и вставьте в Claude.
- Шаг 2: Запуск планирования — [Claude Code] — Используйте команду для глубокого анализа:
# В интерфейсе Claude Code (или расширении C-Max)
/plan mode ultra
[Вставьте ваш транскрипт идеи, URL конкурента и описание API]- Шаг 3: Делегирование — [Claude Code] — Позвольте Claude запустить агентов для анализа API и структуры компонентов.
Результат: Готовый план разработки на Astro с учетом специфики API и структуры страниц.
3. "Vibe Coding" дизайна и фронтенда
Контекст: Автор использует скриншоты и сторонние инструменты для быстрой итерации дизайна. Вместо ручной верстки он скармливает Claude Code готовые макеты и просит их реализовать с использованием современных эффектов (frosty glass, hover animations).
Тайминг: [04:30], [05:08]
Выгода: Профессиональный вид сайта без найма дизайнера.
Как применить:
- Шаг 1: Генерация макета — [Stitch / Google] — Сделайте скриншот текущего скучного дизайна и попросите AI перерисовать его в более современный.
- Шаг 2: Перенос дизайна — [Claude Code] — Передайте путь к папке с дизайном (HTML/PNG) агенту:
Возьми дизайн из папки [путь]. Перенеси его на главную страницу Astro.
Для карточек добавь плавную анимацию наведения (hover).
Если нужны изображения, используй навык Nano Banana Pro для генерации качественных фото заправки.- Шаг 3: Исправление багов — [Claude Code] — Просто опишите проблему словами (например, "фильтр не работает" или "сделай H1 более SEO-ориентированным").
Результат: Современный, адаптивный интерфейс с рабочими фильтрами и анимациями.
4. Автоматизация контента и SEO-структуры
Контекст: Для ранжирования нужны не только данные из API, но и полезный контент. Автор создает блог без использования тяжелых CMS, управляя файлами напрямую через Claude Code. Он внедряет технику "Content Capsule" и настраивает единый стиль изображений.
Тайминг: [06:44], [07:28]
Выгода: Быстрое наполнение сайта экспертным контентом, который нравится и людям, и поисковикам.
Как применить:
- Шаг 1: Создание стиля контента — [Claude Code] — Задайте параметры для всех будущих постов:
Напиши статью о причинах роста цен на топливо в Чили.
Используй технику Content Capsule (70% объема).
Добавь FAQ из 5 вопросов с разметкой Schema.org.
Для генерации фото используй стиль: [камера, фокусное расстояние, освещение], сохрани эти настройки в проекте.- Шаг 2: Внутренняя перелинковка — [Claude Code] — Попросите AI связать страницы регионов с главной и статьями блога для распределения веса.
Результат: Оптимизированные статьи с правильной разметкой и уникальными изображениями в едином стиле.
5. Деплой и техническое SEO (Cloudflare + Google)
Контекст: Финальный этап — публикация и проверка производительности. Автор использует Cloudflare Pages для хостинга и Claude Code для автоматизации деплоя через Wrangler. Особое внимание уделяется скорости загрузки (WebP вместо PNG) и индексации.
Тайминг: [08:31], [10:50], [13:43]
Выгода: Сайт с оценкой "A" по GTMetrics и мгновенная верификация в Google Search Console.
Как применить:
- Шаг 1: Деплой — [Wrangler / Cloudflare] — Дайте Claude права на управление Cloudflare для создания staging-сайтов и финального пуша.
- Шаг 2: Верификация — [Google Search Console] — Используйте автоматическую верификацию через DNS Cloudflare.
- Шаг 3: Оптимизация скорости — [PageSpeed Insights] — Сделайте скриншот отчета о скорости и отдайте Claude:
Мобильная версия грузится медленно. Проанализируй скриншот отчета PageSpeed.
Конвертируй все PNG в WebP. Оптимизируй загрузку скриптов.Результат: Опубликованный сайт, добавленный в индекс Google, со встроенной аналитикой.
FAQ
В: Почему выбран именно Astro? О: Astro идеально подходит для контентных сайтов, так как он генерирует статический HTML (Zero JS по умолчанию), что обеспечивает молниеносную загрузку и отличные показатели SEO "из коробки".
В: Как Claude Code получает доступ к Cloudflare? О: Через инструмент Wrangler. Вы авторизуете Wrangler в терминале, и Claude Code может выполнять команды деплоя, создания окружений и управления ресурсами.
В: Что такое техника "Content Capsule"? О: Это метод структурирования статьи, где ключевая, самая важная информация упакована в плотный, легко сканируемый блок (капсулу), что повышает шансы на попадание в "нулевую выдачу" (featured snippets) Google.
В: Как отслеживать трафик из AI-поисковиков (Perplexity, ChatGPT)? О: В Google Analytics нужно смотреть раздел "Source/Medium". Трафик от AI часто помечается как chatgpt.com / referral или perplexity.ai / referral. Также автор рекомендует Bing Webmaster Tools для отслеживания цитирований в Bing Chat.
В: Нужно ли платить за карты Google Maps? О: Автор рекомендует использовать Open Source альтернативы (например, Leaflet или OpenStreetMap), чтобы избежать огромных счетов от Google при росте трафика.
Ресурсы и ссылки
- Claude Code — AI-агент для терминала от Anthropic — [упомянут в видео]
- Astro — Фреймворк для создания быстрых контентных сайтов —
https://astro.build/ - Cloudflare Pages — Платформа для хостинга статических сайтов —
https://pages.cloudflare.com/ - DataWise — SEO-инструмент автора для анализа ключевых слов и конкурентов — [упомянут в видео]
- Otter.ai — Сервис для транскрибации голоса в текст —
https://otter.ai/ - GTMetrics / PageSpeed Insights — Инструменты для аудита скорости сайта —
https://gtmetrix.com/ - Wrangler — CLI инструмент для работы с Cloudflare —
https://developers.cloudflare.com/workers/wrangler/
Конспект создан на основе видео «How I Built a Website with Claude Code that got 2,500 Visitors in 30 Days» канала Julian Goldie SEO. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/5RPF4M4i9zY
Claude Code