Сайт-фабрика · Claude Code

Сайт уровня $1-5K фрилансера.
За вечер.

Claude Code собирает лендинги, портфолио и презентационные сайты на уровне, за который фрилансер берёт от тысячи до пяти тысяч долларов. Не за «одну команду» как обещают рилсы, а за несколько правильных промптов с правильным стеком. В этом гайде честный разбор: какие 4 инструмента нужны, как их установить и чего реально ожидать.

инструмента в стеке

1 вечер

на полный сайт

$20

в месяц на стек

$1-5K

уровень результата

Что значит «уровня $1-5K»

Без иллюзий. Без обмана.

✅ Стек отлично делает

· Лендинги услуг (юрист, тренер, студия)
· Портфолио и презентация бизнеса
· Сайт-визитка с формой записи
· Запуск продукта, страница ожидания
· Конференция, мероприятие, ивент

❌ Не пытайтесь делать

· Интернет-магазин с корзиной и оплатой
· SaaS с регистрацией и тарифами
· Соцсеть, маркетплейс, дашборды
· Системы с базой данных и админкой
· Всё что больше 5 страниц с логикой

Почему «не за одну команду»

Один промпт = один экран среднего качества. Сайт уровня дорогого фрилансера собирается из 5-10 промптов: hero, секции с продуктом, отзывы, форма, футер. Это нормально и быстро. Просто не ведитесь на «одной командой» в рилсах.

① Стек из 4 инструментов

Что и зачем.

Claude Code

База

CLI инструмент от Anthropic. Запускается в терминале, пишет код, ставит зависимости, открывает проекты. Без него остальные 3 инструмента не работают.

$20/мес (Pro)

UI/UX Pro Max

Дизайн-эстетика

Skill с банком из 50+ UI-стилей (Glassmorphism, Bento, Brutalist) и дизайн-системами. Без него Claude рисует generic-сайты в стиле AI-шаблонов.

бесплатно

Framer Motion skill

Анимации

Skill учит Claude правильно использовать библиотеку Framer Motion: плавные переходы, hover-эффекты, scroll-анимации. Без него анимации либо плохие, либо никакие.

бесплатно

21st Dev

Компоненты

MCP-сервер. Claude обращается к нему с запросом «нужна красивая кнопка/hero/форма» и получает готовый production-grade компонент. Бесплатный тариф для поиска, $20/мес для генерации.

$20/мес (Pro)

Важно понимать разницу

Skill = текстовая инструкция, которая «прокачивает» Claude знаниями. MCP-сервер = внешний сервис, к которому Claude обращается за данными или генерацией. UI/UX Pro Max и Framer Motion это skills (контекст). 21st Dev это MCP (внешний инструмент). Это не одно и то же, и устанавливаются они разными командами.

② Установка · Claude Code

База. 5 минут.

Claude Code это терминальное приложение. Если терминала никогда не открывали — это не страшно, описываю каждый шаг.

Откройте терминал

Mac: Cmd+Space, наберите «Terminal», Enter.

Windows: Win+R, наберите «cmd» или установите Windows Terminal.

Установите Node.js (если нет)

Скачайте LTS-версию с nodejs.org и установите. Это даст команду npm в терминале.

Проверьте: в терминале выполните node --version. Должна показаться версия (например v22.0.0).

Установите Claude Code

В терминале выполните:

npm install -g @anthropic-ai/claude-code

Подождите 30-60 секунд. Если ругается на права (permission denied) — на Mac добавьте sudo перед командой.

Запустите claude

В терминале наберите:

claude

При первом запуске попросит залогиниться в Anthropic. Откроется браузер, войдите вашей чистой почтой (если из России — см. гайд про доступ).

Создайте папку для проекта

В терминале:

mkdir my-site
cd my-site
claude

Это создаст папку, перейдёт в неё и запустит Claude Code в контексте этой папки. Тут будет ваш будущий сайт.

③ Установка · UI/UX Pro Max

Банк дизайнов. 50+ стилей внутри.

Без этого скилла Claude будет рисовать generic-сайты с одинаковыми градиентами и стоковыми картинками. С ним вы получаете доступ к Glassmorphism, Bento-grid, Brutalism, Editorial, Soft UI и десяткам других направлений. Можно просто сказать «сделай в стиле Bento» и Claude поймёт.

UI/UX Pro Max (сайт)

Описание, примеры стилей, документация

GitHub (исходники)

Если хочется заглянуть под капот

Две команды внутри Claude Code

Добавьте marketplace

Запустите Claude Code (если ещё не запущен), внутри него наберите:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

Это подключит репозиторий с плагином. Команда выполняется один раз.

Установите сам скилл

/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

После установки скилл активируется автоматически каждый раз, когда Claude видит задачу про дизайн или UI.

Проверьте что работает

В Claude Code наберите:

покажи доступные UI-стили из UIUX Pro Max

Claude должен перечислить 50+ стилей. Если выдаёт что-то generic — переустановите.

④ Установка · Framer Motion skill

Анимации. Без дёрганых эффектов.

Сразу важное уточнение: ставим именно skill, а не саму библиотеку. Skill это набор инструкций для Claude как правильно использовать Framer Motion. Когда дойдёт до сайта, Claude сам поставит библиотеку через npm если она понадобится.

Что такое Framer Motion: это React-библиотека от компании Framer для плавных анимаций. Те самые «красивые переходы» на современных сайтах часто сделаны на ней. Skill учит Claude использовать её правильно: scroll-анимации, hover-эффекты, переходы между секциями.

ClaudSkills (Framer Motion)

Один из вариантов skill, ставится через curl

GitHub (Schoepplake)

Второй вариант, ставится через plugin marketplace

Способ A · через plugin marketplace (проще)

Добавьте marketplace

Внутри Claude Code:

/plugin marketplace add Schoepplake/framer-motion-skill

Установите skill

/plugin install framer-motion@framer-motion-skill

Готово, Framer Motion skill активен.

Способ B · через curl (если первый не сработал)

В обычном терминале (НЕ внутри claude) выполните:

mkdir -p ~/.claude/skills/framer-motion
curl -L https://claudskills.com/skills/framer-motion/SKILL.md -o ~/.claude/skills/framer-motion/SKILL.md

Это вручную создаёт папку и кладёт туда skill-файл. Claude Code подхватит его при следующем запуске.

⑤ Установка · 21st Dev MCP

Генератор компонентов. Magic Generate.

21st Dev это самый сильный инструмент в стеке. Это не просто шаблоны, это AI который генерирует 5 вариантов любого UI-компонента (hero, кнопка, форма, карточка) по вашему текстовому описанию. Claude обращается к 21st Dev через MCP-протокол.

21st.dev

Регистрация, документация, тарифы

21st.dev/magic

Magic Generate, $20/мес для генерации

Зарегистрируйтесь на 21st.dev

21st.dev → Sign up. Войдите через GitHub или Google.

Получите API-ключ

В личном кабинете найдите раздел API Keys. Создайте новый ключ, скопируйте его. Будет выглядеть примерно так: 21st_xxxxxxxxxxxxxxxxxxxxx

Установите MCP одной командой

В обычном терминале (НЕ внутри claude):

npx @21st-dev/cli@latest install --api-key ВАШ_КЛЮЧ

Замените ВАШ_КЛЮЧ на скопированный ранее ключ. Команда сама пропишет нужные настройки в Claude Code конфиг.

Перезапустите Claude Code

Выйдите из текущей сессии (Ctrl+C два раза) и запустите claude заново. При запуске должно появиться сообщение что MCP-сервер 21st-dev/magic подключён.

Тариф Pro для Magic Generate

Поиск компонентов бесплатный. Генерация 5 вариантов компонента (Magic Generate) требует Pro-тариф на 21st.dev — $20/мес. Без Pro Claude сможет находить готовые компоненты, но не генерировать новые под ваш промпт.

⑥ Промпт · как просить сайт

Магия начинается тут.

Когда все 4 инструмента установлены, открываете Claude Code в папке проекта и пишете один развёрнутый промпт. Claude сам решит, какой стек использовать, какие компоненты взять из 21st Dev, какой стиль из UI/UX Pro Max применить.

Пример хорошего промпта

Сделай мне лендинг для студии йоги "Прана" в Москве.

Информация:
- адрес: Лесная 12, метро Белорусская
- цена абонемента: 8000₽/мес
- запись по WhatsApp +7 999 123 45 67

Структура:
1. Hero с названием, подзаголовком и кнопкой записи
2. Преимущества (3 карточки: групповые занятия, индивидуальные, онлайн)
3. Расписание занятий (таблица или список)
4. Команда (3 преподавателя с фото-плейсхолдерами)
5. Цены (3 тарифа)
6. Форма записи
7. Футер с контактами

Стиль: используй UIUX Pro Max - что-то спокойное, тёплое. Soft UI или Editorial.
Анимации: scroll-fade-in для секций (используй Framer Motion skill).
Компоненты: hero и форму возьми из 21st Dev.
Стек: Next.js 16 + Tailwind. Без бэкенда, только статическая страница.

Что Claude сделает дальше

Создаст структуру Next.js проекта (это 30-60 секунд)
Поставит зависимости: tailwind, framer-motion, lucide-react
Сходит в 21st Dev за hero-блоком и формой записи
Применит стиль из UIUX Pro Max ко всем секциям
Добавит анимации Framer Motion: появление при скролле
Запустит dev-сервер на localhost:3000
Покажет вам ссылку, откроете в браузере

Всё это занимает 10-15 минут на первый прогон. Потом вы скажете «hero сделай ярче», «команду замени на 2 человека» и т.д. Это уже минуты.

Чем подробнее промпт - тем лучше результат

«Сделай мне сайт студии йоги» = generic-результат. С деталями (название, адрес, цены, структура, стиль) = 5-10 кратно качественнее. Не бойтесь писать длинный промпт. Claude любит контекст.

Антипаттерны

На чём проваливаются.

Ставить только 21st Dev без скиллов

Получите функциональные компоненты, но дизайн будет generic. UI/UX Pro Max задаёт «общий вкус» сайта, без него все сайты выглядят одинаково.

Просить «сайт магазина» или «SaaS»

Этот стек для лендингов и презентационных сайтов. Магазин с корзиной = база данных + платежи + админка. Это уже другая задача и другой стек (Next.js + Stripe + Supabase).

Короткий промпт без структуры

«Сделай красиво» = красиво по мнению Claude, а не по вашему. Опишите секции, дайте текст, укажите стиль. Чем больше деталей, тем точнее попадание.

Не указывать стиль из UIUX Pro Max

Claude не догадается какой из 50+ стилей вам нужен. Скажите явно: «Brutalist» или «Soft Pastel» или «Editorial Magazine». Если не знаете - попросите Claude показать список.

Запускать без перезагрузки после установки

Skills и MCP подхватываются при старте Claude Code. Если поставили все 4 инструмента подряд - выйдите и запустите claude заново перед началом работы.

6 недель практики

Обучение по нейросетям

6 недель живой практики с наставником: промпты, артефакты и автоматизация под ваш бизнес.

Записаться на обучение

Новое · бесплатный старт

Академия AGINE

Игровой тренажёр: прокачай своего Claude, на выходе каждого урока забери готовый артефакт под бизнес.

Попробовать бесплатно

Бесплатно

Бесплатный вебинар по нейросетям

Живой эфир: покажем, как применить это в вашем деле, и ответим на вопросы.

Записаться на вебинар

Дорогой сайт бесплатно

Открыть

Сайт уровня $1-5K фрилансера.За вечер.