designfit — MCP-сервер для Claude Code: проверка Figma
Сверяет интерфейс с макетом Figma по токенам, геометрии и наличию элементов. Подходит для проверки AI-собранного фронтенда.
claude mcp add designfit -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfitЧто делает 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, иначе серверу не из чего запускать браузер.
Какие задачи решает
- сверить AI-собранный интерфейс с фреймом Figma
- найти ошибки в цветах и размерах элементов
- проверить выравнивание относительно корня экрана
- сформировать список исправлений для coding-агента
- проверить наличие элементов в реализации
Примеры запросов агенту
- Сверь страницу с фреймом Figma по ссылке и исправляй найденные расхождения до результата
pass. - Извлеки структуру из ссылки Figma через
designfit_extract, затем проверь реализацию черезdesignfit_validate. - Проверь этот интерфейс в одном viewport, используй
data-designfit-idдля сопоставления элементов и убери теги после проверки.
Как установить designfit
Командой платформы
claude mcp add designfit -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfitВместо <…> подставьте свои значения
Командой платформы
codex mcp add designfit --env FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfitВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"designfit": {
"command": "npx",
"args": [
"-y",
"designfit"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"designfit": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"designfit"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> designfit npx -y designfitВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о designfit
Как установить designfit в Claude Code?
Выполните claude mcp add designfit -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y designfit. Затем установите браузер командой npx playwright install chromium.
Что делает designfit?
Он сопоставляет реализацию с дизайном Figma по токенам, геометрии и наличию элементов. Результат включает оценку, нарушения и несопоставленные элементы.
Нужен ли Figma-токен для работы designfit?
Для извлечения макета по ссылке нужен FIGMA_TOKEN. Без него можно передать вставленный JSON ответа GET /v1/files/:key/nodes.
