Премиум-сайты бизнесам через Claude Design и Claude Code

Это маршрут, на котором один человек собирает бизнесу премиум-сайт за вечер-два. Claude Design рисует экраны и держит дизайн-систему живым HTML, Claude Code превращает их в настоящий Next.js с анимациями, GitHub и Vercel выкатывают всё на живой домен. Без дизайнера в штате, без недели вёрстки, без агентства.

Большинство берётся за такие сайты с конца. Сразу лепят анимации и красоту на кривую структуру, через час есть половина лендинга и ноль системы, и каждое новое требование клиента ломает то, что уже сделано. Порядок обратный: сначала бренд-система, потом структура, потом код, потом анимации точечно, и только потом деплой. Каждый шаг закрывает свой кусок, и ты не возвращаешься переделывать.

Ниже разберём всю цепочку от и до: дизайн-систему в Claude Design, передачу в код, сборку анимаций через Claude Code, деплой на Vercel со своим доменом и проверку перед сдачей. В конце про то, как упаковать это в услугу и продавать бизнесам, потому что собрать сайт это половина дела, вторая половина это продать.

Что понадобится

Перед стартом собери стек. Почти всё бесплатное, платный тут по сути один Claude.

Claude, план Pro или выше. Это мозг всей связки. Claude Design и Claude Code работают только на платных планах, на бесплатном их нет. Pro это $20/мес и золотая середина: все модели, Claude Code, Claude Design. Цены: claude.com/pricing

Claude Design. Дизайн-режим от Anthropic Labs, вышел в апреле 2026. Открываешь claude.ai/design и логинишься, либо в обычном Claude жмёшь иконку палитры в левом меню. Он не рисует одну картинку, он собирает дизайн-систему и отдаёт живой HTML, а не статичный макет.

Claude Code на машине. Рабочая лошадь, которая превращает дизайн в реальный Next.js. Ставится одной командой:

# macOS / Linux
curl -fsSL https://claude.ai/install.sh | bash

# Windows (PowerShell)
irm https://claude.ai/install.ps1 | iex

Нативный установщик, ему не нужны ни Node.js, ни npm, обновляется сам. Запускаешь командой claude в папке проекта. Доки: code.claude.com/docs

Библиотека анимаций Motion. Это то, что делает сайт премиальным, а не плоским. motion.dev, бесплатная опенсорс, ставится в проект командой npm i motion. Под тяжёлые таймлайны есть GSAP gsap.com, тоже бесплатно. Не тяни обе сразу, начни с Motion.

GitHub и Vercel. GitHub github.com хранит код, бесплатно. Vercel vercel.com деплоит, бесплатного тарифа Hobby хватает на клиентский сайт. Оба логинятся друг в друга в пару кликов.

Домен. Чтобы сайт жил не на vercel.app, а на нормальном адресе. Берёшь у реестратора, .com на рынке обычно $10-15 в год. По себестоимости отдаёт Cloudflare cloudflare.com/products/registrar, без больших накруток также Porkbun и Namecheap.

Опционально, продвинутый путь: Figma и Figma MCP. Если дизайнишь в Figma или клиент прислал Figma-макет, можно подключить Figma MCP, и Claude Code соберёт код прямо из выбранного фрейма. Figma figma.com бесплатна, MCP-плагин ставится из официального маркетплейса Anthropic. Это не обязательно, основной маршрут идёт через Claude Design.

Как это сделать

1. Бренд-система и экраны в Claude Design

Начинаешь не с кода и не с анимаций, а с системы. Открываешь claude.ai/design, жмёшь New Design System.

Дальше перетаскиваешь в зону загрузки всё, что есть по клиенту: логотип, палитру, скриншоты его старого сайта, сайт-референс который ему нравится, даже PDF или презентацию. Claude анализирует и вытаскивает палитру, шрифты, отступы, компоненты. Жмёшь Generate System, он собирает UI-кит: кнопки, карточки, навигацию, сетки. Включаешь тумблер Published, и все новые экраны наследуют эту систему. Правки потом идут в токены, а не в каждый файл руками.

Когда система опубликована, описываешь сам сайт: что за бизнес, для кого, какое целевое действие у посетителя, и даёшь сайт-референс как образец стиля. Claude Design рисует экраны живым HTML по твоей системе. На выходе у тебя не белый лист, а готовая структура и вид, которые осталось превратить в код.

Промпт для системы, если хочешь задать рамки текстом:

Собери дизайн-систему под сайт бизнеса, не одну картинку, а переиспользуемую систему.

Дано:
- Бизнес и для кого: <текст>
- Тон и стиль: <текст>
- Сайт-референс как образец: <ссылка>
- Ограничения: <цвета, шрифты, чего избегать>

Выдай:
1. Палитру с ролью каждого цвета.
2. Шрифтовые пары и их применение.
3. Компоненты: кнопки, карточки, навигация, секции.
4. Правила: что можно, чего нельзя.

Без воды, конкретные значения.

2. Из дизайна в код

У тебя есть дизайн-система и экраны. Дальше два пути в Next.js.

Основной, через Claude Design и Claude Code. Claude Design отдаёт живой HTML и понимает твой кодбейз, поэтому Claude Code читает дизайн-систему и собирает по ней страницы. Заводишь проект:

npx create-next-app@latest client-site --app --yes
cd client-site
claude

По умолчанию включены TypeScript, Tailwind и App Router, можно соглашаться. Дальше отдаёшь Claude Code экраны и систему и просишь собрать по ним страницы.

Продвинутый, через Figma MCP. Если дизайн лежит в Figma, ставишь Figma-плагин с MCP из официального маркетплейса Anthropic, включаешь в Figma режим Dev Mode, и Claude Code генерит код из выбранного фрейма, держась реальных компонентов. Удобно, когда клиент или дизайнер работает в Figma. Для соло-сборки основной маршрут через Claude Design быстрее.

3. Код и анимации через Claude Code

Сначала задай правила проекта. Создай файл CLAUDE.md в корне и пропиши, чтобы Claude следовал им каждую сессию:

- Всегда TypeScript.
- Стили только Tailwind.
- Анимации только через Motion (motion.dev).
- Собирай страница за страницей, после каждой жди ок.
- Анимации точечно, не на каждый элемент.

Поставь библиотеку анимаций:

npm i motion

Теперь сборка. Ключевой момент: не «сделай весь сайт сразу», а страница за страницей. Сначала Claude Code показывает план файлов, ты смотришь, даёшь ок, и только потом идёт код. Готов экран, проверил локально через npm run dev на http://localhost:3000, дал добро, поехали к следующему. Так ты ловишь ошибки рано и не получаешь свалку.

Анимации добавляешь поверх готовой структуры, а не вместо неё. Появление секций на скролле, плавный ховер на карточках и кнопках, аккуратные переходы между страницами. Это то, что отличает премиум от шаблона. Но без фанатизма: переанимированный сайт тормозит и выглядит дёшево.

4. Деплой на Vercel и свой домен

Сначала кладёшь проект в репозиторий на GitHub. Потом заходишь на vercel.com/new, жмёшь Import, выбираешь репозиторий. Vercel сам распознаёт Next.js, ничего настраивать не надо, жмёшь Deploy и через минуту получаешь живую ссылку вида https://client-site.vercel.app. Дальше каждый твой git push Vercel пересобирает автоматически.

Теперь домен. Покупаешь его у реестратора. В проекте на Vercel идёшь в Settings → Domains → Add, вписываешь домен. Vercel выдаёт DNS-записи, обычно A или CNAME. Эти записи вписываешь в панели своего реестратора, там где покупал домен. Несколько минут на пропагацию, и сайт открывается по нормальному адресу. HTTPS Vercel включает сам, сертификат продлевает тоже сам, руками ничего не трогаешь.

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

5. Проверка перед сдачей

Перед тем как отдать клиенту, прогони чек. Деплой без проверки адаптива и скорости это классический способ услышать «а почему на телефоне всё разъехалось и грузится десять секунд». Промпт проверки ниже.

Промпты

Мастер-промпт сборки. Задаёт рамки и дисциплину «страница за страницей».

Собери сайт на Next.js по этим экранам и дизайн-системе: <ссылки или описание>.

Требования:
1. App Router, аккуратная структура папок.
2. Адаптив, mobile-first.
3. Анимации через Motion: появление на скролле, ховеры, переходы. Точечно, не на каждый элемент.
4. Семантическая вёрстка, без лишних зависимостей.
5. Собирай страница за страницей, после каждой жди ок.

Сначала покажи план файлов, потом начинай.

Чек перед деплоем.

Пройди по проекту перед деплоем.
Проверь адаптив, мета-теги, битые ссылки, скорость, доступность и что анимации не тормозят и не мешают читать.
Выдай короткий список того, что чинить до релиза, по приоритету.

Бонус, упаковка в оффер. Когда сайт готов, этим промптом собираешь коммерческое предложение под клиента.

Я собрал сайт для бизнеса: <что за бизнес, что сделал, ссылка на демо>.

Собери короткое коммерческое предложение для клиента:
- что входит в работу,
- 2-3 пакета с разным объёмом,
- что клиент даёт от себя (контент, доступы, домен),
- сроки.

Тон деловой, без воды, без обещаний которые я не контролирую.

Как на этом зарабатывать

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

Что важно понимать про рынок. Бизнесу нужен сайт, а нормальный сайт на рынке стоит от нескольких сотен до нескольких тысяч долларов в зависимости от объёма, и премиум с анимацией ближе к верхней границе. Твоя маржа тут во времени: себестоимость сборки это пара вечеров и $20 за Claude, а ценность для клиента это живой сайт, который приводит ему заявки.

Как упаковать. Сделай фикс-пакеты, а не почасовку: лендинг, многостраничник, и сверху опции вроде домена, правок, поддержки. На входе бери у клиента сайт-референс и его материалы, на выходе показывай демо на vercel-ссылке до оплаты. Человек видит свой будущий сайт живым, и продать так в разы проще, чем по словам.

Где брать клиентов. Локальный бизнес без сайта или со старым кривым, ниши которые ты понимаешь, твоя сеть, чаты. Первые сборки делай как портфолио, даже если дёшево, потому что живые примеры с анимацией продают следующие заказы лучше любых слов.

Главный рычаг тут не сам инструмент, а ранний разбор. Появилась новая связка, про которую почти никто ещё не разобрался руками. Кто первый понял механику, собрал и понятно показал клиенту, тот и снимает сливки, пока остальные спорят, заменит ли AI дизайнеров.

Если проще делегировать, чем собирать самому, или хочешь живой пример того, как эта связка упакована в готовый оффер, посмотри мой каталог работ: grindaleai.com/work. Оставляешь заявку с референсом, дальше показываю демо на живой ссылке до оплаты.

Где заходит, где осторожнее

Заходит:

Лендинги, сайты-визитки и промо-страницы бизнесу, когда нужно быстро и красиво. Это родная задача для связки.

MVP и проверка идеи на живом домене, когда важна скорость и сама гипотеза, а не вылизанный продакшн.

Осторожнее:

Сложную логику, платёжки и нестандартные интеграции всё равно доводишь руками. Автопилот хорош на вёрстке, структуре и анимациях, но тяжёлую механику лучше делать самому, иначе ловишь баги дороже ручной работы.

Анимации бьют по скорости, если переборщить. Лёгкие переходы это плюс, тяжёлые эффекты на каждый блок это минус в Lighthouse и в ощущении. Точечно.

Контент готовь заранее. Дизайн-система это не тексты и не фото. Если у клиента нет материалов, ты упрёшься в пустые блоки, и весь выигрыш по скорости съест возня с наполнением.

Домен и доступы клиента не трогай вслепую. DNS меняешь либо в его панели под его доступом, либо берёшь домен на себя по договорённости. Чужой домен наугад это способ уронить ему почту.

Чеклист перед сдачей

Прогони эти четыре пункта, прежде чем считать сайт готовым к показу.

Дизайн-система собрана и опубликована в Claude Design, экраны идут по ней, а не вразнобой.

Собрано страница за страницей, план файлов был показан до кода и принят.

Анимации точечные, сайт не тормозит, Lighthouse в норме на мобиле.

Демо-ссылка и домен живые, HTTPS работает, на телефоне всё на месте.

Частые ошибки

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

Переанимировал. Сайт красивый на видео и тормозящий в жизни. Меньше, но к месту, всегда лучше, чем эффект на каждом блоке.

Полез на бесплатный план. Claude Design и Claude Code на free не запускаются. Нужен Pro или выше, иначе застрянешь на первом шаге.

Деплой без проверки. Выкатил, клиент открыл на телефоне, всё разъехалось. Прогон чек-промпта закрывает это за пару минут.

Тронул домен клиента вслепую. Поменял DNS не там и уронил ему почту. Работаешь с доменом только под доступом и понимая, что меняешь.

Сложную логику отдал на автопилот. Платёжки и тяжёлые интеграции на полном автомате дают баги дольше, чем сделать руками. Отделяй простое от сложного.