feat: design-to-code user tool (#35)

.claude/skills/canicode-implement/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: canicode-implement
+description: Prepare a design-to-code implementation package from a Figma URL or fixture
+---
+
+# CanICode Implement -- Design-to-Code Package
+
+Prepare everything an AI needs to implement a Figma design as code: analysis report, design tree with image assets, and a code generation prompt.
+
+This skill does NOT auto-generate code. It assembles a package that you then feed to an AI coding assistant.
+
+## Prerequisites
+
+One of:
+- **FIGMA_TOKEN** environment variable for REST API access
+- **Local fixture** directory (no token needed)
+
+## Usage
+
+### From a local fixture (simplest)
+
+```bash
+npx canicode implement ./fixtures/my-design
+```
+
+### From a Figma URL
+
+```bash
+npx canicode implement "https://www.figma.com/design/ABC/File?node-id=1-234"
+```
+
+### With a custom prompt (for your stack)
+
+```bash
+npx canicode implement ./fixtures/my-design --prompt ./my-react-prompt.md
+```
+
+The default prompt generates HTML+CSS. Write your own prompt for React, Vue, or any other stack.
+
+## Options
+
+| Option | Description | Default |
+|--------|-------------|---------|
+| `--prompt <path>` | Custom prompt file for your stack | Built-in HTML+CSS |
+| `--output <dir>` | Output directory | `./canicode-implement/` |
+| `--token <token>` | Figma API token | `FIGMA_TOKEN` env var |
+| `--image-scale <n>` | Image export scale (1-4) | `2` (PC), use `3` for mobile |
+
+## Output Structure
+
+```text
+canicode-implement/
+  analysis.json      # Full analysis with issues and scores
+  design-tree.txt    # DOM-like tree with styles, structure, embedded SVGs
+  PROMPT.md          # Code generation prompt (default or custom)
+  screenshot.png     # Figma screenshot (if available)
+  vectors/           # SVG assets for VECTOR nodes
+  images/            # PNG assets for IMAGE fill nodes (hero-banner@2x.png)
+```
+
+## Next Steps
+
+After running `canicode implement`:
+
+1. Open `design-tree.txt` -- this is the primary input for the AI
+2. Open `PROMPT.md` -- this contains the coding conventions
+3. Feed both to your AI coding assistant along with any images from `images/` and `vectors/`
+4. Review `analysis.json` for known design issues that may affect implementation

.claude/skills/design-to-code/PROMPT.md

@@ -3,7 +3,7 @@
 This prompt is used by all code generation pipelines:
 - Calibration Converter
 - Rule Discovery A/B Validation
-- design-to-code GitHub Action (via `canicode prompt`)
+- User-facing `canicode implement` command (default prompt)
 
 ## Stack
 - HTML + CSS (single file)
@@ -28,6 +28,10 @@ Your job is to translate the Figma data to HTML+CSS — nothing more.
 - Do NOT add overflow: auto or scroll unless specified
 - Fonts: load via Google Fonts CDN (`<link>` tag). Do NOT use system font fallbacks as primary — the exact font from the data must render.
 
+### Image Assets
+- If the design tree shows `background-image: url(images/...)`, use that path directly
+- If it shows `background-image: [IMAGE]`, the image asset is unavailable — use a placeholder color
+
 ### If data is missing
 When the Figma data does not specify a value, you MUST list it as an interpretation.
 Do not silently guess — always declare what you assumed.

CLAUDE.md

@@ -65,6 +65,7 @@ app/                          # Browser runtime
 - Output: HTML report (opens in browser)
 - Options: `--preset`, `--token`, `--output`, `--custom-rules`, `--config`
 - Also: `canicode save-fixture` to save Figma data as JSON for offline analysis
+- Also: `canicode implement` to prepare a design-to-code package (analysis + design tree + assets + prompt)
 - Component master resolution: fetches `componentDefinitions` for accurate component analysis
 - Annotations: NOT available (REST API annotations field is private beta)
 

README.md

@@ -66,6 +66,7 @@ The rules themselves run deterministically on every analysis — no tokens consu
 | Just try it | **[Web App](https://let-sunny.github.io/canicode/)** — paste a URL, no install |
 | Analyze inside Figma | **[Figma Plugin](https://www.figma.com/community/plugin/1617144221046795292/canicode)** (under review) |
 | Use with Claude Code / Cursor | **MCP Server** or **Skill** — see below |
+| Generate code from design | **`canicode implement`** — analysis + design tree + assets + prompt |
 | Add to CI/CD | **[GitHub Action](https://github.com/marketplace/actions/canicode-action)** |
 | Full control | **CLI** |
 
@@ -113,6 +114,31 @@ Hitting 429 errors? Make sure the file is in a paid workspace. Or use MCP (no to
 
 </details>
 
+<details>
+<summary><strong>Design to Code</strong> (prepare implementation package)</summary>
+
+```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.
+
+</details>
+
 <details>
 <summary><strong>MCP Server</strong> (Claude Code / Cursor / Claude Desktop)</summary>
 

src/cli/docs.ts

@@ -12,9 +12,10 @@ export function printDocsIndex(): void {
   console.log(`
 CANICODE DOCUMENTATION (v${pkg.version})
 
-  canicode docs setup    Full setup guide (CLI, MCP, Skills)
-  canicode docs rules    Custom rules guide + example
-  canicode docs config   Config override guide + example
+  canicode docs setup      Full setup guide (CLI, MCP, Skills)
+  canicode docs rules      Custom rules guide + example
+  canicode docs config     Config override guide + example
+  canicode docs implement  Design-to-code package guide
 
 Full documentation: github.com/let-sunny/canicode#readme
 `.trimStart());
@@ -271,11 +272,56 @@ USE CASES
 `.trimStart());
 }
 
+/** Print the implement command guide. */
+export function printDocsImplement(): void {
+  console.log(`
+DESIGN-TO-CODE IMPLEMENTATION GUIDE
+
+Prepare everything an AI needs to implement a Figma design as code.
+
+USAGE
+  canicode implement <figma-url-or-fixture> [options]
+
+OPTIONS
+  --prompt <path>      Custom prompt file (default: built-in HTML+CSS)
+  --image-scale <n>    Image export scale: 2 for PC (default), 3 for mobile
+  --output <dir>       Output directory (default: ./canicode-implement/)
+  --token <token>      Figma API token (for live URLs)
+
+OUTPUT
+  canicode-implement/
+    analysis.json      Analysis report with issues and scores
+    design-tree.txt    DOM-like tree with CSS styles (~N tokens)
+    images/            PNG assets with human-readable names (hero-banner@2x.png)
+    vectors/           SVG assets for vector nodes
+    PROMPT.md          Stack-specific code generation prompt
+
+WORKFLOW
+  1. Run: canicode implement ./my-fixture --prompt ./my-react-prompt.md
+  2. Feed design-tree.txt + PROMPT.md to your AI assistant
+  3. AI generates code matching the design pixel-perfectly
+  4. Verify with: canicode visual-compare ./output.html --figma-url <url>
+
+CUSTOM PROMPT
+  Default prompt generates HTML+CSS. For your own stack:
+  1. Write a prompt file (e.g. my-react-prompt.md)
+  2. Pass it: canicode implement ./fixture --prompt ./my-react-prompt.md
+  The design-tree.txt format is stack-agnostic — your prompt just needs
+  to describe how to convert it to your target framework.
+
+IMAGE SCALE
+  --image-scale 2     PC/desktop (default) — @2x retina
+  --image-scale 3     Mobile — @3x retina
+  SVG vectors are scale-independent and always included.
+`.trimStart());
+}
+
 const DOCS_TOPICS: Record<string, () => void> = {
   setup: printDocsSetup,
   install: printDocsSetup, // alias
   rules: printDocsRules,
   config: printDocsConfig,
+  implement: printDocsImplement,
   "visual-compare": printDocsVisualCompare,
   "design-tree": printDocsDesignTree,
 };