Canicode

Name: Canicode
Author: let-sunny

제작자: let-sunny버전 0.5.2i★ –i내 컴퓨터에서 실행

레지스트리 이름io.github.let-sunny/canicode

설치

개요

제작자가 쓴 설명(영어 원문)

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

PopNx MCP의 세 기둥

이 세 가지는 절대 하나의 점수로 합치지 않아요. 의견, 측정, 인기는 서로 다른 것이니까요.

사용자 의견i아직 리뷰가 없어요리뷰는 다음 단계에서 계정 기능과 함께 열려요
우리의 기본 점검i1개 중 1개 통과공개된 정보로 점검했으며, 코드는 아직 스캔하지 않았어요
사용 정도i아직 측정 안 함★ –

할 수 있는 일

이 서버는 아직 쉬운 말로 된 요약을 쓰지 못했어요. 아래는 레지스트리에서 읽어 온 사실이에요.

연결 방식: 내 컴퓨터에서 실행
전송 방식: stdio
카테고리: 디자인, 이미지 및 오디오
입력해야 할 값: FIGMA_TOKEN

설치

쓰고 있는 AI 앱을 고른 다음 설정을 복사하세요.

설치하기 전에

기본 점검: 1개 중 1개 통과
내 컴퓨터에서 내 사용자 계정의 권한(파일, 네트워크, 앱)으로 실행돼요.
직접 입력할 값: FIGMA_TOKEN

비밀로 표시된 값은 내 계정의 열쇠예요. 절대 다른 사람과 공유하거나 채팅에 붙여 넣지 마세요.

필요한 것

npmNode.js 설치(npx 명령어용)

어떤 앱을 쓰세요?

ClaudeClaude CodeCursorVS CodeChatGPT

위에서 앱을 고르세요. 기억해 두었다가 다음부터는 버튼에 “…에 설치”라고 표시해요.

Claude Desktop → Settings → Developer → Edit Config를 열고 claude_desktop_config.json에 이 내용을 붙여 넣으세요

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

터미널에서 이 명령어를 실행하세요

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

실행하기 전에 빈 값을 채워 주세요.

Cursor에서 열기

또는 설정을 직접 복사하기

프로젝트의 .cursor/mcp.json 또는 ~/.cursor/mcp.json에 붙여 넣으세요

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

브라우저가 앱을 열지 물어본 다음, 앱이 설정을 보여 주고 확인을 요청해요. 키 값은 비워 두니 직접 입력하세요.

VS Code에서 열기

또는 설정을 직접 복사하기

프로젝트의 .vscode/mcp.json에 붙여 넣으세요

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

브라우저가 앱을 열지 물어본 다음, 앱이 설정을 보여 주고 확인을 요청해요. 키 값은 비워 두니 직접 입력하세요.

이 서버는 내 컴퓨터에서 실행되는데, ChatGPT는 인터넷에 있는 서버에만 연결할 수 있어요. 다른 앱을 고르세요.

선택한 앱은 이 기기의 쿠키에만 저장돼요. 계정은 필요 없어요.

직접 입력할 값

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

이 설정은 제작자의 레지스트리 정보로 만들었어요. README와 다르면 README를 따르세요.

할 수 있는 일

내 컴퓨터에서 실행돼요. 설치하면 AI 앱에 도구 목록이 나타나요.

기본 점검i

누구나 볼 수 있는 정보를 점검했고, 코드는 읽지 않았어요. 해당하지 않는 항목은 개수에서 뺐어요. · 2026년 11월 7일 점검

✓ 통과
제작자와 저장소 일치
레지스트리 이름이 GitHub 계정 let-sunny 기준으로 확인되었고, 이 계정이 저장소를 소유하고 있어요
… 아직 점검 안 함
계속 관리되고 있음
아직 GitHub에서 이 저장소를 읽어 오지 않았어요
… 아직 점검 안 함
라이선스 있음
아직 GitHub에서 이 저장소를 읽어 오지 않았어요
– 해당 없음
엔드포인트 응답
내 컴퓨터에서 실행되는 서버라 인터넷 엔드포인트가 없어요
– 해당 없음
OAuth로 로그인
내 컴퓨터에서 실행되며, 대신 로컬 설정을 사용해요
… 아직 점검 안 함
도구 설명에 숨겨진 지시 없음
내 컴퓨터에서 실행돼요. 도구 목록은 인터넷 엔드포인트가 있는 서버에서만 읽을 수 있어요

디자인, 이미지 및 오디오 카테고리의 다른 서버와 비교i

이 카테고리의 다른 서버 2186개 중 0%보다 스타가 많아요
이 카테고리의 다른 서버 2186개 중 3%보다 최근에 레지스트리에 공개됐어요
기본 점검 결과가 이 카테고리의 다른 서버 2186개 중 100%와 같거나 더 좋아요

레지스트리에서 이 카테고리의 활성 서버 전체와 비교했어요. 스타는 게시자가 저장소를 소유한 경우에만 세요.

자주 묻는 질문

Canicode, 안전한가요?

해당하는 기본 점검 1개 중 1개를 통과했어요. 코드는 읽지 않았어요. 키나 토큰을 넣기 전에 서버가 어떤 권한을 요구하는지 확인하고, 꼭 필요한 권한만 있는 키를 쓰세요.

어떤 키나 코드가 필요한가요?

입력해야 할 값: FIGMA_TOKEN

내 컴퓨터에서 실행되나요, 클라우드에서 실행되나요?

내 컴퓨터에서 실행돼요. AI 앱이 필요할 때 실행하고, 데이터는 제작자의 서버를 거치지 않아요(서버 자체가 온라인 서비스를 호출하는 경우는 제외).

아직 관리되고 있나요?

GitHub 저장소는 마지막으로 – 변경됐고, 최신 버전(0.5.2)은 8개월 전 레지스트리에 올라왔어요.

어떤 앱에서 쓸 수 있나요?

Claude Desktop, Claude Code, Cursor, VS Code처럼 MCP를 지원하는 앱에서 쓸 수 있어요. 내 컴퓨터에 Node.js도 있어야 해요.

대신 쓸 수 있는 건 뭐가 있나요?

같은 카테고리에는: Figma Context MCP, Claude Real Video, Figma MCP Server

대안

같은 카테고리에서 다른 제작자가 만든 서버예요. 스타 순으로 정렬했어요.

카드 보는 법:★ GitHub 스타i세 기둥: 리뷰 · 점검 · 사용 정도i업데이트 = 최신 버전을 레지스트리에 공개한 날i

Figma Context MCP

제작자: GLips

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

내 컴퓨터에서 실행★ 16,165MIT5개월 전 업데이트

설치

Claude Real Video

제작자: HUANGCHIHHUNGLeo

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

내 컴퓨터에서 실행★ 2,284MIT2개월 전 업데이트

설치

Figma MCP Server

제작자: figma

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

클라우드에서 실행★ 2,15213개월 전 업데이트

설치

제작자의 README

README 열기

제작자의 저장소에서 쓰인 그대로 가져왔어요. PopNx MCP가 검토하거나 보증한 내용이 아니에요. HTML, 이미지, 스크립트는 제거했어요. 링크를 누르면 이 사이트를 벗어나요.

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

앞부분만 보여 드려요. 나머지는 저장소에서 읽어 보세요

Canicode

개요

PopNx MCP의 세 기둥

할 수 있는 일

설치

설치하기 전에

직접 입력할 값

할 수 있는 일

기본 점검i

제작자와 저장소 일치

계속 관리되고 있음

라이선스 있음

엔드포인트 응답

OAuth로 로그인

도구 설명에 숨겨진 지시 없음

디자인, 이미지 및 오디오 카테고리의 다른 서버와 비교i

자주 묻는 질문

대안

Figma Context MCP

Claude Real Video

Figma MCP Server

제작자의 README

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