Mimic AI — MCP-сервер для Claude Code: что делает и установка
Mimic AI превращает HTML в макет Figma с компонентами и токенами вашей дизайн-системы. Нужен для сборки интерфейсов без сырых цветов и случайных шрифтов.
claude mcp add mimic-ai -- npx -y @miapre/mimic-aiЧто делает Mimic AI
Mimic AI принимает HTML или описание экрана, изучает дизайн-систему в файле Figma и собирает структурированный макет. Он использует реальные экземпляры компонентов, привязки переменных и auto-layout, а не набор произвольных фреймов.
Сервер проверяет выбор компонентов, цветов, размеров шрифта и категорий переменных во время записи. Если подходящего элемента в дизайн-системе нет, это попадает в отчёт как пробел. Исправления, подтверждённые рецепты компонентов и правила накапливаются отдельно для каждой библиотеки.
После сборки Mimic AI формирует отчёт: какие компоненты использованы, какие примитивы созданы и почему, какие правила сработали и где дизайн-системе не хватает покрытия. Для работы нужен Node.js 20.6 или новее и собственный токен Figma; без Node.js 20.6 сервер не запустится.
Какие задачи решает
- собрать экран Figma из HTML
- заменить сырые цвета токенами дизайн-системы
- использовать реальные экземпляры кнопок и полей
- проверить макет на правила дизайн-системы
- найти компоненты, которых не хватает библиотеке
Примеры запросов агенту
- Собери из этого HTML экран Figma, используя компоненты и токены нашей дизайн-системы.
- Построй дашборд с карточками метрик и таблицей активности в Figma.
- Проверь результат и покажи, какие элементы пришлось собрать из примитивов.
Как установить Mimic AI
Командой платформы
claude mcp add mimic-ai -- npx -y @miapre/mimic-aiКомандой платформы
codex mcp add mimic-ai -- npx -y @miapre/mimic-aiФайл настроек
{
"mcpServers": {
"mimic-ai": {
"command": "npx",
"args": [
"-y",
"@miapre/mimic-ai"
]
}
}
}Файл настроек
{
"servers": {
"mimic-ai": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@miapre/mimic-ai"
]
}
}
}Командой платформы
gemini mcp add mimic-ai npx -y @miapre/mimic-aiПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Mimic AI
Как установить Mimic AI в Claude Code?
Выполните claude mcp add mimic-ai -- npx -y @miapre/mimic-ai. Для запуска нужен Node.js 20.6 или новее.
Что делает Mimic AI?
MCP-сервер превращает HTML или описание интерфейса в макет Figma, подставляя компоненты, переменные и текстовые стили из дизайн-системы. После сборки он выдаёт отчёт о соответствии.
Что нужно Mimic AI для работы с Figma?
Нужен собственный токен Figma и дизайн-система в файле Figma. Сервер работает локально, а сетевые запросы выполняются к API Figma.
