npm - @superdesign/cli - Versions diffs - 0.1.0 → 0.1.2 - Mend

@superdesign/cli 0.1.0 → 0.1.2

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.

Files changed (15) hide show

package/dist/api/brand.d.ts +55 -0
package/dist/api/designs.d.ts +28 -0
package/dist/api/projects.d.ts +5 -0
package/dist/api/prompts.d.ts +53 -0
package/dist/commands/extract-brand-guide.d.ts +5 -0
package/dist/commands/fetch-design-nodes.d.ts +5 -0
package/dist/commands/get-design.d.ts +5 -0
package/dist/commands/get-prompts.d.ts +5 -0
package/dist/commands/search-prompts.d.ts +5 -0
package/dist/config/constants.d.ts +1 -1
package/dist/index.cjs +556 -215
package/dist/index.d.ts +3 -0
package/dist/index.js +533 -207
package/dist/utils/job-runner.d.ts +5 -0
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -2,10 +2,11 @@ import { config as external_dotenv_config } from "dotenv";
 import { fileURLToPath } from "url";
 import { dirname, join, resolve as external_path_resolve } from "path";
 import { Command } from "commander";
-import { existsSync, mkdirSync, readFileSync, unlinkSync, writeFileSync } from "fs";
+import { appendFileSync, existsSync, mkdirSync, readFileSync, unlinkSync, writeFileSync } from "fs";
 import { homedir, hostname, platform, release } from "os";
 import axios from "axios";
 import ora from "ora";
+import { writeFile } from "fs/promises";
 const CONFIG_DIR_NAME = '.superdesign';
 const CONFIG_FILE_NAME = 'config.json';
 const EXIT_CODES = {
@@ -222,7 +223,7 @@ async function runAuthFlow(options = {}) {
     try {
         startSpinner('Creating auth session...');
         const session = await createSession({
-            cliVersion: "0.1.0",
+            cliVersion: "0.1.2",
             os: `${platform()} ${release()}`,
             hostname: hostname()
         });
@@ -423,241 +424,282 @@ name: superdesign
 description: Superdesign is a design agent, where it specialised in frontend UI/UX design; Use this skill before you implement any UI that require some design thinking
 ---
-# SuperDesign Integration
-This skill provides integration with the SuperDesign platform for AI-powered design generation.
+SuperDesign helps you (1) find design inspirations/styles and (2) optionally generate/iterate design drafts on an infinite canvas.
-## Available Commands
+Each SuperDesign canvas run creates a new node and returns a \`previewUrl\`.
-### Create Project
+---
-Create a new new project, can pass optional HTML as initial starting point for design iteration:
+## Core scenarios (what this skill handles)
-\`\`\`bash
-# Basic project
-superdesign create-project --title "My Project" --json
+1. **Help me design X** (feature/page/flow)
+2. **Set design system**
+3. **Help me improve design of X**
-# Project with initial HTML
-superdesign create-project --title "My Project" --html "<html>...</html>" --json
+---
-# Project with HTML from file
-superdesign create-project --title "My Project" --html-file ./index.html --json
-\`\`\`
+## Tooling overview
-**Output (JSON):**
-\`\`\`json
-{
-  "projectId": "uuid",
-  "title": "My Project",
-  "projectUrl": "https://app.superdesign.ai/...",
-  "shareToken": "token"
-}
-\`\`\`
+### A) Inspiration & Style Tools (generic, always available)
+Use these to discover style direction, references, and brand context:
-### Create Design Draft
+- **Search prompt library** (style/components/pages)
+  \`\`\`bash
+  superdesign search-prompts --keyword "<keyword>" --json
+  superdesign search-prompts --tags "style" --json
+  superdesign search-prompts --tags "style" --keyword "<style keyword>" --json
+  \`\`\`
-Generate a design draft using AI designer:
+- **Get full prompt details**
+  \`\`\`bash
+  superdesign get-prompts --slugs "<slug1,slug2,...>" --json
+  \`\`\`
-\`\`\`bash
-superdesign create-design-draft \\
-  --project-id <project-id> \\
-  --title "Hero Section" \\
-  --prompt "Create a modern hero section with gradient background" \\
-  --device desktop \\
-  --json
-\`\`\`
+- **Extract brand guide from a URL**
+  \`\`\`bash
+  superdesign extract-brand-guide --url https://example.com --json
+  \`\`\`
-**Options:**
-- \`--project-id\` (required): Project to add draft to
-- \`--title\` (required): Draft title
-- \`--prompt\` (required): AI generation prompt
-- \`--device\`: Device mode (mobile, tablet, desktop)
+### B) Canvas Design Tools (specialised, optional)
-**Output (JSON):**
-\`\`\`json
-{
-  "draftId": "uuid",
-  "nodeId": "uuid",
-  "title": "Hero Section",
-  "projectUrl": "https://app.superdesign.ai/...",
-  "nodeUrl": "https://app.superdesign.ai/...?node=...",
-  "previewUrl": "https://preview.superdesign.ai/...",
-  "creditsConsumed": 1
-}
-\`\`\`
+Use these when you want to explore multiple directions and show previews:
-### Iterate Design Draft
+- Create project (supports prompt / prompt file / HTML)
+- Create design draft
+- Iterate design draft (replace / branch)
+- Plan flow pages → execute flow pages
+- Fetch nodes, export HTML
-Create variations or improvements of an existing draft:
+> Pixel-perfect HTML playground is ONLY required for Canvas workflows.
-\`\`\`bash
-# Replace mode - updates the existing draft
-superdesign iterate-design-draft \\
-  --draft-id <draft-id> \\
-  --prompt "Make the colors more vibrant" \\
-  --mode replace \\
-  --json
+---
-# Branch mode - creates new variations
-superdesign iterate-design-draft \\
-  --draft-id <draft-id> \\
-  --prompt "Try different color schemes" \\
-  --mode branch \\
-  --count 3 \\
-  --json
-\`\`\`
+## Always-on rules
-**Options:**
-- \`--draft-id\` (required): Draft to iterate on
-- \`--prompt\` (required): Iteration instructions
-- \`--mode\` (required): "replace" or "branch"
-- \`--count\`: Number of variations (1-4, branch mode only)
+- Design system should live at: \`.superdesign/design-system.md\`
+- If \`.superdesign/design-system.md\` is missing, run **Design System Setup** first.
+- Use \`askQuestion\` to ask high-signal questions (constraints, taste, tradeoffs).
+- For Canvas workflows: build a simplified/pixel-perfect prototype HTML in:
+  - \`.superdesign/playgrounds/<name>.html\`
+- Always use \`--json\` for machine parsing.
-**Output (JSON):**
-\`\`\`json
-{
-  "drafts": [
-    {
-      "draftId": "uuid",
-      "nodeId": "uuid",
-      "title": "Variation 1",
-      "nodeUrl": "https://...",
-      "previewUrl": "https://..."
-    }
-  ],
-  "projectUrl": "https://...",
-  "creditsConsumed": 3
-}
-\`\`\`
+---
+## Playground rules (Canvas only)
+**Playground = BEFORE state (what exists now).** It provides context for SuperDesign agent.
+**Prompt = DESIRED CHANGE (what to add/modify).**
+The playground HTML must contain **ONLY UI that currently exists in the codebase**. For NEW features/sections, describe them entirely in the \`--prompt\` flag — do NOT add wireframes, placeholders, or sketches to the playground HTML.
-### Plan Flow Pages
+- **DO NOT** design or improve anything in the playground
+- **DO NOT** add placeholder sections like \`<!-- NEW FEATURE - DESIGN THIS -->\`
+- **DO** create pixel-perfect replica of current UI state
+- Valid formats:
+  - **Component-only**: isolated component with enough markup to show core UX/states
+  - **Full page**: replica of page where component operates (shows surrounding context)
+- Save to: \`.superdesign/playgrounds/<name>.html\`
-Get AI suggestions for related pages in a user flow:
+### Example: Adding a "Book Demo" section to home page
+**BAD approach:**
+\`\`\`html
+<!-- playground includes a sketched Book Demo section -->
+<section class="book-demo">
+  <!-- DESIGN THIS - Add CTA here -->
+  <h3>Book a Demo</h3>
+  <button>Schedule</button>
+</section>
+\`\`\`
+**GOOD approach:**
+\`\`\`html
+<!-- playground is pure replica of existing home page (hero + projects) -->
+<!-- NO book demo section in HTML -->
+\`\`\`
+Then in the iterate command:
 \`\`\`bash
-superdesign plan-flow-pages \\
-  --draft-id <draft-id> \\
-  --source-node-id <node-id> \\
-  --context "E-commerce checkout flow" \\
-  --json
+--prompt "Add a Book Demo section between the hero and projects sections. Requirements: minimal card style, horizontal layout..."
 \`\`\`
-**Options:**
-- \`--draft-id\` (required): Source draft
-- \`--source-node-id\` (required): Starting node in flow
-- \`--context\`: Additional context for planning
+---
-**Output (JSON):**
-\`\`\`json
-{
-  "pages": [
-    {
-      "title": "Cart Review",
-      "prompt": "Create a cart review page showing..."
-    },
-    {
-      "title": "Payment",
-      "prompt": "Create a payment form with..."
-    }
-  ],
-  "creditsConsumed": 1
-}
-\`\`\`
+# 1) Design System Setup
-### Execute Flow Pages
+### Step 0 — Ask user (one question)
-Generate the planned flow pages:
+"Do you want to **create a new design system** or **extract from the current codebase**?"
-\`\`\`bash
-superdesign execute-flow-pages \\
-  --draft-id <draft-id> \\
-  --source-node-id <node-id> \\
-  --pages '[{"title":"Cart","prompt":"Create cart page"},{"title":"Payment","prompt":"Create payment form"}]' \\
-  --json
-\`\`\`
+### A) Extract from codebase
-**Options:**
-- \`--draft-id\` (required): Source draft
-- \`--source-node-id\` (required): Starting node
-- \`--pages\` (required): JSON array of pages to generate
-- \`--context\`: Additional context
+1. Investigate codebase:
+   - design tokens, typography, colors, spacing, radius, shadows
+   - motion/animation patterns
+   - example components usage + implementation patterns
+   - core product functions + key pages
+2. Write standalone design system to:
+   - \`.superdesign/design-system.md\`
+   - Must be implementable without the codebase
-**Output (JSON):**
-\`\`\`json
-{
-  "drafts": [
-    {
-      "index": 0,
-      "draftId": "uuid",
-      "nodeId": "uuid",
-      "title": "Cart",
-      "nodeUrl": "https://...",
-      "previewUrl": "https://..."
-    }
-  ],
-  "projectUrl": "https://...",
-  "creditsConsumed": 2
-}
-\`\`\`
+### B) Create a new design system (to improve current UI)
-## Workflow Examples
+1. Investigate codebase to understand product + needed pages/components
+2. Gather inspirations (generic tools):
+   - \`superdesign search-prompts --tags "style" --json\`
+   - \`superdesign get-prompts --slugs ... --json\`
+   - optional: \`superdesign extract-brand-guide --url ... --json\`
+3. Interview user (\`askQuestion\`) to choose direction
+4. Write:
+   - \`.superdesign/design-system.md\` (adapted to product + references)
-### Create a new design from scratch
+---
-\`\`\`bash
-# 1. Create project
-PROJECT=$(superdesign create-project --title "Landing Page" --json)
-PROJECT_ID=$(echo $PROJECT | jq -r '.projectId')
+# 2) Designing X (feature/page/flow)
-# 2. Generate initial design
-DRAFT=$(superdesign create-design-draft \\
-  --project-id $PROJECT_ID \\
-  --title "Hero" \\
-  --prompt "Modern SaaS landing page hero with gradient, CTA button" \\
-  --json)
+## A) If user wants references / direction only (no canvas)
-echo "Preview: $(echo $DRAFT | jq -r '.previewUrl')"
-\`\`\`
+1. Ensure \`.superdesign/design-system.md\` exists (setup if missing)
+2. Use inspiration tools to collect references:
+   - search prompts (style + component/page)
+   - get prompts (full details)
+   - extract brand guide if relevant
+3. Provide a concrete design spec:
+   - layout + hierarchy
+   - component set + states
+   - token guidance (typography/color/spacing/radius/motion)
+   - interaction notes + edge cases
+## B) If user wants visual exploration (canvas optional)
+Use canvas when direction is uncertain or multiple options are needed.
+### Canvas workflow — Add feature to existing page
+1. Ensure \`.superdesign/design-system.md\` exists (setup if missing)
+2. Build prototype HTML playground (simplified + pixel-perfect enough):
+   - \`.superdesign/playgrounds/<page>-<feature>.html\`
+3. Ask targeted questions (\`askQuestion\`) about requirements + taste
+4. Create project with playground HTML (returns \`draftId\`):
+   \`\`\`bash
+   superdesign create-project \\
+     --title "<feature>" \\
+     --html-file .superdesign/playgrounds/<file>.html \\
+     --prompt-file .superdesign/design-system.md \\
+     --json
+   \`\`\`
+   → Note: \`draftId\` in response is the baseline draft
+5. Branch designs from baseline (use \`draftId\` from step 4):
+   \`\`\`bash
+   superdesign iterate-design-draft \\
+     --draft-id <draftId> \\
+     --prompt "<design requirements>" \\
+     --mode branch \\
+     --count 3 \\
+     --json
+   \`\`\`
+6. Share \`previewUrl\` → collect feedback → iterate
+### Canvas workflow — Add new page
-### Iterate on existing design
+Same as above, but playground should include shared UI shell:
+- nav, layout container, spacing rhythm, shared components
+### Canvas workflow — Improve current UI
+1. Investigate product + current UI states
+2. Ensure design system exists
+3. Propose improvement options:
+   - big restructure
+   - style uplift
+   - low-hanging polish
+4. Pick one → build playground → create project (prompt-file design system) → branch drafts
+5. Share \`previewUrl\` → iterate
+### When to use create-design-draft
+Only use \`create-design-draft\` when creating from scratch (no HTML baseline).
+**Required in prompt:**
+- Full page structure (header, sidebar, main content areas)
+- Component environment/surroundings
+- Layout context (what's above/below/beside)
 \`\`\`bash
-# Create variations
-superdesign iterate-design-draft \\
-  --draft-id <draft-id> \\
-  --prompt "Try a dark theme version" \\
-  --mode branch \\
-  --count 2 \\
+superdesign create-design-draft \\
+  --project-id <id> \\
+  --title "Feature X" \\
+  --prompt "Page has: fixed header 64px, left sidebar 240px, main content area. Design a settings panel in the main content area with..." \\
+  --device desktop \\
   --json
 \`\`\`
-### Build a complete user flow
+---
+# Advanced usage
+### Plan + generate a full user journey
+Plan:
 \`\`\`bash
-# 1. Plan the flow
-PLAN=$(superdesign plan-flow-pages \\
-  --draft-id <draft-id> \\
-  --source-node-id <node-id> \\
-  --context "User onboarding flow" \\
-  --json)
+superdesign plan-flow-pages \\
+  --draft-id <draftId> \\
+  --source-node-id <nodeId> \\
+  --context "<flow context>" \\
+  --json
+\`\`\`
-# 2. Execute the plan
-PAGES=$(echo $PLAN | jq -c '.pages')
+Execute:
+\`\`\`bash
 superdesign execute-flow-pages \\
-  --draft-id <draft-id> \\
-  --source-node-id <node-id> \\
-  --pages "$PAGES" \\
+  --draft-id <draftId> \\
+  --source-node-id <nodeId> \\
+  --pages '[{"title":"Signup","prompt":"..."},{"title":"Payment","prompt":"..."}]' \\
   --json
 \`\`\`
+### Get HTML reference from a draft
+\`\`\`bash
+superdesign get-design --draft-id <draftId> --output ./design.html
+\`\`\`
+---
+## Quick reference (key commands)
+\`\`\`bash
+# Inspirations
+superdesign search-prompts --keyword "<keyword>" --json
+superdesign search-prompts --tags "style" --json
+superdesign get-prompts --slugs "<slug1,slug2>" --json
+superdesign extract-brand-guide --url https://example.com --json
+# Canvas
+superdesign create-project --title "X" --prompt "..." --json
+superdesign create-project --title "X" --prompt-file .superdesign/design-system.md --json
+superdesign create-project --title "X" --html-file ./index.html --prompt-file .superdesign/design-system.md --json
-## Tips
+superdesign create-design-draft --project-id <id> --title "X" --prompt "..." --device desktop --json
+superdesign iterate-design-draft --draft-id <id> --prompt "..." --mode replace --json
+superdesign iterate-design-draft --draft-id <id> --prompt "..." --mode branch --count 3 --json
-- Always use \`--json\` flag when parsing output programmatically
-- Store project and draft IDs for subsequent operations
-- Use \`plan-flow-pages\` before \`execute-flow-pages\` for best results
-- The \`previewUrl\` can be used to view designs without authentication
+superdesign fetch-design-nodes --project-id <id> --json
+superdesign get-design --draft-id <id> --json
+\`\`\`
 `;
 }
+function ensureGitignoreEntry(gitignorePath, entry) {
+    if (existsSync(gitignorePath)) {
+        const content = readFileSync(gitignorePath, 'utf-8');
+        const hasEntry = content.split('\n').some((line)=>line.trim() === entry);
+        if (hasEntry) return false;
+        const prefix = content.endsWith('\n') ? '' : '\n';
+        appendFileSync(gitignorePath, `${prefix}${entry}\n`, 'utf-8');
+        return true;
+    }
+    writeFileSync(gitignorePath, `${entry}\n`, 'utf-8');
+    return true;
+}
 function createInitCommand() {
     const command = new Command('init').description('Install SuperDesign skill files for Claude Code (auto-login if needed)').option('--json', 'Output in JSON format').option('--force', 'Overwrite existing skill files').action(async (options)=>{
         if (options.json) setJsonMode(true);
@@ -694,14 +736,19 @@ function createInitCommand() {
             });
             const skillContent = getSkillTemplate();
             writeFileSync(skillFilePath, skillContent, 'utf-8');
+            const gitignorePath = join(cwd, '.gitignore');
+            const gitignoreEntry = '.superdesign';
+            const gitignoreUpdated = ensureGitignoreEntry(gitignorePath, gitignoreEntry);
             if (isJsonMode()) output({
                 success: true,
                 path: skillFilePath,
+                gitignoreUpdated,
                 message: 'Skill files installed successfully'
             });
             else {
                 success('Skill files installed successfully!');
                 info(`\nSkill file created at: ${skillFilePath}`);
+                if (gitignoreUpdated) info(".gitignore updated to exclude .superdesign directory");
                 info('\nClaude Code will now have access to SuperDesign commands.');
                 info('Available commands:');
                 info('  - superdesign create-project');
@@ -709,6 +756,7 @@ function createInitCommand() {
                 info('  - superdesign iterate-design-draft');
                 info('  - superdesign plan-flow-pages');
                 info('  - superdesign execute-flow-pages');
+                info('  - superdesign extract-brand-guide');
             }
         } catch (err) {
             const message = err instanceof Error ? err.message : 'Unknown error';
@@ -729,7 +777,7 @@ async function addDraft(projectId, data) {
     return response.data;
 }
 function createCreateProjectCommand() {
-    const command = new Command('create-project').description('Create a new SuperDesign project').requiredOption('--title <title>', 'Project title').option('--html <html>', 'Initial HTML content for first draft').option('--html-file <path>', 'Path to HTML file for first draft').option('--device <mode>', 'Device mode for draft (mobile, tablet, desktop)', 'desktop').option('--json', 'Output in JSON format').action(async (options)=>{
+    const command = new Command('create-project').description('Create a new SuperDesign project').requiredOption('--title <title>', 'Project title').option('--html <html>', 'Initial HTML content for first draft').option('--html-file <path>', 'Path to HTML file for first draft').option('--prompt <prompt>', 'System prompt for the AI agent').option('--prompt-file <path>', 'Path to markdown file containing system prompt').option('--device <mode>', 'Device mode for draft (mobile, tablet, desktop)', 'desktop').option('--json', 'Output in JSON format').option('--no-open', 'Do not open project in browser after creation').action(async (options)=>{
         if (options.json) setJsonMode(true);
         try {
             if (!manager_isAuthenticated()) {
@@ -752,40 +800,43 @@ function createCreateProjectCommand() {
                 }
                 htmlContent = readFileSync(options.htmlFile, 'utf-8');
             } else if (options.html) htmlContent = options.html;
+            let promptContent;
+            if (options.promptFile) {
+                if (!existsSync(options.promptFile)) {
+                    output_error(`Prompt file not found: ${options.promptFile}`);
+                    process.exit(EXIT_CODES.VALIDATION_ERROR);
+                }
+                promptContent = readFileSync(options.promptFile, 'utf-8');
+            } else if (options.prompt) promptContent = options.prompt;
             startSpinner('Creating project...');
             const project = await createProject({
-                title: options.title
-            });
-            let draftResult = null;
-            if (htmlContent) draftResult = await addDraft(project.projectId, {
-                title: 'Initial Draft',
+                title: options.title,
                 html: htmlContent,
+                prompt: promptContent,
                 deviceMode: options.device
             });
             succeedSpinner('Project created successfully!');
-            const result = {
+            if (options.open) {
+                const urlWithLive = `${project.projectUrl}?live=1`;
+                await openBrowser(urlWithLive);
+            }
+            if (isJsonMode()) output({
                 projectId: project.projectId,
                 title: project.title,
                 projectUrl: project.projectUrl,
                 shareToken: project.shareToken,
-                ...draftResult && {
-                    draft: {
-                        draftId: draftResult.draftId,
-                        nodeId: draftResult.nodeId,
-                        nodeUrl: draftResult.nodeUrl,
-                        previewUrl: draftResult.previewUrl
-                    }
+                ...project.draftId && {
+                    draftId: project.draftId,
+                    previewUrl: project.previewUrl
                 }
-            };
-            if (isJsonMode()) output(result);
+            });
             else {
                 success(`Project "${project.title}" created!`);
                 info(`\nProject ID: ${project.projectId}`);
                 info(`Project URL: ${project.projectUrl}`);
-                if (draftResult) {
-                    info(`\nDraft ID: ${draftResult.draftId}`);
-                    info(`Draft URL: ${draftResult.nodeUrl}`);
-                    info(`Preview URL: ${draftResult.previewUrl}`);
+                if (project.draftId) {
+                    info(`\nDraft ID: ${project.draftId}`);
+                    info(`Preview URL: ${project.previewUrl}`);
                 }
             }
         } catch (err) {
@@ -894,6 +945,22 @@ function job_runner_requireAuth(isAuthenticated) {
         process.exit(EXIT_CODES.AUTH_REQUIRED);
     }
 }
+function handleApiError(err, failureMessage) {
+    if (err instanceof ApiClientError) {
+        if (isJsonMode()) output({
+            error: err.message,
+            code: err.code
+        });
+        else output_error(`API Error: ${err.message}`);
+        process.exit(EXIT_CODES.API_ERROR);
+    }
+    const message = err instanceof Error ? err.message : 'Unknown error';
+    if (isJsonMode()) output({
+        error: message
+    });
+    else output_error(`${failureMessage}: ${message}`);
+    process.exit(EXIT_CODES.GENERAL_ERROR);
+}
 function createCreateDesignDraftCommand() {
     const command = new Command('create-design-draft').description('Create a design draft using AI generation').requiredOption('--project-id <id>', 'Project ID').requiredOption('--title <title>', 'Draft title').requiredOption('--prompt <prompt>', 'Design prompt for AI generation').option('--device <mode>', 'Device mode (mobile, tablet, desktop)', 'desktop').option('--json', 'Output in JSON format').action(async (options)=>{
         if (options.json) setJsonMode(true);
@@ -1081,6 +1148,260 @@ function createExecuteFlowPagesCommand() {
     });
     return command;
 }
+async function extractBrandGuide(url) {
+    const client = getApiClient();
+    const response = await client.post('/external/brand/extract', {
+        url
+    });
+    return response.data;
+}
+function extractDomain(url) {
+    try {
+        const parsed = new URL(url);
+        return parsed.hostname.replace(/^www\./, '');
+    } catch  {
+        return url.replace(/[^a-zA-Z0-9.-]/g, '_');
+    }
+}
+async function downloadFile(url, outputPath) {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) return false;
+        const buffer = Buffer.from(await response.arrayBuffer());
+        writeFileSync(outputPath, buffer);
+        return true;
+    } catch  {
+        return false;
+    }
+}
+function createExtractBrandGuideCommand() {
+    const command = new Command('extract-brand-guide').description('Extract brand guidelines from a website URL').requiredOption('--url <url>', 'Website URL to extract brand guide from').option('--output-dir <path>', 'Output directory (default: .superdesign/brand_styles/<domain>)').option('--json', 'Output in JSON format').action(async (options)=>{
+        if (options.json) setJsonMode(true);
+        job_runner_requireAuth(manager_isAuthenticated);
+        const spinner = isJsonMode() ? null : ora('Extracting brand guide...').start();
+        try {
+            const result = await extractBrandGuide(options.url);
+            if (!result.success) {
+                if (spinner) spinner.fail('Failed to extract brand guide');
+                if (isJsonMode()) output({
+                    success: false,
+                    error: result.error || 'Failed to extract brand guide'
+                });
+                else output_error(result.error || 'Failed to extract brand guide');
+                process.exit(EXIT_CODES.API_ERROR);
+            }
+            if (spinner) spinner.succeed('Brand guide extracted successfully');
+            const domain = extractDomain(options.url);
+            const cwd = process.cwd();
+            const outputDir = options.outputDir || join(cwd, '.superdesign', 'brand_styles', domain);
+            mkdirSync(outputDir, {
+                recursive: true
+            });
+            const jsonPath = join(outputDir, 'brand-guide.json');
+            writeFileSync(jsonPath, JSON.stringify(result, null, 2), 'utf-8');
+            let screenshotSaved = false;
+            if (result.data?.screenshot?.url) {
+                const screenshotPath = join(outputDir, 'screenshot.png');
+                const downloadSpinner = isJsonMode() ? null : ora('Downloading screenshot...').start();
+                screenshotSaved = await downloadFile(result.data.screenshot.url, screenshotPath);
+                if (downloadSpinner) if (screenshotSaved) downloadSpinner.succeed('Screenshot downloaded');
+                else downloadSpinner.warn('Could not download screenshot');
+            }
+            if (isJsonMode()) output({
+                success: true,
+                outputDir,
+                files: {
+                    brandGuide: jsonPath,
+                    screenshot: screenshotSaved ? join(outputDir, 'screenshot.png') : null
+                },
+                data: result.data
+            });
+            else {
+                success('Brand guide saved!');
+                if (screenshotSaved) info(`\nScreenshot: ${join(outputDir, 'screenshot.png')}`);
+                info(`Extracted brand style JSON: ${jsonPath}`);
+            }
+        } catch (err) {
+            if (spinner) spinner.fail('Failed to extract brand guide');
+            const message = err instanceof Error ? err.message : 'Unknown error';
+            if (isJsonMode()) output({
+                success: false,
+                error: message
+            });
+            else output_error(`Failed to extract brand guide: ${message}`);
+            process.exit(EXIT_CODES.API_ERROR);
+        }
+    });
+    return command;
+}
+async function searchPrompts(data) {
+    const client = getApiClient();
+    const response = await client.post('/external/prompts/search', data);
+    return response.data;
+}
+async function getPrompts(data) {
+    const client = getApiClient();
+    const response = await client.post('/external/prompts/get', data);
+    return response.data;
+}
+function createSearchPromptsCommand() {
+    const command = new Command('search-prompts').description('Search public prompts in the library').option('--keyword <text>', "Search keyword (searches title and description)").option('--tags <tags>', 'Comma-separated tags to filter by').option('--limit <n>', 'Maximum number of results (default: 20, max: 100)').option('--offset <n>', 'Number of results to skip (for pagination)').option('--json', 'Output in JSON format').action(async (options)=>{
+        if (options.json) setJsonMode(true);
+        job_runner_requireAuth(manager_isAuthenticated);
+        const spinner = isJsonMode() ? null : ora('Searching prompts...').start();
+        try {
+            const tags = options.tags ? options.tags.split(',').map((t)=>t.trim()) : void 0;
+            const limit = options.limit ? parseInt(options.limit, 10) : 20;
+            const offset = options.offset ? parseInt(options.offset, 10) : 0;
+            const result = await searchPrompts({
+                keyword: options.keyword,
+                tags,
+                limit,
+                offset
+            });
+            if (spinner) spinner.succeed(`Found ${result.prompts.length} prompts (total: ${result.total})`);
+            if (isJsonMode()) output(result);
+            else if (0 === result.prompts.length) info('\nNo prompts found matching your criteria.');
+            else {
+                success(`\nFound ${result.prompts.length} prompts:\n`);
+                result.prompts.forEach((prompt, index)=>{
+                    const tagsStr = prompt.tags.length > 0 ? ` [${prompt.tags.join(', ')}]` : '';
+                    console.log(`${index + 1}. "${prompt.title}"${tagsStr}`);
+                    if (prompt.description) {
+                        const desc = prompt.description.length > 100 ? prompt.description.substring(0, 97) + '...' : prompt.description;
+                        console.log(`   ${desc}`);
+                    }
+                    console.log(`   Views: ${prompt.viewCount} | Remixes: ${prompt.remixCount}`);
+                    if (prompt.previewUrl) console.log(`   Preview: ${prompt.previewUrl}`);
+                    console.log(`   Slug: ${prompt.slug}`);
+                    console.log('');
+                });
+                if (result.total > result.prompts.length) info(`Showing ${result.prompts.length} of ${result.total} results. Use --offset to paginate.`);
+            }
+        } catch (err) {
+            if (spinner) spinner.fail('Failed to search prompts');
+            handleApiError(err, 'Failed to search prompts');
+        }
+    });
+    return command;
+}
+function createGetPromptsCommand() {
+    const command = new Command('get-prompts').description('Get prompts by their slugs').requiredOption('--slugs <slugs>', 'Comma-separated list of prompt slugs').option('--json', 'Output in JSON format').action(async (options)=>{
+        if (options.json) setJsonMode(true);
+        job_runner_requireAuth(manager_isAuthenticated);
+        const slugs = options.slugs.split(',').map((s)=>s.trim());
+        if (0 === slugs.length) {
+            output_error('At least one slug is required');
+            process.exit(EXIT_CODES.VALIDATION_ERROR);
+        }
+        if (slugs.length > 20) {
+            output_error('Maximum 20 slugs allowed per request');
+            process.exit(EXIT_CODES.VALIDATION_ERROR);
+        }
+        const spinner = isJsonMode() ? null : ora(`Fetching ${slugs.length} prompt(s)...`).start();
+        try {
+            const result = await getPrompts({
+                slugs
+            });
+            if (spinner) spinner.succeed(`Retrieved ${result.prompts.length} of ${slugs.length} prompts`);
+            if (isJsonMode()) output(result);
+            else if (0 === result.prompts.length) info('\nNo prompts found for the provided slugs.');
+            else {
+                result.prompts.forEach((prompt, index)=>{
+                    if (index > 0) console.log('\n' + '='.repeat(60) + '\n');
+                    success(`Prompt: "${prompt.title}"`);
+                    info(`Slug: ${prompt.slug}`);
+                    if (prompt.tags.length > 0) info(`Tags: ${prompt.tags.join(', ')}`);
+                    if (prompt.description) console.log(`\nDescription: ${prompt.description}`);
+                    console.log('\n---');
+                    console.log(prompt.prompt);
+                    console.log('---\n');
+                    console.log(`Views: ${prompt.viewCount} | Remixes: ${prompt.remixCount}`);
+                    if (prompt.previewUrl) info(`Preview: ${prompt.previewUrl}`);
+                    if (prompt.images && prompt.images.length > 0) info(`Images: ${prompt.images.length} attached`);
+                });
+                const foundSlugs = result.prompts.map((p)=>p.slug);
+                const missingSlugs = slugs.filter((s)=>!foundSlugs.includes(s));
+                if (missingSlugs.length > 0) {
+                    console.log('');
+                    info(`Note: ${missingSlugs.length} slug(s) not found: ${missingSlugs.join(', ')}`);
+                }
+            }
+        } catch (err) {
+            if (spinner) spinner.fail('Failed to get prompts');
+            handleApiError(err, 'Failed to get prompts');
+        }
+    });
+    return command;
+}
+async function fetchDesignNodes(projectId) {
+    const client = getApiClient();
+    const response = await client.get(`/external/projects/${projectId}/design-nodes`);
+    return response.data;
+}
+async function getDesignHtml(draftId) {
+    const client = getApiClient();
+    const response = await client.get(`/external/drafts/${draftId}/html`);
+    return response.data;
+}
+function displayNode(node, index) {
+    console.log(`${index + 1}. "${node.title}" (depth: ${node.iterationDepth})`);
+    info(node.parentDraftId ? `   Parent: ${node.parentDraftId}` : '   Root draft');
+    if (node.description) console.log(`   ${node.description}`);
+    info(`   Preview: ${node.previewUrl}`);
+    if (node.screenshot) info(`   Screenshot: ${node.screenshot.url}`);
+    console.log(`   Created: ${node.createdAt}\n`);
+}
+function createFetchDesignNodesCommand() {
+    const command = new Command('fetch-design-nodes').description('Get all design draft nodes for a project').requiredOption('--project-id <projectId>', 'Project ID to fetch nodes from').option('--json', 'Output in JSON format').action(async (options)=>{
+        if (options.json) setJsonMode(true);
+        job_runner_requireAuth(manager_isAuthenticated);
+        const spinner = isJsonMode() ? null : ora('Fetching design nodes...').start();
+        try {
+            const result = await fetchDesignNodes(options.projectId);
+            if (spinner) spinner.succeed(`Found ${result.nodes.length} design node(s)`);
+            if (isJsonMode()) return void output(result);
+            if (0 === result.nodes.length) return void info('\nNo design nodes found in this project.');
+            console.log(`\nFound ${result.nodes.length} design node(s):\n`);
+            result.nodes.forEach(displayNode);
+        } catch (err) {
+            if (spinner) spinner.fail('Failed to fetch design nodes');
+            handleApiError(err, 'Failed to fetch design nodes');
+        }
+    });
+    return command;
+}
+async function writeHtmlToFile(result, outputPath) {
+    const resolvedPath = external_path_resolve(process.cwd(), outputPath);
+    await writeFile(resolvedPath, result.htmlContent, 'utf-8');
+    if (isJsonMode()) output({
+        ...result,
+        savedTo: resolvedPath
+    });
+    else {
+        success(`HTML written to: ${resolvedPath}`);
+        info(`Title: ${result.title}`);
+        info(`Draft ID: ${result.draftId}`);
+    }
+}
+function createGetDesignCommand() {
+    const command = new Command('get-design').description('Get HTML content for a specific draft').requiredOption('--draft-id <draftId>', 'Draft ID to fetch').option('--json', 'Output in JSON format').option('--output <path>', 'Write HTML to file instead of stdout').action(async (options)=>{
+        if (options.json) setJsonMode(true);
+        job_runner_requireAuth(manager_isAuthenticated);
+        const spinner = isJsonMode() ? null : ora('Fetching design HTML...').start();
+        try {
+            const result = await getDesignHtml(options.draftId);
+            if (spinner) spinner.succeed(`Retrieved design: "${result.title}"`);
+            if (options.output) return void await writeHtmlToFile(result, options.output);
+            if (isJsonMode()) return void output(result);
+            console.log(result.htmlContent);
+        } catch (err) {
+            if (spinner) spinner.fail('Failed to get design HTML');
+            handleApiError(err, 'Failed to get design HTML');
+        }
+    });
+    return command;
+}
 const src_filename = fileURLToPath(import.meta.url);
 const src_dirname = dirname(src_filename);
 external_dotenv_config({
@@ -1089,7 +1410,7 @@ external_dotenv_config({
 external_dotenv_config();
 function createProgram() {
     const program = new Command();
-    program.name('superdesign').description('SuperDesign CLI - AI product designer for coding agents').version("0.1.0");
+    program.name('superdesign').description('SuperDesign CLI - AI product designer for coding agents').version("0.1.2");
     program.addCommand(createLoginCommand());
     program.addCommand(createLogoutCommand());
     program.addCommand(createInitCommand());
@@ -1098,10 +1419,15 @@ function createProgram() {
     program.addCommand(createIterateDesignDraftCommand());
     program.addCommand(createPlanFlowPagesCommand());
     program.addCommand(createExecuteFlowPagesCommand());
+    program.addCommand(createExtractBrandGuideCommand());
+    program.addCommand(createSearchPromptsCommand());
+    program.addCommand(createGetPromptsCommand());
+    program.addCommand(createFetchDesignNodesCommand());
+    program.addCommand(createGetDesignCommand());
     return program;
 }
 async function run() {
     const program = createProgram();
     await program.parseAsync(process.argv);
 }
-export { ApiClientError, addDraft, claimSession, clearConfig, createApiClient, createDraft, createProgram, createProject, createPublicApiClient, createSession, executeFlowPages, getApiClient, getApiKey, getApiUrl, getConfigDir, getConfigPath, getJobStatus, manager_isAuthenticated as isAuthenticated, isJobCompleted, isJobDone, isJobFailed, iterateDraft, loadConfig, planFlowPages, pollSession, run, saveConfig, updateConfig };
+export { ApiClientError, addDraft, claimSession, clearConfig, createApiClient, createDraft, createProgram, createProject, createPublicApiClient, createSession, executeFlowPages, extractBrandGuide, fetchDesignNodes, getApiClient, getApiKey, getApiUrl, getConfigDir, getConfigPath, getDesignHtml, getJobStatus, getPrompts, manager_isAuthenticated as isAuthenticated, isJobCompleted, isJobDone, isJobFailed, iterateDraft, loadConfig, planFlowPages, pollSession, run, saveConfig, searchPrompts, updateConfig };