# canicode

Audits Figma files before code generation, flags missing states and saves developer specifications into Dev Mode annotations.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 10
- Author: let-sunny
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/let-sunny/canicode
- Updated: 2026-07-05
- HTML: https://affpapa.org/en/nevibecode/mcp/canicode

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)
- Environment variables: `FIGMA_TOKEN` — keys and tokens: ask the human for the values, never commit them or put them in shared files.

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add canicode -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y canicode
```
Replace <…> with your own values

### Codex

**Platform CLI**
```bash
codex mcp add canicode --env FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y canicode
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "canicode": {
            "command": "npx",
            "args": [
                "-y",
                "canicode"
            ],
            "env": {
                "FIGMA_TOKEN": "<FIGMA_TOKEN>"
            }
        }
    }
}
```
Replace <…> with your own values

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "canicode": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "canicode"
            ],
            "env": {
                "FIGMA_TOKEN": "<FIGMA_TOKEN>"
            }
        }
    }
}
```
Replace <…> with your own values

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> canicode npx -y canicode
```
Replace <…> with your own values

## When to use it
- 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
- Analyze `https://www.figma.com/design/ABC123/MyDesign?node-id=1-234` with canicode and list layout issues
- Run `/canicode-roundtrip https://www.figma.com/design/ABC123/MyDesign?node-id=1-234` to annotate the design
- Survey missing component states and save answers to `SKILL.md`

## Similar
- [pp-figma](https://affpapa.org/en/nevibecode/skills/pp-figma.md) — skill · 726 installs
- [figma-generate-design](https://affpapa.org/en/nevibecode/skills/openai-figma-generate-design.md) — skill · 2900 installs
- [figma-build](https://affpapa.org/en/nevibecode/skills/figma-build.md) — skill · 1300 installs
- [figma-designer](https://affpapa.org/en/nevibecode/skills/figma-designer.md) — skill · 807 installs
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073
- [Figma MCP Server](https://affpapa.org/en/nevibecode/mcp/figma-mcp-server.md) — MCP server · ★ 2119

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md