Second Brain

site-builder-guide

время чтения ~2 мин.

Гайд по сборке сайтов через Claude Code (Иван Сергеев)

Источник: https://theivansergeev.ru/guide-sayt.html Суть: Лендинг на вид за $10,000 одной строкой в Claude Code — 21st.dev + Motion + UI/UX Pro Max

В чём суть

Claude Code + готовая сборка (папка проекта) = сайт за 5 минут. Внутри сборки:

  1. CLAUDE.md — инструкция, как собирать сайт
  2. UI/UX Pro Max skill — 50+ стилей, 161 палитра, шрифтовые пары
  3. 21st.dev MCP — склад готовых блоков (первый экран, карточки, цены, подвал)
  4. Motion (бывший framer-motion) — плавные анимации

Шаги сборки

Шаг 0 — Claude Code

Должен быть установлен Claude Code на компьютере.

Шаг 1 — Открыть сборку

Папка проекта sayt-builder/ со структурой:

sayt-builder/
├── CLAUDE.md              # инструкция сборки
├── .mcp.json              # сюда ключ от 21st.dev
└── .claude/skills/
    └── ui-ux-pro-max/     # скилл-дизайнер

Открыть в VS Code: File → Open Folder.

Шаг 2 — Ключ 21st.dev

Зарегистрироваться на https://21st.dev, создать ключ в консоли. Вставить в .mcp.json:

"env": { "API_KEY": "СЮДА_КЛЮЧ" }

Шаг 3 — Motion

npm install motion

Перезапустить Claude Code после установки.

Команда для Claude Code

› Собери лендинг для моей онлайн-школы по
  фотографии: первый экран, блок о программе,
  отзывы, цены и форма записи. Сделай чисто и
  современно, с лёгкими анимациями

Полезные ссылки

Для кого

Для людей без навыков программирования и вёрстки. Claude сам: берёт стиль у скилла-дизайнера, блоки у 21st.dev, анимации у Motion → собирает страницу → показывает в браузере.

Правки — следующим сообщением: «сделай первый экран тёмным», «заголовок крупнее».

Для твоей инфры

Когда понадобится лендинг под VPN-бот, подписку или продукт — сборка из гайда подходит. Можно запустить на jarvis.08317.ru или на отдельном поддомене с Traefik. Альтернатива — использовать навык design-md или sketch в Hermes для быстрых прототипов.

Сохранено: 2026-06-21. Разбор Ivan Sergeev guide-sayt.

Вид графа

Обратные ссылки