extraktor 1.0.0

package/dist/theme-package-generator-E55BBBZN.js

@@ -0,0 +1,412 @@
+import {
+  createLogger
+} from "./chunk-5IH5TLAQ.js";
+
+// src/generators/theme-package/theme-package-generator.ts
+import fs from "fs-extra";
+import path from "path";
+var logger = createLogger({ prefix: "theme-generator" });
+var ThemePackageGenerator = class {
+  async generate(tokens, options) {
+    const { outputDir, packageName } = options;
+    logger.info(`Generating theme package: ${packageName}`);
+    await fs.ensureDir(outputDir);
+    await this.generatePackageJson(outputDir, packageName);
+    await this.generateTypes(outputDir, tokens);
+    await this.generateThemeConfig(outputDir, tokens, options);
+    if (options.includeCSSVariables !== false) {
+      await this.generateCSSVariables(outputDir, tokens, options);
+    }
+    if (options.includeTailwindPreset !== false) {
+      await this.generateTailwindPreset(outputDir, tokens, options);
+    }
+    if (options.includeComponents) {
+      await this.generateComponentUtils(outputDir, tokens);
+    }
+    await this.generateReadme(outputDir, packageName, options);
+    await this.generateTsConfig(outputDir);
+    logger.info(`\u2705 Theme package generated at: ${outputDir}`);
+  }
+  async generatePackageJson(outputDir, packageName) {
+    const packageJson = {
+      name: packageName,
+      version: "1.0.0",
+      description: "Design system theme package generated by extraktor",
+      main: "dist/index.js",
+      types: "dist/index.d.ts",
+      type: "module",
+      exports: {
+        ".": {
+          import: "./dist/index.js",
+          types: "./dist/index.d.ts"
+        },
+        "./theme": {
+          import: "./dist/theme.js",
+          types: "./dist/theme.d.ts"
+        },
+        "./tailwind": {
+          import: "./dist/tailwind.js",
+          types: "./dist/tailwind.d.ts"
+        },
+        "./css": "./dist/theme.css"
+      },
+      files: ["dist", "README.md"],
+      scripts: {
+        build: "tsup src/index.ts src/theme.ts src/tailwind.ts --format esm --dts",
+        dev: "tsup src/index.ts src/theme.ts src/tailwind.ts --format esm --dts --watch",
+        prepublishOnly: "npm run build"
+      },
+      peerDependencies: {
+        tailwindcss: "^4.0.0"
+      },
+      devDependencies: {
+        tsup: "^8.5.1",
+        typescript: "^5.9.3",
+        tailwindcss: "^4.1.18"
+      }
+    };
+    await fs.writeJson(path.join(outputDir, "package.json"), packageJson, { spaces: 2 });
+  }
+  async generateTypes(outputDir, tokens) {
+    const srcDir = path.join(outputDir, "src");
+    await fs.ensureDir(srcDir);
+    const colorNames = tokens.colors?.map((c) => `'${c.name}'`).join(" | ") || "string";
+    const fontNames = tokens.fonts?.map((f) => `'${f.name}'`).join(" | ") || "string";
+    const typesContent = `// Auto-generated theme types
+export interface ThemeColors {
+  ${tokens.colors?.map((c) => `${c.name}: '${c.value}';`).join("\n  ") || ""}
+}
+
+export interface ThemeFonts {
+  ${tokens.fonts?.map((f) => `${f.name}: string;`).join("\n  ") || ""}
+}
+
+export interface ThemeSpacing {
+  ${tokens.spacing?.map((s) => `${s.name}: '${s.value}';`).join("\n  ") || ""}
+}
+
+export type ColorName = ${colorNames};
+export type FontName = ${fontNames};
+
+export interface Theme {
+  colors: ThemeColors;
+  fonts: ThemeFonts;
+  spacing: ThemeSpacing;
+  borderRadius: Record<string, string>;
+  shadows: Record<string, string>;
+}
+`;
+    await fs.writeFile(path.join(srcDir, "types.ts"), typesContent);
+  }
+  async generateThemeConfig(outputDir, tokens, options) {
+    const srcDir = path.join(outputDir, "src");
+    const colors = options.customColors ? this.mergeColors(tokens.colors || [], options.customColors) : tokens.colors || [];
+    const themeContent = `import type { Theme } from './types.js';
+
+export const theme: Theme = {
+  colors: {
+    ${colors.map((c) => `${c.name}: '${c.value}',`).join("\n    ")}
+  },
+  fonts: {
+    ${tokens.fonts?.map((f) => `${f.name}: '${f.name}',`).join("\n    ") || ""}
+  },
+  spacing: {
+    ${tokens.spacing?.map((s) => `${s.name}: '${s.value}',`).join("\n    ") || ""}
+  },
+  borderRadius: {
+    ${tokens.borderRadius?.map((br) => `${br.name}: '${br.value}',`).join("\n    ") || ""}
+  },
+  shadows: {
+    ${tokens.shadows?.map((sh) => `${sh.name}: '${sh.value}',`).join("\n    ") || ""}
+  }
+};
+
+${options.darkMode ? this.generateDarkTheme(colors) : ""}
+
+export default theme;
+`;
+    await fs.writeFile(path.join(srcDir, "theme.ts"), themeContent);
+    const indexContent = `export * from './types.js';
+export * from './theme.js';
+`;
+    await fs.writeFile(path.join(srcDir, "index.ts"), indexContent);
+  }
+  mergeColors(colors, customColors) {
+    const colorMap = new Map(colors.map((c) => [c.name, c]));
+    for (const [name, value] of Object.entries(customColors)) {
+      colorMap.set(name, { name, value, type: "color" });
+    }
+    return Array.from(colorMap.values());
+  }
+  generateDarkTheme(colors) {
+    return `
+export const darkTheme: Theme = {
+  ...theme,
+  colors: {
+    ...theme.colors,
+    ${colors.filter((c) => c.name.includes("background") || c.name.includes("foreground")).map((c) => `${c.name}: '${this.invertColor(c.value)}',`).join("\n    ")}
+  }
+};
+`;
+  }
+  invertColor(hex) {
+    const num = parseInt(hex.replace("#", ""), 16);
+    const inverted = (16777215 ^ num).toString(16).padStart(6, "0");
+    return `#${inverted}`;
+  }
+  async generateCSSVariables(outputDir, tokens, options) {
+    const distDir = path.join(outputDir, "dist");
+    await fs.ensureDir(distDir);
+    const colors = options.customColors ? this.mergeColors(tokens.colors || [], options.customColors) : tokens.colors || [];
+    let cssContent = `:root {
+  /* Colors */
+  ${colors.map((c) => `--color-${c.name}: ${c.value};`).join("\n  ")}
+
+  /* Fonts */
+  ${tokens.fonts?.map((f) => `--font-${f.name}: '${f.name}', sans-serif;`).join("\n  ") || ""}
+
+  /* Spacing */
+  ${tokens.spacing?.map((s) => `--spacing-${s.name}: ${s.value};`).join("\n  ") || ""}
+
+  /* Border Radius */
+  ${tokens.borderRadius?.map((br) => `--radius-${br.name}: ${br.value};`).join("\n  ") || ""}
+
+  /* Shadows */
+  ${tokens.shadows?.map((sh) => `--shadow-${sh.name}: ${sh.value};`).join("\n  ") || ""}
+}
+`;
+    if (options.darkMode) {
+      cssContent += `
+[data-theme="dark"] {
+  /* Dark mode color overrides */
+  ${colors.filter((c) => c.name.includes("background") || c.name.includes("foreground")).map((c) => `--color-${c.name}: ${this.invertColor(c.value)};`).join("\n  ")}
+}
+`;
+    }
+    await fs.writeFile(path.join(distDir, "theme.css"), cssContent);
+  }
+  async generateTailwindPreset(outputDir, tokens, options) {
+    const srcDir = path.join(outputDir, "src");
+    const colors = options.customColors ? this.mergeColors(tokens.colors || [], options.customColors) : tokens.colors || [];
+    const tailwindContent = `import type { Config } from 'tailwindcss';
+
+const preset: Partial<Config> = {
+  theme: {
+    extend: {
+      colors: {
+        ${colors.map((c) => `'${c.name}': '${c.value}',`).join("\n        ")}
+      },
+      fontFamily: {
+        ${tokens.fonts?.map((f) => `'${f.name}': ['${f.name}', 'sans-serif'],`).join("\n        ") || ""}
+      },
+      spacing: {
+        ${tokens.spacing?.map((s) => `'${s.name}': '${s.value}',`).join("\n        ") || ""}
+      },
+      borderRadius: {
+        ${tokens.borderRadius?.map((br) => `'${br.name}': '${br.value}',`).join("\n        ") || ""}
+      },
+      boxShadow: {
+        ${tokens.shadows?.map((sh) => `'${sh.name}': '${sh.value}',`).join("\n        ") || ""}
+      }
+    }
+  }${options.darkMode ? `,
+  darkMode: 'class'` : ""}
+};
+
+export default preset;
+`;
+    await fs.writeFile(path.join(srcDir, "tailwind.ts"), tailwindContent);
+  }
+  async generateComponentUtils(outputDir, tokens) {
+    const srcDir = path.join(outputDir, "src");
+    const utilsContent = `import { theme } from './theme.js';
+import type { ColorName, FontName } from './types.js';
+
+export function getColor(name: ColorName): string {
+  return theme.colors[name];
+}
+
+export function getFont(name: FontName): string {
+  return theme.fonts[name];
+}
+
+export function getSpacing(name: string): string {
+  return theme.spacing[name] || '0';
+}
+
+export function cn(...classes: (string | undefined | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+`;
+    await fs.writeFile(path.join(srcDir, "utils.ts"), utilsContent);
+    const indexPath = path.join(srcDir, "index.ts");
+    const indexContent = await fs.readFile(indexPath, "utf-8");
+    await fs.writeFile(indexPath, indexContent + `export * from './utils.js';
+`);
+  }
+  async generateReadme(outputDir, packageName, options) {
+    const readme = `# ${packageName}
+
+Design system theme package generated by [extraktor](https://github.com/rainbow-me/extraktor).
+
+## Installation
+
+\`\`\`bash
+npm install ${packageName}
+\`\`\`
+
+## Usage
+
+### Import Theme
+
+\`\`\`typescript
+import { theme } from '${packageName}';
+
+console.log(theme.colors.primary);
+console.log(theme.fonts.sans);
+\`\`\`
+
+### CSS Variables
+
+Import the CSS file in your app:
+
+\`\`\`typescript
+import '${packageName}/css';
+\`\`\`
+
+Then use variables in your CSS:
+
+\`\`\`css
+.button {
+  background-color: var(--color-primary);
+  font-family: var(--font-sans);
+  padding: var(--spacing-4);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+\`\`\`
+
+### Tailwind CSS
+
+Add the preset to your \`tailwind.config.ts\`:
+
+\`\`\`typescript
+import preset from '${packageName}/tailwind';
+
+export default {
+  presets: [preset],
+  content: ['./src/**/*.{js,ts,jsx,tsx}']
+};
+\`\`\`
+
+Then use the theme in your components:
+
+\`\`\`tsx
+export function Button() {
+  return (
+    <button className="bg-primary text-white font-sans px-4 py-2 rounded-md shadow-sm">
+      Click me
+    </button>
+  );
+}
+\`\`\`
+
+${options.darkMode ? `
+### Dark Mode
+
+Enable dark mode by adding \`data-theme="dark"\` to your HTML element:
+
+\`\`\`typescript
+import { darkTheme } from '${packageName}';
+
+// Toggle dark mode
+document.documentElement.setAttribute('data-theme', 'dark');
+
+// Or in React
+function App() {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+  }, [isDark]);
+
+  return <YourApp />;
+}
+\`\`\`
+` : ""}
+
+${options.includeComponents ? `
+### Utility Functions
+
+\`\`\`typescript
+import { getColor, getFont, getSpacing, cn } from '${packageName}';
+
+const primaryColor = getColor('primary');
+const sansFont = getFont('sans');
+const spacing = getSpacing('4');
+
+// Combine class names
+const className = cn(
+  'button',
+  isActive && 'active',
+  isDisabled && 'disabled'
+);
+\`\`\`
+` : ""}
+
+## TypeScript
+
+Full TypeScript support included:
+
+\`\`\`typescript
+import type { Theme, ColorName, FontName } from '${packageName}';
+
+const color: ColorName = 'primary'; // Type-safe
+const font: FontName = 'sans'; // Type-safe
+\`\`\`
+
+## Customization
+
+You can extend the theme in your project:
+
+\`\`\`typescript
+import { theme } from '${packageName}';
+
+export const customTheme = {
+  ...theme,
+  colors: {
+    ...theme.colors,
+    brand: '#FF6B35'
+  }
+};
+\`\`\`
+
+## License
+
+MIT
+`;
+    await fs.writeFile(path.join(outputDir, "README.md"), readme);
+  }
+  async generateTsConfig(outputDir) {
+    const tsconfig = {
+      compilerOptions: {
+        target: "ES2022",
+        module: "ESNext",
+        moduleResolution: "bundler",
+        declaration: true,
+        declarationMap: true,
+        esModuleInterop: true,
+        forceConsistentCasingInFileNames: true,
+        strict: true,
+        skipLibCheck: true,
+        resolveJsonModule: true
+      },
+      include: ["src/**/*"],
+      exclude: ["node_modules", "dist"]
+    };
+    await fs.writeJson(path.join(outputDir, "tsconfig.json"), tsconfig, { spaces: 2 });
+  }
+};
+export {
+  ThemePackageGenerator
+};

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "extraktor",
+  "version": "1.0.0",
+  "description": "Extract design systems from any website using Vision AI. Turn any URL into React components, design tokens, and Tailwind themes.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aytuncyildizli/extraktor.git"
+  },
+  "homepage": "https://github.com/aytuncyildizli/extraktor#readme",
+  "bugs": {
+    "url": "https://github.com/aytuncyildizli/extraktor/issues"
+  },
+  "bin": {
+    "extraktor": "./dist/cli/index.js"
+  },
+  "files": [
+    "dist",
+    "skills",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup src/cli/index.ts src/index.ts --format esm --dts --clean",
+    "dev": "tsup src/cli/index.ts src/index.ts --format esm --watch",
+    "start": "node dist/cli/index.js",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "lint": "eslint src --ext .ts",
+    "typecheck": "tsc --noEmit",
+    "extract": "node dist/cli/index.js extract",
+    "clone": "node dist/cli/index.js clone",
+    "generate": "node dist/cli/index.js generate",
+    "prepublishOnly": "npm run build",
+    "release": "npm version patch && npm publish"
+  },
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "ui-extraction",
+    "react-components",
+    "tailwind",
+    "nextjs",
+    "vision-ai",
+    "storybook",
+    "playwright",
+    "css-to-tailwind",
+    "framer-motion",
+    "component-extraction",
+    "style-guide",
+    "cli"
+  ],
+  "author": "Aytunc Yildizli",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.71.2",
+    "@modelcontextprotocol/sdk": "^1.27.1",
+    "@svgr/core": "^8.1.0",
+    "chalk": "^5.6.2",
+    "cheerio": "^1.1.2",
+    "chroma-js": "^3.2.0",
+    "color": "^5.0.3",
+    "commander": "^14.0.2",
+    "cosmiconfig": "^9.0.0",
+    "css-tree": "^3.1.0",
+    "fs-extra": "^11.3.3",
+    "glob": "^13.0.0",
+    "nanoid": "^5.1.6",
+    "ora": "^9.0.0",
+    "playwright": "^1.57.0",
+    "postcss": "^8.5.6",
+    "postcss-selector-parser": "^7.1.1",
+    "postcss-value-parser": "^4.2.0",
+    "sharp": "^0.34.5",
+    "style-dictionary": "^5.1.4",
+    "svgo": "^4.0.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@types/chroma-js": "^3.1.2",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^25.0.9",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.17"
+  }
+}

package/skills/analyze-design.md

@@ -0,0 +1,20 @@
+---
+name: analyze-design
+description: Quick analysis of any website's design - colors, fonts, spacing, layout patterns, framework detection. No files generated, no API key needed.
+---
+
+# Analyze Design
+
+Quick design analysis with no output files:
+
+```bash
+npx extraktor analyze <url>
+```
+
+No API key needed. Returns: color palette, font families, font sizes, spacing values, shadow count, animation count, SPA framework detection, element count, CSS variable count.
+
+Use this when the user asks things like:
+- "What colors does this site use?"
+- "What font is that?"
+- "How many design tokens does this site have?"
+- "What framework is this built with?"

package/skills/apply-style.md

@@ -0,0 +1,24 @@
+---
+name: apply-style
+description: Apply a website's design style to your existing project. Extracts tokens and integrates them into your Tailwind config, CSS, or component files.
+---
+
+# Apply Style
+
+Extract a site's design and apply it to the user's project:
+
+1. Extract tokens:
+```bash
+npx extraktor extract <url> -o /tmp/style-source
+```
+
+2. Read the generated `tailwind.config.ts` and `variables.css`
+
+3. Merge the extracted theme into the user's existing Tailwind config:
+   - Add colors to `theme.extend.colors`
+   - Add fonts to `theme.extend.fontFamily`
+   - Add spacing to `theme.extend.spacing`
+
+4. If user has a `globals.css`, add the CSS variables from `variables.css`
+
+This is the "make my site look like X" workflow. No API key needed.

package/skills/clone-site.md

@@ -0,0 +1,29 @@
+---
+name: clone-site
+description: Clone any website into a working Next.js project with images, fonts, videos, and animations. No API key needed for basic clone.
+---
+
+# Clone Site
+
+Clone a website into a complete Next.js project:
+
+```bash
+npx extraktor clone <url> -o ./cloned --no-ai
+```
+
+This downloads all assets (images, fonts, videos), preserves animations, and creates a runnable Next.js 15 project. No API key needed.
+
+For AI-enhanced clone with clean React components (needs ANTHROPIC_API_KEY):
+```bash
+npx extraktor clone <url> -o ./cloned
+```
+
+After cloning, tell the user:
+```bash
+cd ./cloned/<project-name>
+npm install
+npm run dev
+# Visit http://localhost:3000
+```
+
+Options: `--content` (extract content.json), `--crawl` (multi-page), `--handover` (zip package).

package/skills/design-md.md

@@ -0,0 +1,29 @@
+---
+name: design-md
+description: Generate a DESIGN.md file from any website. Stitch-compatible 9-section format that AI agents can use to build pixel-perfect UI. No API key needed.
+---
+
+# Generate DESIGN.md
+
+Generate a comprehensive DESIGN.md from any URL:
+
+```bash
+npx extraktor design-md <url> -o ./DESIGN.md
+```
+
+No API key needed. If ANTHROPIC_API_KEY is available, the Visual Theme section gets an AI-enhanced narrative description.
+
+Output is a single markdown file with 9 sections:
+1. Visual Theme & Atmosphere
+2. Color Palette & Roles
+3. Typography Rules
+4. Component Stylings
+5. Layout Principles
+6. Depth & Elevation
+7. Do's and Don'ts
+8. Responsive Behavior
+9. Agent Prompt Guide
+
+After generating, tell the user to drop DESIGN.md into their project root. Any AI coding agent (Claude Code, Cursor, Copilot) can then read it and build UI that matches the source design.
+
+Compatible with the Stitch DESIGN.md format used by awesome-design-md.

package/skills/devtools-extract.md

@@ -0,0 +1,30 @@
+---
+name: devtools-extract
+description: Extract design from authenticated pages (dashboards, admin panels) by connecting to the user's existing Chrome session via DevTools Protocol.
+---
+
+# DevTools Extract
+
+Extract from pages the user is logged into by connecting to their Chrome.
+
+First, tell the user to start Chrome with remote debugging:
+```bash
+# macOS
+/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
+
+# Linux
+google-chrome --remote-debugging-port=9222
+```
+
+Then have them log into the site they want to extract from.
+
+Then run extraktor with `--devtools`:
+```bash
+npx extraktor extract <url> --devtools
+npx extraktor genome <url> --devtools
+npx extraktor clone <url> --devtools --no-ai
+```
+
+This connects to the running Chrome via CDP. Cookies, sessions, and authentication are preserved. The user's browser stays running after extraction.
+
+Custom endpoint: `--devtools http://localhost:9333`

package/skills/extract-tokens.md

@@ -0,0 +1,21 @@
+---
+name: extract-tokens
+description: Extract design tokens (colors, fonts, spacing) from any URL into Tailwind config, CSS variables, and DTCG tokens. No API key needed.
+---
+
+# Extract Design Tokens
+
+Run extraktor to extract design tokens from a URL. No API key required.
+
+```bash
+npx extraktor extract <url> -o ./tokens --format tailwind tokens css-vars
+```
+
+After extraction, read the output files:
+- `tailwind.config.ts` - drop into any Tailwind project
+- `variables.css` - CSS custom properties
+- `tokens.json` - DTCG standard design tokens
+
+Present the extracted colors, fonts, and spacing to the user. If they want to use them, help integrate into their project.
+
+Options: `--scroll` (lazy content), `--hover-states`, `--timeout <ms>`, `--no-headless` (visible browser).

package/skills/genome.md

@@ -0,0 +1,31 @@
+---
+name: genome
+description: Reverse-engineer a website into a complete design system with React components, Storybook, and portable genome.json using Vision AI.
+---
+
+# Genome - Design System Extraction
+
+Extract a complete, reusable design system from any URL using Claude Vision:
+
+```bash
+npx extraktor genome <url> -o ./genome-output
+```
+
+Uses ANTHROPIC_API_KEY from your environment (already set in Claude Code).
+
+This runs a 4-phase pipeline:
+1. Extracts design tokens (colors, fonts, spacing, animations)
+2. Takes screenshots and sends them to Claude Vision for component identification
+3. Generates clean React/Tailwind components by analyzing both screenshot and DOM
+4. Packages everything into a portable genome
+
+Output structure:
+- `genome.json` - portable design DNA
+- `components/` - clean React/TSX components with TypeScript props
+- `theme/` - Tailwind config, CSS variables, animation presets, DTCG tokens
+- `stories/` - Storybook for every component
+- `screenshots/` - vision analysis captures
+
+After extraction, read `genome.json` and present the components to the user.
+
+Options: `--max-components <n>`, `--skip-storybook`, `--skip-screenshots`, `--model <model>`.