Конспект

Создание профессиональных сайтов с помощью AI и автоматизации

Ключевые тезисы

• Создание красивых, адаптивных и SEO-оптимизированных сайтов без навыков программирования
• Использование Cloud Code и Nano Banana 2 для генерации 3D-анимаций и контента
• Автоматизация всего процесса от брендинга до публикации и SEO-анализа
• Полный фреймворк для монетизации (поиск клиентов, создание сайтов, продажа услуг)

Определение бренда и цели сайта

Первым шагом является определение бренда и цели сайта. Для примера используется компания AnyVan (услуги перевозок).

Инструмент: Firecrawl.dev для экстракции бренда.

• Функция Scrape → Markdown → Branding собирает все брендовые ассеты (цвета, логотипы)
• Данные можно использовать через API для масштабирования в Anti-Gravity и Cloud Code

Генерация ключевых изображений и анимаций

Инструменты: Nano Banana 2 (генерация изображений), Cloud Code (автоматизация), Hixel (создание видео).

Процесс:

1. Загрузка навыка (skill) "Asset Generation" в Cloud Code через /skillcreator
2. Создание промптов для изображений с помощью навыка (/scrollstop prompter)
   • Пример промпта: "HTML view from a moving company... van exploding full of items"
3. Генерация стартового и конечного изображений в Nano Banana 2:
   • Добавление логотипа компании и референсных изображений (например, реального фургона)
   • Ключевые параметры: 16x9, 2K качество, чистый белый фон, 4 итерации
4. Создание переходного видео в Hixel:
   • Использование промпта для видео-перехода из Cloud Code
   • Загрузка стартового и конечного кадров, генерация 7-секундного видео

Создание сайта с помощью навыков и Anti-Gravity

Необходимые навыки (skills):

1. Asset Generation (генерация ассетов)
2. 3D Website Builder (строитель сайтов)

Процесс сборки MVP сайта:

1. Создание нового проекта в Anti-Gravity
2. Активация Cloud Code (расширение в редакторе)
3. Использование навыка website prompt builder или scroll stop builder
4. Загрузка созданного видео-анимации и интеграция его в сайт
5. Результат: MVP сайта с анимацией, цветовой схемой бренда и базовой структурой

Публикация и оптимизация сайта

Публикация через GitHub и Vercel:

1. Подключение Anti-Gravity к сервисам:
   • Создание токена в Vercel (Settings → Tokens)
   • Добавление токена в конфигурацию MCP Anti-Gravity (@mcp_config)
2. Автоматическая публикация: Запрос Anti-Gravity создать репозиторий на GitHub и сайт на Vercel
3. Результат: Две живые ссылки — на репозиторий GitHub и на опубликованный сайт.

Мобильная оптимизация и аналитика:

• Сайт автоматически адаптирован для мобильных устройств
• Добавление аналитики Vercel: вставка предоставленного кода через Anti-Gravity

Метод репликации существующих сайтов

Техника для быстрого создания: Использование HTML-экстрактора для скачивания HTML существующего сайта.

Процесс:

1. Загрузка HTML целевого сайта (например, через "HTML website extractor")
2. Передача файла Anti-Gravity с инструкцией: "воссоздать сайт с новым контентом и нашей анимацией"
3. Результат: Новый сайт сохраняет структуру, типографику и логотип оригинала, но с добавленными улучшениями (анимации, новый контент).

Добавление страниц и SEO-оптимизация

Создание дополнительных страниц:

• Запрос Anti-Gravity создать новые страницы (например, "About", "Testimonials", "Team"), точно соответствующие существующему дизайну.

Полная SEO-оптимизация с помощью навыка Claude:

1. Загрузка навыка "SEO Optimization" в Cloud Code.
2. Запуск анализа: /seo strategy → анализ всей страницы или конкретной статьи.
3. Процесс SEO-аудита включает:
   • Сбор всех внутренних страниц
   • Анализ robots.txt и sitemap
   • Кросс-страничный анализ
   • Оценка по категориям и генерация HTML-отчета
4. Результат: Отчет с оценкой (например, "D"), детальным breakdown (исполнительное резюме, анализ по страницам, технические проблемы, стратегия контента, ключевые слова, план действий).

Фреймворк монетизации "MONEY"

Map — поиск "скучных" ниш
Obtain — получение лидов через скрипты и enrichment
Nail — создание красивых сайтов (описанный процесс)
Execute — бесплатная передача сайтов клиентам (возможно масштабировать)
Yield — продажа услуг с recurring revenue