designkit-ai 1.1.2 → 1.3.0

package/AI-AGENT.md

@@ -6,6 +6,7 @@
 
 | Skill | File | What it does |
 |-------|------|-------------|
+| **AutoGen Design** | [skills/autogen-design.md](skills/autogen-design.md) | Generate a full design project: color spec + HTML for every screen/page |
 | **Design** | [skills/design.md](skills/design.md) | Generate a pixel-perfect single-file HTML screen or page |
 | **Contribute** | [skills/contribute.md](skills/contribute.md) | Create a valid new component or validate an existing one |
 | **React** | [skills/react.md](skills/react.md) | Convert to React TypeScript component (inline styles) |
@@ -21,7 +22,27 @@
 
 ## Usage
 
-### Design only
+### AutoGen — full design project (recommended for new projects)
+
+```
+Read skills/autogen-design.md, then generate a complete design project for:
+"Personal finance tracking app" — dark, professional
+Platform: mobile
+Screens: splash, home, transactions, cards, profile, settings
+Output to: output/finance-app/
+Use placehold.jp for images.
+```
+
+```
+Read skills/autogen-design.md, then generate a full design project for:
+"SaaS analytics dashboard" — clean, indigo
+Platform: web
+Screens: landing, dashboard, reports, settings, pricing, onboarding
+Output to: output/saas-dashboard/
+Images folder: ./assets/marketing/
+```
+
+### Design only — single screen
 
 ```
 Read skills/design.md, then design:

package/README.md

@@ -2,7 +2,7 @@
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/pixeliro-sys/designkit-source-for-ai)
 
-> **502 ready-to-use HTML components** + **33 full-page design previews** for Web and Mobile.
+> **502 ready-to-use HTML components** + **2 full-page design previews** for Web and Mobile.
 > Token-based design system. Works with any AI agent to generate beautiful single-file HTML designs.
 > Built by **[Pixeliro](https://pixeliro.com)** — AI-powered design tool for everyone.
 
@@ -24,7 +24,7 @@ No Figma license. No design handoff. No waiting. Just open an HTML file, see the
 
 ### Useful in design
 
-- **Instant visual prototypes** — 502 components + 33 full-page designs ready to open in any browser. No build step, no setup.
+- **Instant visual prototypes** — 502 components + 2 full-page designs ready to open in any browser. No build step, no setup.
 - **Token-driven theming** — change one CSS variable (`--kit-primary`) and the entire design recolors. Perfect for testing brand colors, dark mode, or client themes in seconds.
 - **AI-ready structure** — feed components to Claude, GPT-4, or Gemini. The AI understands the token system and generates pixel-perfect screens that match your design language.
 - **Mobile + Web in one kit** — 204 mobile components (iOS/Android) and 200 web components share the same token system, so mobile and web feel consistent by default.
@@ -120,8 +120,8 @@ DesignKit/
 │
 └── previews/
     └── full-designs/
-        ├── mobile/     17 complete app designs (Finance, Fitness, Food, Social, …)
-        └── web/        16 complete web designs (SaaS, Analytics, Blog, CRM, …)
+        ├── mobile/     1 complete app design  (Pixeliro app — 12 screens)
+        └── web/        1 complete web design  (SaaS Landing — 14 pages)
 ```
 
 **Each component** is a self-contained HTML snippet using CSS custom properties (`--kit-*`).
@@ -402,6 +402,7 @@ npm install -g designkit-ai
 | `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)**

package/bin/designkit.js

@@ -8,6 +8,7 @@ import { designCommand } from '../src/commands/design.js'
 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 { readFileSync } from 'fs'
 import { fileURLToPath } from 'url'
 import { dirname, join } from 'path'
@@ -70,8 +71,8 @@ program
   .action(projectCommand)
 
 program
-  .command('imagine <prompt>')
-  .description('Generate an image with AI (Gemini Imagen 3 or DALL-E 3)')
+  .command('imagine [prompt]')
+  .description('Generate an image with AI (Gemini or DALL-E 3)')
   .option('-p, --provider <provider>', 'AI provider: gemini, openai', 'gemini')
   .option('-o, --output <dir>', 'Output directory', '.')
   .option('-n, --name <name>', 'Output filename (without extension)', 'image')
@@ -83,4 +84,14 @@ program
   .option('--quality <quality>', 'DALL-E quality: standard, hd', 'standard')
   .action(imagineCommand)
 
+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('--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)
+
 program.parse()

package/package.json

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

package/skills/autogen-design.md

@@ -0,0 +1,367 @@
+# Skill: AutoGen Design Pipeline
+
+> **For:** Claude, GPT-4o, Gemini, Cursor, Copilot, or any AI agent.
+> **Goal:** Generate a complete design project — color system spec → per-screen/page HTML files.
+> **Output:** `design-spec.json` + individual `.html` files for every screen or page.
+
+---
+
+## Overview
+
+This skill runs a **two-phase pipeline**:
+
+| Phase | Input | Output |
+|-------|-------|--------|
+| **1 — Design Spec** | Project description + platform + screens list | `design-spec.json` |
+| **2 — HTML Generation** | design-spec.json + per-screen description | One `.html` file per screen |
+
+---
+
+## Phase 1 — Generate Design Spec
+
+### Your role in Phase 1
+
+You are a **senior product designer**. Given a project description, you will create a complete, coherent design system specification — colors, typography, spacing mood, and a screen/page plan.
+
+### Input format
+
+```
+Project: {description}
+Platform: mobile | web | both
+Screens: {optional comma-separated list, e.g. "home, transactions, profile, settings"}
+Images folder: {optional path, e.g. "./assets/images" — use real images from here}
+```
+
+### Output format — design-spec.json
+
+Respond with a **single JSON object** (no markdown fences, no commentary). Structure:
+
+```json
+{
+  "project": "Project Name",
+  "platform": "mobile",
+  "mood": "Short mood description — e.g. Finance / Banking, dark professional",
+  "imageFolder": null,
+  "colors": {
+    "primary": "#6366F1",
+    "primaryText": "#FFFFFF",
+    "secondary": "#64748B",
+    "accent": "#F59E0B",
+    "bg": "#0A0E1A",
+    "surface": "#141926",
+    "surface2": "#1E2538",
+    "surface3": "#334155",
+    "text": "#F1F5F9",
+    "text2": "#94A3B8",
+    "text3": "#64748B",
+    "textInverse": "#0F172A",
+    "border": "#1E2538",
+    "borderStrong": "#334155",
+    "success": "#22C55E",
+    "successBg": "#052E16",
+    "error": "#EF4444",
+    "errorBg": "#450A0A",
+    "warning": "#F59E0B",
+    "warningBg": "#431407",
+    "info": "#3B82F6",
+    "infoBg": "#172554"
+  },
+  "typography": {
+    "fontFamily": "Inter, system-ui, sans-serif",
+    "scale": {
+      "xs": "11px",
+      "sm": "13px",
+      "md": "15px",
+      "lg": "17px",
+      "xl": "20px",
+      "2xl": "24px",
+      "3xl": "32px",
+      "4xl": "48px"
+    }
+  },
+  "radius": {
+    "sm": "6px",
+    "md": "10px",
+    "lg": "14px",
+    "xl": "20px",
+    "full": "9999px"
+  },
+  "shadow": {
+    "sm": "0 1px 3px rgba(0,0,0,0.08)",
+    "md": "0 4px 12px rgba(0,0,0,0.10)",
+    "lg": "0 8px 32px rgba(0,0,0,0.12)",
+    "xl": "0 20px 60px rgba(0,0,0,0.15)"
+  },
+  "screens": [
+    {
+      "id": "home",
+      "name": "Home Screen",
+      "platform": "mobile",
+      "description": "Main dashboard showing balance, quick actions, recent transactions, and spending chart",
+      "components": [
+        "iOS Status Bar",
+        "Top App Bar with greeting and avatar",
+        "Balance Card (gradient)",
+        "Quick Action Buttons row (Send, Receive, Pay, Top Up)",
+        "Spending Chart (donut or bar)",
+        "Recent Transactions list (3–5 items)",
+        "Bottom Tab Navigation (Home, Cards, History, Profile)"
+      ],
+      "file": "home.html"
+    }
+  ]
+}
+```
+
+### Color mood presets — pick the closest and customize
+
+| Mood | primary | bg | surface | text |
+|------|---------|----|---------|------|
+| Finance / Banking (dark) | `#6366F1` | `#0A0E1A` | `#141926` | `#F1F5F9` |
+| Health / Wellness (light) | `#10B981` | `#F0FDF4` | `#FFFFFF` | `#064E3B` |
+| E-commerce (orange) | `#F97316` | `#FFFFFF` | `#FFF7ED` | `#1C1917` |
+| SaaS / Productivity (indigo) | `#6366F1` | `#FFFFFF` | `#F8FAFC` | `#0F172A` |
+| Social / Dating (pink) | `#EC4899` | `#FFFFFF` | `#FDF2F8` | `#1F2937` |
+| Travel (blue-teal) | `#0EA5E9` | `#F0F9FF` | `#FFFFFF` | `#0C4A6E` |
+| News / Editorial (neutral) | `#1D4ED8` | `#FFFFFF` | `#F9FAFB` | `#111827` |
+| Fitness (dark orange) | `#F97316` | `#0C0A09` | `#1C1917` | `#F5F5F4` |
+| Education (purple) | `#7C3AED` | `#FFFFFF` | `#F5F3FF` | `#1E1B4B` |
+
+### Screen count guidelines
+
+| Platform | Recommended screens |
+|----------|-------------------|
+| Mobile app | 4–8 screens |
+| Web app | 3–6 pages |
+| Landing site | 1–3 pages |
+| Both | 4–8 mobile + 3–5 web |
+
+### Rules for Phase 1
+
+1. Output **only valid JSON** — no markdown, no explanation
+2. Colors must form a **cohesive, professional palette** — avoid random colors
+3. `screens[].components` is an **ordered list** matching top-to-bottom layout
+4. `screens[].id` is kebab-case, matches the `file` name: `home` → `home.html`
+5. If user provides `imageFolder`, set `"imageFolder": "./path/to/images"` in the spec
+6. `platform` per screen can override the project platform for multi-platform projects
+
+---
+
+## Phase 2 — Generate HTML Screens
+
+### Your role in Phase 2
+
+You are a **UI/UX designer and front-end developer**.
+For each screen entry in `design-spec.json`, generate a **complete, self-contained HTML file**.
+
+### Input per screen
+
+```
+Design spec: {full design-spec.json content}
+Screen: {screens[i] object}
+Image folder: {null | "./path/to/images"}
+```
+
+### CSS token mapping
+
+Map `design-spec.json` colors to `--kit-*` CSS variables:
+
+```css
+:root {
+  --kit-primary:        {colors.primary};
+  --kit-primary-text:   {colors.primaryText};
+  --kit-secondary:      {colors.secondary};
+  --kit-accent:         {colors.accent};
+  --kit-bg:             {colors.bg};
+  --kit-surface:        {colors.surface};
+  --kit-surface-2:      {colors.surface2};
+  --kit-surface-3:      {colors.surface3};
+  --kit-text:           {colors.text};
+  --kit-text-2:         {colors.text2};
+  --kit-text-3:         {colors.text3};
+  --kit-text-inverse:   {colors.textInverse};
+  --kit-border:         {colors.border};
+  --kit-border-strong:  {colors.borderStrong};
+  --kit-success:        {colors.success};
+  --kit-success-bg:     {colors.successBg};
+  --kit-error:          {colors.error};
+  --kit-error-bg:       {colors.errorBg};
+  --kit-warning:        {colors.warning};
+  --kit-warning-bg:     {colors.warningBg};
+  --kit-info:           {colors.info};
+  --kit-info-bg:        {colors.infoBg};
+
+  --kit-font:           {typography.fontFamily};
+  --kit-text-xs:        {typography.scale.xs};
+  --kit-text-sm:        {typography.scale.sm};
+  --kit-text-md:        {typography.scale.md};
+  --kit-text-lg:        {typography.scale.lg};
+  --kit-text-xl:        {typography.scale.xl};
+  --kit-text-2xl:       {typography.scale["2xl"]};
+  --kit-text-3xl:       {typography.scale["3xl"]};
+  --kit-text-4xl:       {typography.scale["4xl"]};
+
+  --kit-radius-sm:   {radius.sm};
+  --kit-radius:      {radius.md};
+  --kit-radius-lg:   {radius.lg};
+  --kit-radius-xl:   {radius.xl};
+  --kit-radius-full: {radius.full};
+
+  --kit-shadow-sm: {shadow.sm};
+  --kit-shadow:    {shadow.md};
+  --kit-shadow-lg: {shadow.lg};
+  --kit-shadow-xl: {shadow.xl};
+}
+```
+
+### Image handling
+
+- If `imageFolder` is **null**: use `https://placehold.jp/{W}x{H}.png` for all images
+- If `imageFolder` is set: use `{imageFolder}/{filename}` for images — pick realistic filenames
+  - Use descriptive filenames: `avatar-user.jpg`, `product-hero.jpg`, `banner-sale.png`
+  - If the file might not exist, add `onerror="this.src='https://placehold.jp/{W}x{H}.png'"` as fallback
+
+### Output format — single HTML file
+
+Follow the exact structure from [design.md](design.md):
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=390, initial-scale=1.0"><!-- 390 mobile, 1440 web -->
+  <title>{screen.name} — {project.name}</title>
+  <style>
+    /* ── 1. Design Spec Tokens ─────────────────────────────── */
+    :root { /* mapped from design-spec.json */ }
+
+    /* ── 2. Reset ────────────────────────────────────────────── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: var(--kit-font);
+      background: var(--kit-bg);
+      color: var(--kit-text);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* ── 3. Screen wrapper ─────────────────────────────────── */
+    .screen { /* mobile: width:390px / web: max-width:1440px */ }
+  </style>
+</head>
+<body>
+  <div class="screen">
+    <!-- Components from screen.components, top to bottom -->
+  </div>
+</body>
+</html>
+```
+
+### Rules for Phase 2
+
+1. **All colors via `var(--kit-*)`** — never hardcode `#hex` inside component HTML
+2. **Inline styles only** — no Tailwind, no Bootstrap, no class-based CSS
+3. **Semantic HTML** — `<button>`, `<nav>`, `<header>`, `<a>`, `<ul>/<li>`, `<h1>`–`<h6>`
+4. **No JavaScript** — static design preview only
+5. **`data-component="..."`** on each component root element
+6. **Looks complete and polished** — not a skeleton, real content and realistic data
+7. **Consistent** — all screens share the same color tokens from the spec
+8. **Platform-aware** — mobile uses 390px viewport, web uses 1440px
+
+---
+
+## Full Pipeline — Agent Instructions
+
+When given an autogen-design task, run these steps in order:
+
+### Step 1 — Parse request
+
+Extract:
+- Project description (required)
+- Platform: `mobile` | `web` | `both` (default: `mobile`)
+- Screens list: from user input, or auto-generate based on project type
+- Output directory: where to save files
+- Images folder: `null` or a provided path
+
+### Step 2 — Generate design-spec.json
+
+Call AI with Phase 1 prompt. Save result as `{outputDir}/design-spec.json`.
+
+### Step 3 — Generate HTML for each screen
+
+For each screen in `spec.screens`, call AI with Phase 2 prompt.
+Save each result as `{outputDir}/{screen.file}`.
+
+### Step 4 — Generate index.html (screen gallery)
+
+Create a simple HTML gallery that links to all generated screens:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>{project} — Design Preview</title>
+  <style>
+    /* Grid of screen preview cards */
+  </style>
+</head>
+<body>
+  <h1>{project} — Design Preview</h1>
+  <div class="grid">
+    {screens.map(s => `<a href="${s.file}"><div class="card">${s.name}</div></a>`)}
+  </div>
+</body>
+</html>
+```
+
+### Step 5 — Output summary
+
+Print:
+```
+✓ design-spec.json
+✓ home.html
+✓ transactions.html
+✓ profile.html
+✓ settings.html
+✓ index.html
+```
+
+---
+
+## Example invocations
+
+### CLI (designkit autogen)
+
+```bash
+# Mobile finance app — auto-generate screens
+designkit autogen "Personal finance tracking app" --platform mobile
+
+# Web SaaS dashboard — specify screens
+designkit autogen "SaaS analytics dashboard" --platform web \
+  --screens "landing,dashboard,reports,settings,pricing" \
+  --output output/saas-dashboard
+
+# App with real images
+designkit autogen "Travel booking app" --platform mobile \
+  --images ./assets/travel-images \
+  --output output/travel-app
+
+# Use Gemini provider
+designkit autogen "E-commerce store" --provider gemini --output output/ecommerce
+```
+
+### AI Agent (no CLI)
+
+```
+Read skills/autogen-design.md, then:
+Generate a complete design project for: "Food delivery app — dark, modern"
+Platform: mobile
+Screens: splash, home, restaurant-list, restaurant-detail, cart, checkout, order-tracking, profile
+Output directory: output/food-app/
+Use placehold.jp for images.
+```
+
+---
+
+*Part of [DesignKit](../README.md) · See [skills/](../skills/) for individual screen/component skills.*

package/src/commands/autogen.js

@@ -0,0 +1,394 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs'
+import { fileURLToPath } from 'url'
+import { dirname, join, resolve } from 'path'
+import { streamText, PROVIDERS, stripCodeFences } from '../lib/providers.js'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const ROOT = join(__dirname, '../../')
+
+// ─── Skill loaders ────────────────────────────────────────────────────────────
+
+function loadSkill(name) {
+  const skillPath = join(ROOT, 'skills', `${name}.md`)
+  if (!existsSync(skillPath)) return ''
+  return readFileSync(skillPath, 'utf8')
+}
+
+// ─── Phase 1: Generate design spec ───────────────────────────────────────────
+
+function buildSpecPrompt(projectDesc, platform, screens, imageFolder) {
+  const screenHint = screens?.length
+    ? `Screens/pages to generate: ${screens.join(', ')}`
+    : `Auto-determine the most important screens/pages for this type of app or site.`
+
+  const imgHint = imageFolder
+    ? `Images folder: ${imageFolder} — use real image filenames from this folder. Add onerror fallback to placehold.jp.`
+    : `Images folder: null — use https://placehold.jp/{W}x{H}.png for all images.`
+
+  return [
+    `Project: ${projectDesc}`,
+    `Platform: ${platform}`,
+    screenHint,
+    imgHint,
+    '',
+    'Generate the design-spec.json for this project.',
+    'Output ONLY the raw JSON object — no markdown fences, no explanation, no commentary.',
+    'The JSON must be valid and complete per the autogen-design.md Phase 1 spec.'
+  ].join('\n')
+}
+
+async function generateSpec(prompt, options) {
+  const provider = options.provider || 'anthropic'
+  const skill = loadSkill('autogen-design')
+  const systemPrompt = [
+    skill,
+    '---',
+    '# Your task: Phase 1 — Generate Design Spec',
+    'Output ONLY valid JSON. No markdown. No commentary.'
+  ].join('\n\n')
+
+  process.stderr.write('\n[Phase 1] Generating design spec...\n')
+
+  let fullOutput = ''
+  await streamText({
+    provider,
+    systemPrompt,
+    userMessage: prompt,
+    onText: (text) => {
+      process.stderr.write('.')
+      fullOutput += text
+    }
+  })
+  process.stderr.write('\n')
+
+  // Strip fences if AI wrapped it anyway
+  const cleaned = stripCodeFences(fullOutput).trim()
+  try {
+    return JSON.parse(cleaned)
+  } catch {
+    // Try to extract JSON object from the output
+    const match = cleaned.match(/\{[\s\S]*\}/)
+    if (match) {
+      try {
+        return JSON.parse(match[0])
+      } catch {
+        // ignore
+      }
+    }
+    throw new Error(`Phase 1 output was not valid JSON.\n\nRaw output:\n${cleaned.slice(0, 500)}`)
+  }
+}
+
+// ─── Phase 2: Generate HTML for each screen ───────────────────────────────────
+
+function buildScreenPrompt(spec, screen) {
+  const imageNote = spec.imageFolder
+    ? `Use images from: ${spec.imageFolder}/. Use descriptive filenames (e.g. avatar-user.jpg). Add onerror="this.src='https://placehold.jp/{W}x{H}.png'" fallback on each <img>.`
+    : `Use https://placehold.jp/{W}x{H}.png for all images (no external images needed).`
+
+  return [
+    '# Design Spec',
+    '```json',
+    JSON.stringify(spec, null, 2),
+    '```',
+    '',
+    '# Screen to generate',
+    '```json',
+    JSON.stringify(screen, null, 2),
+    '```',
+    '',
+    imageNote,
+    '',
+    `Generate the complete, self-contained HTML file for "${screen.name}".`,
+    'Output ONLY the raw HTML — no markdown fences, no explanation.'
+  ].join('\n')
+}
+
+async function generateScreen(spec, screen, options) {
+  const provider = options.provider || 'anthropic'
+  const skillDesign = loadSkill('design')
+  const skillAutogen = loadSkill('autogen-design')
+
+  const systemPrompt = [
+    skillAutogen,
+    '---',
+    '# Active Skill: design (HTML output)',
+    skillDesign,
+    '---',
+    '# Your task: Phase 2 — Generate HTML screen',
+    'Output ONLY the raw HTML file content. No markdown fences. No explanation.'
+  ].join('\n\n')
+
+  const userMessage = buildScreenPrompt(spec, screen)
+
+  let fullOutput = ''
+  await streamText({
+    provider,
+    systemPrompt,
+    userMessage,
+    onText: (text) => {
+      process.stderr.write('.')
+      fullOutput += text
+    }
+  })
+  process.stderr.write('\n')
+
+  return stripCodeFences(fullOutput).trim()
+}
+
+// ─── Index gallery ─────────────────────────────────────────────────────────────
+
+function generateIndexHtml(spec) {
+  const isMobile = spec.platform === 'mobile'
+  const frameW = isMobile ? 390 : 1280
+  const frameH = isMobile ? 844 : 800
+
+  const cards = spec.screens.map(s => `
+    <a class="card" href="${s.file}" target="_blank">
+      <div class="frame-wrap">
+        <iframe src="${s.file}" width="${frameW}" height="${frameH}" scrolling="no" loading="lazy" title="${s.name}"></iframe>
+        <div class="frame-overlay"></div>
+      </div>
+      <div class="card-label">
+        <span class="card-name">${s.name}</span>
+        <span class="card-file">${s.file}</span>
+      </div>
+    </a>`).join('\n')
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${spec.project} — Design Preview</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: Inter, system-ui, -apple-system, sans-serif;
+      background: #09090B;
+      color: #F1F5F9;
+      min-height: 100vh;
+      padding: 40px 24px;
+      -webkit-font-smoothing: antialiased;
+    }
+    header {
+      max-width: 1200px;
+      margin: 0 auto 40px;
+    }
+    header h1 {
+      font-size: 28px;
+      font-weight: 700;
+      letter-spacing: -0.5px;
+      margin-bottom: 8px;
+    }
+    header p {
+      font-size: 14px;
+      color: #64748B;
+    }
+    .meta {
+      display: flex;
+      gap: 12px;
+      margin-top: 16px;
+      flex-wrap: wrap;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 12px;
+      background: #1E293B;
+      border: 1px solid #334155;
+      border-radius: 9999px;
+      font-size: 12px;
+      color: #94A3B8;
+    }
+    .color-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: ${spec.colors?.primary || '#6366F1'};
+      display: inline-block;
+    }
+    .grid {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(${isMobile ? '220px' : '380px'}, 1fr));
+      gap: 24px;
+    }
+    .card {
+      display: flex;
+      flex-direction: column;
+      border-radius: 12px;
+      border: 1px solid #1E293B;
+      overflow: hidden;
+      background: #111827;
+      text-decoration: none;
+      color: inherit;
+      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
+    }
+    .card:hover {
+      border-color: #334155;
+      transform: translateY(-2px);
+      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+    }
+    .frame-wrap {
+      position: relative;
+      width: 100%;
+      aspect-ratio: ${isMobile ? '390/844' : '16/10'};
+      overflow: hidden;
+      background: #0F172A;
+    }
+    .frame-wrap iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: ${frameW}px;
+      height: ${frameH}px;
+      border: none;
+      transform-origin: top left;
+      transform: scale(calc(100% / ${frameW}));
+    }
+    .frame-overlay {
+      position: absolute;
+      inset: 0;
+      cursor: pointer;
+    }
+    .card-label {
+      padding: 12px 16px;
+      border-top: 1px solid #1E293B;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .card-name {
+      font-size: 13px;
+      font-weight: 600;
+      color: #F1F5F9;
+    }
+    .card-file {
+      font-size: 11px;
+      color: #475569;
+      font-family: monospace;
+    }
+    footer {
+      max-width: 1200px;
+      margin: 48px auto 0;
+      padding-top: 24px;
+      border-top: 1px solid #1E293B;
+      font-size: 12px;
+      color: #334155;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>${spec.project}</h1>
+    <p>${spec.mood || ''}</p>
+    <div class="meta">
+      <span class="badge"><span class="color-dot"></span> Primary: ${spec.colors?.primary || 'N/A'}</span>
+      <span class="badge">Platform: ${spec.platform}</span>
+      <span class="badge">${spec.screens.length} screens</span>
+      ${spec.typography?.fontFamily ? `<span class="badge">${spec.typography.fontFamily.split(',')[0]}</span>` : ''}
+    </div>
+  </header>
+  <div class="grid">
+    ${cards}
+  </div>
+  <footer>Generated by DesignKit AutoGen &middot; ${new Date().toLocaleDateString()}</footer>
+</body>
+</html>`
+}
+
+// ─── Main command ──────────────────────────────────────────────────────────────
+
+export async function autogenCommand(projectDesc, options) {
+  const provider = options.provider || 'anthropic'
+  const platform = options.platform || 'mobile'
+  const outputDir = resolve(options.output || `output/${projectDesc.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}`)
+  const imageFolder = options.images || null
+  const screens = options.screens
+    ? options.screens.split(',').map(s => s.trim()).filter(Boolean)
+    : []
+
+  // Validate provider
+  if (!Object.keys(PROVIDERS).includes(provider)) {
+    console.error(`Error: Unknown provider "${provider}". Available: ${Object.keys(PROVIDERS).join(', ')}`)
+    process.exit(1)
+  }
+
+  console.error(`\nDesignKit AutoGen`)
+  console.error(`─────────────────────────────────────`)
+  console.error(`Project:  ${projectDesc}`)
+  console.error(`Platform: ${platform}`)
+  console.error(`Provider: ${PROVIDERS[provider].label}`)
+  console.error(`Output:   ${outputDir}`)
+  if (screens.length) console.error(`Screens:  ${screens.join(', ')}`)
+  if (imageFolder) console.error(`Images:   ${imageFolder}`)
+  console.error(`─────────────────────────────────────\n`)
+
+  // Ensure output dir exists
+  if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true })
+
+  // ── Phase 1: Design Spec ────────────────────────────────────────────────────
+  const specPrompt = buildSpecPrompt(projectDesc, platform, screens, imageFolder)
+  let spec
+
+  try {
+    spec = await generateSpec(specPrompt, options)
+  } catch (err) {
+    console.error(`\nError in Phase 1 (spec generation):\n${err.message}`)
+    process.exit(1)
+  }
+
+  // Inject imageFolder into spec if provided
+  if (imageFolder) spec.imageFolder = imageFolder
+
+  // Save spec
+  const specPath = join(outputDir, 'design-spec.json')
+  writeFileSync(specPath, JSON.stringify(spec, null, 2), 'utf8')
+  console.error(`✓ design-spec.json (${spec.screens?.length || 0} screens, primary: ${spec.colors?.primary || 'N/A'})`)
+
+  if (!spec.screens?.length) {
+    console.error('Error: Spec has no screens. Aborting.')
+    process.exit(1)
+  }
+
+  // ── Phase 2: Generate HTML per screen ──────────────────────────────────────
+  const generated = []
+  let failed = 0
+
+  for (let i = 0; i < spec.screens.length; i++) {
+    const screen = spec.screens[i]
+    const screenFile = screen.file || `${screen.id || `screen-${i + 1}`}.html`
+    const screenPath = join(outputDir, screenFile)
+
+    process.stderr.write(`[Phase 2 — ${i + 1}/${spec.screens.length}] ${screen.name}... `)
+
+    try {
+      const html = await generateScreen(spec, screen, options)
+      writeFileSync(screenPath, html, 'utf8')
+      console.error(`✓ ${screenFile}`)
+      generated.push({ ...screen, file: screenFile })
+    } catch (err) {
+      console.error(`✗ FAILED: ${err.message}`)
+      failed++
+    }
+  }
+
+  // ── Index gallery ────────────────────────────────────────────────────────────
+  // Update spec with actually-generated screens
+  const finalSpec = { ...spec, screens: generated }
+  const indexHtml = generateIndexHtml(finalSpec)
+  const indexPath = join(outputDir, 'index.html')
+  writeFileSync(indexPath, indexHtml, 'utf8')
+  console.error(`✓ index.html (preview gallery)`)
+
+  // ── Summary ──────────────────────────────────────────────────────────────────
+  console.error(`\n─────────────────────────────────────`)
+  console.error(`Done! ${generated.length} screens generated${failed ? `, ${failed} failed` : ''}.`)
+  console.error(`Output: ${outputDir}`)
+  console.error(`\nOpen in browser:`)
+  console.error(`  open ${join(outputDir, 'index.html')}`)
+  console.error(`─────────────────────────────────────\n`)
+}

package/src/commands/imagine.js

@@ -30,7 +30,7 @@ const GEMINI_MODELS = [
   { model: 'imagen-4.0-ultra-generate-001',   type: 'imagen', note: 'Imagen 4 Ultra — best quality' },
 ]
 
-export async function imagineCommand(prompt, options) {
+export async function imagineCommand(prompt = '', options) {
   const provider = options.provider || 'gemini'
   const validProviders = Object.keys(PROVIDERS)
 
@@ -50,6 +50,13 @@ export async function imagineCommand(prompt, options) {
     return
   }
 
+  if (!prompt) {
+    console.error('Error: prompt is required')
+    console.error('Usage: designkit imagine "your prompt" [options]')
+    console.error('       designkit imagine --list-models')
+    process.exit(1)
+  }
+
   if (!validProviders.includes(provider)) {
     console.error(`Error: Unknown provider "${provider}". Available: ${validProviders.join(', ')}`)
     process.exit(1)