🎯 О чём этот конспект: Пошаговое руководство по созданию прибыльного контентного веб-сервиса с использованием 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