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

Запустите Claude Code в проекте, добавьте библиотеку анимаций, дизайн-скилл и готовый компонент. Проверки после каждого шага помогут убедиться, что инструменты подключены к нужному проекту.

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

- [ ] Откройте [страницу Claude Code](https://claude.com/product/claude-code), скопируйте актуальную строку установки и выполните её в терминале.
- [ ] Перейдите в папку нужного проекта и запустите Claude Code там.
- [ ] Попросите агента перечислить файлы проекта. Убедитесь, что он работает с нужной папкой, а не с домашней директорией.

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

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

- [ ] Откройте [Motion](https://motion.dev), ранее известную как Framer Motion.
- [ ] В папке проекта выполните приведённую в исходном материале команду установки пакета `framer-motion`.

```bash
npm i framer-motion
```

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

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

- [ ] Откройте репозиторий [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) и установите скилл по инструкции владельца.
- [ ] Если выбранный способ установки выполняется через агента, поручите ему эту установку.
- [ ] Проверьте, что UI UX Pro Max виден агенту в списке доступных скиллов.
- [ ] Дайте задачу на интерфейс и проверьте, что агент предлагает конкретные решения с обоснованием.
- [ ] Не дублируйте работу скилла длинным описанием стиля в каждом запросе.

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

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

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

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

---

Источник: https://localhost:3000/m/kak-podgotovit-claude-code-k-sborke-sayta