Как подготовить Claude Code к сборке сайта

1. Запустить агента в проекте

• Откройте страницу Claude Code, скопируйте актуальную строку установки и выполните её в терминале.
• Перейдите в папку нужного проекта и запустите Claude Code там.
• Попросите агента перечислить файлы проекта. Убедитесь, что он работает с нужной папкой, а не с домашней директорией.

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

2. Добавить библиотеку анимаций

• Откройте Motion, ранее известную как Framer Motion.
• В папке проекта выполните приведённую в исходном материале команду установки пакета framer-motion.

npm i framer-motion

• Проверьте, что framer-motion появился в зависимостях проекта. Не устанавливайте библиотеку глобально.
• Попросите агента добавить анимацию и проверьте, что он использует установленную библиотеку.

3. Добавить дизайн-скилл

• Откройте репозиторий UI UX Pro Max и установите скилл по инструкции владельца.
• Если выбранный способ установки выполняется через агента, поручите ему эту установку.
• Проверьте, что UI UX Pro Max виден агенту в списке доступных скиллов.
• Дайте задачу на интерфейс и проверьте, что агент предлагает конкретные решения с обоснованием.
• Не дублируйте работу скилла длинным описанием стиля в каждом запросе.

4. Добавить готовый компонент

• Найдите нужный компонент в 21st.dev.
• Скопируйте строку, которую каталог предлагает для вставки в агента.
• Вставьте её в Claude Code и укажите место компонента на странице.
• Проверьте, что компонент появился и выглядит как в каталоге. Используйте предоставленную строку вместо общего запроса «сделать похожую карточку».

5. Проверить сборку

• Агент видит файлы нужного проекта.
• Библиотека анимаций установлена в проект и используется.
• Дизайн-скилл доступен агенту и применяется к интерфейсу.
• На странице есть хотя бы один компонент из каталога.
• Учитывайте назначение инструментов: UI UX Pro Max задаёт знания для дизайн-решений, Motion и 21st.dev дают готовые части интерфейса.