HTML to Figma — Design System

HTML to Figma — Design System

miapreMIT
2 звёзд
Mimic AI — MCP-сервер с открытым исходным кодом для Figma. Разработчики и дизайнеры используют его, чтобы превращать HTML-прототипы, текстовые описания и экспорты из других инструментов в готовые макеты. В отличие от обычных генераторов картинок, Mimic работает напрямую с вашей дизайн-системой: находит её в Figma-файле, использует компоненты, привязывает переменные (токены) и выстраивает всё с авто-лейаутом. Результат — не картинка, а чистые Figma-слои. Их не нужно перерисовывать или заменять — можно сразу передавать разработчикам. Сервер подходит командам с собственной библиотекой компонентов в Figma, а также тем, кто использует внешние библиотеки (Material Design, Apple iOS Kit) или работает с клиентскими дизайн-системами. Если в библиотеке не хватает нужного компонента, Mimic сообщит об этом после каждой сборки.
ДизайнFigma
Подключить MCPОткрыть на GitHubОфициальный сайт
Подключение

Подключить HTML to Figma — Design System

Выберите способ запуска и свой MCP-клиент. Ниже останется одна готовая инструкция, которую можно проверить и скопировать.

1

Способ подключения

2

Куда подключить

3

Скопируйте и проверьте

Claude

Official Figma remote MCP server with OAuth.

  1. 1.Получите endpoint и токен доступа, если он требуется.
  2. 2.Добавьте remote MCP endpoint в Claude.
  3. 3.Проверьте подключение в списке доступных инструментов.
json
{
  "mcpServers": {
    "html-to-figma-design-system": {
      "url": "https://mcp.figma.com/mcp",
      "transport": "http"
    }
  }
}

Official docs include Claude Code, Codex, Cursor, VS Code, and Xcode setup.

Claude Code plugin and Codex app plugin are preferred paths where available.

Инструкция собрана из данных карточки и пока не отмечена как проверенная редакцией. Сверьте команду с README источника и не передавайте лишние права или секреты.

Как оценить HTML to Figma — Design System

HTML to Figma — Design System относится к Дизайн, Figma. Ниже собраны проверяемые признаки, по которым его можно сравнить с другими серверами каталога.

Происхождение
Проект сообщества
Лицензия
MIT
Реализация
JavaScript
Транспорт
stdio

Что проверить перед выбором

  • Изучите README, открытые issues и историю последних изменений в репозитории.
  • Проверьте команду установки и зависимости перед запуском в рабочем окружении.
  • Ограничьте доступ MCP-сервера только нужными файлами, API и переменными окружения.

Карточка отредактирована 20.07.2026.

Автоматическая проверка источника ещё не выполнена. Внешних источников в карточке: 2.

Характеристики

Общее

  • СтатусСообщество
  • Разработчикmiapre
  • ЛицензияMIT

Технологии

  • Языки
    JavaScript
  • Транспорт
    stdio

Описание

Возможности

  • Собирает макеты в Figma на основе HTML-кода из вашего стейджинга или продакшена. Разбирает структуру, стили и контент.
  • Создаёт макеты по текстовому описанию или промпту на естественном языке.
  • Автоматически определяет дизайн-систему в Figma-файле и применяет её компоненты вместо случайных фигур.
  • Привязывает переменные (токены) дизайн-системы к каждому созданному слою.
  • Строит интерфейсы с авто-лейаутом — правильные сетки и структура слоёв, готовые к адаптации.
  • Импортирует прототипы из Stitch, Claude Design и других инструментов, заменяя заглушки на реальные компоненты.
  • После сборки отчитывается о недостающих компонентах и токенах в дизайн-системе.

Как подключить

Для работы сервера требуется Node.js версии 20.6 или выше. Установка выполняется одной командой через npx, дополнительной настройки не нужно.

  1. Установите сервер через npx: npx -y html-to-figma-design-system
  2. Добавьте конфигурацию в ваш MCP-клиент (например, Claude Desktop или VS Code). Пример конфигурации для Claude Desktop в формате JSON:
{ "mcpServers": { "mimic-ai": { "command": "npx", "args": ["-y", "html-to-figma-design-system"] } } }
  1. Перезапустите клиент. Сервер подключится автоматически.

Примеры запросов

  • «Собери в Figma страницу профиля пользователя по этому HTML-шаблону: [ссылка на HTML]».
  • «Создай дашборд с тремя карточками метрик, таблицей активности и боковым меню. Используй нашу дизайн-систему».
  • «Возьми этот Claude Design прототип и перестрой его с реальными компонентами из библиотеки Apple iOS Kit».
  • «Покажи, какие компоненты отсутствуют в текущей дизайн-системе для сборки этого экрана регистрации».

Технические детали

  • Язык: JavaScript. Сервер написан на JavaScript, распространяется через npm.
  • Транспорт: stdio. Работает по стандартному протоколу stdio MCP.
  • Лицензия: MIT. Открытый исходный код, можно модифицировать и использовать в коммерческих проектах.
  • Платформы: macOS, Windows.
  • Требования: Node.js 20.6+.
  • Категории: Figma, дизайн, разработка интерфейсов, автоматизация дизайна.

Поделиться