@wz927/codedesign 0.1.0

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.

Potentially problematic release.

This version of @wz927/codedesign might be problematic. Click here for more details.

Files changed (5) hide show
  1. package/README.md +124 -0
  2. package/dist/main.js +2 -0
  3. package/figma-plugin/manifest.json +8 -0
  4. package/figma-plugin/ui.html +98 -0
  5. package/package.json +42 -0
package/README.md ADDED
@@ -0,0 +1,124 @@
1
+ # codedesign
2
+
3
+ A terminal AI agent for designers. Think "Claude Code, but for design work" — you talk to it in a terminal, and it drives **Figma** for you: creates frames, builds layouts with auto-layout, styles text, exports assets, and reads existing designs.
4
+
5
+ ```
6
+ codedesign ●figma:MyApp mode:default model:claude-sonnet-4-5
7
+ ───────────────────────────────────────────────────────────────
8
+ › draw me a login screen for a mobile app, iOS style, 390x844
9
+
10
+ ⚙ figma_create_frame {"name":"Login","width":390,"height":844,"layoutMode":"VERTICAL",...}
11
+ ↳ ok: {"id":"123:45","name":"Login",...}
12
+ ⚙ figma_create_text {"characters":"Welcome back","fontSize":28,"fontWeight":600,...}
13
+ ↳ ok: {"id":"123:46",...}
14
+ ⚙ figma_create_frame {"name":"email-field",...}
15
+ ↳ ok: ...
16
+ Done. Created Login screen `123:45` with heading, email & password fields, primary CTA,
17
+ and "Forgot password?" link. 10 nodes, 8-pt grid, type scale 12/14/16/20/28.
18
+
19
+ ❯ make the primary button purple (#6E56CF) and add a subtle shadow
20
+ ```
21
+
22
+ ## Architecture
23
+
24
+ ```
25
+ ┌────────────────────────┐ WebSocket ┌────────────────────────┐
26
+ │ codedesign CLI │ ◄────────► │ codedesign Figma Plugin│
27
+ │ (Node/Bun + Ink + RX) │ :7777 │ (sandbox + ui.html) │
28
+ │ │ │ │
29
+ │ QueryEngine + Tools ──►│ │ figma.* APIs (create, │
30
+ │ anthropic-sdk stream │ │ set, export, ...) │
31
+ └─────────┬──────────────┘ └────────────────────────┘
32
+ │ REST (reads, renders)
33
+ ▼
34
+ Figma REST API
35
+ ```
36
+
37
+ - **Writes** (create frame, set props, export) must go through the Plugin — Figma's write APIs are only available inside a running plugin.
38
+ - **Reads** (file tree, render image, file metadata) use the Figma REST API with your personal access token.
39
+
40
+ ## Install & run
41
+
42
+ ```bash
43
+ cd app
44
+ bun install # or: npm install
45
+ bun run src/main.tsx # or: npm run dev
46
+ ```
47
+
48
+ First time:
49
+
50
+ ```bash
51
+ codedesign --login-anthropic sk-ant-...
52
+ codedesign --login-figma figd_...
53
+ ```
54
+
55
+ Or inside the REPL:
56
+
57
+ ```
58
+ /login anthropic sk-ant-...
59
+ /login figma figd_...
60
+ ```
61
+
62
+ ### Install the Figma Plugin (dev mode)
63
+
64
+ 1. Open Figma desktop.
65
+ 2. Menu → **Plugins → Development → Import plugin from manifest…**
66
+ 3. Pick `app/figma-plugin/manifest.json`.
67
+ 4. In the plugin: `Plugins → Development → codedesign`. A small window pops up and auto-connects to `ws://127.0.0.1:7777`.
68
+ 5. In the CLI, run `/figma` to confirm it shows **CONNECTED** with your file name.
69
+
70
+ ## Commands
71
+
72
+ | Command | What it does |
73
+ |---|---|
74
+ | `/help` | List commands |
75
+ | `/figma` | Bridge status & the currently-bound file |
76
+ | `/login anthropic <key>` | Save API key |
77
+ | `/login figma <token>` | Save Figma token (REST) |
78
+ | `/mode default\|auto\|plan\|yolo` | Permission mode |
79
+ | `/model <id>` | Change Claude model |
80
+ | `/config` | Show config (secrets masked) |
81
+ | `/clear` | New conversation |
82
+ | `/exit` | Quit |
83
+
84
+ ## Permission modes
85
+
86
+ - **default** — ask before any `write`/`destructive` tool call
87
+ - **auto** — auto-allow `write` (frame creation, text edits); still ask for `destructive`
88
+ - **plan** — dry run, deny everything (the agent plans aloud)
89
+ - **yolo** — auto-allow everything (use only on trusted files)
90
+
91
+ ## Tool surface
92
+
93
+ **Figma (plugin)**: `figma_status`, `figma_current_page`, `figma_get_selection`, `figma_get_node`, `figma_create_frame`, `figma_create_text`, `figma_create_rectangle`, `figma_create_ellipse`, `figma_set_props`, `figma_set_autolayout`, `figma_append_child`, `figma_delete`, `figma_clone`, `figma_list_styles`, `figma_list_components`, `figma_create_instance`, `figma_viewport`, `figma_export`, `figma_notify`
94
+
95
+ **Figma (REST)**: `figma_rest_get_file`, `figma_rest_get_nodes`, `figma_rest_image`
96
+
97
+ **Local**: `bash`, `file_read`, `file_write`, `file_edit`, `glob`, `grep`, `web_fetch`
98
+
99
+ ## Project layout
100
+
101
+ ```
102
+ app/
103
+ ├── src/
104
+ │ ├── main.tsx # entry
105
+ │ ├── config.ts # ~/.codedesign/config.json
106
+ │ ├── engine/QueryEngine.ts # streaming + tool loop
107
+ │ ├── tools/ # Figma + REST + basic tools
108
+ │ ├── bridge/figmaBridge.ts # WebSocket server
109
+ │ ├── permission/gate.ts # approval gate
110
+ │ ├── commands/ # slash commands
111
+ │ └── ui/ # Ink components
112
+ └── figma-plugin/
113
+ ├── manifest.json
114
+ ├── code.ts # sandbox — calls figma.*
115
+ └── ui.html # WebSocket client relay
116
+ ```
117
+
118
+ ## Roadmap
119
+
120
+ - Design token sync (Figma variables ↔ JSON)
121
+ - Multi-agent design review (`/review` → visual/a11y/copy)
122
+ - Image generation (Nano Banana) for illustrations & hero imagery
123
+ - `/prd` one-shot PRD → screen deck
124
+ - Component library awareness & instance reuse