раздел 03

Как интегрировать

Интерфейс в Artifacts красивый, но живёт в чате. Чтобы он стал частью вашего сайта или приложения, код переносят в проект и там оживляют: подключают данные, кнопки, переходы.

Claude отлично делает первый кадр интерфейса. Превратить его в работающую страницу проекта - задача редактора-агента: Cursor или Claude Code.

Шаг за шагом

1
Заберите код из Claude
Скопируйте файл из Artifacts или попросите Claude отдать готовые файлы целиком.
2
Положите в проект
Создайте файл компонента или страницы в своём проекте и вставьте туда код.
3
Доработайте агентом
В Cursor или Claude Code попросите подключить данные, кнопки и переходы.
4
Проверьте на телефоне
Откройте страницу, убедитесь, что адаптивно и ничего не разъехалось.

Доработка в Cursor или Claude Code

Перенесли код - дальше работаете там же, где живёт проект. Примеры реплик агенту:

Вставь этот компонент в страницу /pricing.
Кнопку «Купить» подключи к форме оплаты.
Данные карточек подтяни из файла data.json, а не хардкодом.
Сделай так, чтобы шапка была общей для всех страниц.
Cursor
AI-редактор: видит весь проект, аккуратно вставляет компонент и правит соседние файлы. Удобно глазами следить за изменениями.
Claude Code
Агент в терминале: даёте задачу - он сам находит нужные файлы, вставляет код и проверяет. Хорош для многошаговых правок.

Референсы и дизайн-система

Чтобы новые экраны были в едином стиле, дайте Claude образец:

  • покажите скриншот уже готовой страницы проекта - «сделай в том же стиле»;
  • перечислите цвета, шрифты, отступы - это и есть мини дизайн-система;
  • сохраните этот список и вставляйте в каждый промпт, чтобы интерфейсы не разъезжались.

Связка с Figma через MCP

Если дизайн рисуют в Figma, Claude может читать макет напрямую - через MCP-сервер. MCP - это способ дать нейросети доступ к внешнему инструменту. Подключив Figma по MCP, вы говорите агенту «свёрстай вот этот фрейм из Figma», и он берёт данные макета сам, без скриншотов.