Skip to content

README.md

Latest commit

 

History

History
120 lines (92 loc) · 3.49 KB

README.md

File metadata and controls

120 lines (92 loc) · 3.49 KB

visual-mirror

Design extraction and cloning tool — captures complete design systems from any website and generates React components with Tailwind CSS.

Overview

visual-mirror is a CLI tool that scrapes a target website, analyzes its visual design (colors, spacing, typography, component patterns), and uses LLM intelligence to generate a portable design system package including React components, Tailwind configuration, and comprehensive documentation.

Installation

npm install

Configuration

Create a .env file with your OpenAI API key:

OPENAI_API_KEY=your_api_key_here
OPENAI_MODEL=gpt-4o  # optional, defaults to gpt-4o

Usage

CLI

# Install globally
npm install -g .

# Extract design from a website
visual-mirror https://example.com

# Specify custom output directory
visual-mirror https://example.com my-design-system

Local (via npm script)

npm run extract -- https://example.com

Options

Argument Description Default
url Target website URL to extract (required)
output-dir Output directory for design package dist

Output Structure

The tool generates a complete design system package:

dist/
├── components/          # React components (.jsx)
│   ├── index.js        # Component library entry
│   └── README.md       # Component documentation
├── assets/
│   ├── logos/          # Extracted logos
│   └── favicons/       # Favicons
├── styles/
│   └── theme.css       # CSS custom properties
├── tailwind.config.js  # Tailwind configuration
├── DESIGN.md           # Design system documentation
├── package.json        # Design system package info
└── README.md           # Usage guide

Features

  • Visual Analysis: Extracts color palettes, spacing scales, typography, and layout patterns
  • Component Detection: Identifies archetypal UI components (buttons, cards, inputs, etc.)
  • Hover State Capture: Analyzes interaction patterns and animations
  • Asset Extraction: Downloads logos, favicons, and brand assets
  • LLM-Powered: Uses OpenAI for semantic mapping and intelligent component generation
  • React Generation: Produces production-ready React components with Tailwind classes

Project Structure

visual-mirror/
├── bin/
│   └── cli.js          # CLI entry point
├── src/
│   ├── analyzer/       # Design analysis modules
│   │   ├── archetypes.js
│   │   ├── assets.js
│   │   ├── colors.js
│   │   ├── hover.js
│   │   ├── spatial.js
│   │   └── typography.js
│   ├── generator/      # Code generation
│   │   ├── component-index.js
│   │   ├── design-md.js
│   │   ├── fragment-components.js
│   │   ├── react-components.js
│   │   └── tailwind-config.js
│   ├── llm/            # LLM client
│   │   └── client.js
│   ├── index.js        # Main orchestration
│   └── scraper.js      # Web scraping
├── tests/              # Test files
├── package.json
└── README.md

Dependencies

  • playwright — Web scraping and browser automation
  • openai — LLM integration for design analysis
  • chroma-js — Color manipulation and analysis
  • simple-statistics — Statistical analysis for design patterns
  • dotenv — Environment variable management

License

ISC