Как я собрал сайт за день с помощью AI
Связка из Notion, Claude Cowork, OpenClaw и Lovable. 6–8 часов работы — и два сайта готовы. Пошаговый процесс создания персональных сайтов с нуля без дизайнера и разработчика.
Автор: Миша Кокин ·
TL;DR
Берёте референс (сайт, который нравится), несёте в Lovable, описываете что хотите — получаете рабочий сайт. Если хотите осознанно и с контролем — читайте дальше.
Что получилось
Два сайта: michaelkokin.com — персональная страница и aigency.michaelkokin.com — AI-медиа с гайдами, исследованиями и новостями. Оба на русском и английском, минималистичный редакционный дизайн, responsive, OG-картинки для соцсетей, Cloudflare Worker для мета-тегов.
Инструменты
| Инструмент | Для чего |
|---|---|
| Notion + MacWhisper | Голосовые заметки, сбор идей и референсов |
| Claude Cowork | Архитектура, тексты, обработка фото, OG-картинки, промпты |
| OpenClaw | Доставка промптов и файлов в Lovable, кросс-чек |
| Lovable | Генерация фронтенда (React + Tailwind + Vite) |
| Cloudflare | DNS, Worker для динамических OG-тегов |
Пошаговый процесс
1. Сбор идей и референсов
Awwwards, Framer Templates, сайты дизайнеров и основателей. Голосовые заметки через MacWhisper → Notion. Выбор: редакционный стиль (как журнал), чёрно-белая палитра, крупная типографика.
2. Архитектура и тексты в Claude Cowork
Claude Cowork — десктопное приложение Claude, работающее с файлами. Заметки из Notion → структура сайта, тексты на двух языках, дизайн-система, промпты для Lovable. Бонус: обработка фото в стиле журнала LIFE 70-х, генерация OG-картинок — без Photoshop и Figma.
3. Генерация фронтенда в Lovable
Lovable — AI-билдер, генерирующий полноценные React-приложения из текстовых описаний. Не шаблоны — реальный код: компоненты, роутинг, стили. Промпты поэтапно: базовая структура → главная → гайд с оглавлением → листинги → заглушки + SEO.
4. Кросс-чек и доработка
Claude Cowork проверял вёрстку и тексты. OpenClaw помогал переносить промпты между инструментами. Исправления: размер типографики, ширина контейнера, кадрирование фото, ошибки в текстах.
5. Cloudflare Worker для OG-тегов
Lovable создаёт SPA — одна HTML-страница, контент загружается через JavaScript. Проблема: при шеринге ссылки боты не видят мета-теги. Решение — Cloudflare Worker: если пришёл бот — отдаёт HTML с правильными мета-тегами для конкретной страницы.
Сколько заняло
6–8 часов суммарно: ~1 час на референсы, ~2 часа на архитектуру и тексты, ~2 часа на генерацию и правки, ~1 час на OG-картинки, ~1 час на Cloudflare и DNS. Для сравнения: классический путь (дизайнер → фронтендер → бэкендер) — 2–4 недели и от $1 000.