canicode — MCP-сервер для Claude Code: что делает и как установить
Проверяет макеты в Figma перед генерацией кода, находит пропущенные состояния и сохраняет ответы в аннотации Dev Mode.
claude mcp add canicode -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y canicodeЧто делает canicode
Анализатор проверяет макеты Figma детерминированным линтером без расхода токенов нейросети. Он находит несостыковки в отступах, неясные варианты компонентов и отсутствие адаптива. Инструмент задаёт вопросы на понятном дизайнеру языке, выясняя поведение блоков при сужении экрана или наведении курсора.
Все уточнения сохраняются прямо в файле Figma в виде аннотаций Dev Mode через официальный Figma MCP server либо локально в файл SKILL.md. Если в проекте настроен Code Connect, сервер привязывает готовый код к компонентам для повторного использования. Без токена FIGMA_TOKEN сервер работать не сможет, а без отдельного подключения Figma MCP запись аннотаций в макет не выполнится.
Какие задачи решает
- находить скрытые ошибки в отступах и стилях макета Figma
- фиксировать поведение адаптивных блоков для генератора кода
- записывать технические спецификации в аннотации Figma Dev Mode
- связывать сгенерированные компоненты через Code Connect
Примеры запросов агенту
- Проверь макет
https://www.figma.com/design/ABC123/MyDesign?node-id=1-234через canicode и покажи ошибки - Запусти
/canicode-roundtrip https://www.figma.com/design/ABC123/MyDesign?node-id=1-234и запиши ответы в Figma - Собери опросник по пропущенным состояниям макета и сохрани в
SKILL.md
Как установить canicode
Командой платформы
claude mcp add canicode -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y canicodeВместо <…> подставьте свои значения
Командой платформы
codex mcp add canicode --env FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y canicodeВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"canicode": {
"command": "npx",
"args": [
"-y",
"canicode"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"canicode": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"canicode"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> canicode npx -y canicodeВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о canicode
Как установить canicode в Claude Code?
Выполните команду claude mcp add canicode -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y canicode, указав личный токен Figma.
Что делает canicode?
Сервер проводит предварительную проверку макета Figma перед вёрсткой, задаёт вопросы о поведении адаптива и сохраняет спецификацию в Dev Mode.
Зачем нужен официальный Figma MCP сервер?
canicode использует его для чтения структуры макета и обратной записи аннотаций в файл дизайна.
