designkit-ai 1.3.0 → 1.5.0

package/README.md

@@ -8,6 +8,29 @@
 
 ---
 
+## CLI
+
+```bash
+npm install -g designkit-ai
+```
+
+| Command | Description |
+|---------|-------------|
+| `designkit list` | Browse all 502 components |
+| `designkit search <query>` | Search by name or tag |
+| `designkit add <id>` | Copy a component to your project |
+| `designkit init` | Add design tokens (css / js / ts / json) |
+| `designkit design "<prompt>"` | Generate UI with AI (Claude / Gemini / GPT-4o) |
+| `designkit convert <file> --to <framework>` | Convert HTML to any framework with AI |
+| `designkit autogen "<prompt>"` | Generate a full multi-screen design project with gallery |
+| `designkit imagine "<prompt>"` | Generate images with Gemini Imagen 3 or DALL-E 3 |
+
+**→ Full CLI reference: [CLI.md](CLI.md)**
+
+![AutoGen — Personal Finance App](images/app-fin.png)
+
+---
+
 ## Why DesignKit?
 
 ### Design-first, then build
@@ -388,27 +411,6 @@ then build this as a React Native app.
 
 ---
 
-## CLI
-
-```bash
-npm install -g designkit-ai
-```
-
-| Command | Description |
-|---------|-------------|
-| `designkit list` | Browse all 502 components |
-| `designkit search <query>` | Search by name or tag |
-| `designkit add <id>` | Copy a component to your project |
-| `designkit init` | Add design tokens (css / js / ts / json) |
-| `designkit design "<prompt>"` | Generate UI with AI (Claude / Gemini / GPT-4o) |
-| `designkit convert <file> --to <framework>` | Convert HTML to any framework with AI |
-| `designkit autogen "<prompt>"` | Generate a full multi-screen design project with gallery |
-| `designkit imagine "<prompt>"` | Generate images with Gemini Imagen 3 or DALL-E 3 |
-
-**→ Full CLI reference: [CLI.md](CLI.md)**
-
----
-
 ## How to use
 
 ### 1. Copy a component

package/bin/designkit.js

@@ -9,6 +9,9 @@ import { convertCommand } from '../src/commands/convert.js'
 import { imagineCommand } from '../src/commands/imagine.js'
 import { projectCommand } from '../src/commands/project.js'
 import { autogenCommand } from '../src/commands/autogen.js'
+import { configCommand } from '../src/commands/config.js'
+import { studioCommand } from '../src/commands/studio.js'
+import { getDefaultProvider, getDefaultPlatform } from '../src/lib/config.js'
 import { readFileSync } from 'fs'
 import { fileURLToPath } from 'url'
 import { dirname, join } from 'path'
@@ -51,17 +54,17 @@ program
   .command('design <prompt>')
   .description('Generate a UI component with AI')
   .option('-s, --skill <skill>', 'Skill: design, react, nextjs, vue, svelte, tailwind, flutter, swiftui, react-native', 'design')
-  .option('-p, --provider <provider>', 'AI provider: anthropic, gemini, openai', 'anthropic')
+  .option('-p, --provider <provider>', `AI provider: anthropic, gemini, openai (default: ${getDefaultProvider()})`)
   .option('-o, --output <file>', 'Save output to file')
-  .action(designCommand)
+  .action((prompt, opts) => designCommand(prompt, { ...opts, provider: opts.provider || getDefaultProvider() }))
 
 program
   .command('convert <file>')
   .description('Convert an HTML component to another framework with AI')
   .requiredOption('--to <framework>', 'Target: react, nextjs, vue, svelte, tailwind, flutter, swiftui, react-native')
-  .option('-p, --provider <provider>', 'AI provider: anthropic, gemini, openai', 'anthropic')
+  .option('-p, --provider <provider>', `AI provider: anthropic, gemini, openai (default: ${getDefaultProvider()})`)
   .option('-o, --output <file>', 'Save output to file (default: same name, new extension)')
-  .action(convertCommand)
+  .action((file, opts) => convertCommand(file, { ...opts, provider: opts.provider || getDefaultProvider() }))
 
 program
   .command('project')
@@ -87,11 +90,35 @@ program
 program
   .command('autogen <project>')
   .description('Generate a full design project: color spec + HTML files for every screen')
-  .option('-p, --provider <provider>', 'AI provider: anthropic, gemini, openai', 'anthropic')
-  .option('--platform <platform>', 'Target platform: mobile, web, both', 'mobile')
+  .option('-p, --provider <provider>', `AI provider: anthropic, gemini, openai (default: ${getDefaultProvider()})`)
+  .option('--platform <platform>', `Target platform: mobile, web (default: ${getDefaultPlatform()})`)
   .option('--screens <list>', 'Comma-separated screen/page names (auto-generated if omitted)')
   .option('--images <folder>', 'Path to local image assets folder (uses placehold.jp if omitted)')
   .option('-o, --output <dir>', 'Output directory (default: output/<project-slug>)')
-  .action(autogenCommand)
+  .action((project, opts) => autogenCommand(project, {
+    ...opts,
+    provider: opts.provider || getDefaultProvider(),
+    platform: opts.platform || getDefaultPlatform()
+  }))
+
+program
+  .command('config [action] [args...]')
+  .description('Get or set default config values (provider, platform)')
+  .addHelpText('after', `
+Examples:
+  designkit config                       # show all config
+  designkit config set provider gemini   # set default provider
+  designkit config set provider anthropic
+  designkit config set platform web
+  designkit config get provider`)
+  .action(configCommand)
+
+program
+  .command('studio')
+  .description('Open DesignKit Studio — local web UI with live code + preview')
+  .option('-p, --provider <provider>', `AI provider: anthropic, gemini, openai (default: ${getDefaultProvider()})`)
+  .option('--platform <platform>', `Target platform: mobile, web (default: ${getDefaultPlatform()})`)
+  .option('--port <port>', 'Port to listen on', '3333')
+  .action(studioCommand)
 
 program.parse()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designkit-ai",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "502 HTML UI components + AI skills for designing and building web and mobile apps",
   "keywords": [
     "design-system",