extraktor 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Aytunc Yildizli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,174 @@
+<p align="center">
+  <img src="assets/banner.svg" alt="extraktor" width="100%" />
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/npm/v/extraktor?style=flat-square&color=black" alt="npm version" />
+  <img src="https://img.shields.io/badge/license-MIT-black?style=flat-square" alt="license" />
+  <img src="https://img.shields.io/badge/node-%3E%3D18-black?style=flat-square" alt="node" />
+  <img src="https://img.shields.io/badge/tests-104%20passing-brightgreen?style=flat-square" alt="tests" />
+  <img src="https://img.shields.io/badge/skills-8-blue?style=flat-square" alt="skills" />
+</p>
+
+---
+
+## What is this
+
+extraktor turns any URL into a usable design system. It opens a browser, reads the page, and outputs production-ready code: Tailwind configs, CSS variables, DTCG tokens, React components, Storybook, and DESIGN.md files.
+
+It ships as **8 Claude Code skills**. Install once, then just talk to Claude.
+
+## Setup
+
+```bash
+# 1. Install
+npm install -g extraktor
+npx playwright install chromium
+
+# 2. Copy skills into Claude Code
+cp $(npm root -g)/extraktor/skills/*.md ~/.claude/skills/
+
+# 3. Done. Talk to Claude.
+```
+
+## Skills
+
+| Skill | What it does | API key? |
+|-------|-------------|----------|
+| **extract-tokens** | Colors, fonts, spacing -> Tailwind config, CSS vars, DTCG tokens | No |
+| **analyze-design** | Quick design audit - colors, fonts, framework detection | No |
+| **clone-site** | Full Next.js project with all assets and animations | No |
+| **apply-style** | Extract a site's style and apply it to your project | No |
+| **design-md** | Generate Stitch-format DESIGN.md (compatible with [awesome-design-md](https://github.com/VoltAgent/awesome-design-md)) | No |
+| **genome** | Vision-AI component extraction with Storybook | Yes |
+| **regen** | Generate new pages from extracted genome | Yes |
+| **devtools-extract** | Extract from authenticated pages via Chrome DevTools | No |
+
+6 out of 8 work without any API key. `genome` and `regen` use your existing `ANTHROPIC_API_KEY` - if you're on Claude Code, it's already there.
+
+## Examples
+
+Just talk to Claude naturally:
+
+```
+"Extract the design tokens from linear.app"
+"What fonts does stripe.com use?"
+"Generate a DESIGN.md from this site"
+"Clone this site and make it about my product"
+"Extract the design system and build me a new landing page"
+"Get the colors from my dashboard"  (uses --devtools for auth pages)
+```
+
+Claude picks the right skill automatically.
+
+<p align="center">
+  <img src="assets/demo.svg" alt="extraktor extracting linear.app" width="100%" />
+</p>
+
+## What gets extracted
+
+| Category | Output |
+|----------|--------|
+| **Colors** | Full palette, semantic names, gradients, usage roles |
+| **Typography** | Families, sizes, weights, line heights, text styles |
+| **Spacing** | Scale, margins, padding, gaps |
+| **Animations** | Keyframes (named), transitions, transforms, timing functions |
+| **Layout** | Section hierarchy, grid patterns, bento layouts, breakpoints |
+| **Effects** | Shadows, border radii, filters, opacity |
+| **Assets** | Images, SVGs, fonts, icons (downloaded) |
+| **Components** | Cards, heroes, CTAs, pricing, testimonials, nav |
+| **Platform** | Framer, Webflow, WordPress, Shopify, Squarespace, Wix |
+
+## DESIGN.md generation
+
+```bash
+extraktor design-md https://linear.app -o ./DESIGN.md
+```
+
+Generates a 9-section [Stitch-format](https://github.com/VoltAgent/awesome-design-md) DESIGN.md:
+
+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
+
+Drop it into any project. Any AI agent (Claude, Cursor, Copilot) reads it and builds matching UI. What [awesome-design-md](https://github.com/VoltAgent/awesome-design-md) does manually for 31 sites, extraktor does automatically for any URL.
+
+## Genome - Vision AI design system
+
+```bash
+extraktor genome https://example.com -o ./genome
+```
+
+<p align="center">
+  <img src="assets/pipeline.svg" alt="genome pipeline" width="100%" />
+</p>
+
+Most tools scrape text. Genome reads design visually:
+
+1. **Extract** - Design tokens (colors, fonts, spacing, animations)
+2. **See** - Claude Vision analyzes screenshots to identify components
+3. **Synthesize** - Screenshot + DOM together -> clean React/Tailwind components
+4. **Package** - genome.json + components/ + theme/ + Storybook
+
+The output is a portable design system you can build new pages from:
+
+```bash
+extraktor regen ./genome --prompt "SaaS pricing page for TaskFlow"
+```
+
+## DevTools mode
+
+Extract from pages you're logged into:
+
+```bash
+# Start Chrome with debugging, log in to your app, then:
+extraktor extract https://dashboard.example.com --devtools
+```
+
+Connects via CDP. Cookies and sessions preserved. Works with extract, genome, clone, design-md.
+
+## CLI reference
+
+Works as a standalone CLI without Claude Code:
+
+```
+extraktor extract <url>      Design tokens (Tailwind, CSS vars, DTCG)
+extraktor design-md <url>    DESIGN.md (Stitch format, 9 sections)
+extraktor clone <url>        Next.js project with all assets
+extraktor genome <url>       Vision-AI design system + Storybook
+extraktor regen <dir>        New page from genome
+extraktor analyze <url>      Quick analysis (no output files)
+extraktor init               Generate config file
+```
+
+All commands support `--devtools`, `--timeout`, `--headless`, `-v`.
+
+## Requirements
+
+- Node.js >= 18
+- Chromium (`npx playwright install chromium`)
+- `ANTHROPIC_API_KEY` (only for genome and regen)
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md). The project uses TypeScript strict mode, Vitest for testing, and Playwright for browser automation.
+
+```bash
+git clone https://github.com/aytuncyildizli/extraktor.git
+cd extraktor && npm install && npx playwright install chromium
+npm run build && npm test
+```
+
+## Responsible use
+
+Designed for learning from web design, extracting tokens for your own projects, and rapid prototyping. Respect intellectual property, terms of service, and robots.txt.
+
+## License
+
+MIT

package/dist/chunk-5IH5TLAQ.js

@@ -0,0 +1,91 @@
+// src/utils/logger.ts
+import chalk from "chalk";
+var LOG_LEVELS = {
+  debug: 0,
+  info: 1,
+  warn: 2,
+  error: 3
+};
+var LOG_COLORS = {
+  debug: chalk.gray,
+  info: chalk.blue,
+  warn: chalk.yellow,
+  error: chalk.red
+};
+var LOG_PREFIXES = {
+  debug: "[DEBUG]",
+  info: "[INFO]",
+  warn: "[WARN]",
+  error: "[ERROR]"
+};
+function createLogger(options = {}) {
+  const {
+    level = "info",
+    prefix = "extraktor",
+    pretty = true,
+    timestamp = false
+  } = options;
+  let currentLevel = level;
+  const shouldLog = (messageLevel) => {
+    return LOG_LEVELS[messageLevel] >= LOG_LEVELS[currentLevel];
+  };
+  const formatMessage = (messageLevel, message, args) => {
+    const parts = [];
+    if (timestamp) {
+      parts.push(chalk.gray((/* @__PURE__ */ new Date()).toISOString()));
+    }
+    if (pretty) {
+      parts.push(LOG_COLORS[messageLevel](LOG_PREFIXES[messageLevel]));
+      parts.push(chalk.cyan(`[${prefix}]`));
+    } else {
+      parts.push(LOG_PREFIXES[messageLevel]);
+      parts.push(`[${prefix}]`);
+    }
+    parts.push(message);
+    if (args.length > 0) {
+      const formattedArgs = args.map((arg) => {
+        if (typeof arg === "object") {
+          return JSON.stringify(arg, null, 2);
+        }
+        return String(arg);
+      });
+      parts.push(...formattedArgs);
+    }
+    return parts.join(" ");
+  };
+  const log = (messageLevel, message, ...args) => {
+    if (!shouldLog(messageLevel)) return;
+    const formatted = formatMessage(messageLevel, message, args);
+    switch (messageLevel) {
+      case "error":
+        console.error(formatted);
+        break;
+      case "warn":
+        console.warn(formatted);
+        break;
+      default:
+        console.log(formatted);
+    }
+  };
+  const logger2 = {
+    debug: (message, ...args) => log("debug", message, ...args),
+    info: (message, ...args) => log("info", message, ...args),
+    warn: (message, ...args) => log("warn", message, ...args),
+    error: (message, ...args) => log("error", message, ...args),
+    child: (childOptions) => createLogger({
+      level: currentLevel,
+      prefix: childOptions.prefix || prefix,
+      pretty,
+      timestamp
+    }),
+    setLevel: (newLevel) => {
+      currentLevel = newLevel;
+    }
+  };
+  return logger2;
+}
+var logger = createLogger();
+
+export {
+  createLogger
+};