Гайды / Вайбкодинг
Вайбкодинг · сборка сайта · по шагам
Собери сайт на вид за $10 000 одной строкой в Claude Code
Ты пишешь Claude одну строку, он сам собирает чистый современный лендинг: макет, готовые блоки, анимации. Ниже разложил по шагам: что нужно до старта, куда вставить один бесплатный ключ, какую команду набрать и какую строку написать, чтобы сайт собрался целиком. Без вёрстки и без программирования, понятно человеку, который открывает это впервые
В чём фокус
Четыре шага дизайнера свёрнуты в один проект
Обычно красивый сайт это работа на месяц: дизайнер рисует макет, верстальщик собирает, кто-то добавляет анимации, и сверху счёт от агентства на пару тысяч долларов. Готовая сборка складывает всё это в один проект для Claude Code
Внутри уже лежит скилл-дизайнер UI/UX Pro Max (он даёт Claude вкус: 50+ стилей, 161 палитра, готовые шрифтовые пары и правила, чтобы макет выглядел дорого, а не как из 2010-го). К нему подключается 21st.dev (склад готовых блоков-секций, первый экран берёшь оттуда) и Motion (библиотека, которая оживляет блоки на странице). Ты пишешь одну строку, Claude сам дёргает все три и выдаёт готовый сайт
Шаг 0 · что нужно до старта
Сначала на компьютере должен стоять Claude Code
Вся сборка работает поверх Claude Code (это Claude, встроенный в редактор кода VS Code, как обычная программа на компьютере). Если его ещё нет, поставь сначала его, это 15 минут и без программирования
Если Claude Code ещё не стоит
У меня есть отдельный гайд: скачать, оплатить российской картой и запустить за один вечер, всё по скриншотам
Установить Claude Code с нуляУже стоит и открыт в VS Code? Тогда поехали собирать сайт
Шаг 1 · открой готовую сборку
Распакуй папку и открой её в VS Code
Готовую сборку я пришлю тебе по кодовому слову САЙТ (это папка проекта). Распакуй её куда удобно, например на рабочий стол. Дальше в VS Code сверху меню File → Open Folder и выбери эту папку
Внутри уже лежит всё, что нужно: скилл-дизайнер, файл CLAUDE.md (это инструкция, по которой Claude собирает сайт) и файл настроек .mcp.json (туда на следующем шаге вставишь один ключ). Тебе ничего не нужно настраивать руками, кроме одного ключа ниже
Шаг 2 · бесплатный ключ для готовых блоков
Возьми ключ 21st.dev и вставь его в сборку
21st.dev отдаёт Claude готовые блоки сайта (первый экран, меню, карточки, подвал). Чтобы он мог их брать, нужен бесплатный ключ. Зайди на 21st.dev/magic/console, войди через Google, нажми Create new key и скопируй строчку ключа
Теперь открой в сборке файл .mcp.json и вставь ключ вместо слова СЮДА_КЛЮЧ. Выглядит это так:
# вставь свой ключ вместо СЮДА_КЛЮЧ
"env": { "API_KEY": "СЮДА_КЛЮЧ" }
Что увидишь
Сохрани файл (Cmd+S или Ctrl+S). Всё, Claude теперь умеет тянуть готовые блоки с 21st.dev. Ключ бесплатный, на старте его хватает с запасом
Шаг 3 · включи анимации одной командой
Поставь Motion, чтобы блоки оживали
Motion это библиотека анимаций, на ней блоки плавно появляются и двигаются (то, за что глаз цепляет «дорого»). Ставится одной командой. Открой в VS Code встроенный терминал (верхнее меню Terminal → New Terminal) и вставь:
# библиотека анимаций (бывшая framer-motion)
npm install motion
Что увидишь
В терминале пробежит установка и появится строчка added … packages. Готово, анимации в проекте есть. Перезапусти Claude Code, чтобы он подхватил новые настройки сборки
Как пользоваться
Пишешь одну строку, Claude собирает весь сайт
Дальше самое простое. Открой чат Claude Code в этой папке и напиши одну строку: что за сайт и про что. Инструкция в сборке уже говорит Claude, как взять стиль у скилла-дизайнера, готовый первый экран у 21st.dev и оживить блоки через Motion. Тебе не нужно ничего из этого помнить, ты просто говоришь, что хочешь
› Собери лендинг для моей онлайн-школы по
фотографии: первый экран, блок о программе,
отзывы, цены и форма записи. Сделай чисто и
современно, с лёгкими анимациями
дизайнер
задаёт стиль, палитру и шрифты, чтобы выглядело дорого
21st.dev
даёт готовый первый экран и блоки
Motion
оживляет блоки, страница дышит
Claude соберёт страницу и сам её покажет в браузере. Не нравится цвет или заголовок, пишешь следующей строкой «поменяй первый экран на тёмный» или «сделай заголовок крупнее», он правит на месте. Никакого кода руками
Чтобы не споткнуться
Claude не берёт блоки с 21st.dev: где проверить ключ в .mcp.json
- 01
Сначала Claude Code, потом сборка
Сборку некуда открывать, если на компьютере ещё нет Claude Code. Если ничего не запускается, почти всегда дело в этом, вернись к Шагу 0
- 02
Блоки не берутся? Проверь ключ
Если Claude говорит, что не может взять блоки с 21st.dev, значит ключ не вставлен или файл не сохранён. Открой .mcp.json, проверь, что вместо СЮДА_КЛЮЧ стоит твой ключ, и сохрани
- 03
Перезапусти после установки
После npm install motion закрой и открой Claude Code заново, иначе он не увидит новые настройки сборки
Зачем тебе это на самом деле
Лендинг под любую идею за время, пока остывает кофе
Собрать сайт по шагам выше ты сможешь сегодня. Дальше начинается интересное. Когда страница собирается одной строкой, ты перестаёшь откладывать запуск «пока нет сайта» и начинаешь проверять идеи пачками
Появилась мысль про продукт, ты за пять минут собрал под неё лендинг и пустил трафик. Не зашло, собрал другой. Раньше за каждый такой просил бы агентство и платил тысячи, теперь это стоит тебе одной строки и пары минут
А дальше
«Собрал. А как сделать из этого сайт, который реально продаёт?»
Собрать красивую страницу это вход. Дальше идёт то, что в сборку не положишь: как написать первый экран, чтобы человек остался, какие блоки и в каком порядке ведут к заявке, как подключить оплату и форму, как сделать так, чтобы сайт не просто висел, а приносил клиентов. Это уже не одна строка, это система
Я разложил её по шагам на ИИ-Лагере: собираем сайт, доводим до продающего и подключаем к нему трафик, от пустого экрана до первых заявок, руками вместе со мной
Живое мероприятие · ИИ-Лагерь
Хочешь не просто собрать сайт, а сделать из него поток клиентов?
На ИИ-Лагере весь путь от и до: собираем сайт, доводим до продающего и подключаем трафик, от пустого экрана до первых заявок, вместе со мной
Забрать бесплатную путёвкуСобрал сайт одной строкой, дальше делаем из него продажи ))