# Mimic AI

Mimic AI превращает HTML в макет Figma с компонентами и токенами вашей дизайн-системы. Нужен для сборки интерфейсов без сырых цветов и случайных шрифтов.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 15
- Автор: miapre
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/miapre/mimic-ai
- Обновлён: 2026-10-09
- HTML: https://affpapa.org/nevibecode/mcp/mimic-ai

## Что делает

Mimic AI принимает HTML или описание экрана, изучает дизайн-систему в файле Figma и собирает структурированный макет. Он использует реальные экземпляры компонентов, привязки переменных и auto-layout, а не набор произвольных фреймов.

Сервер проверяет выбор компонентов, цветов, размеров шрифта и категорий переменных во время записи. Если подходящего элемента в дизайн-системе нет, это попадает в отчёт как пробел. Исправления, подтверждённые рецепты компонентов и правила накапливаются отдельно для каждой библиотеки.

После сборки Mimic AI формирует отчёт: какие компоненты использованы, какие примитивы созданы и почему, какие правила сработали и где дизайн-системе не хватает покрытия. Для работы нужен Node.js `20.6` или новее и собственный токен Figma; без Node.js `20.6` сервер не запустится.

## Требования
- Нужно: Node.js (команды через npx)

## Установка

### Claude Code (родная платформа)

**Командой платформы**
```bash
claude mcp add mimic-ai -- npx -y @miapre/mimic-ai
```

### Codex

**Командой платформы**
```bash
codex mcp add mimic-ai -- npx -y @miapre/mimic-ai
```

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mimic-ai": {
            "command": "npx",
            "args": [
                "-y",
                "@miapre/mimic-ai"
            ]
        }
    }
}
```

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "mimic-ai": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@miapre/mimic-ai"
            ]
        }
    }
}
```

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add mimic-ai npx -y @miapre/mimic-ai
```

## Когда брать
- собрать экран Figma из HTML
- заменить сырые цвета токенами дизайн-системы
- использовать реальные экземпляры кнопок и полей
- проверить макет на правила дизайн-системы
- найти компоненты, которых не хватает библиотеке

## Примеры запросов агенту
- Собери из этого HTML экран Figma, используя компоненты и токены нашей дизайн-системы.
- Построй дашборд с карточками метрик и таблицей активности в Figma.
- Проверь результат и покажи, какие элементы пришлось собрать из примитивов.

## Похожие
- [baoyu-design](https://affpapa.org/nevibecode/skills/baoyu-design.md) — скилл · 6300 установок
- [design-system](https://affpapa.org/nevibecode/skills/builderos-design-system.md) — скилл · 1800 установок
- [figma-generate-design](https://affpapa.org/nevibecode/skills/openai-figma-generate-design.md) — скилл · 2900 установок
- [figma-create-design-system-rules](https://affpapa.org/nevibecode/skills/figma-create-design-system-rules.md) — скилл · 2900 установок
- [figma-code-connect-components](https://affpapa.org/nevibecode/skills/figma-code-connect-components.md) — скилл · 2700 установок
- [figma-build](https://affpapa.org/nevibecode/skills/figma-build.md) — скилл · 1300 установок

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md