Jun 5, 2026

description

═══════════════════════════════════════════════════════════════
NOTICE — Pro plan launching soon. All users currently get the full
Free tier (30 conversions/month). No credit card required.
═══════════════════════════════════════════════════════════════

Convert UI from any surface — browser, AI editor, terminal, IDE, Figma, Raycast, or Claude Code — into production-ready React/Vue/Svelte code.

Codelifter is a Chrome extension that turns any website element into production-ready React, Vue 3, or Svelte 5 components. Click an element on any page, and get a working component in seconds. No API key required. The same engine is also reachable from your terminal, your AI editor, your IDE, Figma, Raycast, and Claude Code (see "Eight Ways to Use Codelifter" below).

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

WHAT IS CODELIFTER?
A DOM-to-code converter. It captures a page's structure, computed styles, and animations, then generates framework-idiomatic code via our server-side AI (Anthropic Claude + HuggingFace Qwen).

WHO IS IT FOR?
• Frontend developers replicating UI patterns from reference sites
• AI-assisted coders who want component code instead of screenshots
• Freelancers and agencies starting client projects from real working code

WHY NOT JUST A SCREENSHOT?
Screenshots give you a picture. Codelifter gives you the DOM tree, computed styles, CSS animations, and detected JS libraries — with PII automatically masked on-device before transmission.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

HOW IT WORKS

1. Click the Codelifter icon → side panel opens
2. Pick any element on the current page
3. Our server-side AI returns annotated React + Tailwind code
4. Copy or download as ZIP

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

IN-EXTENSION FEATURES (available today)

▸ DOM Extraction — captures HTML structure, computed styles, and layout geometry of the element you select
▸ CSS Animation Support — preserves @keyframes, transitions, and Web Animations API usage
▸ Dynamic Library Detection — recognizes Framer Motion, Motion One, GSAP, AOS, ScrollMagic, Locomotive Scroll, Lenis, Three.js, Spline, Lottie, Rive, Video.js, Plyr, MUX Player, AutoAnimate, React Transition Group. The generated code includes a comment so your AI editor preserves the library.
▸ Multi-Framework Output — React (JSX), Vue 3 (Composition API), Svelte 5 (runes). All styled with Tailwind.
▸ On-Device PII Filtering — email, phone, credit card, Korean RRN removed before any data leaves your browser
▸ On-Device AI Preprocessing — uses Chrome Gemini Nano when available (Chrome 131+)
▸ Live Preview — generated React renders in a sandboxed iframe; if rendering fails, the original screenshot is shown as a fallback (no infinite "rendering" state)
▸ Side Panel UI — framework switcher, history of your conversions, settings

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

EIGHT WAYS TO USE CODELIFTER (all Live)

The same DOM-to-code engine is reachable from eight separate surfaces. Surface 1 is this Browser Extension; surfaces 2-8 are optional companion tools that install independently and never extend this extension's permissions. All authenticate with a single local-only pairing token (crypto.timingSafeEqual, 3-strike rate limit) bound to 127.0.0.1.

▸ 1/8 — Browser Extension (this listing) — click an element, get a component
▸ 2/8 — MCP Server — `codelifter mcp-stdio` for Claude Code, Cursor, Windsurf, Zed, VS Code Copilot
▸ 3/8 — CLI — `npx @codelifter/cli` for terminals, CI pipelines, GitHub Actions
▸ 4/8 — Node.js SDK — `@codelifter/sdk` to embed Codelifter in your own tool
▸ 5/8 — Claude Code Skill — `/codelifter` slash command in Claude Code
▸ 6/8 — VSCode / Cursor Extension — `Codelifter: Extract from URL` in the command palette
▸ 7/8 — Figma Plugin — lift a live URL into a Figma frame
▸ 8/8 — Raycast Extension — Cmd+Space, type `lift <url>`, React in clipboard

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PRO (COMING SOON — not yet available):
Additional extraction quality features are planned for the Pro tier. None of these features are active in the current build — they will ship together with Pro launch.

PLANS
• Free — 30 conversions/month, available now (no credit card)
• Pro — $9/month, 200 conversions/month, launching soon
• Lifetime — $99 one-time, 500 conversions/month, launching soon
Payments processed by Lemon Squeezy (Merchant of Record — handles tax, refunds, and PCI compliance).

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

LIMITATIONS
Canvas/WebGL pages (Figma, Google Maps), complex D3.js charts, drag-and-drop interactions, cross-origin iframes, and runtime JS animations (GSAP, Framer Motion) are not fully reproduced — but detected libraries are flagged in the generated code.

PRIVACY
The DOM and CSS of the element you convert is sent to our AI server via a Vercel proxy, used only for code generation, never sold, and not retained after the response is returned. The extension has NO background data collection and only acts on the tab when you click the toolbar icon. Anonymous product telemetry (PostHog + Sentry) is opt-in via a consent modal on first run; PII is filtered on-device before any transmission, and you can revoke consent anytime in Settings → Privacy. Full policy: https://codelifter.vercel.app/privacy

REQUIREMENTS
Chrome 114+. No API key.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

SUPPORT
Email: [email protected]

═══════════════════════════════════════════════════════════════
Free 30 conversions/month — no credit card. 
Pro ($9/mo · 200 conv) and Lifetime ($99 one-time · 500 conv/mo) available now 
═══════════════════════════════════════════════════════════════

Convert UI from any surface — browser, AI editor, terminal, IDE, Figma, Raycast, or Claude Code — into production-ready React/Vue/Svelte code.

Codelifter is a Chrome extension that turns any website element into production-ready React, Vue 3, or Svelte 5 components. Click an element on any page, and get a working component in seconds. No API key required. The same engine is also reachable from your terminal, your AI editor, your IDE, Figma, Raycast, and Claude Code (see "Eight Ways to Use Codelifter" below).

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

WHAT IS CODELIFTER?
A DOM-to-code converter. It captures a page's structure, computed styles, and animations, then generates framework-idiomatic code via our server-side AI (Anthropic Claude + HuggingFace Qwen).

WHO IS IT FOR?
• Frontend developers replicating UI patterns from reference sites
• AI-assisted coders who want component code instead of screenshots
• Freelancers and agencies starting client projects from real working code

WHY NOT JUST A SCREENSHOT?
Screenshots give you a picture. Codelifter gives you the DOM tree, computed styles, CSS animations, and detected JS libraries — with PII automatically masked on-device before transmission.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

HOW IT WORKS

1. Install the extension — a welcome page opens automatically with a 4-step visual guide
2. Click the Codelifter icon → side panel opens
3. Pick any element on the current page
4. Our server-side AI returns annotated React + Tailwind code
5. Copy or download as ZIP

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

IN-EXTENSION FEATURES (available today)

▸ Guided First-Use — post-install welcome page (4-step visual guide) + "NEW" toolbar badge that clears on first side-panel open + inline activation hint on the idle screen
▸ DOM Extraction — captures HTML structure, computed styles, and layout geometry of the element you select
▸ CSS Animation Support — preserves @keyframes, transitions, and Web Animations API usage
▸ Dynamic Library Detection — recognizes Framer Motion, Motion One, GSAP, AOS, ScrollMagic, Locomotive Scroll, Lenis, Three.js, Spline, Lottie, Rive, Video.js, Plyr, MUX Player, AutoAnimate, React Transition Group. The generated code includes a comment so your AI editor preserves the library.
▸ Multi-Framework Output — React (JSX), Vue 3 (Composition API), Svelte 5 (runes). All styled with Tailwind.
▸ On-Device PII Filtering — email, phone, credit card, Korean RRN removed before any data leaves your browser
▸ On-Device AI Preprocessing — uses Chrome Gemini Nano when available (Chrome 131+)
▸ Live Preview — generated React renders in a sandboxed iframe; if rendering fails, the original screenshot is shown as a fallback (no infinite "rendering" state)
▸ Side Panel UI — framework switcher, history of your conversions, settings
▸ Large-Page Safety — large DOM is auto-compressed in four stages, with a clear "select a smaller area" message instead of a generic error when a single selection still exceeds the payload budget

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

EIGHT WAYS TO USE CODELIFTER (all Live)

The same DOM-to-code engine is reachable from eight separate surfaces. Surface 1 is this Browser Extension; surfaces 2-8 are optional companion tools that install independently and never extend this extension's permissions. All authenticate with a single local-only pairing token (crypto.timingSafeEqual, 3-strike rate limit) bound to 127.0.0.1.

▸ 1/8 — Browser Extension (this listing) — click an element, get a component
▸ 2/8 — MCP Server — `codelifter mcp-stdio` for Claude Code, Cursor, Windsurf, Zed, VS Code Copilot
▸ 3/8 — CLI — `npx @codelifter/cli` for terminals, CI pipelines, GitHub Actions
▸ 4/8 — Node.js SDK — `@codelifter/sdk` to embed Codelifter in your own tool
▸ 5/8 — Claude Code Skill — `/codelifter` slash command in Claude Code
▸ 6/8 — VSCode / Cursor Extension — `Codelifter: Extract from URL` in the command palette
▸ 7/8 — Figma Plugin — lift a live URL into a Figma frame
▸ 8/8 — Raycast Extension — Cmd+Space, type `lift <url>`, React in clipboard

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PLANS (all available now)
• Free — 30 conversions/month (no credit card)
• Pro — $9/month, 200 conversions/month
• Lifetime — $99 one-time, 500 conversions/month
Payments processed by Lemon Squeezy (Merchant of Record — handles tax, refunds, and PCI compliance). The extension never receives card data.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

LIMITATIONS
Canvas/WebGL pages (Figma, Google Maps), complex D3.js charts, drag-and-drop interactions, cross-origin iframes, and runtime JS animations (GSAP, Framer Motion) are not fully reproduced — but detected libraries are flagged in the generated code.

PRIVACY
The DOM and CSS of the element you convert is sent to our AI server via a Vercel proxy, used only for code generation, never sold, and not retained after the response is returned. The extension has NO background data collection and only acts on the tab when you click the toolbar icon. Anonymous product telemetry (PostHog + Sentry) is opt-in via a consent modal on first run; PII is filtered on-device before any transmission, and you can revoke consent anytime in Settings → Privacy. Full policy: https://codelifter.vercel.app/privacy

REQUIREMENTS
Chrome 114+. No API key.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

SUPPORT
Email: [email protected]

Jun 5, 2026

permissions

activeTab, scripting, storage, tabs, offscreen, sidePanel, notifications

activeTab, scripting, storage, tabs, offscreen, sidePanel, notifications, alarms

May 23, 2026

description

═══════════════════════════════════════════════════════════════
NOTICE — Pro plan launching soon. All users currently get the full
Free tier (20 conversions/month). No credit card required.
═══════════════════════════════════════════════════════════════

Convert any web page element into clean React + Tailwind CSS code.

Codelifter is a Chrome extension that turns any website element into production-ready React, Vue 3, or Svelte 5 components. Click an element on any page, and get a working component in seconds. No API key required.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

WHAT IS CODELIFTER?
A DOM-to-code converter. It captures a page's structure, computed styles, and animations, then generates framework-idiomatic code via our server-side AI (Anthropic Claude + HuggingFace Qwen).

WHO IS IT FOR?
• Frontend developers replicating UI patterns from reference sites
• AI-assisted coders who want component code instead of screenshots
• Freelancers and agencies starting client projects from real working code

WHY NOT JUST A SCREENSHOT?
Screenshots give you a picture. Codelifter gives you the DOM tree, computed styles, CSS animations, and detected JS libraries — with PII automatically masked on-device before transmission.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

HOW IT WORKS

1. Click the Codelifter icon → side panel opens
2. Pick any element on the current page
3. Our server-side AI returns annotated React + Tailwind code
4. Copy or download as ZIP

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

IN-EXTENSION FEATURES (available today)

▸ DOM Extraction — captures HTML structure, computed styles, and layout geometry of the element you select
▸ CSS Animation Support — preserves @keyframes, transitions, and Web Animations API usage
▸ Dynamic Library Detection — recognizes Framer Motion, Motion One, GSAP, AOS, ScrollMagic, Locomotive Scroll, Lenis, Three.js, Spline, Lottie, Rive, Video.js, Plyr, MUX Player, AutoAnimate, React Transition Group. The generated code includes a comment so your AI editor preserves the library.
▸ Multi-Framework Output — React (JSX), Vue 3 (Composition API), Svelte 5 (runes). All styled with Tailwind.
▸ On-Device PII Filtering — email, phone, credit card, Korean RRN removed before any data leaves your browser
▸ On-Device AI Preprocessing — uses Chrome Gemini Nano when available (Chrome 131+)
▸ Side Panel UI — framework switcher, history of your conversions, settings

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

OPTIONAL DEVELOPER INTEGRATIONS (separate install required)

These are optional companion tools for users who want to connect Codelifter to an AI coding editor. They are NOT part of the extension itself — install separately from npm/GitHub:

▸ Codelifter CLI — `npx codelifter extract` for CI and GitHub Actions
▸ MCP Server — hosted by the CLI on ws://127.0.0.1:12307 for Cursor, Windsurf, Zed, VS Code Copilot
▸ Claude Code Skill — `/codelifter` command in Claude Code
▸ Node.js SDK — `@codelifter/sdk`

All companion tools are authenticated with a local-only pairing token (crypto.timingSafeEqual, 3-strike rate limit) and bind to 127.0.0.1 only.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PRO (COMING SOON — not yet available):
Additional extraction quality features are planned for the Pro tier. None of these features are active in the current build — they will ship together with Pro launch.

PLANS
• Free — 20 conversions/month, available now (no credit card)
• Pro — $14/month, 70 conversions/month, launching soon

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

LIMITATIONS
Canvas/WebGL pages (Figma, Google Maps), complex D3.js charts, drag-and-drop interactions, cross-origin iframes, and runtime JS animations (GSAP, Framer Motion) are not fully reproduced — but detected libraries are flagged in the generated code.

PRIVACY
The DOM and CSS of the element you convert is sent to our AI server via a Vercel proxy, used only for code generation, never sold, and not retained after the response is returned. The extension has NO background data collection and only acts on the tab when you click the toolbar icon. Full policy: https://codelifter.vercel.app/privacy

REQUIREMENTS
Chrome 114+. No API key.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

SUPPORT
Email: [email protected]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━ 한국어 (Korean) ━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

═══════════════════════════════════════════════════════════════
안내 — Pro 요금제는 곧 출시됩니다. 현재 모든 사용자는 Free(월 20회)
전체 기능을 사용하실 수 있습니다. 신용카드 불필요.
═══════════════════════════════════════════════════════════════

웹 페이지의 어떤 요소든 클릭 한 번으로 React + Tailwind CSS 코드로 변환.

Codelifter는 DOM→코드 변환 Chrome 확장입니다. 웹사이트의 아무 요소나 선택하면 프로덕션 수준의 React, Vue 3, Svelte 5 컴포넌트가 몇 초 안에 생성됩니다. API 키 불필요.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Codelifter가 뭔가요?
DOM 구조, computed 스타일, 애니메이션, 검출된 JS 라이브러리를 서버 사이드 AI(Anthropic Claude + HuggingFace Qwen)로 분석하여 프레임워크에 맞는 코드로 생성하는 DOM→코드 변환 도구입니다.

누구에게 유용한가요?
• 참고 사이트의 UI 패턴을 빠르게 복제하려는 프론트엔드 개발자
• 스크린샷이 아닌 진짜 컴포넌트 코드가 필요한 AI 에디터 사용자
• 실제 작동하는 코드로 클라이언트 프로젝트를 시작하려는 프리랜서·에이전시

스크린샷 툴과 뭐가 다른가요?
스크린샷은 이미지만 주지만, Codelifter는 DOM 트리, computed 스타일, CSS 애니메이션, 검출된 JS 라이브러리를 함께 제공합니다. PII는 전송 전 기기 내에서 자동 마스킹됩니다.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

사용 방법

1. Codelifter 아이콘 클릭 → 사이드 패널 열림
2. 현재 페이지에서 요소 선택
3. 서버 AI가 주석 달린 React + Tailwind 코드 생성
4. 복사 또는 ZIP 다운로드

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

확장 내 기능 (현재 제공)

▸ DOM 추출 — 선택 요소의 HTML 구조, computed 스타일, 레이아웃 수집
▸ CSS 애니메이션 지원 — @keyframes, 트랜지션, Web Animations API 보존
▸ 동적 라이브러리 검출 — Framer Motion, Motion One, GSAP, AOS, ScrollMagic, Locomotive Scroll, Lenis, Three.js, Spline, Lottie, Rive, Video.js, Plyr, MUX Player, AutoAnimate, React Transition Group. 생성 코드에 라이브러리 주석 포함
▸ 멀티 프레임워크 — React (JSX), Vue 3 (Composition API), Svelte 5 (룬). 모두 Tailwind
▸ 온디바이스 PII 필터 — 이메일·전화·카드·주민번호가 브라우저를 벗어나기 전 자동 제거
▸ 온디바이스 AI 전처리 — Chrome Gemini Nano 사용 가능 시 (Chrome 131+)
▸ 사이드 패널 UI — 프레임워크 스위처, 변환 히스토리, 설정

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

선택 사항 개발자 통합 (별도 설치 필요)

AI 코딩 에디터와 Codelifter를 연결하고 싶은 사용자를 위한 선택형 동반 도구입니다. 확장 자체에 포함되지 않으며 npm/GitHub 에서 별도 설치해야 합니다.

▸ Codelifter CLI — CI / GitHub Actions 용 `npx codelifter extract`
▸ MCP 서버 — Cursor, Windsurf, Zed, VS Code Copilot 용 CLI 호스팅 ws://127.0.0.1:12307
▸ Claude Code Skill — Claude Code 의 `/codelifter` 커맨드
▸ Node.js SDK — `@codelifter/sdk`

모든 동반 도구는 로컬 전용 페어링 토큰(crypto.timingSafeEqual, 3-strike rate limit) 으로 인증되며 127.0.0.1 전용 바인드입니다.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Pro (곧 출시 — 현재 비활성): 추가적인 추출 품질 기능이 Pro 티어에 예정되어 있습니다. 현재 빌드에서는 어느 기능도 활성화되어 있지 않으며, Pro 출시와 함께 제공될 예정입니다.

요금제
• Free — 월 20회, 지금 이용 가능 (신용카드 불필요)
• Pro — $14/월, 월 70회, 곧 출시

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

제한 사항
Canvas/WebGL 페이지(Figma, Google Maps), 복잡한 D3.js 차트, 드래그앤드롭, cross-origin iframe, 런타임 JS 애니메이션(GSAP, Framer Motion)은 완전 재현되지 않습니다. 다만 검출된 라이브러리는 생성 코드에 주석으로 표시됩니다.

개인정보
변환을 요청한 요소의 DOM/CSS는 Vercel 프록시를 통해 AI 서버에 전송되어 코드 생성에만 사용되며, 응답 반환 후 서버에 저장되지 않습니다. 확장은 백그라운드 데이터 수집을 하지 않고, 툴바 아이콘을 클릭할 때만 해당 탭에서 동작합니다. 전체 정책: https://codelifter.vercel.app/privacy

요구사항
Chrome 114+. API 키 불필요.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

문의
이메일: [email protected]

═══════════════════════════════════════════════════════════════
NOTICE — Pro plan launching soon. All users currently get the full
Free tier (30 conversions/month). No credit card required.
═══════════════════════════════════════════════════════════════

Convert UI from any surface — browser, AI editor, terminal, IDE, Figma, Raycast, or Claude Code — into production-ready React/Vue/Svelte code.

Codelifter is a Chrome extension that turns any website element into production-ready React, Vue 3, or Svelte 5 components. Click an element on any page, and get a working component in seconds. No API key required. The same engine is also reachable from your terminal, your AI editor, your IDE, Figma, Raycast, and Claude Code (see "Eight Ways to Use Codelifter" below).

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

WHAT IS CODELIFTER?
A DOM-to-code converter. It captures a page's structure, computed styles, and animations, then generates framework-idiomatic code via our server-side AI (Anthropic Claude + HuggingFace Qwen).

WHO IS IT FOR?
• Frontend developers replicating UI patterns from reference sites
• AI-assisted coders who want component code instead of screenshots
• Freelancers and agencies starting client projects from real working code

WHY NOT JUST A SCREENSHOT?
Screenshots give you a picture. Codelifter gives you the DOM tree, computed styles, CSS animations, and detected JS libraries — with PII automatically masked on-device before transmission.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

HOW IT WORKS

1. Click the Codelifter icon → side panel opens
2. Pick any element on the current page
3. Our server-side AI returns annotated React + Tailwind code
4. Copy or download as ZIP

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

IN-EXTENSION FEATURES (available today)

▸ DOM Extraction — captures HTML structure, computed styles, and layout geometry of the element you select
▸ CSS Animation Support — preserves @keyframes, transitions, and Web Animations API usage
▸ Dynamic Library Detection — recognizes Framer Motion, Motion One, GSAP, AOS, ScrollMagic, Locomotive Scroll, Lenis, Three.js, Spline, Lottie, Rive, Video.js, Plyr, MUX Player, AutoAnimate, React Transition Group. The generated code includes a comment so your AI editor preserves the library.
▸ Multi-Framework Output — React (JSX), Vue 3 (Composition API), Svelte 5 (runes). All styled with Tailwind.
▸ On-Device PII Filtering — email, phone, credit card, Korean RRN removed before any data leaves your browser
▸ On-Device AI Preprocessing — uses Chrome Gemini Nano when available (Chrome 131+)
▸ Live Preview — generated React renders in a sandboxed iframe; if rendering fails, the original screenshot is shown as a fallback (no infinite "rendering" state)
▸ Side Panel UI — framework switcher, history of your conversions, settings

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

EIGHT WAYS TO USE CODELIFTER (all Live)

The same DOM-to-code engine is reachable from eight separate surfaces. Surface 1 is this Browser Extension; surfaces 2-8 are optional companion tools that install independently and never extend this extension's permissions. All authenticate with a single local-only pairing token (crypto.timingSafeEqual, 3-strike rate limit) bound to 127.0.0.1.

▸ 1/8 — Browser Extension (this listing) — click an element, get a component
▸ 2/8 — MCP Server — `codelifter mcp-stdio` for Claude Code, Cursor, Windsurf, Zed, VS Code Copilot
▸ 3/8 — CLI — `npx @codelifter/cli` for terminals, CI pipelines, GitHub Actions
▸ 4/8 — Node.js SDK — `@codelifter/sdk` to embed Codelifter in your own tool
▸ 5/8 — Claude Code Skill — `/codelifter` slash command in Claude Code
▸ 6/8 — VSCode / Cursor Extension — `Codelifter: Extract from URL` in the command palette
▸ 7/8 — Figma Plugin — lift a live URL into a Figma frame
▸ 8/8 — Raycast Extension — Cmd+Space, type `lift <url>`, React in clipboard

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PRO (COMING SOON — not yet available):
Additional extraction quality features are planned for the Pro tier. None of these features are active in the current build — they will ship together with Pro launch.

PLANS
• Free — 30 conversions/month, available now (no credit card)
• Pro — $9/month, 200 conversions/month, launching soon
• Lifetime — $99 one-time, 500 conversions/month, launching soon
Payments processed by Lemon Squeezy (Merchant of Record — handles tax, refunds, and PCI compliance).

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

LIMITATIONS
Canvas/WebGL pages (Figma, Google Maps), complex D3.js charts, drag-and-drop interactions, cross-origin iframes, and runtime JS animations (GSAP, Framer Motion) are not fully reproduced — but detected libraries are flagged in the generated code.

PRIVACY
The DOM and CSS of the element you convert is sent to our AI server via a Vercel proxy, used only for code generation, never sold, and not retained after the response is returned. The extension has NO background data collection and only acts on the tab when you click the toolbar icon. Anonymous product telemetry (PostHog + Sentry) is opt-in via a consent modal on first run; PII is filtered on-device before any transmission, and you can revoke consent anytime in Settings → Privacy. Full policy: https://codelifter.vercel.app/privacy

REQUIREMENTS
Chrome 114+. No API key.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

SUPPORT
Email: [email protected]

May 23, 2026

short_description

Convert any web page to React/Vue/Svelte + Tailwind in one click. 20 free conversions/month. Pro plan launching soon.

Convert any web page to React/Vue/Svelte + Tailwind in one click. 30 free conversions/month. Pro plan launching soon.

May 23, 2026

host_permissions

https://codelifter.vercel.app/*

https://codelifter.vercel.app/*, https://us.i.posthog.com/*, https://*.ingest.de.sentry.io/*

Apr 28, 2026

description

NOTICE — Pro plan launching soon.
Currently all users get the full Free tier (20 conversions/month). Pro features
listed below will become available once our payment processing is activated.

────────────────────────────────

Convert any web page element into clean React + Tailwind CSS code — instantly.

Codelifter lets you click any element on any website and get production-ready
React, Vue 3, or Svelte 5 components in seconds. Perfect for developers who
want to replicate designs, learn from real-world UI patterns, or accelerate
their front-end workflow.

HOW IT WORKS

1. Click the Codelifter icon to open the side panel
2. Use the element picker to select any part of a page — a button, a card,
a nav bar, or the entire page
3. AI processes the element on our server — no API key needed
4. Get clean, annotated code in seconds
5. Copy to clipboard or download as ZIP

KEY FEATURES

▸ Smart DOM Extraction — captures the full element tree with computed styles,
pseudo-elements, and layout data. Filters out browser defaults automatically.
▸ CSS Animation Support — detects @keyframes, transitions, and Web Animations
API effects. Recreates them faithfully in the generated code.
▸ Multi-Framework Output — React (JSX), Vue 3 (SFC with Composition API), or
Svelte 5 (with runes). All with Tailwind CSS utility classes.
▸ Privacy-First Design — PII filtering runs on-device before any data leaves
your browser. Emails, phone numbers, credit card numbers, and Korean RRNs
are automatically masked.
▸ On-Device AI Preprocessing — uses Chrome's built-in Gemini Nano or Edge's
Phi-4-mini for intelligent DOM classification, reducing cloud API tokens by
40–60%. Preprocessed data never leaves your device.
▸ Powered by Claude + Qwen — server-side uses Anthropic Claude Sonnet for
code generation and HuggingFace Qwen2.5-Coder for preprocessing. No API
key required.
▸ Intelligent DOM Compression — DOM snapshots are compressed before sending
to the AI, removing empty wrappers, tracking scripts, and default styles.
▸ AI Response Caching — repeated conversions skip the API call via local
IndexedDB cache (24-hour TTL).
▸ Inspiration Library — save pages for later conversion with one click.

PRO FEATURES (COMING SOON)

Join the waitlist at https://codelifter.vercel.app.
Planned capabilities:
• CDP Mode — Chrome DevTools Protocol for pixel-perfect style extraction
• Design Token Extraction — automatic color/spacing/typography reverse-engineering
• Self-Improving Loop — pixel-diff (pixelmatch + SSIM) to iteratively fix output
• Responsive Breakpoints — 7-viewport testing via CDP Emulation
• Behavior Fingerprint — captures scroll/hover/periodic animations
• Visual Component Detection — auto-identifies repeating UI patterns

WHAT WORKS BEST

Codelifter is built for DOM-heavy static layouts:
• Marketing and landing pages
• Dashboard UIs and admin panels
• Blog and documentation sites
• E-commerce product pages
• Pages built with React, Vue, Angular, Svelte, Bootstrap, jQuery, or Tailwind

The source framework does not matter — Codelifter analyzes the DOM and
converts it into React + Tailwind regardless of the original stack.

LIMITATIONS

• Canvas / WebGL pages (Figma, Google Maps, browser games) cannot be reproduced
• Complex D3.js SVG charts may not reproduce faithfully
• Drag-and-drop / rich-text editors capture static appearance only
• Third-party iframes are inaccessible
• Login-walled content works only if you are already signed in
• JS-driven animation libraries (GSAP, etc.) are not reproduced

PRIVACY & DATA HANDLING

This extension transmits DOM structure and CSS data of the page you request
to convert to our AI server via our Vercel proxy. The transmitted data is
used solely for code generation and is not stored or shared.

• PII is automatically detected and removed before transmission
• No cookies, no tracking, no analytics
• On-device AI option sends zero data externally
• DOM data is processed transiently — never stored on our servers
• Data is never sold to or shared with third parties

The use of information received from Google APIs complies with the Chrome
Web Store User Data Policy, including the Limited Use requirements.

Full privacy policy: https://codelifter.vercel.app/privacy

PRICING

Free: 20 conversions/month — available now (no credit card required)
Pro: $14/month — launching soon (70 conversions/month, CDP mode, self-
improving loop, design token extraction)

REQUIREMENTS

• Chrome 114 or later (Gemini Nano requires 131+)
• No API key needed — all processing on our server
• Free plan available immediately

SUPPORT

Questions or feedback? [email protected]

```

```
안내 — Pro 요금제는 곧 출시됩니다.
현재 모든 사용자는 Free 플랜(월 20회 변환)의 모든 기능을 사용하실 수
있습니다. 아래 Pro 기능은 결제 시스템 출시 후 이용 가능해집니다.

────────────────────────────────

웹 페이지의 어떤 요소든 클릭 한 번으로 깔끔한 React + Tailwind CSS
코드로 변환하세요.

Codelifter 는 웹사이트의 아무 요소나 클릭하면 프로덕션 수준의 React,
Vue 3, Svelte 5 컴포넌트를 몇 초 만에 생성합니다. 디자인을 참고하거나,
실제 UI 패턴을 학습하거나, 프론트엔드 작업을 가속화하고 싶은 개발자에게
딱 맞습니다.

사용 방법

1. Codelifter 아이콘을 클릭하여 사이드 패널 열기
2. 요소 선택기로 원하는 부분 클릭 — 버튼, 카드, 내비게이션, 전체 페이지
3. AI 가 서버에서 처리 — API 키 불필요
4. 깔끔한 코드를 몇 초 안에 받기
5. 클립보드 복사 또는 ZIP 다운로드

주요 기능

▸ 스마트 DOM 추출 — 전체 요소 트리를 computed 스타일, 의사 요소, 레이아웃
데이터와 함께 캡처. 브라우저 기본값 자동 필터링.
▸ CSS 애니메이션 지원 — @keyframes, 트랜지션, Web Animations API 효과 감지.
▸ 멀티 프레임워크 출력 — React (JSX), Vue 3 (SFC + Composition API),
Svelte 5 (룬). 모두 Tailwind 유틸리티 클래스.
▸ 프라이버시 우선 설계 — 이메일, 전화번호, 신용카드, 주민등록번호는 전송
전에 기기 내에서 자동 감지·제거.
▸ 온디바이스 AI 전처리 — Chrome Gemini Nano 또는 Edge Phi-4-mini 로 DOM
지능 분류, 클라우드 API 토큰 40~60% 절감.
▸ Claude + Qwen 기반 — 서버 사이드는 Anthropic Claude Sonnet + HuggingFace
Qwen2.5-Coder. API 키 불필요.
▸ 지능형 DOM 압축 — 빈 래퍼, 트래킹 스크립트, 기본 스타일 제거 후 AI 전송.
▸ AI 응답 캐싱 — 로컬 IndexedDB 캐시 (24시간 TTL) 로 중복 호출 방지.
▸ 영감 라이브러리 — 페이지 저장 후 나중에 변환.

Pro 기능 (곧 출시)

https://codelifter.vercel.app 에서 출시 알림 신청.
예정된 기능:
• CDP 모드 — Chrome DevTools Protocol 로 픽셀 단위 정확한 스타일 추출
• 디자인 토큰 추출 — 색상·간격·타이포그래피 자동 역공학
• 자가 개선 루프 — pixelmatch + SSIM 기반 픽셀 단위 반복 수정
• 반응형 브레이크포인트 — 7개 뷰포트 자동 테스트
• 행동 핑거프린트 — 스크롤·hover·주기 애니메이션 캡처
• 시각적 컴포넌트 감지 — 반복되는 UI 패턴 자동 식별

가장 잘 작동하는 페이지

DOM 구조가 풍부한 정적 레이아웃:
• 마케팅·랜딩 페이지
• 대시보드 UI, 관리자 패널
• 블로그·문서 사이트
• 이커머스 상품 페이지
• React, Vue, Angular, Svelte, Bootstrap, jQuery, Tailwind 등으로 만든 페이지

원본 프레임워크는 중요하지 않습니다 — Codelifter 는 DOM 을 분석하여 원본
기술 스택과 무관하게 React + Tailwind 로 변환합니다.

제한 사항

• Canvas / WebGL 페이지(Figma, Google Maps, 브라우저 게임)는 재현 불가
• 복잡한 D3.js SVG 시각화는 충실히 재현되지 않을 수 있음
• 드래그앤드롭·리치 텍스트 에디터는 정적 외형만 캡처
• 제3자 iframe 내부는 접근 불가
• 로그인 벽 뒤 콘텐츠는 로그인된 상태에서만 정상 작동
• GSAP 등 JS 기반 애니메이션 라이브러리는 재현되지 않음

개인정보 및 데이터 처리

이 확장은 변환을 요청한 페이지의 DOM 구조와 CSS 데이터를 Vercel 프록시를
통해 AI 서버로 전송합니다. 전송된 데이터는 코드 생성에만 사용되며 저장
또는 공유되지 않습니다.

• 개인식별정보(PII)는 전송 전 자동 감지·제거
• 쿠키·트래킹·분석 도구 없음
• 온디바이스 AI 옵션은 외부 데이터 전송 없음
• DOM 데이터는 일시적으로 처리 — 서버 영구 저장 없음
• 데이터는 제3자에게 판매·공유되지 않음

Google API 로부터 받은 정보의 사용은 Limited Use 제한을 포함한 Chrome Web
Store 사용자 데이터 정책을 준수합니다.

개인정보처리방침: https://codelifter.vercel.app/privacy

요금제

Free: 월 20회 변환 — 현재 이용 가능 (신용카드 불필요)
Pro: $14/월 — 곧 출시 (월 70회, CDP 모드, 자가 개선 루프, 디자인 토큰 추출)

요구사항

• Chrome 114 이상 (Gemini Nano 는 131+)
• API 키 불필요 — 서버에서 처리
• Free 플랜 즉시 이용 가능

문의

질문이나 피드백이 있으신가요? [email protected]

═══════════════════════════════════════════════════════════════
NOTICE — Pro plan launching soon. All users currently get the full
Free tier (20 conversions/month). No credit card required.
═══════════════════════════════════════════════════════════════

Convert any web page element into clean React + Tailwind CSS code.

Codelifter is a Chrome extension that turns any website element into production-ready React, Vue 3, or Svelte 5 components. Click an element on any page, and get a working component in seconds. No API key required.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

WHAT IS CODELIFTER?
A DOM-to-code converter. It captures a page's structure, computed styles, and animations, then generates framework-idiomatic code via our server-side AI (Anthropic Claude + HuggingFace Qwen).

WHO IS IT FOR?
• Frontend developers replicating UI patterns from reference sites
• AI-assisted coders who want component code instead of screenshots
• Freelancers and agencies starting client projects from real working code

WHY NOT JUST A SCREENSHOT?
Screenshots give you a picture. Codelifter gives you the DOM tree, computed styles, CSS animations, and detected JS libraries — with PII automatically masked on-device before transmission.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

HOW IT WORKS

1. Click the Codelifter icon → side panel opens
2. Pick any element on the current page
3. Our server-side AI returns annotated React + Tailwind code
4. Copy or download as ZIP

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

IN-EXTENSION FEATURES (available today)

▸ DOM Extraction — captures HTML structure, computed styles, and layout geometry of the element you select
▸ CSS Animation Support — preserves @keyframes, transitions, and Web Animations API usage
▸ Dynamic Library Detection — recognizes Framer Motion, Motion One, GSAP, AOS, ScrollMagic, Locomotive Scroll, Lenis, Three.js, Spline, Lottie, Rive, Video.js, Plyr, MUX Player, AutoAnimate, React Transition Group. The generated code includes a comment so your AI editor preserves the library.
▸ Multi-Framework Output — React (JSX), Vue 3 (Composition API), Svelte 5 (runes). All styled with Tailwind.
▸ On-Device PII Filtering — email, phone, credit card, Korean RRN removed before any data leaves your browser
▸ On-Device AI Preprocessing — uses Chrome Gemini Nano when available (Chrome 131+)
▸ Side Panel UI — framework switcher, history of your conversions, settings

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

OPTIONAL DEVELOPER INTEGRATIONS (separate install required)

These are optional companion tools for users who want to connect Codelifter to an AI coding editor. They are NOT part of the extension itself — install separately from npm/GitHub:

▸ Codelifter CLI — `npx codelifter extract` for CI and GitHub Actions
▸ MCP Server — hosted by the CLI on ws://127.0.0.1:12307 for Cursor, Windsurf, Zed, VS Code Copilot
▸ Claude Code Skill — `/codelifter` command in Claude Code
▸ Node.js SDK — `@codelifter/sdk`

All companion tools are authenticated with a local-only pairing token (crypto.timingSafeEqual, 3-strike rate limit) and bind to 127.0.0.1 only.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PRO (COMING SOON — not yet available):
Additional extraction quality features are planned for the Pro tier. None of these features are active in the current build — they will ship together with Pro launch.

PLANS
• Free — 20 conversions/month, available now (no credit card)
• Pro — $14/month, 70 conversions/month, launching soon

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

LIMITATIONS
Canvas/WebGL pages (Figma, Google Maps), complex D3.js charts, drag-and-drop interactions, cross-origin iframes, and runtime JS animations (GSAP, Framer Motion) are not fully reproduced — but detected libraries are flagged in the generated code.

PRIVACY
The DOM and CSS of the element you convert is sent to our AI server via a Vercel proxy, used only for code generation, never sold, and not retained after the response is returned. The extension has NO background data collection and only acts on the tab when you click the toolbar icon. Full policy: https://codelifter.vercel.app/privacy

REQUIREMENTS
Chrome 114+. No API key.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

SUPPORT
Email: [email protected]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━ 한국어 (Korean) ━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

═══════════════════════════════════════════════════════════════
안내 — Pro 요금제는 곧 출시됩니다. 현재 모든 사용자는 Free(월 20회)
전체 기능을 사용하실 수 있습니다. 신용카드 불필요.
═══════════════════════════════════════════════════════════════

웹 페이지의 어떤 요소든 클릭 한 번으로 React + Tailwind CSS 코드로 변환.

Codelifter는 DOM→코드 변환 Chrome 확장입니다. 웹사이트의 아무 요소나 선택하면 프로덕션 수준의 React, Vue 3, Svelte 5 컴포넌트가 몇 초 안에 생성됩니다. API 키 불필요.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Codelifter가 뭔가요?
DOM 구조, computed 스타일, 애니메이션, 검출된 JS 라이브러리를 서버 사이드 AI(Anthropic Claude + HuggingFace Qwen)로 분석하여 프레임워크에 맞는 코드로 생성하는 DOM→코드 변환 도구입니다.

누구에게 유용한가요?
• 참고 사이트의 UI 패턴을 빠르게 복제하려는 프론트엔드 개발자
• 스크린샷이 아닌 진짜 컴포넌트 코드가 필요한 AI 에디터 사용자
• 실제 작동하는 코드로 클라이언트 프로젝트를 시작하려는 프리랜서·에이전시

스크린샷 툴과 뭐가 다른가요?
스크린샷은 이미지만 주지만, Codelifter는 DOM 트리, computed 스타일, CSS 애니메이션, 검출된 JS 라이브러리를 함께 제공합니다. PII는 전송 전 기기 내에서 자동 마스킹됩니다.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

사용 방법

1. Codelifter 아이콘 클릭 → 사이드 패널 열림
2. 현재 페이지에서 요소 선택
3. 서버 AI가 주석 달린 React + Tailwind 코드 생성
4. 복사 또는 ZIP 다운로드

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

확장 내 기능 (현재 제공)

▸ DOM 추출 — 선택 요소의 HTML 구조, computed 스타일, 레이아웃 수집
▸ CSS 애니메이션 지원 — @keyframes, 트랜지션, Web Animations API 보존
▸ 동적 라이브러리 검출 — Framer Motion, Motion One, GSAP, AOS, ScrollMagic, Locomotive Scroll, Lenis, Three.js, Spline, Lottie, Rive, Video.js, Plyr, MUX Player, AutoAnimate, React Transition Group. 생성 코드에 라이브러리 주석 포함
▸ 멀티 프레임워크 — React (JSX), Vue 3 (Composition API), Svelte 5 (룬). 모두 Tailwind
▸ 온디바이스 PII 필터 — 이메일·전화·카드·주민번호가 브라우저를 벗어나기 전 자동 제거
▸ 온디바이스 AI 전처리 — Chrome Gemini Nano 사용 가능 시 (Chrome 131+)
▸ 사이드 패널 UI — 프레임워크 스위처, 변환 히스토리, 설정

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

선택 사항 개발자 통합 (별도 설치 필요)

AI 코딩 에디터와 Codelifter를 연결하고 싶은 사용자를 위한 선택형 동반 도구입니다. 확장 자체에 포함되지 않으며 npm/GitHub 에서 별도 설치해야 합니다.

▸ Codelifter CLI — CI / GitHub Actions 용 `npx codelifter extract`
▸ MCP 서버 — Cursor, Windsurf, Zed, VS Code Copilot 용 CLI 호스팅 ws://127.0.0.1:12307
▸ Claude Code Skill — Claude Code 의 `/codelifter` 커맨드
▸ Node.js SDK — `@codelifter/sdk`

모든 동반 도구는 로컬 전용 페어링 토큰(crypto.timingSafeEqual, 3-strike rate limit) 으로 인증되며 127.0.0.1 전용 바인드입니다.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Pro (곧 출시 — 현재 비활성): 추가적인 추출 품질 기능이 Pro 티어에 예정되어 있습니다. 현재 빌드에서는 어느 기능도 활성화되어 있지 않으며, Pro 출시와 함께 제공될 예정입니다.

요금제
• Free — 월 20회, 지금 이용 가능 (신용카드 불필요)
• Pro — $14/월, 월 70회, 곧 출시

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

제한 사항
Canvas/WebGL 페이지(Figma, Google Maps), 복잡한 D3.js 차트, 드래그앤드롭, cross-origin iframe, 런타임 JS 애니메이션(GSAP, Framer Motion)은 완전 재현되지 않습니다. 다만 검출된 라이브러리는 생성 코드에 주석으로 표시됩니다.

개인정보
변환을 요청한 요소의 DOM/CSS는 Vercel 프록시를 통해 AI 서버에 전송되어 코드 생성에만 사용되며, 응답 반환 후 서버에 저장되지 않습니다. 확장은 백그라운드 데이터 수집을 하지 않고, 툴바 아이콘을 클릭할 때만 해당 탭에서 동작합니다. 전체 정책: https://codelifter.vercel.app/privacy

요구사항
Chrome 114+. API 키 불필요.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

문의
이메일: [email protected]

Apr 28, 2026

short_description

Click any element on any page — get React + Tailwind CSS code instantly. On-device AI, PII filtering, animations included.

Convert any web page to React/Vue/Svelte + Tailwind in one click. 20 free conversions/month. Pro plan launching soon.

Apr 28, 2026

name

Codelifter

Codelifter — DOM to React + Tailwind CSS

Apr 28, 2026

permissions

activeTab, scripting, storage, tabs, offscreen, sidePanel, contextMenus

activeTab, scripting, storage, tabs, offscreen, sidePanel, notifications

Date	Users	Rating	Reviews	Version
Apr 18, 2026	—	—	—	1.0.1
Apr 23, 2026	—	—	—	1.0.1
Apr 28, 2026	1	5.00	1	1.0.1
May 5, 2026	3	5.00	1	1.0.2
May 11, 2026	2	5.00	1	1.0.2
May 16, 2026	4	5.00	1	1.0.2
May 23, 2026	11	5.00	1	1.0.2
May 29, 2026	12	5.00	1	1.0.3
Jun 5, 2026	7	5.00	1	1.0.4
Jun 12, 2026	10	5.00	1	1.0.5
Now	9	5.00	1	1.0.5

Codelifter — DOM to React + Tailwind CSS

History

Changelog

Permissions & access

Screenshots

About

Technical

Metadata