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

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

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

Цифры

ЧТО ЗНАЧИТ «УРОВНЯ $1-5K»

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

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

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

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

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

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

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

① СТЕК ИЗ 4 ИНСТРУМЕНТОВ

Что и зачем.

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

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

② УСТАНОВКА · CLAUDE CODE

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

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

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

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

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

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

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

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

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

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

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

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

4. Запустите claude

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

`` claude ``

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

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

В терминале:

`` 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

1. Добавьте marketplace

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

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

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

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

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

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

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

В 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 (ПРОЩЕ)

1. Добавьте marketplace

Внутри Claude Code:

`` /plugin marketplace add Schoepplake/framer-motion-skill ``

2. Установите 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/мес для генерации

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

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

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

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

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

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

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

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

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

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

5. Тариф 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 сделает дальше

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

Всё это занимает 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 заново перед началом работы.