Сайты и приложения без кода: v0, Webflow и Framer для тех, кто не программирует

Время: ~25 мин теории + 60 мин практики

Суть урока

🎨 Образ: Представь архитектора, которому не нужен чертёжник. Ты описываешь словами: «хочу трёхкомнатный дом с панорамными окнами и тёплым гаражом» — и через несколько минут перед тобой готовый проект. Ты не трогал карандаш, не знаешь строительных норм, а проект выглядит профессионально. Так работают AI-инструменты без кода (no-code): ты описываешь, что хочешь, они строят. Claude Code при этом становится прорабом, которого зовут, когда нужна нестандартная электрика или сантехника, не предусмотренная типовым проектом.

Этот урок — о том, как собирать сайты и приложения для себя и для клиентов, не написав руками ни строчки кода. И о том, когда инструментов без кода достаточно, а когда пора подключать Claude.

Ключевые концепции

• AI без кода (no-code AI) — инструменты, которые по описанию обычными словами создают внешний вид, тексты и логику сайта или приложения
• v0 (v0.app, раньше v0.dev) — сервис компании Vercel: по промпту (запросу к AI) собирает интерфейсы и целые приложения на React (React — популярная библиотека для создания интерфейсов). Готовый код можно посмотреть, забрать и доработать в Claude Code
• Webflow AI — AI внутри Webflow: помогает собирать страницы, писать тексты и заполнять CMS (систему управления содержимым сайта) прямо в редакторе
• Framer AI — агенты Framer: по описанию словами создают страницы, тексты и картинки прямо в проекте
• Гибридный подход — v0 или Framer делают внешний вид, а Claude Code добавляет логику работы, связь с другими сервисами через API (способ, которым программы обмениваются данными) и базу данных
• Ниша «сборщика» — услуга: принимать заказы на сайты, быстро собирать их инструментами из этого урока и сдавать клиенту готовый результат
• Скорость и гибкость — без кода быстрее для типовых задач; Claude Code нужен, когда логика нестандартная и проект будет расти
• Lovable и Bolt.new — конкуренты Claude Code для тех, кто не программирует: по описанию собирают приложение целиком, с интерфейсом и серверной частью, но под нестандартную задачу их настроить сложнее

Теория

Почему AI без кода стал профессиональным инструментом

Раньше «сделать сайт без кода» означало Tilda с готовыми блоками и скромной анимацией. Теперь AI-инструменты без кода сами пишут готовые к работе компоненты на React, подстраивают страницу под экраны телефона и компьютера, создают поля для CMS и публикуют сайт в сети доставки контента (CDN). Разрыв между «сделал сам» и «нанял разработчика» так сократился, что человек без технической подготовки может быстро собрать простой сайт, на который раньше у команды уходили недели.

Отсюда понятная возможность заработка: стать «сборщиком» — человеком, который знает эти инструменты лучше клиента и берёт деньги за умение подобрать набор инструментов и за скорость сборки, а не за написание кода.

v0 (Vercel) — текст в интерфейс на React

Что это. v0 (адрес v0.app, раньше v0.dev) — сервис компании Vercel, которая создала Next.js (Next.js — популярный набор инструментов для сайтов на React). Сейчас v0 — это агент, который собирает интерфейсы и целые приложения. Ты пишешь промпт («сделай карточку товара с картинкой, ценой, кнопкой „в корзину“ и пометкой о скидке») и получаешь готовый код на React со стилями Tailwind CSS и компонентами shadcn/ui. Есть бесплатный тариф с ограничением сообщений в день; платные тарифы работают на кредитах, которые расходуются по объёму текста запросов и ответов (условия на v0.app/pricing).

Как работает. v0 понимает не только «кнопка», но и «кнопка в стиле Stripe, которая меняется при наведении мыши и показывает загрузку после нажатия». Код — обычный проект на React и Next.js: его можно посмотреть во вкладке Code, забрать через GitHub (сервис для хранения кода) или сразу опубликовать на Vercel. Под твой проект его обычно приходится немного доработать.

Главная польза для гибридного подхода. Сгенерированный код отдаёшь Claude Code и говоришь: «подключи этот компонент к моему API /products/:id, покажи заглушку, пока данные загружаются, и обработай ошибки». Claude Code дописывает логику поверх внешнего вида от v0.

Порядок работы:

1. Описываешь в v0 нужный экран или компонент
2. Дорабатываешь просьбами («сделай заголовок крупнее», «добавь тёмную тему»)
3. Забираешь готовый код: из вкладки Code или через подключение к GitHub
4. Передаёшь код в Claude Code и описываешь, что должно происходить на сайте
5. Claude Code подключает данные, добавляет проверку полей и публикует сайт

🎨 Образ: v0 — это дизайнер, который рисует набросок за минуту. Claude Code — разработчик, который превращает набросок в работающий продукт. Ты — руководитель, который ставит задачи обоим.

Webflow AI — контент и CMS без рутины

Что это. Webflow — визуальный редактор сайтов со своим хостингом (местом, где сайт хранится и откуда открывается). В Webflow есть AI-функции: помощь в сборке и оформлении страниц, создание текстов, заполнение CMS, перевод сайта. Набор функций и тарифы меняются, свежие условия смотри на сайте Webflow.

AI в CMS. Ты создаёшь в CMS коллекцию «Услуги» с полями «название», «описание» и «цена». Дальше просишь AI создать записи этой коллекции — по одной или сразу пачкой — и он заполняет поля, в том числе описания. Для агентства с длинным списком услуг это заметно ускоряет первые черновики, но каждый текст всё равно нужно прочитать и поправить.

Перевод сайта в Webflow. Платное дополнение Webflow Localization умеет переводить сайт на другие языки с помощью AI: например, сделать английскую и испанскую версии русского сайта. Для международных клиентов это экономит время, но машинный перевод всё равно нужно проверить глазами.

Ограничения. Чтобы опубликовать сайт на своём домене, нужен платный тариф сайта (Site plan). Тариф рабочего пространства (Workspace) есть бесплатный, платный нужен для работы командой. Для клиента с простым сайтом Webflow может оказаться избыточным. Зато для компании с блогом, командой и регулярными обновлениями он подходит хорошо.

Framer AI — лендинг из одного промпта

Что это. Framer — инструмент дизайна, который научился собирать целые лендинги (одностраничные сайты) по текстовому описанию. Ты пишешь: «Лендинг для студии йоги. Современный минималистичный стиль, тёплые тона, разделы: главный экран, о нас, расписание, отзывы, запись на пробное занятие» — и вскоре получаешь страницу с текстами и картинками, которую можно править дальше. Версии для телефона и планшета агент тоже может подготовить: попроси его об этом и проверь результат.

Сильные стороны. Framer известен красивой анимацией и аккуратной вёрсткой, и AI работает в том же редакторе. Бесплатно сайт публикуется на адресе Framer, свой домен подключается на платных тарифах (условия на сайте Framer).

Framer или Webflow. Для лендинга одного продукта обычно берут Framer. Для сайта компании с большим каталогом и блогом — Webflow с его CMS. Перед выбором сравни тарифы на официальных страницах.

Ограничение. Framer — прежде всего инструмент для сайтов и рекламных страниц, а не для сложных веб-приложений. Если клиенту нужен личный кабинет или связка с CRM (программой учёта клиентов), смотри в сторону инструментов для приложений (Bubble, Lovable) или гибрида с Claude Code.

Bubble.io + AI-плагины — полноценные веб-приложения

Что это. Bubble — платформа без кода для полноценных веб-приложений: с базой данных, входом пользователей, логикой и приёмом оплаты. Добавь AI-функции или подключи модели через API (OpenAI, Claude) — и приложение сможет само читать, сокращать и писать тексты.

Типичные проекты на Bubble. Торговые площадки (как Airbnb, только без кода), онлайн-сервисы с личным кабинетом и панелью показателей, платформы для онлайн-курсов, программы учёта клиентов для малого бизнеса. Всё это без кода для сервера.

Bubble + Claude API. Через плагин или прямые запросы к API подключаешь Claude (большую языковую модель, LLM). Например: пользователь загружает документ → Bubble отправляет текст в Claude API → Claude возвращает краткое содержание → Bubble сохраняет его в базу и показывает пользователю. Это работающий AI-продукт без единой строчки серверного кода.

Минус Bubble. Осваивать его долго: основы за вечер не выучишь. Чтобы запустить приложение на своём домене, нужен платный тариф, а цена зависит от нагрузки на платформу (тарифы на сайте Bubble). Для первой версии продукта и небольшого числа пользователей он подходит; если продукт сильно вырастет, может понадобиться переход на собственный код.

Lovable — конкурент Claude Code для не-программистов

Что это. Lovable (бывший GPT Engineer) — инструмент, который собирает приложение по описанию. Похож на Claude Code, но работает в браузере, без терминала. Ты описываешь приложение в чате, Lovable собирает интерфейс и логику; есть встроенная серверная часть Lovable Cloud (база данных, регистрация и вход) и публикация.

Про данные клиентов. С 9 сентября 2026 Lovable может использовать для обучения своих моделей данные с тарифов Free и Pro: промпты, файлы, код. Отказаться можно в любой момент: Account settings → Preferences → AI model training, выключить «Use my Lovable content for model training». Для клиентских проектов выключай сразу. На тарифах Business и Enterprise данные по умолчанию в обучение не идут.

Lovable или Claude Code. С Lovable проще начать: ничего не нужно устанавливать. Claude Code гибче: работает с любым набором технологий и любым хостингом и даёт полный контроль над кодом. Новичку, которому быстро нужна первая версия, подойдёт Lovable. Для серьёзного продукта, который будет жить долго, — Claude Code.

Гибрид. Некоторые разработчики делают в Lovable быстрый прототип, потом забирают код и дорабатывают его в Claude Code. Такой путь работает.

Bolt.new — AI от StackBlitz в браузере

Что это. Bolt.new от StackBlitz — генератор приложений прямо в браузере. Устанавливать ничего не нужно, всё работает в облаке. Пишешь промпт — получаешь работающий проект с интерфейсом и серверной частью. Хостинг, база данных и домены входят в сам сервис (Bolt Cloud): бесплатный адрес на bolt.host, свой домен — на платных тарифах.

Сильная сторона. Bolt быстро справляется с простыми задачами: лендинг, форма обратной связи, простая панель показателей. Код выполняется прямо в браузере, поэтому результат можно сразу показать клиенту, без отдельной публикации.

Ограничения. Сложная логика и связки с нестандартными сервисами потребуют либо перехода на Claude Code, либо заметной ручной доработки.

Когда хватит инструментов без кода, а когда нужен Claude Code

Практическое правило: если проект типовой (лендинг, сайт-визитка, простой каталог) и особой логики не требует — бери инструмент без кода. Если есть личный кабинет, связки с другими сервисами или нестандартные требования — гибрид или чистый Claude Code. Актуальные цены и версии: Актуальное сейчас.

Гибридный подход: внешний вид без кода + логика в Claude Code

🎨 Образ: Рестораны часто покупают готовые заготовки (тесто, соусы), но доводит блюдо повар. Инструменты без кода — это заготовка внешнего вида. Claude Code — шеф-повар, который доводит блюдо до ресторанного уровня.

Как идёт гибридный проект:

[ЭТАП 1: Внешний вид — v0 / Framer]
Промпт → экраны / лендинг
Доработка → внешний вид утверждён
↓
[ЭТАП 2: Доработка — Claude Code]
Перенести код из v0
Подключить сервисы (Stripe, Telegram, CRM)
Добавить вход пользователей
Добавить проверку полей формы
Настроить логику работы
↓
[ЭТАП 3: Публикация — Cloudflare / Vercel]
Одной командой через Claude Code
CDN и SSL (защищённое соединение) — автоматически
Свой домен — в настройках хостинга
↓
[СДАЧА КЛИЕНТУ]
Обучение (15 мин): как менять тексты
Поддержка: 1 месяц по договору

Бизнес-модель «сборщика»

Это конкретная ниша для тех, кто хочет зарабатывать на навыках из этого курса. Ты не разработчик и не дизайнер — ты специалист по сборке. Знаешь, какой инструмент подходит для какой задачи, умеешь быстро собрать результат и берёшь плату за скорость и опыт.

Что можно предлагать:

• Лендинг (Framer + доработка)
• Сайт компании с CMS (Webflow)
• Первую версию приложения (Bubble или гибрид с Claude Code)
• Обновление внешнего вида существующего сайта (компоненты из v0 + Claude Code)

Почему клиенты платят. Они сами могли бы попробовать Framer, но потратят время на обучение и переделки. Ты делаешь это быстрее. Разница в цене — это их время, умноженное на стоимость их часа. Цены задаёт рынок и твои затраты; доход не гарантирован. Как посчитать цену, смотри в уроке Цены и монетизация.

Как найти клиентов. Малый бизнес без сайта или со старым сайтом есть везде: кафе, салоны, юристы, врачи, ателье, турфирмы. Им не нужен сложный продукт — им нужен приличный сайт с формой обратной связи за разумные деньги.

Практика

Задача: собрать лендинг с помощью v0 + Claude Code

Сценарий: клиент просит лендинг для онлайн-школы английского языка. Нужны: главный экран, преимущества, тарифы и форма записи, которая отправляет заявку в Telegram.

Когда делать. Шаг 1 делается только в v0 — его можно выполнить сейчас. Шаги 2–5 выполняются в Claude Code: он входит в платную подписку (урок Тарифы Claude), а поставить его поможет урок Claude Code в приложении для компьютера. Оба урока дальше в этом модуле: вернись к шагам 2–5 после них. Пока можешь опубликовать страницу прямо из v0 кнопкой Publish — для учебной пробы этого хватит.

Ориентир по времени: около 35 минут на сами шаги плюс время на регистрацию в v0 и Vercel и на создание бота в Telegram.

Шаг 1: Внешний вид в v0 (10 минут)

Зайди на v0.app, войди (регистрация бесплатная) и введи промпт. На бесплатном тарифе число сообщений в день ограничено, поэтому правки лучше писать сразу пачкой.

Создай лендинг для онлайн-школы английского языка. Стиль: современный, 
профессиональный, синяя цветовая схема. Секции:
1. Герой: заголовок "Заговори на английском за 3 месяца", подзаголовок, 
   кнопка "Записаться на пробный урок"
2. Три преимущества: живые уроки, гибкое расписание, сертификат
3. Тарифы: Базовый ($49/мес), Стандарт ($89/мес), Премиум ($149/мес) — 
   карточки с характеристиками и кнопкой
4. Форма записи: имя, email, телефон, удобное время, кнопка отправить
Используй Tailwind CSS, компонент должен быть на React.
Весь код страницы помести в один файл app/page.tsx, без отдельных компонентов.

«Герой» здесь — главный экран, который посетитель видит первым.

Дорабатывай, если нужно («сделай главный экран выше», «покажи тарифы в ряд», «добавь значки к преимуществам»). Когда вариант устроит, открой в панели предпросмотра вкладку Code, выбери файл app/page.tsx и скопируй его текст целиком.

Шаг 2: Новый проект в Claude Code (5 минут)

Для проекта на Next.js на компьютере нужен Node.js (среда, в которой работают такие проекты; скачивается на nodejs.org). Если его нет, Claude Code скажет об этом — попроси его объяснить, как поставить.

Создай пустую папку english-school-landing: в Finder или Проводнике либо командами в терминале.

# В терминале:
mkdir english-school-landing
cd english-school-landing

Открой эту папку в Claude Code (в приложении: вкладка Code → Select folder) и напиши:

Создай новый Next.js проект с Tailwind CSS. 
Структура: app/page.tsx для главной страницы.
Установи зависимости и проверь что всё запускается.

Шаг 3: Перенос кода из v0 (5 минут)

Скажи Claude Code:

Вот React-компонент, который я сгенерировал в v0. 
Вставь его в app/page.tsx и убедись, что все подключения библиотек правильные, 
Tailwind работает и страница открывается без ошибок.

[вставь сюда код из v0]

Claude Code поправит подключения библиотек, уберёт конфликты и запустит проект. Если чего-то не хватает, он скажет, что доустановить.

Шаг 4: Заявки в Telegram (10 минут)

Сначала создай бота: в Telegram напиши @BotFather и отправь команду /newbot — он спросит имя и адрес бота и выдаст токен (ключ бота). Токен — это секрет: не вставляй его в чат с AI и не выкладывай в общий доступ. Ещё понадобится chat_id — номер чата, куда приходят заявки. Как его узнать, подскажет Claude Code после того, как ты напишешь своему боту первое сообщение.

Добавь обработку формы записи. Когда пользователь нажимает "Записаться", 
данные должны отправляться в Telegram-бота.

Токен бота и chat_id я впишу сам: создай файл .env.local
с пустыми переменными TELEGRAM_BOT_TOKEN и TELEGRAM_CHAT_ID
и скажи, куда что вписать.

Формат сообщения в Telegram:
🎓 Новая заявка на пробный урок
Имя: {имя}
Email: {email}
Телефон: {телефон}
Удобное время: {время}

Добавь:
1. Обработчик формы в файле app/api/contact/route.ts
2. Проверку полей (имя минимум 2 буквы, правильный email, телефон)
3. Состояние загрузки на кнопке
4. Сообщение об успехе / ошибке пользователю
5. Переменные окружения для токена бота

Заявки содержат имена и телефоны людей: храни их бережно и предупреди клиента, что форма отправляет данные в Telegram.

Шаг 5: Публикация на Vercel (5 минут)

Понадобится бесплатный аккаунт Vercel. При первой публикации Vercel попросит войти: это ты делаешь сам, в браузере.

Подготовь проект к публикации на Vercel:
1. Создай .env.example с нужными переменными
2. Добавь vercel.json, если нужны особые настройки
3. Убедись, что .gitignore не пускает в git файлы .env
4. Подключи git и сохрани первую версию (коммит)

Затем опубликуй командой: npx vercel --prod

Файл .env.local на Vercel не попадает, поэтому токен бота и chat_id нужно добавить в настройки проекта на Vercel (Settings → Environment Variables) — или попросить Claude Code помочь с этим. Без них форма на опубликованном сайте не отправит заявку.

После публикации Claude Code покажет адрес сайта — отправь его клиенту на согласование.

Про бесплатные тарифы. Тариф Hobby у Vercel — только для личных некоммерческих проектов. Для клиентского (коммерческого) сайта нужен платный тариф Vercel (Pro, на октябрь 2026 — от $20 в месяц за разработчика) или другой хостинг, например Cloudflare Pages.

Инструменты и ресурсы

Набор «сборщика» с минимальными расходами на старте:

• v0 (бесплатный тариф) + Claude Code (входит в платную подписку Claude, на бесплатном тарифе недоступен) + Cloudflare Pages или Vercel + Framer (бесплатный тариф)
• Для клиентских (коммерческих) проектов бесплатные тарифы часто не подходят: читай условия каждого сервиса

Ключевые выводы

«AI без кода — не способ обмануть клиента. Это способ быстрее дать ему результат. Важен не инструмент, а результат и скорость.»

«Гибрид v0 + Claude Code — лучшее из двух миров: красивый внешний вид без рутины плюс полная свобода в логике без ограничений платформы.»

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

Следующий урок

→ Zapier AI — тысячи приложений и умные зейпы с AI-шагами: первая автоматизация без кода

В библиотеке, по желанию: n8n + AI — n8n (альтернатива Zapier, которую можно поставить на свой сервер) как AI-оркестратор: подключаем Claude API к рабочим процессам и строим цепочки «триггер → AI → действие» без серверного кода.