Русский

Как я собрал персональный сайт за один день с помощью AI

Без дизайнера, разработчика и ручной вёрстки. Связка из четырёх инструментов, 6–8 часов работы и сайт, который не стыдно показать.

Автор: @aigencyworks | Март 2026

TL;DR

Если вам лень читать — вот вся суть: берёте референс (сайт, который вам нравится), идёте с ним в Lovable, описываете что хотите — и получаете рабочий сайт. Серьёзно, этого достаточно для старта.

А если хотите узнать, как сделать это более осмысленно и с контролем — читайте дальше.

Что получилось

Два сайта:

michaelkokin.com — личная страница, визитка
aigency.michaelkokin.com — AI-медиа с гайдами, проектами и новостями

Оба на русском и английском (переключатель языка), минималистичный редакционный дизайн, адаптивная вёрстка, OG-картинки для соцсетей, Cloudflare Worker для правильных мета-тегов.

Всё захардкожено — без CMS, без бэкенда. Пока что. Контент лежит прямо в React-компонентах. Звучит дико, но для MVP это нормально.

Инструменты

Инструмент

Для чего

Notion + MacWhisper	Заметки голосом, сбор идей и референсов
Claude Cowork	Архитектура, тексты, обработка фото, OG-картинки, промпты
OpenClaw	Доставка промптов и файлов в Lovable, кросс-чек
Lovable	Генерация фронтенда (React + Tailwind + Vite)
Cloudflare	DNS, Worker для динамических OG-тегов

Процесс по шагам

1. Сбор идей и референсов

Всё начинается с насмотренности. Я открыл Awwwards, Framer Templates, полистал сайты людей, которых считаю крутыми — дизайнеров, креативных директоров, фаундеров. Не для того чтобы скопировать, а чтобы понять, что мне нравится.

Заметки надиктовывал в MacWhisper — он транскрибирует голос в текст локально, без облака. Потом всё переносил в Notion: ссылки на референсы, скриншоты, мысли.

Что зафиксировал: мне нравится редакционный стиль (как журнал), чёрно-белая палитра, крупная типографика, минимум элементов. Как у bystrov.com — одна страница, всё по делу, зелёный акцент только на email.

2. Архитектура и тексты в Claude Cowork

Вот тут начинается магия. Claude Cowork — это десктопное приложение Claude, которое умеет работать с файлами на вашем компьютере. Я скинул ему свои заметки из Notion и попросил:

Продумать структуру сайта (какие страницы, какие секции)
Написать тексты для каждой страницы на двух языках
Сформировать дизайн-систему (шрифты, цвета, отступы)
Создать детальный промпт для Lovable

На выходе — markdown-файл с полной архитектурой: от мета-тегов до размеров фото. Плюс отдельный промпт для каждого этапа сборки.

Бонус: Claude Cowork обработал моё фото в стиле журнала LIFE из 70-х (контраст, плёночное зерно, виньетка) и сгенерировал все OG-картинки для соцсетей — прямо в папке проекта, без Фотошопа и Figma. И разложил всё по папочкам. Это реально круто — не нужно переключаться между вкладками.

3. Генерация фронтенда в Lovable

Lovable — это AI-конструктор, который генерирует полноценные React-приложения по текстовому описанию. Не шаблоны, а реальный код: компоненты, роутинг, стили.

Я скармливал ему промпты поэтапно:

Базовая структура и навигация
Главная страница с героем
Страница гайда с оглавлением
Список гайдов, проектов, новостей
Стабы для будущих страниц + SEO

Каждый этап — проверка результата, правки, следующий промпт. Lovable иногда делает не то, что просишь — но это нормально. Просто уточняешь.

4. Кросс-чек и доработка

Тут работали двое: Claude Cowork проверял вёрстку и тексты, предлагал фиксы. OpenClaw помогал переносить промпты между инструментами и делать сверку.

Что пришлось фиксить:

Типографика была слишком мелкой (увеличил до 48px заголовок, 18px текст)
Контейнер слишком узкий — расширил до 860px
Фото обрезало голову — поправил кроп
Грамматическая ошибка: «работал с… и другие» → «и другими»
Шум на фото (noise overlay) перекрывал лицо

Мелочи, но из них складывается качество.

5. Cloudflare Worker для OG-тегов

Это была самая неочевидная часть. Lovable делает SPA (Single Page Application) — весь сайт это один HTML-файл, а контент подгружается JavaScript'ом. Проблема: когда вы кидаете ссылку в Telegram или LinkedIn, их боты не выполняют JS. Они видят только статические мета-теги из index.html — а там всегда одна и та же информация (главная страница).

Решение — Cloudflare Worker. Это маленький скрипт, который стоит между пользователем и сайтом. Если пришёл бот (TelegramBot, facebookexternalhit, LinkedInBot) — Worker отдаёт ему специальный HTML с правильными мета-тегами для этой конкретной страницы. Если пришёл обычный пользователь — просто пропускает на сайт.

Настройка:

Перенёс DNS с GoDaddy на Cloudflare (бесплатно, меняешь nameservers)
Создал Worker с маршрутами: / → одни теги, /guides/openclaw → другие, и так далее
Привязал Worker к субдомену aigency.michaelkokin.com
Основной домен michaelkokin.com работает напрямую без Worker'а

Результат: каждая страница имеет свою превью-картинку и описание в мессенджерах.

6. Что не стал делать (пока)

Разные URL для языков. Сейчас русская и английская версии переключаются кнопкой EN/RU, но URL остаётся тем же (/guides/openclaw для обоих языков). Правильнее было бы сделать /ru/guides/openclaw и /en/guides/openclaw — для SEO и для того, чтобы можно было шарить ссылку на конкретном языке. Но это рефакторинг роутинга, и в первый день запуска я решил не заморачиваться. Бэкенд и CMS. Весь контент захардкожен в React-компонентах. Это значит, что для добавления нового гайда нужно писать код. Прикручу Notion как CMS или что-то подобное — но потом. RSS и рассылку. Было бы круто, но это следующая итерация.

Сколько времени ушло

6–8 часов в общей сложности, включая время работы агентов (иногда ждёшь пока AI сгенерирует). Из них:

~1 час — сбор референсов и заметки
~2 часа — архитектура и тексты в Claude Cowork
~2 часа — генерация и правки в Lovable
~1 час — OG-картинки, фото, фавиконы
~1 час — Cloudflare, DNS, Worker
Остальное — мелкие правки и доводка

Для сравнения: если бы я делал это классическим путём (дизайнер → верстальщик → бэкенд), это заняло бы 2–4 недели и стоило бы от 100 000 ₽.

Совет

Не пытайтесь сделать идеально с первого раза. Запустите MVP, покажите людям, соберите фидбек — и итерируйте. AI-инструменты позволяют двигаться быстро, но качество всё равно приходит через правки.

И главное: начните с референса. Найдите сайт, который вам нравится, и покажите его Lovable. Это работает лучше, чем любое текстовое описание.

Все ссылки

Инструменты из гайда:

Lovable — AI-конструктор сайтов (React + Tailwind + Vite)
Claude Cowork — десктопное приложение Claude для работы с файлами
OpenClaw — open-source AI-агент для мессенджеров
Notion — заметки, база знаний, управление проектами
MacWhisper — транскрибация голоса в текст (локально, без облака)
Cloudflare Workers — серверлесс-скрипты для обработки запросов

Референсы для вдохновения:

Awwwards — премия за лучший веб-дизайн
Framer Templates — шаблоны для быстрого старта
bystrov.com — пример минималистичной персональной страницы

📖 Читайте также: Как установить OpenClaw в 2026 году — 6 способов, от установки в один клик до хардкорного self-hosted.

English

How I built a personal website in one day using AI

No designer, no frontend dev, no backend. Four tools, 6–8 hours of work and a site you wouldn't be embarrassed to show.

Author: @aigencyworks | March 2026

TL;DR

If you don't feel like reading — here's the gist: grab a reference (a website you like), take it to Lovable, describe what you want — and you get a working site. Seriously, that's enough to get started.

If you want to do it more intentionally and with control — keep reading.

What I ended up with

Two websites:

michaelkokin.com — personal page, digital business card
aigency.michaelkokin.com — AI media with guides, projects and news

Both in Russian and English (language toggle), minimalist editorial design, responsive layout, OG images for socials, Cloudflare Worker for proper meta tags.

Everything is hardcoded — no CMS, no backend. For now. Content lives directly in React components. Sounds crazy, but for an MVP it's fine.

Tools

Tool

Purpose

Notion + MacWhisper	Voice notes, collecting ideas and references
Claude Cowork	Architecture, copy, photo editing, OG images, prompts
OpenClaw	Delivering prompts and files to Lovable, cross-checking
Lovable	Frontend generation (React + Tailwind + Vite)
Cloudflare	DNS, Worker for dynamic OG tags

Step by step

1. Collecting ideas and references

It all starts with exposure. I browsed Awwwards, Framer Templates, scrolled through sites of people I admire — designers, creative directors, founders. Not to copy, but to understand what I like.

I dictated notes into MacWhisper — it transcribes voice to text locally, no cloud. Then moved everything to Notion: reference links, screenshots, thoughts.

What I noted: I like the editorial style (like a magazine), black-and-white palette, large typography, minimal elements. Like bystrov.com — one page, straight to the point, green accent only on the email.

2. Architecture and copy in Claude Cowork

This is where the magic begins. Claude Cowork is Claude's desktop app that can work with files on your computer. I fed it my Notion notes and asked to:

Design the site structure (pages, sections)
Write copy for each page in two languages
Create a design system (fonts, colors, spacing)
Build a detailed prompt for Lovable

The output — a markdown file with full architecture: from meta tags to image dimensions. Plus a separate prompt for each build stage.

Bonus: Claude Cowork processed my photo in a 70s LIFE magazine style (contrast, film grain, vignette) and generated all OG images for socials — right in the project folder, no Photoshop or Figma. And organized everything into folders. This is seriously cool — no need to switch between tabs.

3. Frontend generation in Lovable

Lovable is an AI builder that generates full React applications from text descriptions. Not templates — real code: components, routing, styles.

I fed it prompts step by step:

Base structure and navigation
Home page with hero
Guide page with table of contents
Guide, project and news listings
Stubs for future pages + SEO

Each step — check the result, make corrections, next prompt. Lovable sometimes does things differently than asked — but that's normal. You just clarify.

4. Cross-checking and refinement

Two helpers here: Claude Cowork reviewed layout and copy, suggested fixes. OpenClaw helped transfer prompts between tools and do cross-checks.

What needed fixing:

Typography was too small (bumped to 48px heading, 18px body)
Container too narrow — expanded to 860px
Photo was cropping the head — fixed the crop
Grammar error in Russian copy
Noise overlay on photo was covering the face

Small things, but quality comes from these details.

5. Cloudflare Worker for OG tags

This was the least obvious part. Lovable creates SPAs (Single Page Applications) — the entire site is one HTML file, with content loaded via JavaScript. The problem: when you share a link on Telegram or LinkedIn, their bots don't execute JS. They only see static meta tags from index.html — which always shows the same info (home page).

The solution — Cloudflare Worker. A small script that sits between the user and the site. If a bot arrives (TelegramBot, facebookexternalhit, LinkedInBot) — the Worker serves it a special HTML with the correct meta tags for that specific page. If a regular user arrives — it just passes through to the site.

Setup:

Moved DNS from GoDaddy to Cloudflare (free, just change nameservers)
Created a Worker with routes: / → one set of tags, /guides/openclaw → another, etc.
Linked the Worker to subdomain aigency.michaelkokin.com
Main domain michaelkokin.com works directly without the Worker

Result: each page has its own preview image and description in messengers.

6. What I didn't do (yet)

Separate URLs for languages. Currently Russian and English versions toggle with an EN/RU button, but the URL stays the same (/guides/openclaw for both languages). It would be better to have /ru/guides/openclaw and /en/guides/openclaw — for SEO and so you can share a link in a specific language. But that's a routing refactor, and on launch day I decided not to bother. Backend and CMS. All content is hardcoded in React components. Adding a new guide means writing code. I'll hook up Notion as a CMS or something similar — but later. RSS and newsletter. Would be great, but that's the next iteration.

How long it took

6–8 hours total, including AI processing time (sometimes you wait while AI generates). Breakdown:

~1 hour — collecting references and notes
~2 hours — architecture and copy in Claude Cowork
~2 hours — generation and fixes in Lovable
~1 hour — OG images, photos, favicons
~1 hour — Cloudflare, DNS, Worker
The rest — small fixes and polish

For comparison: doing this the traditional way (designer → frontend dev → backend) would take 2–4 weeks and cost upwards of $1,000.

Advice

Don't try to make it perfect on the first try. Launch an MVP, show it to people, collect feedback — and iterate. AI tools let you move fast, but quality still comes through revisions.

And most importantly: start with a reference. Find a website you like and show it to Lovable. This works better than any text description.

All links

Tools from this guide:

Lovable — AI website builder (React + Tailwind + Vite)
Claude Cowork — Claude desktop app for working with files
OpenClaw — open-source AI agent for messengers
Notion — notes, knowledge base, project management
MacWhisper — voice-to-text transcription (local, no cloud)
Cloudflare Workers — serverless scripts for request handling

References for inspiration:

Awwwards — awards for best web design
Framer Templates — templates for a quick start
bystrov.com — example of a minimalist personal page

📖 Also read: How to install OpenClaw in 2026 — 6 methods, from one-click install to hardcore self-hosted.