https://github.com/let-sunny/canicode
Analyze Figma designs for development & AI readiness. 16 rules, density-based scoring (S~F), HTML reports with Figma comment integration. CLI + MCP server for Claude Code, Cursor, Claude Desktop.
https://github.com/let-sunny/canicode
claude-code cursor figma figma-to-code mcp
Last synced: about 2 months ago
JSON representation
Analyze Figma designs for development & AI readiness. 16 rules, density-based scoring (S~F), HTML reports with Figma comment integration. CLI + MCP server for Claude Code, Cursor, Claude Desktop.
- Host: GitHub
- URL: https://github.com/let-sunny/canicode
- Owner: let-sunny
- License: mit
- Created: 2026-03-19T16:28:50.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-15T17:10:37.000Z (about 2 months ago)
- Last Synced: 2026-04-15T17:32:42.546Z (about 2 months ago)
- Topics: claude-code, cursor, figma, figma-to-code, mcp
- Language: HTML
- Homepage:
- Size: 55.4 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
CanICode
Stop explaining your designs. Get scored by AI-calibrated rules.
Try it in your browser — no install needed.
---
## Why CanICode
AI 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.
CanICode solves this:
1. **Analyzes** your Figma design for patterns that hurt AI implementation quality
2. **Generates a design-tree** — a curated, CSS-ready representation that AI implements more accurately and efficiently than raw Figma data
3. **Scores** responsive readiness, so you fix the design before generating code
- **16 rules** across 6 categories: Pixel Critical, Responsive Critical, Code Quality, Token Management, Interaction, Semantic
- **Deterministic** — no AI tokens consumed per analysis, runs in milliseconds
- **Validated** — [ablation experiments](https://github.com/let-sunny/canicode/wiki) confirmed design-tree achieves 94% pixel accuracy with 5× fewer tokens than raw JSON
### Scores You Can Trust
Rule 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.
- Design that's hard to implement accurately → rule score goes **up**
- Design that's easy despite the flag → rule score goes **down**
The 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).
---
## Getting Started
**Quickest way:** **[Open the web app](https://let-sunny.github.io/canicode/)** — paste a Figma URL, get a report.
**For your workflow:**
```bash
# CLI — one command
npx canicode analyze "https://www.figma.com/design/ABC123/MyDesign?node-id=1-234"
# MCP Server — works with Claude Code, Cursor, Claude Desktop
claude mcp add canicode -- npx -y -p canicode canicode-mcp
```
All channels
| Channel | Best for |
|---------|----------|
| **[Web App](https://let-sunny.github.io/canicode/)** | Quick check, no install |
| **[Figma Plugin](https://www.figma.com/community/plugin/1617144221046795292/canicode)** | Analyze inside Figma (under review) |
| **MCP Server** | Claude Code / Cursor / Claude Desktop integration |
| **Claude Code Skill** | Lightweight, no MCP install |
| **CLI** | Full control, CI/CD, offline analysis |
| **`canicode implement`** | Generate code-ready package (analysis + assets + prompt) |
| **[GitHub Action](https://github.com/marketplace/actions/canicode-action)** | PR gate with score threshold |
---
## 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** | 4 | Is the design efficient for AI context? (components, variants, nesting) |
| **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
CLI
```bash
npx canicode analyze "https://www.figma.com/design/ABC123/MyDesign?node-id=1-234"
```
Setup: `canicode init --token figd_xxxxxxxxxxxxx`
> **Get your token:** Figma → Settings → Security → Personal access tokens → Generate new token
**Figma API Rate Limits** — Rate limits depend on **where the file lives**, not just your plan.
| Seat | File in Starter plan | File in Pro/Org/Enterprise |
|------|---------------------|---------------------------|
| View, Collab | 6 req/month | 6 req/month |
| Dev, Full | 6 req/month | 10–20 req/min |
Hitting 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/)
MCP Server (Claude Code / Cursor / Claude Desktop)
```bash
claude mcp add canicode -- npx -y -p canicode canicode-mcp
claude mcp add -s project -t http figma https://mcp.figma.com/mcp
```
Then ask: *"Analyze this Figma design: https://www.figma.com/design/..."*
canicode's rule engine analyzes the design data — the AI assistant just orchestrates the calls.
With a Figma API token:
```bash
claude mcp add canicode -e FIGMA_TOKEN=figd_xxxxxxxxxxxxx -- npx -y -p canicode canicode-mcp
```
For Cursor / Claude Desktop config, see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md).
Design to Code (prepare implementation package)
```bash
canicode implement ./fixtures/my-design
canicode implement "https://www.figma.com/design/ABC/File?node-id=1-234" --prompt ./my-react-prompt.md --image-scale 3
```
Outputs a ready-to-use package for AI code generation:
- `analysis.json` — issues + scores
- `design-tree.txt` — DOM-like tree with CSS styles + token estimate
- `images/` — PNG assets with human-readable names (`hero-banner@2x.png`)
- `vectors/` — SVG assets
- `PROMPT.md` — code generation prompt (default: HTML+CSS, or your custom prompt)
| Option | Default | Description |
|--------|---------|-------------|
| `--prompt` | built-in HTML+CSS | Path to your custom prompt file for any stack |
| `--image-scale` | `2` | Image export scale: `2` for PC, `3` for mobile |
| `--output` | `./canicode-implement/` | Output directory |
Feed `design-tree.txt` + `PROMPT.md` to your AI assistant (Claude, Cursor, etc.) to generate code.
Claude Code Skill (lightweight, no MCP install)
```bash
cp -r .claude/skills/canicode /your-project/.claude/skills/
```
Requires FIGMA_TOKEN. Then use `/canicode` with a Figma URL.
GitHub Action
```yaml
- uses: let-sunny/canicode-action@v0.1.0
with:
figma_url: 'https://www.figma.com/design/ABC123/MyDesign?node-id=1-234'
figma_token: ${{ secrets.FIGMA_TOKEN }}
min_score: 70
```
Posts analysis as a PR comment. Fails if score is below threshold. See [**canicode-action**](https://github.com/marketplace/actions/canicode-action) on Marketplace.
---
## Customization
| What | How |
|------|-----|
| **Presets** | `--preset relaxed \| dev-friendly \| ai-ready \| strict` |
| **Config overrides** | `--config ./config.json` — adjust scores, severity, exclude nodes |
See [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md) for the full guide, examples, and all available options.
---
## Development
```bash
git clone https://github.com/let-sunny/canicode.git && cd canicode
pnpm install && pnpm build
```
```bash
pnpm dev # watch mode
pnpm test # run tests
pnpm lint # type check
```
For architecture details, see [`CLAUDE.md`](CLAUDE.md). For calibration pipeline, see the [Calibration wiki](https://github.com/let-sunny/canicode/wiki/Calibration).
## Contributing
**[Share your Figma design](https://github.com/let-sunny/canicode/discussions/new?category=share-your-figma)** to help calibrate scores against real-world designs.
## Support
- **Bugs and questions:** [GitHub Issues](https://github.com/let-sunny/canicode/issues)
- **Privacy:** See [PRIVACY.md](PRIVACY.md) for details on data collection and how to opt out
## License
MIT