Claude Desktop → Figma

Генерация дизайна в Claude Desktop и импорт в Figma через MCP-сервер html.to.design

Требуется платная подписка — режим Code и MCP-коннекторы доступны только в Claude Pro, Team и Enterprise.

Шаг 1. Установка Claude Desktop

1. Скачайте приложение с claude.com/download
2. Установите и войдите в аккаунт

Шаг 2. Подготовка проекта

Создайте пустую папку для проекта в любом удобном месте — например, на Рабочем столе.

Шаг 3. Генерация сайта

1. В Claude Desktop переключите режим на Code (переключатель вверху окна)
2. Под текстовым полем выберите папку проекта, созданную на предыдущем шаге
3. Напишите промпт:

Создай лендинг для мобильного приложения для учёта финансов.
Используй Tailwind CSS через CDN.
Тёмная тема, современный минималистичный дизайн.
Секции: hero с мокапом телефона, фичи (3 карточки), CTA.

Шаг 4. Просмотр результата

Откройте файл index.html из папки проекта в браузере — вы увидите готовый сайт.

Шаг 5. Доработка дизайна

Результат можно улучшать итеративно — просто пишите в чат, что хотите изменить:

• «Сделай hero-секцию выше, добавь градиент»
• «Добавь секцию с отзывами»
• «Замени иконки на более минималистичные»

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

Шаг 6. Создание проекта в Figma

Откройте Figma и создайте новый проект или откройте существующий, в который хотите импортировать дизайн.

Шаг 7. Настройка плагина html.to.design

1. Установите плагин html.to.design
2. Запустите его: правый клик на canvas → Plugins → html.to.design
3. Перейдите на вкладку MCP
4. Активируйте свитчер Enable MCP endpoint

Шаг 8. Подключение Claude к Figma

1. В плагине нажмите «How to configure your AI tool?»
2. Следуйте инструкции для Claude:
   • В Claude Desktop нажмите иконку инструментов → Manage connectors
   • Создайте новый коннектор с именем html.to.design
   • Вставьте URL из плагина
3. Убедитесь, что в списке инструментов Claude появился html.to.design

Шаг 9. Импорт в Figma

Напишите в Claude промпт:

Перенеси сайт в Figma как единый фрейм.
Дополнительно создай отдельный артборд со всеми стилями сайта:
цвета, шрифты, отступы, радиусы, тени.

Шаг 10. Результат в Figma

Дождитесь завершения импорта. В плагине html.to.design на вкладке Logs можно отслеживать входящие запросы.

Claude может остановиться после экспорта страницы. Если артборд со стилями ещё не создан — попросите продолжить: «Продолжай, создай артборд со стилями».