{"id":"9796347e-1eb0-4fba-84ad-40ef46bca718","slug":"stsgs1980-ui-extractor","kind":"mcp","name":"ui-extractor","summary":"Extract UI components, design tokens, and patterns from any website. Generate production-ready React/Vue/HTML components. CLI + MCP server for AI agents.","owner":"stsgs1980","repoUrl":"https://github.com/stsgs1980/ui-extractor","license":"MIT","licenseTier":"permissive","trust":"community","stars":0,"match":null,"fewStars":true,"format":"mcp","createdAt":"2026-08-06T23:18:34.000Z","addedAt":"2026-10-29T06:28:40.632Z","logoUrl":"https://avatars.githubusercontent.com/u/276720401?u=599c1426dffc974a210e63e9cb59831c132ede21&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","browser-web","developer-tools"],"tags":["ai-powered","cli","design-to-code","design-tokens","javascript","react","ui-extraction"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-29T06:31:18.768Z","sample":false,"url":"https://conduits.dev/tools/stsgs1980-ui-extractor","language":"JavaScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# UI Extractor\n\nExtract UI components, design tokens, and patterns from any website. Generate production-ready React, Vue, and HTML components. Includes CLI and MCP server for AI agent integration.\n\n[![Status: Active](https://img.shields.io/badge/Status-Active-green.svg?style=flat-square)]()\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)]()\n\n## Table of Contents\n\n- [Features](#features)\n- [Tech Stack](#tech-stack)\n- [Getting Started](#getting-started)\n- [Architecture](#architecture)\n- [Project Structure](#project-structure)\n- [Scripts](#scripts)\n- [Configuration](#configuration)\n- [Agent Rules](#agent-rules)\n- [License](#license)\n\n## Features\n\n- **Extract** — DOM, CSS variables, computed styles, images, screenshots (full page, viewport, mobile, sections, components)\n- **Analyze** — Pattern detection, design system extraction (colors, spacing, radius, fonts), component classification\n- **Spec** — Generate component specifications (props, states, accessibility, responsive breakpoints)\n- **Generate** — Output HTML, React, or Vue components with CSS/SCSS/Tailwind\n- **Pipeline** — Full extract → analyze → spec → generate in one command\n- **Learn** — Save any site as a reference for future regeneration\n- **MCP Server** — Integrate with Cursor, Claude, Windsurf, VS Code\n\n## Tech Stack\n\n- **Language** — TypeScript (ESM)\n- **Runtime** — Node.js 20+\n- **Package Manager** — pnpm 9+\n- **Browser Automation** — Playwright\n- **CLI Framework** — Commander.js\n- **MCP SDK** — @modelcontextprotocol/sdk\n- **Testing** — Vitest\n- **Linting** — ESLat 9+ with custom rules (STD-DOC-002, STD-DOC-003)\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 20 or higher\n- pnpm 9 or higher\n\n### Installation\n\n```bash\ngit clone https://github.com/stsgs1980/ui-extractor.git\ncd ui-extractor\npnpm install\n```\n\n### Build\n\n```bash\npnpm build\n```\n\n### Run CLI\n\n```bash\n# Full pipeline: extract + analyze + spec + generate\npnpm --filter @ui-extractor/cli start pipeline https://ui.shadcn.com --component button --format react\n\n# Extract only\npnpm --filter @ui-extractor/cli start extract https://ui.shadcn.com --screenshot\n\n# Analyze only\npnpm --filter @ui-extractor/cli start analyze https://ui.shadcn.com\n\n# Generate from URL\npnpm --filter @ui-extractor/cli start generate https://ui.shadcn.com --component button --format react\n\n# Learn a site for later use\npnpm --filter @ui-extractor/cli start learn https://ui.shadcn.com --save shadcn-ui\n\n# List saved references\npnpm --filter @ui-extractor/cli start references\n\n# Generate from saved reference\npnpm --filter @ui-extractor/cli start generate-ref shadcn-ui --format vue\n\n# Screenshots\npnpm --filter @ui-extractor/cli start screenshot https://ui.shadcn.com --types full,viewport,sections,components\n\n# Compare two sites\npnpm --filter @ui-extractor/cli start compare https://ui.shadcn.com https://vercel.com\n```\n\n### Run MCP Server\n\nAdd to your MCP config (Cursor, Claude Desktop, Windsurf, VS Code):\n\n```json\n{\n  \"mcpServers\": {\n    \"ui-extractor\": {\n      \"command\": \"node\",\n      \"args\": [\"packages/mcp/src/server.js\"],\n      \"cwd\": \"/path/to/ui-extractor\"\n    }\n  }\n}\n```\n\nThen in Cursor:\n\n```\n@ui-extractor uix_pipeline https://ui.shadcn.com --component button --format react\n```\n\n## Architecture\n\nMonorepo with three packages:\n\n- `packages/core` — Core library (extract, analyze, spec, generate, pipeline, learn)\n- `packages/cli` — Command-line interface\n- `packages/mcp` — MCP server for AI agent integration\n\nData flow: URL → Playwright extraction → Analysis (design system, components, patterns) → Spec generation → Code generation (React/Vue/HTML).\n\n## Project Structure\n\n- `packages/core/src/` — Core modules (extract.js, analyze.js, spec.js, generate.js, pipeline.js, index.js)\n- `packages/cli/src/` — CLI entry point (index.js)\n- `packages/mcp/src/` — MCP server (server.js)\n- `docs/` — Documentation (agent-workflow.md, teardown-method.md, teardown-cheatsheet.md)\n- `eslint-rules/` — Custom ESLint rules (unicode-policy, code-block-language)\n- `eslint-processors/` — Custom ESLint processors (markdown-snippets)\n\n## Scripts\n\n| Script | Description |\n|--------|-------------|\n| `pnpm dev` | Run CLI in watch mode |\n| `pnpm build` | Build all packages |\n| `pnpm test` | Run tests with Vitest |\n| `pnpm eslint .` | Lint all files |\n| `pnpm mcp` | Start MCP server |\n| `pnpm cli` | Run CLI |\n\n## Configuration\n\n### Screenshot Types\n\n- `full` — Full page screenshot\n- `viewport` — Viewport only\n- `mobile` — Mobile viewport (375px)\n- `sections` — Per-section screenshots\n- `components` — Per-component screenshots\n\n```bash\npnpm --filter @ui-extractor/cli start extract https://example.com --screenshot --screenshot-types full,viewport,sections,components\n```\n\n### MCP Tools\n\n- `uix_pipeline` — Full pipeline\n- `uix_extract` — Extract UI data\n- `uix_analyze` — Analyze patterns and design system\n- `uix_spec` — Generate component specification\n- `uix_generate` — Generate component code\n- `uix_learn` — Learn and save reference\n- `uix_references` — List references\n- `uix_generate_from_reference` — Generate from saved reference\n- `uix_compare` — Compare two URLs\n\n## Agent Rules\n\nAny AI agent working on this project MUST read and follow `AGENT_RULES.md` before performing any operations.\n\n## License\n\nMIT\n\n---\n\nBuilt with: Node.js 20 + TypeScript + Playwright + Commander.js"}