|
1 | | -# treble-cli |
| 1 | +# treble |
2 | 2 |
|
3 | | -Rust CLI that syncs Figma designs to disk. The Claude plugin provides the intelligence — analysis prompts, build loop, review cycle. |
| 3 | +Figma to production code. Syncs your design to disk, analyzes it with AI, builds every component, and visually verifies the result — all from your terminal. |
4 | 4 |
|
5 | 5 | ## CLI Commands |
6 | 6 |
|
7 | 7 | | Command | What it does | |
8 | 8 | |---------|-------------| |
9 | | -| `treble login` | Store Figma token (PAT, device flow, or `--figma-token` flag) | |
| 9 | +| `treble login` | Store Figma token (PAT or `--pat` flag) | |
| 10 | +| `treble status` | Check auth + project state (`--json` for agents) | |
10 | 11 | | `treble init --figma <url>` | Scaffold `.treble/` in current project | |
11 | 12 | | `treble sync` | Pull Figma file → `.treble/figma/` (deterministic, git-friendly) | |
12 | 13 | | `treble tree "Frame"` | Print layer tree (offline, reads disk) | |
13 | 14 | | `treble show "Node" --frame "Frame"` | Render a Figma node screenshot (calls API) | |
| 15 | +| `treble extract` | Extract image assets from synced frames | |
14 | 16 |
|
15 | 17 | ## Plugin Commands (the brain) |
16 | 18 |
|
17 | 19 | | Command | What it does | |
18 | 20 | |---------|-------------| |
19 | | -| `/treble:plan` | Claude analyzes Figma data → writes `analysis.json` + `build-state.json` | |
20 | | -| `/treble:dev` | Claude enters build loop: code → visual review → architectural review → iterate | |
21 | | -| `/treble:compare` | Claude compares implementation vs Figma reference | |
| 21 | +| `/treble:sync` | Preflight checks, smart frame selection, sync Figma to disk | |
| 22 | +| `/treble:plan` | Analyze Figma data → component inventory, design tokens, build order | |
| 23 | +| `/treble:dev` | Classify design → pick stack → scaffold → build loop with visual review | |
| 24 | +| `/treble:cms` | Wire up CMS editability (Sanity, Prismic, or WordPress) | |
| 25 | +| `/treble:compare` | Visual comparison between Figma reference and implementation | |
22 | 26 |
|
23 | | -The CLI is just the hands (Figma data access). The plugin commands are the brain (analysis + build orchestration). |
| 27 | +The CLI is the hands (Figma data access). The plugin commands are the brain (analysis + build orchestration). |
24 | 28 |
|
25 | 29 | ## Architecture |
26 | 30 |
|
27 | 31 | ``` |
28 | 32 | src/ |
29 | 33 | ├── main.rs # clap CLI, 5 subcommands |
30 | | -├── config.rs # Global (~/.treble-cli/) + project (.treble/) config |
| 34 | +├── config.rs # Global (~/.treble/) + project (.treble/) config |
31 | 35 | ├── commands/ |
32 | | -│ ├── login.rs # Figma token storage (3 modes: device, PAT, flag) |
| 36 | +│ ├── login.rs # Figma token storage (PAT mode) |
| 37 | +│ ├── status.rs # Auth + project state checker (--json for agents) |
33 | 38 | │ ├── init.rs # Project scaffolding |
34 | 39 | │ ├── sync.rs # Figma → disk sync (deterministic, orphan cleanup) |
35 | 40 | │ ├── tree.rs # Layer tree printer (colored, with visual props) |
36 | | -│ └── show.rs # On-demand node rendering via Figma images API |
| 41 | +│ ├── show.rs # On-demand node rendering via Figma images API |
| 42 | +│ └── extract.rs # Image asset extraction |
37 | 43 | └── figma/ |
38 | 44 | ├── client.rs # Figma REST API (files, nodes, images) |
39 | 45 | └── types.rs # API types + FlatNode + FigmaManifest |
|
42 | 48 | ├── marketplace.json # Plugin registry |
43 | 49 | ├── CLAUDE.md # Plugin context (injected into Claude's awareness) |
44 | 50 | ├── hooks.json # SessionStart check |
45 | | -└── commands/ |
46 | | - ├── plan.md # Analysis system prompt — full design analysis workflow |
47 | | - ├── dev.md # Build loop — code → visual review → arch review → iterate |
48 | | - ├── compare.md # Visual comparison prompt |
49 | | - ├── tree.md # Layer exploration |
50 | | - └── show.md # Node rendering |
| 51 | +├── commands/ |
| 52 | +│ ├── sync.md # Smart Figma sync with preflight + frame selection |
| 53 | +│ ├── plan.md # Analysis — design tokens, component inventory, build order |
| 54 | +│ ├── dev.md # Build router — classify, pick stack, scaffold, hand off |
| 55 | +│ ├── cms.md # CMS wiring — compatibility-gated options |
| 56 | +│ ├── compare.md # Visual comparison prompt |
| 57 | +│ ├── tree.md # Layer exploration |
| 58 | +│ └── show.md # Node rendering |
| 59 | +└── skills/ |
| 60 | + ├── dev-shadcn.md # Build loop for React + shadcn/ui targets |
| 61 | + └── dev-basecoat-wp.md # Build loop for WordPress + Basecoat targets |
51 | 62 | ``` |
52 | 63 |
|
53 | 64 | ## Dev |
|
0 commit comments