{"id":47612789,"url":"https://github.com/let-sunny/canicode","last_synced_at":"2026-04-19T08:00:21.099Z","repository":{"id":345566239,"uuid":"1186449510","full_name":"let-sunny/canicode","owner":"let-sunny","description":"Analyze Figma designs for development \u0026 AI readiness. 16 rules, density-based scoring (S~F), HTML reports with Figma comment integration. CLI + MCP server for Claude Code, Cursor, Claude Desktop.","archived":false,"fork":false,"pushed_at":"2026-04-15T17:10:37.000Z","size":58113,"stargazers_count":7,"open_issues_count":13,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-15T17:32:42.546Z","etag":null,"topics":["claude-code","cursor","figma","figma-to-code","mcp"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/let-sunny.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-19T16:28:50.000Z","updated_at":"2026-04-15T16:57:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/let-sunny/canicode","commit_stats":null,"previous_names":["let-sunny/design-readiness-checker","let-sunny/aiready"],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/let-sunny/canicode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/let-sunny%2Fcanicode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/let-sunny%2Fcanicode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/let-sunny%2Fcanicode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/let-sunny%2Fcanicode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/let-sunny","download_url":"https://codeload.github.com/let-sunny/canicode/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/let-sunny%2Fcanicode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31999173,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["claude-code","cursor","figma","figma-to-code","mcp"],"created_at":"2026-04-01T20:47:04.441Z","updated_at":"2026-04-19T08:00:21.017Z","avatar_url":"https://github.com/let-sunny.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/images/logo.png\" alt=\"CanICode\" width=\"80\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eCanICode\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/canicode\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/canicode.svg\" alt=\"npm version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/let-sunny/canicode/actions/workflows/ci.yml\"\u003e\u003cimg src=\"https://github.com/let-sunny/canicode/actions/workflows/ci.yml/badge.svg\" alt=\"CI\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/let-sunny/canicode/actions/workflows/release.yml\"\u003e\u003cimg src=\"https://github.com/let-sunny/canicode/actions/workflows/release.yml/badge.svg\" alt=\"Release\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cstrong\u003eStop explaining your designs. Get scored by AI-calibrated rules.\u003c/strong\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\u003ca href=\"https://let-sunny.github.io/canicode/\"\u003eTry it in your browser\u003c/a\u003e\u003c/strong\u003e — no install needed.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/images/screenshot.gif\" alt=\"CanICode Report\" width=\"720\"\u003e\n\u003c/p\u003e\n\n---\n\n## Why CanICode\n\nAI can turn Figma designs into code — but the quality depends heavily on **how the design is structured**. Missing Auto Layout drops pixel accuracy from 95% to 63% at different viewports. Raw JSON input wastes 5× more tokens for 15%p worse results.\n\nCanICode solves this:\n\n1. **Analyzes** your Figma design for patterns that hurt AI implementation quality\n2. **Generates a design-tree** — a curated, CSS-ready representation that AI implements more accurately and efficiently than raw Figma data\n3. **Scores** responsive readiness, so you fix the design before generating code\n\n- **16 rules** across 6 categories: Pixel Critical, Responsive Critical, Code Quality, Token Management, Interaction, Semantic\n- **Deterministic** — no AI tokens consumed per analysis, runs in milliseconds\n- **Validated** — [ablation experiments](https://github.com/let-sunny/canicode/wiki) confirmed design-tree achieves 94% pixel accuracy with 5× fewer tokens than raw JSON\n\n### Scores You Can Trust\n\nRule scores aren't guesswork. The calibration pipeline converts real Figma designs to HTML, measures pixel-level similarity (via `visual-compare`), and adjusts scores based on actual implementation difficulty.\n\n- Design that's hard to implement accurately → rule score goes **up**\n- Design that's easy despite the flag → rule score goes **down**\n\nThe pipeline runs on community fixtures, not on every analysis. Strip ablation uses six `DESIGN_TREE_INFO_TYPES` passes (including `size-constraints` for responsive sizing rules — see [`CLAUDE.md`](CLAUDE.md)). See the [Calibration wiki](https://github.com/let-sunny/canicode/wiki/Calibration).\n\n---\n\n## Getting Started\n\n**Quickest way:** **[Open the web app](https://let-sunny.github.io/canicode/)** — paste a Figma URL, get a report.\n\n**For your workflow:**\n\n```bash\n# CLI — one command\nnpx canicode analyze \"https://www.figma.com/design/ABC123/MyDesign?node-id=1-234\"\n\n# MCP Server — works with Claude Code, Cursor, Claude Desktop\nclaude mcp add canicode -- npx -y -p canicode canicode-mcp\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eAll channels\u003c/strong\u003e\u003c/summary\u003e\n\n| Channel | Best for |\n|---------|----------|\n| **[Web App](https://let-sunny.github.io/canicode/)** | Quick check, no install |\n| **[Figma Plugin](https://www.figma.com/community/plugin/1617144221046795292/canicode)** | Analyze inside Figma (under review) |\n| **MCP Server** | Claude Code / Cursor / Claude Desktop integration |\n| **Claude Code Skill** | Lightweight, no MCP install |\n| **CLI** | Full control, CI/CD, offline analysis |\n| **`canicode implement`** | Generate code-ready package (analysis + assets + prompt) |\n| **[GitHub Action](https://github.com/marketplace/actions/canicode-action)** | PR gate with score threshold |\n\n\u003c/details\u003e\n\n---\n\n## What It Checks\n\n| Category | Rules | What it measures |\n|----------|:-----:|------------------|\n| **Pixel Critical** | 3 | Can AI read the layout? (Auto Layout, absolute positioning, groups) |\n| **Responsive Critical** | 2 | Will it work at different viewports? (fixed sizing, size constraints) |\n| **Code Quality** | 4 | Is the design efficient for AI context? (components, variants, nesting) |\n| **Token Management** | 2 | Can AI reproduce exact values? (raw values, spacing grid) |\n| **Interaction** | 2 | Can AI know what happens? (state variants, prototypes) |\n| **Semantic** | 3 | Can AI infer meaning? (semantic names, conventions) |\n\nEach issue is classified: **Blocking** \u003e **Risk** \u003e **Missing Info** \u003e **Suggestion**.\n\n---\n\n## Installation\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCLI\u003c/strong\u003e\u003c/summary\u003e\n\n```bash\nnpx canicode analyze \"https://www.figma.com/design/ABC123/MyDesign?node-id=1-234\"\n```\n\nSetup: `canicode init --token figd_xxxxxxxxxxxxx`\n\n\u003e **Get your token:** Figma → Settings → Security → Personal access tokens → Generate new token\n\n**Figma API Rate Limits** — Rate limits depend on **where the file lives**, not just your plan.\n\n| Seat | File in Starter plan | File in Pro/Org/Enterprise |\n|------|---------------------|---------------------------|\n| View, Collab | 6 req/month | 6 req/month |\n| Dev, Full | 6 req/month | 10–20 req/min |\n\nHitting 429 errors? Make sure the file is in a paid workspace. Or `save-fixture` once and analyze locally. [Full details](https://developers.figma.com/docs/rest-api/rate-limits/)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eMCP Server\u003c/strong\u003e (Claude Code / Cursor / Claude Desktop)\u003c/summary\u003e\n\n```bash\nclaude mcp add canicode -- npx -y -p canicode canicode-mcp\nclaude mcp add -s project -t http figma https://mcp.figma.com/mcp\n```\n\nThen ask: *\"Analyze this Figma design: https://www.figma.com/design/...\"*\n\ncanicode's rule engine analyzes the design data — the AI assistant just orchestrates the calls.\n\nWith a Figma API token:\n```bash\nclaude mcp add canicode -e FIGMA_TOKEN=figd_xxxxxxxxxxxxx -- npx -y -p canicode canicode-mcp\n```\n\nFor Cursor / Claude Desktop config, see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md).\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eDesign to Code\u003c/strong\u003e (prepare implementation package)\u003c/summary\u003e\n\n```bash\ncanicode implement ./fixtures/my-design\ncanicode implement \"https://www.figma.com/design/ABC/File?node-id=1-234\" --prompt ./my-react-prompt.md --image-scale 3\n```\n\nOutputs a ready-to-use package for AI code generation:\n- `analysis.json` — issues + scores\n- `design-tree.txt` — DOM-like tree with CSS styles + token estimate\n- `images/` — PNG assets with human-readable names (`hero-banner@2x.png`)\n- `vectors/` — SVG assets\n- `PROMPT.md` — code generation prompt (default: HTML+CSS, or your custom prompt)\n\n| Option | Default | Description |\n|--------|---------|-------------|\n| `--prompt` | built-in HTML+CSS | Path to your custom prompt file for any stack |\n| `--image-scale` | `2` | Image export scale: `2` for PC, `3` for mobile |\n| `--output` | `./canicode-implement/` | Output directory |\n\nFeed `design-tree.txt` + `PROMPT.md` to your AI assistant (Claude, Cursor, etc.) to generate code.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eClaude Code Skill\u003c/strong\u003e (lightweight, no MCP install)\u003c/summary\u003e\n\n```bash\ncp -r .claude/skills/canicode /your-project/.claude/skills/\n```\n\nRequires FIGMA_TOKEN. Then use `/canicode` with a Figma URL.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eGitHub Action\u003c/strong\u003e\u003c/summary\u003e\n\n```yaml\n- uses: let-sunny/canicode-action@v0.1.0\n  with:\n    figma_url: 'https://www.figma.com/design/ABC123/MyDesign?node-id=1-234'\n    figma_token: ${{ secrets.FIGMA_TOKEN }}\n    min_score: 70\n```\n\nPosts analysis as a PR comment. Fails if score is below threshold. See [**canicode-action**](https://github.com/marketplace/actions/canicode-action) on Marketplace.\n\n\u003c/details\u003e\n\n---\n\n## Customization\n\n| What | How |\n|------|-----|\n| **Presets** | `--preset relaxed \\| dev-friendly \\| ai-ready \\| strict` |\n| **Config overrides** | `--config ./config.json` — adjust scores, severity, exclude nodes |\n\nSee [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md) for the full guide, examples, and all available options.\n\n---\n\n## Development\n\n```bash\ngit clone https://github.com/let-sunny/canicode.git \u0026\u0026 cd canicode\npnpm install \u0026\u0026 pnpm build\n```\n\n```bash\npnpm dev        # watch mode\npnpm test       # run tests\npnpm lint       # type check\n```\n\nFor architecture details, see [`CLAUDE.md`](CLAUDE.md). For calibration pipeline, see the [Calibration wiki](https://github.com/let-sunny/canicode/wiki/Calibration).\n\n## Contributing\n\n**[Share your Figma design](https://github.com/let-sunny/canicode/discussions/new?category=share-your-figma)** to help calibrate scores against real-world designs.\n\n## Support\n\n- **Bugs and questions:** [GitHub Issues](https://github.com/let-sunny/canicode/issues)\n- **Privacy:** See [PRIVACY.md](PRIVACY.md) for details on data collection and how to opt out\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flet-sunny%2Fcanicode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flet-sunny%2Fcanicode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flet-sunny%2Fcanicode/lists"}