{"_id":"@ahmedessyad/liftit","_rev":"5-02dcfbd1643418fc1d63fcb7bb44d35a","name":"@ahmedessyad/liftit","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@ahmedessyad/liftit","version":"1.0.0","keywords":["design-system","css-extraction","tailwind","shadcn","playwright","mcp","claude","web-scraping","design-tokens","component-generator","react","next.js","design-to-code"],"license":"MIT","_id":"@ahmedessyad/liftit@1.0.0","maintainers":[{"name":"ahmedessyad","email":"essyademohamed@gmail.com"}],"bin":{"liftit":"bin/liftit.js"},"dist":{"shasum":"bbc4615101d8645dcd822b8c1131ea2f03e73e58","tarball":"https://registry.npmjs.org/@ahmedessyad/liftit/-/liftit-1.0.0.tgz","fileCount":47,"integrity":"sha512-ud+K4Pti4EpSn4cZuac4YCACvThPEmIfJDU+0oOKiU41itpK8IMGqAqgA8nOWL+OODoAQ4M5f1U8l6dMnv0EYA==","signatures":[{"sig":"MEYCIQDfLxwryES2lvaUQSmrA9pv3PrV+NXuv6KjDfz1qrTW0QIhAOpWzwV2rTbefhizPA5xF6Jt9pCXLWsFTDjqCza9yyEc","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":429031},"type":"commonjs","gitHead":"ff1e655c3d9046f724e5bea4cc7aeb04f3e293a7","scripts":{"mcp":"ts-node scripts/mcp-server.ts","scan":"ts-node scripts/scan.ts","match":"ts-node scripts/match-component.ts","assets":"ts-node scripts/copy-assets.ts","export":"ts-node scripts/export.ts","motion":"ts-node scripts/capture-motion.ts","analyze":"ts-node scripts/analyze.ts","extract":"ts-node scripts/orchestrate.ts","generate":"ts-node scripts/generate-component.ts","validate":"ts-node scripts/validate.ts","export:all":"ts-node scripts/export.ts all","export:css":"ts-node scripts/export.ts css-variables","interactions":"ts-node scripts/extract-interactions.ts","export:shadcn":"ts-node scripts/export.ts shadcn","export:tailwind":"ts-node scripts/export.ts tailwind","scroll-interactions":"ts-node scripts/capture-scroll-interactions.ts"},"_npmUser":{"name":"ahmedessyad","email":"essyademohamed@gmail.com"},"_npmVersion":"11.6.0","description":"Lift any site's design. Paste a URL, get the code. Extracts design systems, generates React components, exports Tailwind/shadcn configs, diffs against your existing CSS.","directories":{},"_nodeVersion":"24.9.0","dependencies":{"zod":"^4.3.6","pngjs":"^7.0.0","ts-node":"^10.9.2","css-tree":"^3.2.1","pixelmatch":"^7.1.0","playwright":"^1.58.2","typescript":"^6.0.2","@types/node":"^25.5.0","@types/css-tree":"^2.3.11","@modelcontextprotocol/sdk":"^1.28.0"},"_hasShrinkwrap":false,"devDependencies":{"@types/pngjs":"^6.0.5"},"_npmOperationalInternal":{"tmp":"tmp/liftit_1.0.0_1774866165718_0.10021806466850247","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ahmedessyad/liftit","version":"1.0.1","keywords":["design-system","css-extraction","tailwind","shadcn","playwright","mcp","claude","web-scraping","design-tokens","component-generator","react","next.js","design-to-code"],"license":"MIT","_id":"@ahmedessyad/liftit@1.0.1","maintainers":[{"name":"ahmedessyad","email":"essyademohamed@gmail.com"}],"bin":{"liftit":"bin/liftit.js"},"dist":{"shasum":"7aa6d208a0e878e6ef029eb374a5de5ac4eba53d","tarball":"https://registry.npmjs.org/@ahmedessyad/liftit/-/liftit-1.0.1.tgz","fileCount":157,"integrity":"sha512-JTeGDPLf6wGg9UdJgOvosXwUAYq+4FLWNXyGqLhgAnBZxTKlfe+2M/zmsUGDxs3FfNULMUbykbjZTW1lFaXzQw==","signatures":[{"sig":"MEUCIDhj+XCEEcKQkUR2z5fdJpYsqPdakbnd2GZ/Z7P4m0/wAiEAo5KvQUtB8IZC4LE86frC31nmnyywx237atFbyDAylpk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":927767},"type":"commonjs","gitHead":"ff1e655c3d9046f724e5bea4cc7aeb04f3e293a7","scripts":{"mcp":"ts-node scripts/mcp-server.ts","scan":"ts-node scripts/scan.ts","build":"tsc","match":"ts-node scripts/match-component.ts","assets":"ts-node scripts/copy-assets.ts","export":"ts-node scripts/export.ts","motion":"ts-node scripts/capture-motion.ts","analyze":"ts-node scripts/analyze.ts","extract":"ts-node scripts/orchestrate.ts","generate":"ts-node scripts/generate-component.ts","validate":"ts-node scripts/validate.ts","export:all":"ts-node scripts/export.ts all","export:css":"ts-node scripts/export.ts css-variables","interactions":"ts-node scripts/extract-interactions.ts","export:shadcn":"ts-node scripts/export.ts shadcn","prepublishOnly":"npm run build","export:tailwind":"ts-node scripts/export.ts tailwind","scroll-interactions":"ts-node scripts/capture-scroll-interactions.ts"},"_npmUser":{"name":"ahmedessyad","email":"essyademohamed@gmail.com"},"_npmVersion":"11.6.0","description":"Lift any site's design. Paste a URL, get the code. Extracts design systems, generates React components, exports Tailwind/shadcn configs, diffs against your existing CSS.","directories":{},"_nodeVersion":"24.9.0","dependencies":{"zod":"^4.3.6","pngjs":"^7.0.0","ts-node":"^10.9.2","css-tree":"^3.2.1","pixelmatch":"^7.1.0","playwright":"^1.58.2","typescript":"^6.0.2","@types/node":"^25.5.0","@types/css-tree":"^2.3.11","@modelcontextprotocol/sdk":"^1.28.0"},"_hasShrinkwrap":false,"devDependencies":{"@types/pngjs":"^6.0.5"},"_npmOperationalInternal":{"tmp":"tmp/liftit_1.0.1_1774868725941_0.3961237397251458","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@ahmedessyad/liftit","version":"1.0.3","keywords":["design-system","css-extraction","tailwind","shadcn","playwright","mcp","claude","web-scraping","design-tokens","component-generator","react","next.js","design-to-code"],"license":"MIT","_id":"@ahmedessyad/liftit@1.0.3","maintainers":[{"name":"ahmedessyad","email":"essyademohamed@gmail.com"}],"bin":{"liftit":"bin/liftit.js"},"dist":{"shasum":"c0710ea18c4f23ef904937392888bd5a9d6f9a67","tarball":"https://registry.npmjs.org/@ahmedessyad/liftit/-/liftit-1.0.3.tgz","fileCount":522,"integrity":"sha512-YnqQyXdvLlFhDVYkMh1nF852Ws4ga3ycvigWAOAy8Exo+dtwbwIJk/xLbLiu5bkxwU41s+3kuIAahBFuOpQPpA==","signatures":[{"sig":"MEUCID5dCP5Bi4378eWUxa1fUU68Nv2d3oNGeDI0+qVd0G8hAiEArHPMBu1clTGlam3Y2YPBffoXRE0a14kGBCG6rvFIiwM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2601793},"type":"commonjs","gitHead":"1f501f67a5db882d9dec6b875e011dd867b745c4","scripts":{"mcp":"ts-node src/cli/mcp-server.ts","scan":"ts-node src/scan/cli.ts","test":"vitest run","build":"tsc","match":"ts-node src/export/match-component.ts","assets":"ts-node src/transform/copy-assets.ts","export":"ts-node src/export/export.ts","motion":"ts-node src/scan/capture-motion.ts","analyze":"ts-node src/scan/analyze.ts","extract":"ts-node src/cli/orchestrate.ts","browsers":"ts-node src/extras/cross-browser.ts","generate":"ts-node src/export/generate-component.ts","mcp:http":"ts-node src/cli/mcp-http-server.ts","validate":"ts-node src/scan/validate.ts","export:all":"ts-node src/export/export.ts all","export:css":"ts-node src/export/export.ts css-variables","test:watch":"vitest","interactions":"ts-node src/scan/extract-interactions.ts","export:shadcn":"ts-node src/export/export.ts shadcn","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build","export:tailwind":"ts-node src/export/export.ts tailwind","generate:project":"ts-node src/export/generate-project.ts","scroll-interactions":"ts-node src/scan/capture-scroll-interactions.ts"},"_npmUser":{"name":"ahmedessyad","email":"essyademohamed@gmail.com"},"_npmVersion":"11.6.0","description":"Lift any site's design. Paste a URL, get the code. Extracts design systems, generates React components, exports Tailwind/shadcn configs, diffs against your existing CSS.","directories":{},"_nodeVersion":"24.9.0","dependencies":{"zod":"^4.3.6","pngjs":"^7.0.0","ts-node":"^10.9.2","css-tree":"^3.2.1","lighthouse":"^13.1.0","pixelmatch":"^7.1.0","playwright":"^1.58.2","typescript":"^6.0.2","@types/node":"^25.5.0","@clack/prompts":"^1.2.0","@types/css-tree":"^2.3.11","@anthropic-ai/sdk":"^0.82.0","@modelcontextprotocol/sdk":"^1.28.0"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^4.1.2","@types/pngjs":"^6.0.5","@vitest/coverage-v8":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/liftit_1.0.3_1776088069070_0.17787615677380608","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@ahmedessyad/liftit","version":"1.0.4","keywords":["design-system","css-extraction","tailwind","shadcn","playwright","mcp","claude","web-scraping","design-tokens","component-generator","react","next.js","design-to-code"],"license":"MIT","_id":"@ahmedessyad/liftit@1.0.4","maintainers":[{"name":"ahmedessyad","email":"essyademohamed@gmail.com"}],"bin":{"liftit":"bin/liftit.js"},"dist":{"shasum":"ad041381173cb1482c0bdc2e9e671131be771afe","tarball":"https://registry.npmjs.org/@ahmedessyad/liftit/-/liftit-1.0.4.tgz","fileCount":546,"integrity":"sha512-Ne+R1QaVzN7tdL7qwLiU7Bf6nW9Vkt1Dh0Kr43DhHNXzuI4yU6g4qrYjY4RZIddFeO/JPW6AFSXA/+gzDR2auw==","signatures":[{"sig":"MEQCIBQoGtEBNiOWxzGuSBDvNU+SpqSNs9I4pjAhmKV62mgLAiBWfPKBZlkh0EPuh9osii5DpCp/Vs5DtEievA5SIUnkaA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2675477},"main":"dist/src/index.js","type":"commonjs","types":"dist/src/index.d.ts","gitHead":"a14c861d1fe1216b41299f51ea4790d6016906ee","scripts":{"mcp":"ts-node src/cli/mcp-server.ts","scan":"ts-node src/scan/cli.ts","test":"vitest run","build":"tsc","match":"ts-node src/export/match-component.ts","assets":"ts-node src/transform/copy-assets.ts","export":"ts-node src/export/export.ts","motion":"ts-node src/scan/capture-motion.ts","analyze":"ts-node src/scan/analyze.ts","extract":"ts-node src/cli/orchestrate.ts","browsers":"ts-node src/extras/cross-browser.ts","generate":"ts-node src/export/generate-component.ts","mcp:http":"ts-node src/cli/mcp-http-server.ts","validate":"ts-node src/scan/validate.ts","export:all":"ts-node src/export/export.ts all","export:css":"ts-node src/export/export.ts css-variables","test:watch":"vitest","interactions":"ts-node src/scan/extract-interactions.ts","export:shadcn":"ts-node src/export/export.ts shadcn","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build","export:tailwind":"ts-node src/export/export.ts tailwind","generate:project":"ts-node src/export/generate-project.ts","scroll-interactions":"ts-node src/scan/capture-scroll-interactions.ts"},"_npmUser":{"name":"ahmedessyad","email":"essyademohamed@gmail.com"},"_npmVersion":"11.6.0","description":"Lift any site's design. Paste a URL, get the code. Extracts design systems, generates React components, exports Tailwind/shadcn configs, diffs against your existing CSS.","directories":{},"_nodeVersion":"24.9.0","dependencies":{"zod":"^4.3.6","pngjs":"^7.0.0","ts-node":"^10.9.2","css-tree":"^3.2.1","lighthouse":"^13.1.0","pixelmatch":"^7.1.0","playwright":"^1.58.2","typescript":"^6.0.2","@types/node":"^25.5.0","@clack/prompts":"^1.2.0","@types/css-tree":"^2.3.11","@anthropic-ai/sdk":"^0.82.0","@modelcontextprotocol/sdk":"^1.28.0"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^4.1.2","@types/pngjs":"^6.0.5","@vitest/coverage-v8":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/liftit_1.0.4_1776379705815_0.9519800077589253","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@ahmedessyad/liftit","version":"1.1.0","description":"Lift any site's design. Paste a URL, get the code. Extracts design systems, generates React components, exports Tailwind/shadcn configs, diffs against your existing CSS.","main":"dist/src/index.js","types":"dist/src/index.d.ts","bin":{"liftit":"bin/liftit.js"},"scripts":{"scan":"ts-node src/scan/cli.ts","analyze":"ts-node src/scan/analyze.ts","motion":"ts-node src/scan/capture-motion.ts","interactions":"ts-node src/scan/extract-interactions.ts","scroll-interactions":"ts-node src/scan/capture-scroll-interactions.ts","assets":"ts-node src/transform/copy-assets.ts","validate":"ts-node src/scan/validate.ts","extract":"ts-node src/cli/orchestrate.ts","mcp":"ts-node src/cli/mcp-server.ts","mcp:http":"ts-node src/cli/mcp-http-server.ts","browsers":"ts-node src/extras/cross-browser.ts","generate":"ts-node src/export/generate-component.ts","generate:project":"ts-node src/export/generate-project.ts","match":"ts-node src/export/match-component.ts","export":"ts-node src/export/export.ts","export:tailwind":"ts-node src/export/export.ts tailwind","export:css":"ts-node src/export/export.ts css-variables","export:shadcn":"ts-node src/export/export.ts shadcn","export:all":"ts-node src/export/export.ts all","build":"tsc","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build"},"keywords":["design-system","css-extraction","tailwind","shadcn","playwright","mcp","claude","web-scraping","design-tokens","component-generator","react","next.js","design-to-code"],"license":"MIT","type":"commonjs","dependencies":{"@anthropic-ai/sdk":"^0.82.0","@clack/prompts":"^1.2.0","@modelcontextprotocol/sdk":"^1.28.0","@types/css-tree":"^2.3.11","@types/node":"^25.5.0","css-tree":"^3.2.1","lighthouse":"^13.1.0","pixelmatch":"^7.1.0","playwright":"^1.58.2","pngjs":"^7.0.0","ts-node":"^10.9.2","typescript":"^6.0.2","user-agents":"^2.1.32","zod":"^4.3.6"},"devDependencies":{"@types/pngjs":"^6.0.5","@vitest/coverage-v8":"^4.1.2","vitest":"^4.1.2"},"optionalDependencies":{"rebrowser-playwright":"^1.50.0"},"_id":"@ahmedessyad/liftit@1.1.0","gitHead":"ca6bc20fa5be8eaba6bbab4d39966f4516c425e9","_nodeVersion":"24.9.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-FxrzmixtgLpNfpll8tZnZH2HYj8cp3YwJCx78SEo4EZcOj0w0o1Tw43DxOJXBhH8yxQ1svwTfiEBzmwyyFx3sg==","shasum":"04c2ca4cf9b881d35c002c4eb35bf4a35dde336e","tarball":"https://registry.npmjs.org/@ahmedessyad/liftit/-/liftit-1.1.0.tgz","fileCount":582,"unpackedSize":2782659,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFl/+eglUG+qDiUtVZbrOzAuY3+jGp5FFF6IFsHUInO8AiB5FmXGcOQKA3zJGRw3ZN6TvCYKca/ZkfyB8xVVLUV4fg=="}]},"_npmUser":{"name":"ahmedessyad","email":"essyademohamed@gmail.com"},"directories":{},"maintainers":[{"name":"ahmedessyad","email":"essyademohamed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/liftit_1.1.0_1776383924934_0.019839394358801554"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-30T10:22:45.341Z","modified":"2026-04-16T23:58:45.237Z","1.0.0":"2026-03-30T10:22:45.859Z","1.0.1":"2026-03-30T11:05:26.227Z","1.0.3":"2026-04-13T13:47:49.312Z","1.0.4":"2026-04-16T22:48:26.044Z","1.1.0":"2026-04-16T23:58:45.139Z"},"license":"MIT","keywords":["design-system","css-extraction","tailwind","shadcn","playwright","mcp","claude","web-scraping","design-tokens","component-generator","react","next.js","design-to-code"],"description":"Lift any site's design. Paste a URL, get the code. Extracts design systems, generates React components, exports Tailwind/shadcn configs, diffs against your existing CSS.","maintainers":[{"name":"ahmedessyad","email":"essyademohamed@gmail.com"}],"readme":"# Liftit\n\n[![npm version](https://img.shields.io/npm/v/@ahmedessyad/liftit)](https://www.npmjs.com/package/@ahmedessyad/liftit)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue.svg)](https://www.typescriptlang.org/)\n[![CI](https://github.com/AhmedEssyad/liftit/actions/workflows/ci.yml/badge.svg)](https://github.com/AhmedEssyad/liftit/actions)\n\nLift any site's design. Paste a URL, get the code.\n\n```bash\nnpx liftit https://stripe.com\n```\n\nLiftit opens a real browser, extracts every computed style, animation, and interaction from a live website, and converts it into code you can use — Tailwind configs, React components, shadcn themes, or CSS variables. Works on any site regardless of framework.\n\n```\nURL\n |\n v\nScanner (Playwright) ──> Analyzer ──> Motion Capture ──> Distiller ──> Exporter\n |                        |            |                  |             |\n DOM + styles             Components   Animations         Compact       tailwind.config.ts\n screenshots (8bp)        CSS arch     Hover states       specs         globals.css\n fonts, images            Patterns     Scroll triggers    from/to       DESIGN.md\n interactions             a11y                            durations     Component.tsx\n```\n\n## Install\n\n```bash\nnpm install -g liftit\nnpx playwright install chromium\n```\n\n## What you can do\n\n### Extract a full design system\n\n```bash\nliftit https://stripe.com\n```\n\nCaptures DOM, computed styles, screenshots at 8 breakpoints, fonts, images, animations, hover states, scroll behaviors, and interactive elements. Produces a complete design system spec.\n\n### Generate a React component from any site\n\n```bash\nliftit component https://linear.app header\nliftit component https://vercel.com hero --name VercelHero\n```\n\nOutputs a working `Header.tsx` + `Header.module.css` with exact styles, hover states, responsive breakpoints, and animations. Paste it into your Next.js project.\n\n### Make your component match a target\n\n```bash\nliftit match https://linear.app header --file ./src/Navbar.module.css\n```\n\nReads your existing CSS, extracts the target, and tells you exactly what to change:\n\n```\n.nav -> root (nav)\n  CHANGE  padding: 0px 24px -> 12px 40px\n  CHANGE  border-radius: 5px -> 10px\n  ADD     backdrop-filter: blur(35px)\n```\n\nWrites a patched CSS file ready to replace yours.\n\n### Export to your framework\n\n```bash\nliftit export tailwind          # tailwind.config.ts\nliftit export shadcn            # globals.css + tailwind.config.ts (light + dark mode)\nliftit export css-variables     # design-tokens.css with :root custom properties\nliftit export design-md         # DESIGN.md for AI coding agents (Stitch-compatible)\nliftit export all               # everything\n```\n\n### Generate a DESIGN.md\n\n```bash\nliftit https://linear.app\nliftit export design-md\n```\n\nProduces a [Stitch-compatible](https://github.com/VoltAgent/awesome-design-md) `DESIGN.md` — the format AI coding agents read to generate on-brand UI. Drop it into any project and tell Cursor, Claude, or Copilot to build matching pages.\n\nUnlike hand-curated DESIGN.md files, Liftit's version includes full animation specs (entrance reveals, scroll-linked transitions, hover effects with exact from/to values and scroll trigger points), interaction patterns, and responsive behavior — all from real computed styles.\n\n### Quick token extraction\n\n```bash\nliftit tokens https://cal.com\n```\n\nColors, typography, spacing, shadows in ~5 seconds. No full pipeline needed.\n\n### Scan with multi-page crawling\n\n```bash\nliftit scan https://stripe.com --crawl\n```\n\nDiscovers and scans up to 20 internal pages. Supports auth cookies and headers for protected sites.\n\n## Claude Code Integration\n\n```bash\nliftit setup\n```\n\nOne command registers the MCP server with Claude Code. Then talk naturally:\n\n- \"Extract the design system from this URL\"\n- \"Generate a React component from Stripe's pricing section\"\n- \"Make my navbar CSS match Linear's header\"\n- \"Give me a Tailwind config from the tokens you extracted\"\n\n16 MCP tools available — extraction, component generation, matching, export (including DESIGN.md), validation, and browser interaction.\n\n## How it works\n\n1. **Scan** — Playwright captures the full DOM with 76 computed CSS properties per element, screenshots at 8 viewports, all fonts/images/SVGs, API calls\n2. **Analyze** — CSS architecture detection (BEM, Tailwind, Modules), component detection via 4 strategies (semantic roles, structural patterns, style clustering, class names)\n3. **Motion Capture** — Scrolls the page recording style changes at every position across 3 viewports. Hovers interactive elements frame by frame. Captures Web Animations API data\n4. **Interactions** — Catalogs navigation, toggles, modals, dropdowns, forms, scroll behaviors\n5. **Scroll-Interaction Mapping** — Connects animations to interactivity. Discovers which scroll animations produce or remove interactive elements\n6. **Distill** — Compresses raw motion data into compact animation specs with from/to values, triggers, durations\n7. **Assets** — Copies fonts, images, SVGs into your project with @font-face CSS generation\n8. **Synthesize** — AI reads all data and produces structured design system JSON + human-readable spec\n9. **Validate** — Pixel-level comparison (pixelmatch, 0.1 threshold) with DOM and interaction verification\n\nSteps 2-4 run in parallel.\n\n## CLI Reference\n\n```\nliftit <url> [output-dir]                         Full extraction pipeline\nliftit component <url> <name> [--output dir]      Generate React component\nliftit match <url> <name> --file <css>            Diff your CSS against target\nliftit export <format> [--input dir]              Export tokens\nliftit tokens <url>                               Quick token extraction\nliftit scan <url> [--crawl]                       Scan only\nliftit validate <url> [--rebuild] [--site]        Pixel validation\nliftit mcp                                        Start MCP server\nliftit setup                                      Register with Claude Code\n```\n\n### Flags\n\n```\n--crawl                Multi-page crawling (up to 20 pages)\n--auth-cookie \"k=v\"    Auth cookie for protected sites\n--auth-header \"K: V\"   Auth header for protected sites\n--output <dir>         Output directory\n--input <dir>          Input directory (for export)\n--name <Name>          Custom component name\n--file <path>          Your CSS file (for match)\n--map \"a=b,c=d\"        Manual class mapping (for match)\n--rebuild-url <url>    Dev server URL for validation\n```\n\n## Output\n\n```\noutput/\n  design-system.json        Structured tokens + components\n  design-system.md          Human-readable rebuild spec\n  scan-result.json          Raw DOM and computed styles\n  analysis-result.json      Component detection, CSS architecture\n  motion-distilled.json     Compact animation specs\n  scroll-interactions.json  Animation-to-interaction links\n  interactions.json         Interactive behavior catalog\n  screenshots/              Reference screenshots (8 breakpoints)\n  assets/                   Downloaded fonts, images, SVGs\n  export/                   Framework configs (Tailwind, shadcn, CSS vars, DESIGN.md)\n  components/               Generated React components\n```\n\n## Configuration\n\nCreate a `.liftitrc.json` in your project root (or home directory) to override defaults:\n\n```json\n{\n  \"browser\": {\n    \"breakpoints\": [375, 768, 1440],\n    \"viewportHeight\": 900\n  },\n  \"scan\": {\n    \"maxElements\": 50000,\n    \"maxPages\": 20\n  },\n  \"validation\": {\n    \"pixelmatchThreshold\": 0.1\n  }\n}\n```\n\nAll settings are optional — only include what you want to override. See `scripts/config.ts` for the full schema.\n\n### Brand Overrides\n\nCreate a `.liftit-brand.json` (or pass `--brand <path>`) to swap extracted colors/fonts with your own:\n\n```json\n{\n  \"colors\": {\n    \"primary\": \"#1a73e8\",\n    \"background\": \"#ffffff\",\n    \"text\": \"#1a1a1a\"\n  },\n  \"fonts\": {\n    \"body\": \"Inter\",\n    \"heading\": \"Inter Display\"\n  },\n  \"content\": {\n    \"Acme Corp\": \"Your Company\"\n  }\n}\n```\n\n## Requirements\n\n- Node.js 18+\n- Playwright (`npx playwright install chromium`)\n\n## License\n\nMIT\n","readmeFilename":"README.md"}