Сайт одной строкой в Claude Code: 8 минут и 4 команды 2026

Что нужно до того, как вставлять строку

Три шага, все разовые. Пропустишь любой, и строка упадёт на первой же команде

Первое: проверь, что на компьютере есть Node. Открой чёрное окно с командами (на Mac это программа «Терминал», на Windows «PowerShell»), вставь туда node -v и нажми Enter. Ответ вроде v25.9.0 значит всё на месте. Ответ command not found: node значит Node ещё не стоит: поставь его с nodejs.org, кнопка LTS, дальше обычная установка мышкой, и после неё открой окно заново. Если чёрное окно с командами для тебя совсем новое, у меня есть отдельный разбор вайбкодинга с нуля

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

Третье: поставь сам Claude Code, если его ещё нет. Строка сверху ставит скиллы и блоки ДЛЯ него, но не его самого. Набери claude --version: ответ с номером значит всё готово, ответ command not found: claude значит ставим командой из шага 1 ниже. При первом запуске он попросит войти в аккаунт, и для работы нужна платная подписка Claude уровня Pro или выше

Про 21st отдельно: готовые блоки интерфейса заработают только после того, как получишь ключ и положишь его в переменную, это шаг 4 внизу. Пока ключа нет, проси у Claude Code просто «собери лендинг, используй скилл ui-ux-pro-max», без упоминания 21st, иначе он будет дёргать инструмент, которого у него ещё нет

Получилось или нет: три проверки за двадцать секунд

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

claude --version          # печатает номер версии, у меня 2.1.261
npx uipro --version       # печатает 2.15.0
ls .claude/skills         # печатает 7 папок

Семь папок это banner-design, brand, design, design-system, slides, ui-styling, ui-ux-pro-max. Если папок нет вообще, скилл встал не туда: uipro init ставит его в ТЕКУЩУЮ папку, и запускать его надо там, где лежит проект

Почему строка из популярных роликов сегодня ломается

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

Последняя строка самая дорогая. Пакет @21st-dev/magic в реестре остался, установка проходит без единой ошибки, и человек честно думает, что всё получилось. А внутри это тонкий переходник на новый адрес, и без свежего ключа он молчит. Тут живёт самая частая ошибка, и она не показывает никакой ошибки на экране

Разбор по шагам

Шаг 1. Claude Code

Если он уже стоит, шаг пропускается. Если нет, скопируй команду из документации и вставь её в чёрное окно с командами, потом нажми Enter. Увидишь, как пойдут строки загрузки:

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

На Windows без WSL та же установка делается одной строкой в PowerShell:

irm https://claude.ai/install.ps1 | iex

Мелочь, на которой новички залипают: если ты решишь проверить этот адрес браузером или через curl без флага -L, получишь пустой ответ. Это не поломка: адрес перебрасывает на downloads.claude.ai, и команда идёт по этой ссылке сама. Подробный разбор установки с нуля, включая вход в аккаунт, лежит в гайде по установке Claude Code

Шаг 2. Пакет анимаций

Вставь эту команду в том же окне, уже внутри папки своего проекта, и нажми Enter. Увидишь строку added 5 packages:

npm install motion

Замер моего прогона: установка пакета анимаций заняла 4 секунды, установщик дизайна 3 секунды, сам скилл 1 секунду

Раньше он назывался framer-motion, и именно это имя показывают ролики. Сейчас оба имени ведут в один проект и обе публикации идут под версией 13.3.0, но документация авторов написана под motion, и Claude Code, читая её, ждёт именно этого имени. На прогоне установка заняла 4 секунды и поставила 5 пакетов. Что с этим пакетом делать дальше, я разбирал в гайде про анимированный сайт

Шаг 3. Скилл дизайна

Это главный шаг: без него Claude Code рисует сайты своим вкусом, и получается тот самый узнаваемый нейросетевой лендинг с фиолетовым градиентом

Вставь две команды подряд, вторую запускай после того, как первая договорит. Увидишь зелёную строку про успех:

npm install ui-ux-pro-max-cli
npx uipro init --ai claude

На экране появится success UI/UX Pro Max installed successfully!, а на диск ляжет 172 файла в семи папках

Числа этого шага я снял на своём прогоне 14 сентября 2026: команда npx uipro init --ai claude ответила строкой про успешную установку, после неё в проекте оказалось 7 папок скиллов и 172 файла. Тогда же сверил и карточку проекта: 127 тысяч звёзд, лицензия MIT, обе строки установки через /plugin взяты с его страницы дословно

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

Оба способа штатные, авторские. Способа «скажи Клоду поставить этот скилл», который показывают в роликах, в документации нет вовсе: иногда он срабатывает случайно, потому что Claude Code сам догадывается скачать файлы проекта, а иногда кладёт их не туда. Что такое скиллы и чем они отличаются от плагинов и MCP, разобрано в гайде про плагины, скиллы и MCP

Один подводный камень я нашёл своим прогоном: описание на странице проекта обещает флаг --dry-run для безопасной примерки, а живая команда uipro версии 2.15.0 про него не знает и отвечает error: unknown option '--dry-run'. Настоящие флаги: --ai, --force, --offline, --global, --token

Это я тоже проверил руками в тот же день: установленная версия 2.15.0 на флаг --dry-run отвечает отказом, хотя описание проекта его обещает

Шаг 4. Готовые блоки интерфейса

Вставь эту команду и нажми Enter. Увидишь готовый блок настроек, который она сама допишет в файл проекта:

npx -y @21st-dev/cli@latest init --client claude --write

Без --write команда просто напечатает блок настроек, чтобы ты посмотрел глазами, и это удобнее для первого раза. Вот что она печатает:

{
  "mcpServers": {
    "21st": {
      "type": "http",
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "${API_KEY_21ST}" }
    }
  }
}

Ключ бесплатный, берётся на странице 21st.dev/mcp после входа в аккаунт. Дальше его нужно положить в переменную окружения API_KEY_21ST, и это одна команда. На Mac и Linux вставь в то же окно строку ниже, заменив текст в кавычках на свой ключ:

echo 'export API_KEY_21ST="твой-ключ"' >> ~/.zshrc && source ~/.zshrc

На Windows в PowerShell то же самое делается так, после команды окно нужно закрыть и открыть заново:

setx API_KEY_21ST "твой-ключ"

Что ломается и что делать

Таблица собрана по дословным строкам с экрана, а не по догадкам. Её и стоит унести: она отвечает на вопросы, которые возникают уже ПОСЛЕ первой успешной установки

Кому какой шаг нужен, а какой нет

Не всем нужны все четыре. Разложил по твоей ситуации:

• хочешь просто проверить, как это работает - хватит шагов 1 и 3. Анимации и готовые блоки нужны, когда есть что анимировать
• собираешь лендинг под реальный запуск - нужны все четыре, и начинать стоит с 3, потому что дизайн решает больше, чем анимация
• уже собрал сайт и он выглядит нейросетевым - тебе нужен только шаг 3, остальное не поможет
• работаешь не в Claude Code, а в Cursor или Codex - шаг 3 ставится той же командой с другим значением флага --ai, шаг 4 тоже поддерживает эти редакторы

Та же раскладка таблицей, если удобнее смотреть по шагам:

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

Источники

Каждая команда и каждое число сняты с живых страниц и собственного прогона 14 сентября 2026

• Быстрый старт Claude Code - команда установки и порядок первого запуска
• Репозиторий UI UX Pro Max - оба штатных способа установки, список поддерживаемых редакторов, лицензия
• Пакет ui-ux-pro-max-cli в реестре npm - версия CLI и имя команды uipro
• Пакет motion в реестре npm - текущее имя и версия пакета анимаций
• Репозиторий magic-mcp - объявление о переезде Magic MCP на 21st MCP и сбросе ключей
• Страница 21st MCP - получение ключа и настройка под редакторы

Памятка: что проверить, если строка не сработала

Восемь мест, на которых чаще всего разъезжается установка

Частые вопросы