Как добавить готовый React-компонент в Cursor и сохранить его дизайн

Что нужно до установки

Откройте в Cursor папку своего React-проекта. Для этого примера подойдёт Next.js с Tailwind CSS и настроенным shadcn CLI. В проекте должен быть components.json. Если проект ещё не создан, начните с базового гайда VibeUI.

Выберите режим Agent: ему нужно читать файлы, менять страницу и запускать команды терминала. Перед установкой сохраните текущую рабочую версию проекта в Git, чтобы можно было просмотреть изменения и при необходимости вернуться к ней.

Каталог и превью открыты без регистрации. Для «Копировать для ИИ» нужен аккаунт; бесплатный лимит — 20 разных компонентов в месяц. Условия PRO указаны на странице тарифов.

1. Выберите блок и зафиксируйте его вид

Откройте faq-001. Слева — заголовок, описание и ссылка для связи, справа — раскрывающиеся вопросы. На узком экране колонки становятся в один ряд по вертикали. Откройте несколько ответов: они должны оставаться раскрытыми независимо друг от друга. Выберите подложку и закончите настройку превью до копирования: выбранные значения передаются агенту в ссылке.

Для первой установки оставьте исходный текст. Так проще понять, что именно отличается: сам компонент или уже ваша адаптация. Скриншот превью поможет сравнить результат, но для установки передавайте ссылку с инструкцией — на одном изображении нет файлов и зависимостей.

2. Скопируйте ссылку и передайте её Cursor

На странице блока нажмите «Копировать для ИИ». В буфере будет личная ссылка, действующая 30 минут. Вставьте её вместо строки в угловых скобках в задание ниже и отправьте Cursor в открытом проекте.

Добавь этот блок вопросов и ответов перед подвалом главной страницы:
<вставьте свежую ссылку из «Копировать для ИИ»>

Открой ссылку и выполни инструкцию установки. Используй настоящий компонент из реестра VibeUI вместе с его зависимостями. Сохрани выбранную тему, нативные details/summary, независимое раскрытие вопросов, типографику, отступы и поведение на узком экране. Сначала подключи исходный вариант без замены текстов. После установки перечисли добавленные файлы и покажи страницу в браузере.

Cursor должен прочитать инструкцию, установить компонент из registry и подключить его к странице. shadcn CLI копирует файлы в проект; не нужно просить агента переписывать исходник по картинке. Если Cursor запросит разрешение на команду, проверьте, что она относится к выбранному блоку и вашему проекту.

В VibeUI ссылка из «Копировать для ИИ» ведёт на инструкцию для агента. Не вставляйте её вместо адреса registry JSON в npx shadcn add. Для ручной установки откройте «Исходник компонента» и возьмите готовую команду; варианты описаны в инструкции по установке.

3. Проверьте файлы и результат в браузере

Не ограничивайтесь ответом агента «готово». Посмотрите список изменённых файлов. faq-001 использует ещё три компонента VibeUI: heading-001, accordion-002 и button-077. При целевых путях из реестра набор выглядит так:

components/vibeui/faq-001.tsx
components/vibeui/heading-001.tsx
components/vibeui/accordion-002.tsx
components/vibeui/button-077.tsx

Если пути в вашем проекте настроены иначе, ориентируйтесь на его components.json и фактические импорты. Важен полный состав компонента и его зависимостей. Затем попросите Cursor запустить dev-сервер и откройте страницу.

• Сравните выбранную тему, заголовок, ширину текста, карточки вопросов и отступы с превью.
• Раскройте два ответа подряд и убедитесь, что первый не закрылся. Перейдите к вопросу клавишей Tab и раскройте его клавишей Enter или пробелом.
• Сузьте окно примерно до 390 px, затем вернитесь на десктоп. Колонки должны сложиться вертикально, а текст ответов — помещаться без горизонтальной прокрутки.
• Проверьте ссылку для связи. В демо стоит #contact; перед публикацией замените его реальным адресом или существующим якорем вашей страницы.

4. Замените контент отдельным шагом

Когда исходный вид совпал, заменяйте текст, ссылки и цвета через props. В faq-001 для этого есть title, description, items, contactLabel, contactHref и accent. Вид маркера задаёт marker, оформление раскрытой карточки — elevation. Начните с замены одного вопроса и ответа, затем проверьте раскрытую карточку на телефоне.

Пример ниже предполагает, что секция contacts уже существует. Подставьте свой текст и настоящий адрес кнопки.

Адаптируй установленный Faq001 под мой проект. Заголовок: «Перед началом работы». Описание: «Ответы на частые вопросы». В items передай мой список объектов question/answer — сначала попроси у меня вопросы и ответы, не придумывай условия продукта. Ссылка под заголовком: contactLabel="Связаться", contactHref="#contacts". Внизу страницы уже есть секция с id="contacts".

Меняй данные через props в месте вызова. Сохрани две колонки на широком экране, одну на узком, нативные details/summary, независимое раскрытие вопросов, размеры шрифтов и отступы.

Длинный заголовок может занять больше строк даже при неизменном компоненте. Сначала сократите текст и проверьте его на телефоне. Просьба «переделать весь блок, чтобы влезло» смешивает адаптацию контента с новым дизайном и усложняет сравнение.

Если что-то пошло не так

Cursor не открывает ссылку

На странице блока раскройте «Показать полную инструкцию» и скопируйте её целиком в чат агента. Используйте свежую инструкцию: содержащиеся в ней ссылки тоже имеют срок действия.

Установка отвечает 401

Вернитесь в VibeUI, проверьте вход в аккаунт и получите новую ссылку. Не используйте голый адрес /r/pro/faq-001.json без подписи. Если новую ссылку получить не удаётся, проверьте доступ и лимиты в аккаунте.

Агент написал похожий блок вместо установки

Попросите показать команду установки, её результат и добавленные файлы. Если установки не было, вернитесь к сохранённой версии или просмотрите diff и повторите задачу с полной инструкцией. Один ответ «дизайн сохранён» не подтверждает, что использован исходный компонент.

Файлы есть, но вид отличается

Проверьте color-scheme окружения, значения props и ширину контейнера. У faq-001 нет пропа tone: тема следует окружению. Проверьте, не меняет ли глобальный CSS заголовки, ссылки или фон. Сначала найдите конкретное отличие; не просите агента исправлять всё сразу.

Полный порядок диагностики ошибок установки