canicode

canicode

let-sunnyMIT
8 звёзд1 форков
CanICode — MCP-сервер для анализа Figma-дизайнов перед передачей AI-кодогенератору. Он прогоняет макет через 39 детерминированных правил, находит расхождения и оценивает готовность к разработке. Результат — HTML-отчет с общим баллом и списком проблем. Сервер действует как интервью между дизайнером и AI. Вместо того чтобы AI-генератор угадывал поведение элементов на разных экранах, CanICode задает вопросы на естественном языке: «Как должны вести себя три карточки, когда экран станет узким?» Дизайнер отвечает, ответы сохраняются в Figma как структурированные аннотации в Dev Mode. При следующей генерации кодогенератор видит их и использует как точную спецификацию. Никакого CSS, никаких селекторов — только ответы на естественном языке. Это экономит время и токены, а верстка совпадает с задумкой дизайнера.
ДизайнAI и машинное обучениеFigma
Подключить MCPОткрыть на GitHub
Подключение

Подключить canicode

Выберите способ запуска и свой 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": {
    "canicode": {
      "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 источника и не передавайте лишние права или секреты.

Как оценить canicode

canicode относится к Дизайн, AI и машинное обучение, Figma. Ниже собраны проверяемые признаки, по которым его можно сравнить с другими серверами каталога.

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

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

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

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

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

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

Общее

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

Технологии

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

Описание

Возможности

  • Анализирует Figma-макет по 39 критериям: отступы, выравнивание, цвета, типографика, состояния (хoвер, нажатие), адаптивность
  • Выявляет несоответствия в стилях между похожими компонентами (например, разный padding у карточек в одном блоке)
  • Задает дизайнеру вопросы о поведении элементов на разных разрешениях экрана на естественном языке
  • Сохраняет ответы как аннотации в Figma Dev Mode — их видит команда и AI-инструменты
  • Генерирует HTML-отчет с общей оценкой макета и детальным списком ошибок по категориям
  • Не использует языковые модели для самого анализа — только детерминированные алгоритмы
  • Экономит токены: требует в 5 раз меньше данных по сравнению с сырым JSON из Figma
  • Точность анализа — 94% по результатам ablation-тестов на реальных проектах
  • Интегрируется с Figma-плагином Can I Code (доступен в сообществе Figma)
  • Подходит для дизайнеров, разработчиков и AI-инструментов, работающих через MCP-протокол

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

1. Установите сервер глобально через npm:

npx -y canicode

2. Добавьте сервер в конфигурацию вашего MCP-клиента. Пример для Claude Desktop:

{ "mcpServers": { "canicode": { "command": "npx", "args": ["-y", "canicode"] } } }

3. Перезапустите клиент, чтобы сервер подключился.

4. Установите Figma-плагин Can I Code из сообщества Figma (прямая ссылка). Плагин нужен для обмена данными между Figma и MCP-сервером.

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

  • «Проверь Figma-макет главного экрана на готовность к верстке и покажи HTML-отчет» — сервер проанализирует макет и выдаст оценку с детальным разбором проблем.
  • «Найди все проблемы с выравниванием и отступами в блоке услуг» — сервер подсветит элементы, которые не проходят проверку по соответствующим правилам, и предложит конкретные значения.
  • «Задай вопросы по поведению шапки на мобильных и сохрани ответы как аннотации в Figma» — сервер сформирует для дизайнера вопросы на естественном языке, а после ответов запишет их в Dev Mode.
  • «Оцени качество дизайна лендинга по всем критериям и подсвети слабые места» — сервер выполнит полный линтинг по 39 правилам, покажет общую оценку и список критериев с низкими баллами.

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

  • Язык (отчеты): HTML
  • Транспорт: stdio
  • Лицензия: MIT (открытый исходный код, бесплатно)
  • Совместимые клиенты: Claude Desktop, Cursor, VS Code, любые MCP-клиенты
  • Категория: Figma, AI/ML, Design
  • Дополнительно: для работы требуется Figma-плагин Can I Code (бесплатный)

Поделиться