Canicode

Name: Canicode
Author: let-sunny

von let-sunnyVersion 0.5.2i★ –iLäuft auf deinem Computer

Name in der Registryio.github.let-sunny/canicode

Installieren

Überblick

Beschreibung vom Entwickler (englisches Original)

Analyze Figma designs for dev & AI readiness. 39 rules, scoring, HTML reports.

Die drei Säulen von PopNx MCP

Diese drei werden nie zu einer Punktzahl zusammengefasst: Meinungen, Messungen und Beliebtheit sind verschiedene Dinge.

Stimmen der NutzeriNoch keine BewertungenBewertungen starten in einem späteren Schritt zusammen mit Benutzerkonten
Unsere Basischecksi1 von 1 bestandenAnhand öffentlicher Informationen geprüft; Code noch nicht gescannt
NutzungiNoch nicht gemessen★ –

Was du damit machen kannst

Für diesen Server haben wir noch keine Zusammenfassung in einfacher Sprache geschrieben. Unten stehen die Fakten, die wir aus der Registry gelesen haben.

Verbindung: Läuft auf deinem Computer
Transport: stdio
Kategorie: Design, Bilder & Audio
Das musst du eintragen: FIGMA_TOKEN

Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

Bevor du installierst

Basischecks: 1 von 1 bestanden
Läuft auf deinem Computer mit den Rechten deines Benutzerkontos (Dateien, Netzwerk, Apps).
Das trägst du selbst ein: FIGMA_TOKEN

Als geheim markierte Werte sind Schlüssel zu deinem Konto. Gib sie nie weiter und füge sie nie in einen Chat ein.

Du brauchst

npmNode.js installiert (für den Befehl npx)

Welche App nutzt du?

ClaudeClaude CodeCursorVS CodeChatGPT

Wähle oben deine App. Wir merken sie uns, damit der Button beim nächsten Mal „In … installieren“ anzeigt.

Öffne Claude Desktop → Settings → Developer → Edit Config und füge dies in claude_desktop_config.json ein

{
  "mcpServers": {
    "canicode": {
      "command": "npx",
      "args": [
        "-y",
        "canicode"
      ],
      "env": {
        "FIGMA_TOKEN": "your-value"
      }
    }
  }
}

Führe das in deinem Terminal aus

claude mcp add canicode --env FIGMA_TOKEN=your-value -- npx -y canicode

Trag die leeren Werte ein, bevor du ihn startest.

In Cursor öffnen

Oder kopier die Einstellungen selbst

In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen

{
  "mcpServers": {
    "canicode": {
      "command": "npx",
      "args": [
        "-y",
        "canicode"
      ],
      "env": {
        "FIGMA_TOKEN": "your-value"
      }
    }
  }
}

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

In VS Code öffnen

Oder kopier die Einstellungen selbst

In .vscode/mcp.json in deinem Projekt einfügen

{
  "servers": {
    "canicode": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "canicode"
      ],
      "env": {
        "FIGMA_TOKEN": "your-value"
      }
    }
  }
}

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

Dieser Server läuft auf deinem Computer, und ChatGPT kann sich nur mit Servern im Internet verbinden. Wähle eine andere App.

Deine Auswahl bleibt in einem Cookie auf diesem Gerät; kein Konto nötig.

Werte, die du selbst einträgst

FIGMA_TOKEN geheim env
Figma personal access token for REST API access and comment posting

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Was er kann

Läuft auf deinem Computer; die Tool-Liste erscheint nach der Installation in deiner KI-App.

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 7. Nov. 2026

✓ Bestanden
Entwickler passt zum Repo
Der Registry-Name wurde mit dem GitHub-Konto let-sunny bestätigt, dem das Repo gehört
… Noch nicht geprüft
Wird noch gepflegt
Dieses Repo haben wir noch nicht von GitHub gelesen
… Noch nicht geprüft
Hat eine Lizenz
Dieses Repo haben wir noch nicht von GitHub gelesen
– Nicht zutreffend
Endpunkt antwortet
Dieser Server läuft auf deinem Computer; es gibt keinen Endpunkt im Internet
– Nicht zutreffend
Anmeldung mit OAuth
Läuft auf deinem Computer und nutzt stattdessen lokale Einstellungen
… Noch nicht geprüft
Keine versteckten Anweisungen in Tool-Beschreibungen
Läuft auf deinem Computer; Tool-Listen können wir nur von Endpunkten im Internet lesen

Im Vergleich mit anderen in Design, Bilder & Audioi

Mehr Sterne als 0 % der anderen 2184 Server in dieser Kategorie
Neuer in der Registry veröffentlicht als 3 % der anderen 2184 Server in dieser Kategorie
Basischecks gleich gut wie oder besser als bei 100 % der anderen 2184 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist Canicode sicher?

Er hat 1 von 1 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Das musst du eintragen: FIGMA_TOKEN

Läuft er auf meinem Computer oder in der Cloud?

Er läuft auf deinem Computer. Deine KI-App startet ihn bei Bedarf, und die Daten laufen nicht über die Server des Entwicklers (außer der Server ruft selbst einen Onlinedienst auf).

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt – geändert, und die neueste Version (0.5.2) kam vor 8 Monaten in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Außerdem brauchst du Node.js auf deinem Computer.

Was kann ich stattdessen nutzen?

In derselben Kategorie: Figma Context MCP, Claude Real Video, Figma MCP Server

Alternativen

Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.

So liest du eine Karte:★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti

Figma Context MCP

von GLips

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

Läuft auf deinem Computer★ 16.165MITAktualisiert vor 5 Monaten

Installieren

Claude Real Video

von HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

Läuft auf deinem Computer★ 2.284MITAktualisiert vor 2 Monaten

Installieren

Figma MCP Server

von figma

The Figma MCP server brings Figma design context directly into your AI workflow.

Läuft in der Cloud★ 2.152Aktualisiert vor 13 Monaten

Installieren

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

CanICode

Ship your Figma design exactly as you intended — without learning CSS.

Try it in your browser — no install needed.

What canicode does

You designed it in Figma. You know exactly how it should look and behave — but the AI codegen guesses, and half the time it guesses wrong. The cards don't stack on mobile. The hover state disappears. The padding gets normalised. *That's not what I designed.*

canicode is the pre-implementation interview between your Figma file and AI codegen. It asks the questions a developer would ask before they implement — in plain language you can answer:

*"The three cards are side-by-side at desktop width — what should happen when the screen is narrow?"*

You answer in plain words ("좁아지면 한 줄에 하나씩" / "stack them vertically"). canicode translates that into the exact technical spec the codegen needs, and writes it back into your Figma file as a structured annotation so the next run no longer has to guess.

You stay in Figma. You never type a CSS selector. The intent ships.

→ Full thesis: docs/POSITIONING.md

The three layers

Linter — 17 rules surface the gaps your craft instinct senses but can't name. *"Something's off with this spacing."* → it finds the one card with 14px padding while the rest are 16px.
Q&A scaffolding — for every gap, canicode asks in your vocabulary, not the developer's. You answer, it spec'ifies.
Roundtrip persistence — answers live in the Figma file as Dev Mode annotations. Next run, next person, next codegen — they all see the intent.

The linter is deterministic (no LLM tokens consumed for the analysis itself), ablation-validated at 94% pixel accuracy with 5× fewer tokens than raw JSON, and calibrated against real Figma designs.

Why canicode (vs Claude Design)

Claude Design launched in April 2026 and covers the prompt → app path beautifully — AI designs from your prompt and hands the result to Claude Code. canicode covers a different workflow:

	Claude Design	canicode
Who designs	AI (from a prompt)	The designer (in Figma)

If you want the AI to design for you, use Claude Design. If you already designed it and want it implemented exactly the way you intended, canicode is for you. The two are not in competition — they assume different things about who owns the design.

See docs/POSITIONING.md for the full thesis (target persona, the workflow assumption, and what canicode is not for).

The Roundtrip Workflow

Skills: `canicode-gotchas` = survey answers saved locally in SKILL.md only (memo). `canicode-roundtrip` = same analysis path plus writes to Figma (annotations / properties). Pick gotchas for capture-only; pick roundtrip when the design file should change.

Analyze — run the 17 rules against the Figma design (report includes grade).
Surface gotchas — the analyzer emits questions for design information it can't infer (missing states, unclear variants, responsive intent).
Apply fixes to Figma — the /canicode-roundtrip skill writes answers back via use_figma. Each write shows up in the summary with one of three outcome markers:

✅ scene write succeeded — the property was written directly to the scene node or instance override.
📝 annotated the scene node — the skill left a structured annotation instead of writing the property. This is the default for instance-child layout writes, because propagating a property to the component definition (and therefore every instance of it) is almost never what the user wants. A summary full of 📝 markers is correct behavior, not failure.
🌐 definition write propagated — the property was written to the component definition and every instance inherited it. Only happens when the user opted in up front with allowDefinitionWrite.

Re-analyze — verify gotchas were captured (annotations / acks); repeat step 2 if new gotchas surface.
Hand off to figma-implement-design — canicode's scope ends at design augmentation. Figma's official code-generation skill takes the now-clean design and produces code.
Close out with a Code Connect mapping — after figma-implement-design returns, the roundtrip asks whether the generated code is satisfactory. On y, canicode registers a Code Connect mapping pointing the Figma component at the just-generated code so future roundtrips on screens containing this component reuse the implementation instead of regenerating markup. Skipped if Code Connect is not set up in your repo — the roundtrip warns about this up front, before the gotcha survey, so you can decide whether to install prerequisites first or proceed without mapping.

Try it in 30 seconds

[Open the web app](https://let-sunny.github.io/canicode/) — paste any Figma URL, get a report. No install, no token, no AI cost. This is the linter view (Layer 1) — useful by itself.
Then if you want the full Q&A roundtrip, install the Claude Code skill below.

Run the full roundtrip (Claude Code)

npx canicode init

saves your Figma token + installs /canicode-roundtrip

(the prompt asks for the token; never paste it into agent chat)

/canicode-roundtrip https://www.figma.com/design/ABC123/MyDesign?node-id=1-234

in your Claude Code session

The roundtrip calls the Figma MCP server to read and write your design — install it once with claude mcp add -s project -t http figma https://mcp.figma.com/mcp and restart Claude Code.

Cursor / Claude Desktop / other MCP host: also supported. CLI install path (npx canicode init --cursor-skills), bare MCP server install, GitHub Action for CI gates, and other channels are listed in the Installation matrix below.

Optional — Code Connect (for the closing Step 6 mapping): install @figma/code-connect and create figma.config.json at your repo root per Figma's setup guide, then run canicode doctor. If you skip this, the roundtrip still works — it just does not register the mapping. It warns you up front so you can decide.

What It Checks

Category	Rules	What it measures
Pixel Critical	3	Can AI read the layout? (Auto Layout, absolute positioning, groups)
Responsive Critical	2	Will it work at different viewports? (fixed sizing, size constraints)
Code Quality	5	Is the design efficient for AI context? (components, variants, nesting, Code Connect coverage)
Token Management	2	Can AI reproduce exact values? (raw values, spacing grid)
Interaction	2	Can AI know what happens? (state variants, prototypes)
Semantic	3	Can AI infer meaning? (semantic names, conventions)

Each issue is classified: Blocking > Risk > Missing Info > Suggestion.

Installation — pick one

Token safety: never paste your Figma token into Claude / Cursor / agent chat — session logs can retain it. Use the CLI prompt (npx canicode init), --token, or the FIGMA_TOKEN=… env var.

Each row below is a complete install. Don't run more than one — they cover overlapping use cases.

If you use…	Install
Claude Code (recommended for the roundtrip workflow)	`npx canicode init` (interactive prompt for the token in a TTY) or `npx canicode init --token figd_xxxxxxxxxxxxx` (CI / non-TTY) — saves the token AND drops `/canicode`, `/canicode-gotchas`, `/canicode-roundtrip` skills into `./.claude/skills/`. The skills already know how to call canicode via `npx canicode …`, so no canicode MCP install is needed; the Figma MCP is still required for the `/canicode-roundtrip` apply step — see the prereq below. To rotate the token later without reinstalling skills: `npx canicode config set-token`.
Cursor / Claude Desktop / other MCP host	Add canicode to the host’s MCP config — see `docs/CUSTOMIZATION.md`. Example (Cursor project file): `npx` + `canicode-mcp` via `--package=canicode`.
OpenClaw / other AgentSkills-compatible host	Manual skill copy — see Other agents (manual install). Best-effort docs, not a support commitment.
Just the CLI (CI, scripts)	Nothing. `npx canicode analyze " "` works directly. Run `canicode init --token …` once if you want the token persisted to `~/.canicode/config.json`. To rotate the token later, use `canicode config set-token` (no skill reinstall).

Get your token: Figma → Settings → Security → Personal access tokens → Generate new token. Figma's PAT docs

Scope: Read-only is sufficient for canicode.

Expiry: Tokens default to 90 days; check the dropdown when generating.

Roundtrip prerequisite: the /canicode-roundtrip skill calls the Figma MCP server to read and write the design. Install it once with claude mcp add -s project -t http figma https://mcp.figma.com/mcp and restart Claude Code so the new MCP tools load.

Claude Code Skills — install details

# Interactive (TTY) — prompts for the token, never paste it into agent chat

npx canicode init

Non-interactive (CI / non-TTY) — token via env or --token only

FIGMA_TOKEN=figd_xxxxxxxxxxxxx npx canicode init npx canicode init --token figd_xxxxxxxxxxxxx

Drops three skills into ./.claude/skills/:

canicode — lightweight CLI wrapper (use /canicode )
canicode-gotchas — standalone gotcha survey (use /canicode-gotchas )
canicode-roundtrip — full analyze → gotcha → apply roundtrip (use /canicode-roundtrip )

The install copies 7 files total — the three SKILL.md files above plus four canicode-roundtrip helper files (helpers.js, helpers-bootstrap.js, helpers-installer.js, canicode-roundtrip-helpers.d.ts) used by the roundtrip Step 4 apply path. The CLI summary's files installed: 7 reflects this file count.

Explicit invocation: the SKILL.md description fields advertise TRIGGER conditions so the model auto-routes Figma-URL prompts to the right skill, but routing is non-deterministic. For deterministic invocation, type /canicode , /canicode-gotchas , or /canicode-roundtrip directly — the slash command bypasses model-based routing.

The skills shell out to npx canicode … for analyze / gotcha-survey, so installing the canicode MCP server is optional (both paths produce the

Nur der Anfang wird gezeigt; den Rest findest du im Repo

Canicode

Überblick

Die drei Säulen von PopNx MCP

Was du damit machen kannst

Installation

Bevor du installierst

Werte, die du selbst einträgst

Was er kann

Basischecksi

Entwickler passt zum Repo

Wird noch gepflegt

Hat eine Lizenz

Endpunkt antwortet

Anmeldung mit OAuth

Keine versteckten Anweisungen in Tool-Beschreibungen

Im Vergleich mit anderen in Design, Bilder & Audioi

Häufige Fragen

Alternativen

Figma Context MCP

Claude Real Video

Figma MCP Server

README vom Entwickler

What canicode does

The three layers

Why canicode (vs Claude Design)

The Roundtrip Workflow

Try it in 30 seconds

Run the full roundtrip (Claude Code)

saves your Figma token + installs /canicode-roundtrip

(the prompt asks for the token; never paste it into agent chat)

in your Claude Code session

What It Checks

Installation — pick one

Non-interactive (CI / non-TTY) — token via env or --token only