canicode 0.11.5 → 0.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/plugin.json +1 -1
- package/README.md +32 -15
- package/dist/cli/index.js +769 -127
- package/dist/cli/index.js.map +1 -1
- package/dist/index.d.ts +138 -28
- package/dist/index.js +323 -29
- package/dist/index.js.map +1 -1
- package/dist/mcp/server.js +353 -43
- package/dist/mcp/server.js.map +1 -1
- package/docs/CUSTOMIZATION.md +10 -9
- package/package.json +1 -1
- package/skills/canicode-roundtrip/SKILL.md +142 -4
- package/skills/canicode-roundtrip/helpers-bootstrap.js +1 -1
- package/skills/canicode-roundtrip/helpers-installer.js +2 -2
- package/skills/canicode-roundtrip/helpers.js +41 -1
- package/skills/cursor/canicode-roundtrip/SKILL.md +142 -4
- package/skills/cursor/canicode-roundtrip/helpers-bootstrap.js +1 -1
- package/skills/cursor/canicode-roundtrip/helpers-installer.js +2 -2
- package/skills/cursor/canicode-roundtrip/helpers.js +41 -1
package/README.md
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
## How it works
|
|
26
26
|
|
|
27
|
-
AI can turn Figma designs into code — but the quality depends heavily on **how the design is structured**. CanICode runs a **roundtrip** over your Figma file: analyze the design, surface the gotchas it can't answer on its own, apply fixes back to Figma, re-analyze until the design is clean, then hand off to Figma's `figma-implement-design` skill for code generation. canicode does the design augmentation; code generation lives downstream
|
|
27
|
+
AI can turn Figma designs into code — but the quality depends heavily on **how the design is structured**. CanICode runs a **roundtrip** over your Figma file: analyze the design, surface the gotchas it can't answer on its own, apply fixes back to Figma, re-analyze until the design is clean, then hand off to Figma's `figma-implement-design` skill for code generation. canicode does the design augmentation; code generation lives downstream.
|
|
28
28
|
|
|
29
29
|

|
|
30
30
|
|
|
@@ -46,10 +46,11 @@ Rule scores aren't guesswork. The calibration pipeline converts real Figma desig
|
|
|
46
46
|
2. **Surface gotchas** — the analyzer emits questions for design information it can't infer (missing states, unclear variants, responsive intent).
|
|
47
47
|
3. **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:
|
|
48
48
|
- ✅ **scene write succeeded** — the property was written directly to the scene node or instance override.
|
|
49
|
-
- 📝 **annotated the scene node** — the skill left a structured annotation instead of writing the property. This is the
|
|
49
|
+
- 📝 **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.**
|
|
50
50
|
- 🌐 **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`.
|
|
51
51
|
4. **Re-analyze** — verify gotchas were captured (annotations / acks); repeat step 2 if new gotchas surface.
|
|
52
|
-
5. **Hand off** to `figma-implement-design` — canicode's scope ends
|
|
52
|
+
5. **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.
|
|
53
|
+
6. **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](https://www.figma.com/code-connect-docs/) 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.
|
|
53
54
|
|
|
54
55
|
---
|
|
55
56
|
|
|
@@ -63,8 +64,10 @@ Rule scores aren't guesswork. The calibration pipeline converts real Figma desig
|
|
|
63
64
|
|
|
64
65
|
```bash
|
|
65
66
|
# 1. Save your Figma token AND install the /canicode-roundtrip skill
|
|
66
|
-
# (
|
|
67
|
-
npx canicode init --token figd_xxxxxxxxxxxxx
|
|
67
|
+
# Interactive (TTY): npx canicode init — prompts for the token
|
|
68
|
+
# Non-interactive: npx canicode init --token figd_xxxxxxxxxxxxx
|
|
69
|
+
# (never paste the token into chat — use env var, the prompt, or --token only)
|
|
70
|
+
npx canicode init
|
|
68
71
|
|
|
69
72
|
# 2. Run the roundtrip on a Figma URL
|
|
70
73
|
/canicode-roundtrip https://www.figma.com/design/ABC123/MyDesign?node-id=1-234
|
|
@@ -72,6 +75,8 @@ npx canicode init --token figd_xxxxxxxxxxxxx
|
|
|
72
75
|
|
|
73
76
|
> **Prerequisite:** the 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` — see the **MCP Server** install section below.
|
|
74
77
|
|
|
78
|
+
> **Optional — Code Connect (for the closing Step 6 mapping):** install `@figma/code-connect` (`pnpm add -D @figma/code-connect` or npm/yarn equivalent) and create `figma.config.json` at your repo root per [Figma's setup guide](https://www.figma.com/code-connect-docs/). Then run `canicode doctor` to confirm both prerequisites are in place. If you skip this, the roundtrip still generates code but will not register a Code Connect mapping — it tells you up front so you can decide.
|
|
79
|
+
|
|
75
80
|
**CanICode in Cursor (no Claude Code required):**
|
|
76
81
|
|
|
77
82
|
1. Add **canicode** and **Figma** MCPs — [Cursor MCP](docs/CUSTOMIZATION.md#cursor-mcp-canicode) for `npx` → `canicode-mcp` (use **`.cursor/mcp.json`** or **`~/.cursor/mcp.json`** in Cursor, not repo-root `.mcp.json`; [why](docs/CUSTOMIZATION.md#which-mcp-file-affects-which-host)); Figma MCP is required for **`use_figma`** if you run **roundtrip** (design writes), not for analyze-only.
|
|
@@ -88,7 +93,7 @@ npx canicode analyze "https://www.figma.com/design/ABC123/MyDesign?node-id=1-234
|
|
|
88
93
|
claude mcp add canicode -- npx --yes --package=canicode canicode-mcp
|
|
89
94
|
```
|
|
90
95
|
|
|
91
|
-
Restart Claude Code or reload MCP (Cursor) so canicode tools (`analyze`, `gotcha-survey`, …) load — same cold-session requirement as the Figma MCP
|
|
96
|
+
Restart Claude Code or reload MCP (Cursor) so canicode tools (`analyze`, `gotcha-survey`, …) load — same cold-session requirement as the Figma MCP.
|
|
92
97
|
|
|
93
98
|
**Smoke test (no Figma token needed):**
|
|
94
99
|
|
|
@@ -134,14 +139,14 @@ Each issue is classified: **Blocking** > **Risk** > **Missing Info** > **Suggest
|
|
|
134
139
|
|
|
135
140
|
## Installation — pick one
|
|
136
141
|
|
|
137
|
-
Each row below is a **complete** install. Don't run more than one — they cover overlapping use cases.
|
|
142
|
+
Each row below is a **complete** install. Don't run more than one — they cover overlapping use cases.
|
|
138
143
|
|
|
139
144
|
| If you use… | Install |
|
|
140
145
|
|-------------|---------|
|
|
141
|
-
| **Claude Code** (recommended for the roundtrip workflow) | `npx canicode init --token figd_xxxxxxxxxxxxx` — 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. |
|
|
146
|
+
| **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`. |
|
|
142
147
|
| **Cursor / Claude Desktop / other MCP host** | Add canicode to the host’s MCP config — see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md#cursor-mcp-canicode). Example (Cursor project file): `npx` + `canicode-mcp` via `--package=canicode`. |
|
|
143
148
|
| **OpenClaw / other AgentSkills-compatible host** | Manual skill copy — see [Other agents (manual install)](docs/CUSTOMIZATION.md#other-agents-manual-install). Best-effort docs, not a support commitment. |
|
|
144
|
-
| **Just the CLI** (CI, scripts) | Nothing. `npx canicode analyze "<figma-url>"` works directly. Run `canicode init --token …` once if you want the token persisted to `~/.canicode/config.json`. |
|
|
149
|
+
| **Just the CLI** (CI, scripts) | Nothing. `npx canicode analyze "<figma-url>"` 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). |
|
|
145
150
|
|
|
146
151
|
> **Get your token:** Figma → Settings → Security → Personal access tokens → Generate new token. [Figma's PAT docs](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)
|
|
147
152
|
> **Scope:** Read-only is sufficient for canicode.
|
|
@@ -153,7 +158,11 @@ Each row below is a **complete** install. Don't run more than one — they cover
|
|
|
153
158
|
<summary><strong>Claude Code Skills</strong> — install details</summary>
|
|
154
159
|
|
|
155
160
|
```bash
|
|
156
|
-
#
|
|
161
|
+
# Interactive (TTY) — prompts for the token, never paste it into agent chat
|
|
162
|
+
npx canicode init
|
|
163
|
+
|
|
164
|
+
# Non-interactive (CI / non-TTY) — token via env or --token only
|
|
165
|
+
FIGMA_TOKEN=figd_xxxxxxxxxxxxx npx canicode init
|
|
157
166
|
npx canicode init --token figd_xxxxxxxxxxxxx
|
|
158
167
|
```
|
|
159
168
|
|
|
@@ -171,6 +180,14 @@ The skills shell out to `npx canicode …` for analyze / gotcha-survey, so insta
|
|
|
171
180
|
|
|
172
181
|
Flags: `--global` installs into `~/.claude/skills/` instead. `--cursor-skills` also installs Cursor copies under `.cursor/skills/`. `--force` overwrites existing skill files without prompting. Run `canicode docs setup` for the full setup guide.
|
|
173
182
|
|
|
183
|
+
To manage saved configuration without reinstalling skills:
|
|
184
|
+
|
|
185
|
+
```bash
|
|
186
|
+
canicode config set-token # rotate Figma token (interactive on TTY; --token for CI)
|
|
187
|
+
canicode config show # masked token + config + reports paths
|
|
188
|
+
canicode config path # absolute path to ~/.canicode/config.json
|
|
189
|
+
```
|
|
190
|
+
|
|
174
191
|
</details>
|
|
175
192
|
|
|
176
193
|
<details>
|
|
@@ -180,15 +197,15 @@ Flags: `--global` installs into `~/.claude/skills/` instead. `--cursor-skills` a
|
|
|
180
197
|
claude mcp add canicode -- npx --yes --package=canicode canicode-mcp
|
|
181
198
|
```
|
|
182
199
|
|
|
183
|
-
Restart Claude Code or reload MCP (Cursor) so canicode MCP tools appear in a fresh session
|
|
200
|
+
Restart Claude Code or reload MCP (Cursor) so canicode MCP tools appear in a fresh session.
|
|
184
201
|
|
|
185
202
|
Then ask: *"Analyze this Figma design: https://www.figma.com/design/..."*
|
|
186
203
|
|
|
187
|
-
canicode's rule engine analyzes the design data — the AI assistant just orchestrates the calls. The MCP server reads `FIGMA_TOKEN` from `~/.canicode/config.json` (set via `canicode init --token …`) or from the host's environment, so passing `-e FIGMA_TOKEN=…` to `claude mcp add` is **not** required and the current parser rejects it anyway
|
|
204
|
+
canicode's rule engine analyzes the design data — the AI assistant just orchestrates the calls. The MCP server reads `FIGMA_TOKEN` from `~/.canicode/config.json` (set via `canicode init --token …`) or from the host's environment, so passing `-e FIGMA_TOKEN=…` to `claude mcp add` is **not** required and the current parser rejects it anyway.
|
|
188
205
|
|
|
189
206
|
If you genuinely need a per-server token without using `canicode init`, export it on the calling shell instead: `export FIGMA_TOKEN=figd_xxxxxxxxxxxxx`.
|
|
190
207
|
|
|
191
|
-
For Cursor / Claude Desktop config, see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md) — especially [Cursor MCP (canicode)](docs/CUSTOMIZATION.md#cursor-mcp-canicode) and the **Manual test checklist
|
|
208
|
+
For Cursor / Claude Desktop config, see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md) — especially [Cursor MCP (canicode)](docs/CUSTOMIZATION.md#cursor-mcp-canicode) and the **Manual test checklist** for verifying `gotcha-survey` end-to-end.
|
|
192
209
|
|
|
193
210
|
</details>
|
|
194
211
|
|
|
@@ -199,9 +216,9 @@ For Cursor / Claude Desktop config, see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZA
|
|
|
199
216
|
npx canicode analyze "https://www.figma.com/design/ABC123/MyDesign?node-id=1-234"
|
|
200
217
|
```
|
|
201
218
|
|
|
202
|
-
> Pass `--ready-min-grade <S|A+|A|B+|B|C+|C|D|F>` to override the codegen-readiness threshold (default: A
|
|
219
|
+
> Pass `--ready-min-grade <S|A+|A|B+|B|C+|C|D|F>` to override the codegen-readiness threshold (default: A).
|
|
203
220
|
|
|
204
|
-
Setup: `npx canicode init --token figd_xxxxxxxxxxxxx` saves the token and installs the Claude Code skills into `./.claude/skills/`.
|
|
221
|
+
Setup: `npx canicode init` (interactive prompt; TTY) or `npx canicode init --token figd_xxxxxxxxxxxxx` (CI / non-TTY) saves the token and installs the Claude Code skills into `./.claude/skills/`. Rotate later with `npx canicode config set-token`.
|
|
205
222
|
|
|
206
223
|
**Figma API Rate Limits** — Rate limits depend on **where the file lives**, not just your plan.
|
|
207
224
|
|