designkit-ai 1.3.0 → 1.4.0

package/bin/designkit.js

@@ -9,6 +9,8 @@ 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 { getDefaultProvider, getDefaultPlatform } from '../src/lib/config.js'
 import { readFileSync } from 'fs'
 import { fileURLToPath } from 'url'
 import { dirname, join } from 'path'
@@ -51,17 +53,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 +89,27 @@ 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.parse()

package/package.json

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

package/src/commands/autogen.js

@@ -247,7 +247,6 @@ function generateIndexHtml(spec) {
       height: ${frameH}px;
       border: none;
       transform-origin: top left;
-      transform: scale(calc(100% / ${frameW}));
     }
     .frame-overlay {
       position: absolute;
@@ -296,6 +295,18 @@ function generateIndexHtml(spec) {
     ${cards}
   </div>
   <footer>Generated by DesignKit AutoGen &middot; ${new Date().toLocaleDateString()}</footer>
+  <script>
+    function scaleFrames() {
+      document.querySelectorAll('.frame-wrap').forEach(wrap => {
+        const iframe = wrap.querySelector('iframe')
+        const w = wrap.offsetWidth
+        if (iframe && w > 0) iframe.style.transform = 'scale(' + (w / ${frameW}) + ')'
+      })
+    }
+    window.addEventListener('resize', scaleFrames)
+    window.addEventListener('load', scaleFrames)
+    requestAnimationFrame(scaleFrames)
+  </script>
 </body>
 </html>`
 }

package/src/commands/config.js

@@ -0,0 +1,55 @@
+import { readConfig, setConfigValue } from '../lib/config.js'
+
+export function configCommand(action, args, options) {
+  // designkit config list  (or just: designkit config)
+  if (!action || action === 'list') {
+    const config = readConfig()
+    console.log('\nDesignKit config  (~/.designkit/config.json)\n')
+    console.log(`  provider  ${config.provider}`)
+    console.log(`  platform  ${config.platform}`)
+    console.log()
+    return
+  }
+
+  // designkit config get <key>
+  if (action === 'get') {
+    const key = args[0]
+    if (!key) {
+      console.error('Usage: designkit config get <key>')
+      process.exit(1)
+    }
+    const config = readConfig()
+    if (!(key in config)) {
+      console.error(`Unknown key: "${key}"`)
+      process.exit(1)
+    }
+    console.log(config[key])
+    return
+  }
+
+  // designkit config set <key> <value>
+  if (action === 'set') {
+    const key = args[0]
+    const value = args[1]
+    if (!key || !value) {
+      console.error('Usage: designkit config set <key> <value>')
+      console.error('  Keys:  provider, platform')
+      console.error('  Examples:')
+      console.error('    designkit config set provider gemini')
+      console.error('    designkit config set provider anthropic')
+      console.error('    designkit config set platform web')
+      process.exit(1)
+    }
+    try {
+      setConfigValue(key, value)
+      console.log(`✓ Set ${key} = ${value}`)
+    } catch (err) {
+      console.error(`Error: ${err.message}`)
+      process.exit(1)
+    }
+    return
+  }
+
+  console.error(`Unknown subcommand: "${action}". Use: list, get, set`)
+  process.exit(1)
+}

package/src/lib/config.js

@@ -0,0 +1,54 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs'
+import { join } from 'path'
+import { homedir } from 'os'
+
+const CONFIG_DIR = join(homedir(), '.designkit')
+const CONFIG_PATH = join(CONFIG_DIR, 'config.json')
+
+const DEFAULTS = {
+  provider: 'anthropic',
+  platform: 'mobile'
+}
+
+const VALID = {
+  provider: ['anthropic', 'gemini', 'openai'],
+  platform: ['mobile', 'web']
+}
+
+export function readConfig() {
+  if (!existsSync(CONFIG_PATH)) return { ...DEFAULTS }
+  try {
+    return { ...DEFAULTS, ...JSON.parse(readFileSync(CONFIG_PATH, 'utf8')) }
+  } catch {
+    return { ...DEFAULTS }
+  }
+}
+
+export function writeConfig(config) {
+  if (!existsSync(CONFIG_DIR)) mkdirSync(CONFIG_DIR, { recursive: true })
+  writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2), 'utf8')
+}
+
+export function getConfigValue(key) {
+  return readConfig()[key]
+}
+
+export function setConfigValue(key, value) {
+  if (!Object.keys(DEFAULTS).includes(key)) {
+    throw new Error(`Unknown config key: "${key}". Valid keys: ${Object.keys(DEFAULTS).join(', ')}`)
+  }
+  if (VALID[key] && !VALID[key].includes(value)) {
+    throw new Error(`Invalid value "${value}" for "${key}". Valid values: ${VALID[key].join(', ')}`)
+  }
+  const config = readConfig()
+  config[key] = value
+  writeConfig(config)
+}
+
+export function getDefaultProvider() {
+  return getConfigValue('provider') || 'anthropic'
+}
+
+export function getDefaultPlatform() {
+  return getConfigValue('platform') || 'mobile'
+}