Схема верстки премиального сайта в Claude Code за 3 инструмента

Это практическое руководство для предпринимателей и разработчиков, которые хотят собирать визуально дорогие сайты через Claude Code. Инструкция показывает, как отказаться от базовых версток нейросети и подключить профессиональные библиотеки анимаций.

Как настроить вёрстку с Claude Code

1. Подготовка окружения и запуск Claude Code

• Открой терминал в папке твоего проекта (Next.js, React или HTML/Vite).
• Запусти Claude Code командой claude (или npx @anthropic-ai/claude-code).
• В терминале появится диалоговый интерфейс Claude Code, готовый принимать инструкции и читать локальные файлы.

1. Подключение плавной прокрутки через Lenis

• Скопируй адрес репозитория библиотеки Lenis: github.com/darkroomengineering/lenis.
• Вставь промпт в терминал Claude Code:

Установи библиотеку Lenis из репозитория https://github.com/darkroomengineering/lenis и подключай плавную прокрутку (smooth scroll) для всего сайта. Импортируй стили lenis/dist/lenis.css и убедись, что нативная прокрутка и свойства position: sticky продолжают работать корректно.

• Ты увидишь, как Claude Code сам выполнит команду npm i lenis, добавит инициализацию в корневой компонент сайта и применит стили.

1. Настройка эффектов и анимации с GSAP

• Скопируй ссылку на официальный репозиторий GSAP: github.com/greensock/GSAP.
• Передай в Claude Code следующий промпт:

Установи GSAP из репозитория https://github.com/greensock/GSAP и подключи модуль ScrollTrigger. Настрой плавно проявляющиеся блоки при прокрутке страницы и свяжи события ScrollTrigger с Lenis, чтобы анимации выводились синхронно и без рывков.

• В терминале отобразится процесс установки пакета gsap и создание анимационных триггеров для главных элементов интерфейса.

1. Вставка готовых компонентов из React Bits и 21st.dev

• Используй библиотеки визуальных элементов: репозиторий github.com/DavidHDev/react-bits и каталог 21st.dev.
• Скопируй ссылку на понравившийся компонент или укажи инструмент в промпте:

Возьми готовые компоненты анимированных кнопок и бегущих плашек из репозитория https://github.com/DavidHDev/react-bits и каталога https://21st.dev. Вставь их на главную страницу, адаптировав под тему нашей Tailwind CSS конфигурации.

• Claude Code скачает код нужных компонентов, создаст для них файлы в проекте и подключит их к макету.

Лимиты и нюансы

• Затраты на Claude Code: Для работы требуется оплаченный тариф Claude Pro/Team или API-ключ Anthropic. При интенсивной сгенерированной вёрстке можно временно достигнуть лимита по токенам в час.
• Лицензия GSAP: Базовый GSAP и модуль ScrollTrigger бесплатны для большинства бизнес-проектов. Платные модули (например, SplitText) требуют подписки Club GreenSock, но для стандартных премиум-эффектов достаточно бесплатной версии.
• Синхронизация Lenis и GSAP: Главная ошибка — запустить плавающий скролл и ScrollTrigger отдельно. Claude Code должен прописать обновление ScrollTrigger.update в цикле lenis.on('scroll'), иначе элементы будут подрагивать при прокрутке.
• Производительность: Не перегружай одну страницу десятками сложных JS-анимаций одновременно, особенно для мобильных устройств.

Что дальше

Связка AI-кодинга и готовых инженерных библиотек позволяет сдавать дизайн мирового уровня без долгих недель ручной верстки. Инструменты берут на себя рутину, а ты фокусируешься на смысловой части и продукте.

Если тебе нужно внедрить ИИ-систему в рабочие процессы бизнеса — от разработки интерфейсов до автоматизации продаж и аналитики, — напиши в директ @ii.systema слово система. Мы разберем твои задачи и предложим решение.