designkit-ai 1.4.0 → 1.5.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.
- package/README.md +23 -21
- package/bin/designkit.js +9 -0
- package/package.json +1 -1
- package/src/commands/autogen.js +285 -263
- package/src/commands/studio.js +1162 -0
- package/src/lib/config.js +14 -2
- package/src/lib/providers.js +3 -1
package/README.md
CHANGED
|
@@ -8,6 +8,29 @@
|
|
|
8
8
|
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
+
## CLI
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install -g designkit-ai
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
| Command | Description |
|
|
18
|
+
|---------|-------------|
|
|
19
|
+
| `designkit list` | Browse all 502 components |
|
|
20
|
+
| `designkit search <query>` | Search by name or tag |
|
|
21
|
+
| `designkit add <id>` | Copy a component to your project |
|
|
22
|
+
| `designkit init` | Add design tokens (css / js / ts / json) |
|
|
23
|
+
| `designkit design "<prompt>"` | Generate UI with AI (Claude / Gemini / GPT-4o) |
|
|
24
|
+
| `designkit convert <file> --to <framework>` | Convert HTML to any framework with AI |
|
|
25
|
+
| `designkit autogen "<prompt>"` | Generate a full multi-screen design project with gallery |
|
|
26
|
+
| `designkit imagine "<prompt>"` | Generate images with Gemini Imagen 3 or DALL-E 3 |
|
|
27
|
+
|
|
28
|
+
**→ Full CLI reference: [CLI.md](CLI.md)**
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
11
34
|
## Why DesignKit?
|
|
12
35
|
|
|
13
36
|
### Design-first, then build
|
|
@@ -388,27 +411,6 @@ then build this as a React Native app.
|
|
|
388
411
|
|
|
389
412
|
---
|
|
390
413
|
|
|
391
|
-
## CLI
|
|
392
|
-
|
|
393
|
-
```bash
|
|
394
|
-
npm install -g designkit-ai
|
|
395
|
-
```
|
|
396
|
-
|
|
397
|
-
| Command | Description |
|
|
398
|
-
|---------|-------------|
|
|
399
|
-
| `designkit list` | Browse all 502 components |
|
|
400
|
-
| `designkit search <query>` | Search by name or tag |
|
|
401
|
-
| `designkit add <id>` | Copy a component to your project |
|
|
402
|
-
| `designkit init` | Add design tokens (css / js / ts / json) |
|
|
403
|
-
| `designkit design "<prompt>"` | Generate UI with AI (Claude / Gemini / GPT-4o) |
|
|
404
|
-
| `designkit convert <file> --to <framework>` | Convert HTML to any framework with AI |
|
|
405
|
-
| `designkit autogen "<prompt>"` | Generate a full multi-screen design project with gallery |
|
|
406
|
-
| `designkit imagine "<prompt>"` | Generate images with Gemini Imagen 3 or DALL-E 3 |
|
|
407
|
-
|
|
408
|
-
**→ Full CLI reference: [CLI.md](CLI.md)**
|
|
409
|
-
|
|
410
|
-
---
|
|
411
|
-
|
|
412
414
|
## How to use
|
|
413
415
|
|
|
414
416
|
### 1. Copy a component
|
package/bin/designkit.js
CHANGED
|
@@ -10,6 +10,7 @@ import { imagineCommand } from '../src/commands/imagine.js'
|
|
|
10
10
|
import { projectCommand } from '../src/commands/project.js'
|
|
11
11
|
import { autogenCommand } from '../src/commands/autogen.js'
|
|
12
12
|
import { configCommand } from '../src/commands/config.js'
|
|
13
|
+
import { studioCommand } from '../src/commands/studio.js'
|
|
13
14
|
import { getDefaultProvider, getDefaultPlatform } from '../src/lib/config.js'
|
|
14
15
|
import { readFileSync } from 'fs'
|
|
15
16
|
import { fileURLToPath } from 'url'
|
|
@@ -112,4 +113,12 @@ Examples:
|
|
|
112
113
|
designkit config get provider`)
|
|
113
114
|
.action(configCommand)
|
|
114
115
|
|
|
116
|
+
program
|
|
117
|
+
.command('studio')
|
|
118
|
+
.description('Open DesignKit Studio — local web UI with live code + preview')
|
|
119
|
+
.option('-p, --provider <provider>', `AI provider: anthropic, gemini, openai (default: ${getDefaultProvider()})`)
|
|
120
|
+
.option('--platform <platform>', `Target platform: mobile, web (default: ${getDefaultPlatform()})`)
|
|
121
|
+
.option('--port <port>', 'Port to listen on', '3333')
|
|
122
|
+
.action(studioCommand)
|
|
123
|
+
|
|
115
124
|
program.parse()
|