Dextor — Design System Extractor

Extract design system patterns from any HTML file into a structured Markdown reference.

Analyzes Tailwind CSS, custom styles, and semantic HTML to produce a complete design system document — colors, typography, spacing, animations, components, and more.

Install

bun install
bun link

Usage

detx <file.html> [options]

Options

| Flag | Description | Default | | --------------------- | ---------------- | ------------------------------ | | -o, --output <path> | Output file path | ./DESIGN_SYSTEM_REFERENCE.md | | --name <name> | Project name | Derived from filename | | -h, --help | Show help | — | | -v, --version | Show version | — |

Examples

# Analyze a landing page
detx ./landing-page.html

# Specify output location
detx ./product-page.html -o ./docs/design-system.md

# Custom project name
detx ./dashboard.html --name "Admin Dashboard"

What It Extracts

| Category | Details | | ----------------- | --------------------------------------------------------------- | | Color Palette | Primary, neutral, accent groups with hex codes and usage counts | | Typography | Font families, text scale, weights, Google Fonts detection | | Spacing | Gaps, padding, margins with frequency analysis | | Border Radius | Radius patterns and usage labels | | Gradients | Directions, Tailwind combos, raw CSS gradients | | Shadows | Shadow classes and custom box-shadow definitions | | Animations | Transitions, keyframes, easing, hover effects | | Icons | Iconify, Lucide, and inline SVG detection | | Sections | Semantic HTML architecture tree | | Components | Card, CTA, navbar, badge, logo strip patterns | | Principles | Auto-derived key design decisions |

Use Cases

• Design handoff — Generate a design system doc from any HTML prototype
• Design audit — Quickly understand the patterns in an existing product
• Skill training — Feed the output into AI skills for design-aware code generation
• Reference docs — Create searchable design references by product, category, or style

Publish

npm login
bun publish

License

MIT