# designfit

Сверяет интерфейс с макетом Figma по токенам, геометрии и наличию элементов. Подходит для проверки AI-собранного фронтенда.

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

## Что делает

\`designfit` извлекает структуру фрейма Figma и сравнивает её с отрендеренным интерфейсом. Сервер проверяет цвета, размеры, положение и наличие элементов через токены и геометрию относительно корня экрана, а затем возвращает оценку, нарушения и список несопоставленных элементов.

В комплекте есть инструменты `designfit_extract` и `designfit_validate`, а для Claude Code — скилл `designfit-fidelity-loop`. Он ведёт цикл «извлечь макет, собрать интерфейс, добавить `data-designfit-id`, проверить, исправить» до результата `pass`, после чего теги удаляются. Доступен один viewport; адаптивная проверка по нескольким breakpoint и VLM fallback не входят в v1.

Для извлечения по ссылке нужен `FIGMA_TOKEN`; вместо него можно передать JSON узлов Figma. Перед запуском измерений установите Chromium командой `npx playwright install chromium`, иначе серверу не из чего запускать браузер.

## Требования
- Нужно: Node.js (команды через npx)
- Переменные окружения: `FIGMA_TOKEN` — это ключи и токены: значения спроси у человека, в репозиторий и общие файлы не записывай.

## Установка

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

**Командой платформы**
```bash
claude mcp add designfit -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfit
```
Вместо <…> подставьте свои значения

### Codex

**Командой платформы**
```bash
codex mcp add designfit --env FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfit
```
Вместо <…> подставьте свои значения

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "designfit": {
            "command": "npx",
            "args": [
                "-y",
                "designfit"
            ],
            "env": {
                "FIGMA_TOKEN": "<FIGMA_TOKEN>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "designfit": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "designfit"
            ],
            "env": {
                "FIGMA_TOKEN": "<FIGMA_TOKEN>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> designfit npx -y designfit
```
Вместо <…> подставьте свои значения

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

## Примеры запросов агенту
- Сверь страницу с фреймом Figma по ссылке и исправляй найденные расхождения до результата `pass`.
- Извлеки структуру из ссылки Figma через `designfit_extract`, затем проверь реализацию через `designfit_validate`.
- Проверь этот интерфейс в одном viewport, используй `data-designfit-id` для сопоставления элементов и убери теги после проверки.

## Похожие
- [screenshot-to-code](https://affpapa.org/nevibecode/skills/screenshot-to-code.md) — скилл · 1300 установок
- [d2c](https://affpapa.org/nevibecode/plugins/d2c.md) — плагин · ★ 8
- [frontend-visual-qa](https://affpapa.org/nevibecode/skills/frontend-visual-qa.md) — скилл · 572 установки
- [reviewing-interface-quality](https://affpapa.org/nevibecode/skills/reviewing-interface-quality.md) — скилл · 352 установки
- [frontend-app-builder](https://affpapa.org/nevibecode/skills/frontend-app-builder.md) — скилл · 252 установки
- [figma-implement-design](https://affpapa.org/nevibecode/skills/openai-figma-implement-design.md) — скилл · 6700 установок

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