canicode — Claude Code MCP server: what it does, how to install
Audits Figma files before code generation, flags missing states and saves developer specifications into Dev Mode annotations.
claude mcp add canicode -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y canicodeWhat canicode does
The tool lints Figma designs deterministically without spending model tokens on raw layout checks. It catches spacing discrepancies, missing hover states, and unspecified responsive layouts. When gaps appear, the server asks plain questions about how cards or containers should behave on smaller viewports.
Captured specifications are written directly into Figma Dev Mode annotations or recorded locally in SKILL.md. When your repository includes Code Connect, it maps finalized markup back to component definitions. Without FIGMA_TOKEN the server fails immediately, and writing annotations back requires a separate Figma MCP server connection.
What it helps with
- detect inconsistent spacing and sizing flaws in Figma
- clarify mobile responsive behavior before generating code
- write developer specs into Figma Dev Mode annotations
- register generated components through Code Connect
Example prompts for the agent
- Analyze
https://www.figma.com/design/ABC123/MyDesign?node-id=1-234with canicode and list layout issues - Run
/canicode-roundtrip https://www.figma.com/design/ABC123/MyDesign?node-id=1-234to annotate the design - Survey missing component states and save answers to
SKILL.md
How to install canicode
Platform CLI
claude mcp add canicode -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y canicodeReplace <…> with your own values
Platform CLI
codex mcp add canicode --env FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y canicodeReplace <…> with your own values
Config file
{
"mcpServers": {
"canicode": {
"command": "npx",
"args": [
"-y",
"canicode"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"canicode": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"canicode"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> canicode npx -y canicodeReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about canicode
How to install canicode in Claude Code?
Run claude mcp add canicode -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y canicode using your valid Figma personal access token.
What does canicode do?
It validates Figma design readiness before AI coding starts, asks clarifying questions about layout edge cases, and attaches structured notes to components.
Why is the official Figma MCP server required?
The roundtrip workflow calls the Figma MCP server to read design properties and write annotations directly into your Figma canvas.
